// Default map position if not overridden by URL parameters
var lon = getUrlParam("lon");
var lat = getUrlParam("lat");
var zoom = getUrlParam("zoom");
if (lon=="") lon=-2.24
if (lat=="") lat=53.48
if (zoom=="") zoom=12
var lonLat;

var map; //complex object of type OpenLayers.Map

var sOac;
var sMan;

var visibleKeySubPanel;
var highlightedKeyTab;

var lastLayerChange;

var oacSupergroupKeys = [
      	["800000", 1, "Blue Collar Communities"], 
      	["808080", 2, "City Living"], 
      	["bbdd88", 3, "Countryside"],
      	["ff0000", 4, "Prospering Suburbs"],
      	["0080ff", 5, "Constrained by Circumstances"],
      	["ffff00", 6, "Typical Traits"],
      	["ff8000", 7, "Multicultural"]
];

var oacGroupKeys = [
      	["800000", "800000", "ff", "1a", "#fff", "Terraced Blue Collar"], 
      	["800000", "802222", "dd", "1b", "#fff", "Younger Blue Collar"], 
      	["800000", "804444", "bb", "1c", "#fff", "Older Blue Collar"], 
      	["808080", "808080", "ff", "2a", "#fff", "Transient Communities"], 
      	["808080", "999999", "bb", "2b", "#fff", "Settled in the City"], 
      	["bbdd88", "bbdd88", "ff", "3a", "#666", "Village Life"],
      	["bbdd88", "ccee99", "bb", "3b", "#666", "Agricultural"],
      	["bbdd88", "ddffaa", "88", "3c", "#666", "Accessible Countryside"],
      	["ff0000", "ff0000", "ff", "4a", "#fff", "Prospering Younger Families"],
      	["ff0000", "ff2222", "dd", "4b", "#fff", "Prospering Older Families"],
      	["ff0000", "ff4444", "bb", "4c", "#fff", "Prospering Semis"],
      	["ff0000", "ff6666", "88", "4d", "#fff", "Thriving Suburbs"],
      	["0080ff", "0080ff", "ff", "5a", "#fff", "Senior Communities"],
      	["0080ff", "2090ff", "dd", "5b", "#fff", "Older Workers"],
      	["0080ff", "40a0ff", "bb", "5c", "#fff", "Public Housing"],
      	["ffff00", "ffff00", "ff", "6a", "#666", "Settled Households"],
      	["ffff00", "ffff22", "dd", "6b", "#666", "Least Divergent"],
      	["ffff00", "ffff44", "bb", "6c", "#666", "Young Families in Terraces"],
      	["ffff00", "ffff66", "88", "6d", "#666", "Aspiring Households"],
      	["ff8000", "ff8000", "ff", "7a", "#fff", "Asian Communities"],
      	["ff8000", "ff9022", "dd", "7b", "#fff", "Afro-Caribbean Communities"]
];

var oacGroups = []
var oacColours2 = []
var oacNames = []
var oacText = []

//Static set-up.
for (var i=0; i<oacGroupKeys.length; i++)
{
	oacGroups[i] = oacGroupKeys[i][3];
	oacColours2[i] = oacGroupKeys[i][1];
	oacNames[i] = oacGroupKeys[i][5];
	oacText[i] = oacGroupKeys[i][4];
}

//Functions from hereon.

function getUrlParam( name )
{
      	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      	var regexS = "[\\?&]"+name+"=([^&#]*)";
      	var regex = new RegExp( regexS );
      	var results = regex.exec( window.location.href );
      	if( results == null )
      	return "";
      	else
      	return results[1];
}

function setOverlays(touchedLayer)
{
	if (touchedLayer != null) 
	{
		lastLayerChange = touchedLayer; 
	}
       	if (visibleKeySubPanel != null)
      	{
      		visibleKeySubPanel.style.display = 'none';	
      		highlightedKeyTab.style.backgroundColor = '#ddd';	
      	}
      	document.getElementById("keyManTabLink").style.color= '#aaa';		
      	document.getElementById("keyOacTabLink").style.color= '#aaa';		

	setMan();
	setOac();

	var bothLayersEnabled = layerMan.getVisibility() && layerOac.getVisibility();
	document.getElementById("bSwap").disabled = !bothLayersEnabled;
	document.getElementById("bSwap").style.color = (bothLayersEnabled ? '#111' : '#aaa');

}

function setMan()
{
	var checked = document.getElementById("cbMan").checked;
	var opacity = sMan.getValue()/100;
 	layerMan.setOpacity(opacity);
	layerMan.setVisibility(checked);

	if (layerMan.getVisibility() == true)
	{
          	document.getElementById("keyManTabLink").style.color= '#111';		
	}
      	for (var i=0; i < 10; i++)
      	{
      		document.getElementById("k" + i).style.opacity = opacity;
      	}
	
	if (lastLayerChange == layerMan && layerMan.getVisibility() == true)
	{
 		visibleKeySubPanel = document.getElementById("keyMan");
 		highlightedKeyTab = document.getElementById("keyManTab");
		visibleKeySubPanel.style.display = 'block';	
         	document.getElementById("keyManTab").style.backgroundColor= '#eee';
	}
}

function setOac(checked)
{
	var checked = document.getElementById("cbOac").checked;
	var opacity = sOac.getValue()/100;
	layerOac.setOpacity(opacity);
	layerOac.setVisibility(checked); 

      	for (var i=0; i < oacGroupKeys.length; i++)
      	{
      		document.getElementById("o" + i).style.opacity = opacity;
      	}
    	for (var i=0; i < oacSupergroupKeys.length; i++)
    	{
    		document.getElementById("s" + i).style.opacity = opacity;
    	}

	if (layerOac.getVisibility() == true)
	{
          	document.getElementById("keyOacTabLink").style.color= '#111';		
	}
 	if (lastLayerChange == layerOac && layerOac.getVisibility() == true)
	{
		document.getElementById("keyOacGroup").style.display='none';
		document.getElementById("keyOacSupergroup").style.display='none';
		document.getElementById("keyOacZoom").style.display='none';
     
         	if (map.getZoom() >= 13)
              	{
              		document.getElementById("keyOacGroup").style.display='block';
                }		
              	else if (map.getZoom() < 13)
              	{
         		document.getElementById("keyOacSupergroup").style.display='block';
              	}
              	else
              	{
          		document.getElementById("keyOacZoom").style.display='block';
              	}

		visibleKeySubPanel = document.getElementById("keyOac");
 		highlightedKeyTab = document.getElementById("keyOacTab");
		visibleKeySubPanel.style.display = 'block';	
         	document.getElementById("keyOacTab").style.backgroundColor= '#eee';
	}

}

function setupKeys()
{
       	var keyHTML = "<table>";
	for (var i=0; i<oacGroupKeys.length; i++)
	{
		keyHTML += "<tr><td id='o" + i + "' style='width: 20px; background-color: #" + oacGroupKeys[i][1] + "; color: " + oacGroupKeys[i][4] 
				+ "; text-align: center;'>" + oacGroupKeys[i][3] + "</td><td>" + oacGroupKeys[i][5] + "</td></tr>";
	}
	keyHTML += "</table>";
	document.getElementById("keyOacGroup").innerHTML = keyHTML + "<br /><a href='http://www.publicprofiler.org/publicprofiles/feedback.php?id=geodem&r=n&postcode=NA' target='_new'>Classification descriptions</a>";

      	var keyHTML = "<table>";
      	for (var i=0; i<oacSupergroupKeys.length; i++)
      	{
      		keyHTML += "<tr><td id='s" + i + "' style='width: 20px; background-color: #" + oacSupergroupKeys[i][0] + ";'>&nbsp;</td><td>" + oacSupergroupKeys[i][2] + "</td></tr>";
      	}
      	keyHTML += "</table>";
      	document.getElementById("keyOacSupergroup").innerHTML = keyHTML + "<br /><a href='http://www.publicprofiler.org/publicprofiles/feedback.php?id=geodem&r=n&postcode=NA' target='_new'>Classification descriptions</a>";
}

function show(layerName, tabName, panelName)
{
	if (layerName.getVisibility() == true)
	{
		setOverlays(layerName);

         	if (visibleKeySubPanel != null)
        	{
        		visibleKeySubPanel.style.display = 'none';	
			highlightedKeyTab.style.backgroundColor = '#ddd'; 
       		}
		visibleKeySubPanel = document.getElementById(panelName)	        
 		highlightedKeyTab = document.getElementById(tabName);
		visibleKeySubPanel.style.display = 'block';
		highlightedKeyTab.style.backgroundColor = '#eee';
	}
}

function swapOverlayOrder()
{
	var layerManIndex = layerMan.getZIndex();
	var layerOacIndex = layerOac.getZIndex();
	layerMan.setZIndex(layerOacIndex);
	layerOac.setZIndex(layerManIndex);
}

function setBaseLayer(layer)
{
	var opacity = sBase.getValue()/100;
 	layer.setOpacity(opacity);
	map.setBaseLayer(layer);
}


//Initialise the 'map' object
function init() 
{

	var proj_EPSG_900913 = new OpenLayers.Projection("EPSG:900913");
	var proj_EPSG_4326 = new OpenLayers.Projection("EPSG:4326");
	var WORLD_BOUNDS = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
	var WORLD_RESOLUTION = 156543.0399;

        //new OpenLayers.Control.MousePosition({displayProjection:proj_EPSG_900913}),
	map = new OpenLayers.Map ("map", 
	{
    	    controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.Attribution(),
		new OpenLayers.Control.MouseDefaults(),
		new OpenLayers.Control.KeyboardDefaults()],
    	    numZoomLevels:16,
	    maxExtent: WORLD_BOUNDS,
            maxResolution: WORLD_RESOLUTION,
            units: 'm',
            projection: proj_EPSG_900913,
            displayProjection: proj_EPSG_4326
    	} );
    
        layerMapnik = new OpenLayers.Layer.OSM.Mapnik();
        layerOac = new OpenLayers.Layer.OSM.Oac();
	layerMan = new OpenLayers.Layer.OSM.Manchester();
	gphy = new OpenLayers.Layer.Google("", { type: G_PHYSICAL_MAP, sphericalMercator: true});
        gmap = new OpenLayers.Layer.Google("", { sphericalMercator: true});
        gsat = new OpenLayers.Layer.Google("", { type: G_SATELLITE_MAP, sphericalMercator: true});
	layerNPE = new OpenLayers.Layer.NPE();       	

        map.addLayers([
	gmap, 
	layerMapnik,
	gphy, gsat,
        layerNPE,
    	layerOac,
    	layerMan
	]);

        lonLat = new OpenLayers.LonLat(lon, lat).transform(proj_EPSG_4326, proj_EPSG_900913);    
        //map.setCenter(new OpenLayers.LonLat(-2.24, 53.48), 12);
 	map.setCenter (lonLat, zoom);
       	map.events.register ("click", map, function(e) 
    	{ 
    		var target
    
    	    	if (!e) var e = window.event
    	    	if (!e.ctrlKey) return;
    	    	if (e.target) target=e.target
    	    	else target=e.srcElement
    
    	    	var zoom=map.getZoom()
       	});
    	/*
    	map.events.register ("mouseover", map, function(e) 
    	{
    	    	var target  
    
    	    	if (!e) var e = window.event
    	    	if (e.target) target=e.target
    	    	else target=e.srcElement
    
    	    	//if (target.className!="olTileImage") return;
                var targetText = "Tile: " + target.src;
                target.title = targetText;            
    	});
	*/
	map.events.register("zoomend", map, function(e)
	{
		setOverlays();
	});
			

        sBase = new Slider(document.getElementById("sliderBase"),
                           document.getElementById("sliderInputBase"));

        sOac = new Slider(document.getElementById("sliderOac"),
                           document.getElementById("sliderInputOac"));
        
        sMan = new Slider(document.getElementById("sliderMan"),
                           document.getElementById("sliderInputMan"));

	document.getElementById("rbGmap").checked = true;
	document.getElementById("cbMan").checked = true;
	layerOac.setVisibility(false);	
	sBase.setValue(100);
        sOac.setValue(50);

	sBase.onchange = function()
	{
		map.baseLayer.setOpacity(sBase.getValue()/100);
	}

        sOac.onchange = function()
        {
  		document.getElementById("cbOac").checked = true;
      		setOverlays(layerOac);
        }
        
        sMan.onchange = function()
        {
  		document.getElementById("cbMan").checked = true;
       		setOverlays(layerMan);
        }
	setupKeys();
	sMan.setValue(60); 
	document.getElementById("bSwap").disabled = true;
	document.getElementById("bSwap").style.color = '#aaa';
 }