var map,map2,map3,base,SAMap,mainmap,labels, worldmap, worldmaplabels,metacarta,osm,lat,lon,zoom,lat2,lon2,zoom2,lat3,lon3,zoom3,vlayer,mlayer,scale,poi,poifilter,mouseLoc,popup,onhover,poi900913;
    function mapinit(){   
        OpenLayers.Util.onImageLoadErrorColor = "transparent";
        eventsLog = OpenLayers.Util.getElement("eventsLogID");
        lon = 18.48;
        lat = -34.0;
        zoom = 6;
        
		var options = { 
		maxResolution: "auto",
		'projection':'EPSG:4148',  
        maxExtent: new OpenLayers.Bounds(15,-35,33,-21),
        minResolution: 0.000003
        };
		map = new OpenLayers.Map( $('map') , options);
		
		OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
		
        var groupid = document.getElementById("ctl00_mncontent_cbxCat"); 
       	groupid = groupid.options[groupid.selectedIndex].value;
       	       	
		//Set the filter options
		if(groupid !=0){
		    poifilter = "Where groupid="+groupid;
		}
		else{
		    poifilter = "Where groupid=groupid";
		}

		SAMap = new OpenLayers.Layer.MapServer( "Base Map", "http://www.mapexchange.co.za/wms/SAMap.asp",{layers:  'all'},{'buffer': 0,'isBaseLayer': true});
		poi = new OpenLayers.Layer.MapServer.Untiled( "POI", "http://www.mapexchange.co.za/wms/POI.asp",{layers:  'POI', where: poifilter, transparent: 'true'},{'buffer': 0,'isBaseLayer': false});
       
        mainmap = new OpenLayers.Layer.WMS( "Street Map", "http://www.mapexchange.co.za/wms/streetmap.asp",
		{layers:  'StreetMap',transparent: 'false'},
		{'buffer': 0,'isBaseLayer': false,'gutter': 10,'displayInLayerSwitcher':false,'attribution': 'Provided by <a href="http://www.mapexchange.co.za/">MAPexchange</a>',transitionEffect:'resize'}
		);
		
	    labels = new OpenLayers.Layer.MapServer.Untiled( "Labels", "http://www.mapexchange.co.za/wms/PolyLabels.asp",
		{layers:  'all'},
		{'buffer': 0,'isBaseLayer': false,'gutter': 10,'displayInLayerSwitcher':false}
		);
		
        SAMap.setVisibility(false);
        registerEvents(SAMap);
        poi.setVisibility(true); 
        registerEvents(mainmap); 
        registerEvents(labels);   
        registerEvents(poi); 
		
		var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
            layer_style.fillOpacity = 0.2;
            layer_style.graphicOpacity = 1;
			layer_style.strokeWidth = 2;
			layer_style.strokeColor="#FF0000"; 
			layer_style.fillColor="#FF8C81"; 
			      
		map.addLayers([SAMap,mainmap,labels,poi]); //watermark
		    
		map.addControl(new OpenLayers.Control.MousePosition());
		map.addControl(new OpenLayers.Control.Scale());
		map.addControl(new OpenLayers.Control.PanZoomBar());
		map.addControl(new OpenLayers.Control.PanZoom());
		map.addControl(new OpenLayers.Control.Attribution());
		
        // ###TOOLBARS
        var  zb = new OpenLayers.Control.ZoomBox({title: "Zoom Box: Selecting it you can zoom on an area by clicking and draging"});
        var panel = new OpenLayers.Control.Panel({div:$('panel'),defaultControl: zb,'displayClass': 'olControlPanel'}); 

        panel.addControls([ new OpenLayers.Control.ZoomToMaxExtent(),new OpenLayers.Control.Navigation(), zb ]); 
        //add panel to map 
        map.addControl(panel);
               
        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
       
        map.events.register('click', map, function (e) {
            getPOI(e);
        });
    }
    
function getPOI(e){
    mouseLoc = map.getLonLatFromPixel(e.xy);
   //OpenLayers.Util.getElement('nodeList').innerHTML = "Loading... please wait...";
    var url =  poi.getFullRequestString({
                    REQUEST: "GetFeatureInfo",
                    VERSION: "1.0.0",
                    SRS: poi.map.getProjection(),
                    FORMAT: "png",
                    STYLES: "",
                    EXCEPTIONS: "application/vnd.ogc.se_xml",
                    BBOX: poi.map.getExtent().toBBOX(),
                    X: e.xy.x,
                    Y: e.xy.y,
                    INFO_FORMAT: 'text/html',
                    QUERY_LAYERS: "POI",
                    WIDTH: poi.map.size.w,
                    HEIGHT: poi.map.size.h});
    //alert(url);
    OpenLayers.loadURL(url, '', this, setHTML);
    //OpenLayers.Event.stop(e);
}

function setHTML(response) { 
    if (response.responseText.indexOf('no results') == -1 && response.statusText != "Internal Server Error") {
        //If there are any popups, then close them
        if (popup != null) {
            popup.destroy();
            popup = null;
        }
		
        if(response.responseText.length > 300){
			popup = new OpenLayers.Popup.FramedCloud("POI",
                                            mouseLoc,
                                            new OpenLayers.Size(250,250),
                                            response.responseText,
                                            null,
                                            true);
			popup.maxSize=new OpenLayers.Size(300,250);
			popup.minSize=new OpenLayers.Size(250,230);
			
        }
        else{
			popup = new OpenLayers.Popup.FramedCloud("POI",
											mouseLoc,
                                            new OpenLayers.Size(250,180),
                                            response.responseText,
                                            null,
                                            true);
			popup.maxSize=new OpenLayers.Size(300,200);
			popup.minSize=new OpenLayers.Size(250,180);
        }
        popup.setBackgroundColor("#FFFFFF");
        popup.setOpacity(0.8);
        map.addPopup(popup);
    }
}
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
function getPOI2(e){
    mouseLoc = map3.getLonLatFromPixel(e.xy);
   //OpenLayers.Util.getElement('nodeList').innerHTML = "Loading... please wait...";
    var url =  poi900913.getFullRequestString({
                    REQUEST: "GetFeatureInfo",
                    VERSION: "1.0.0",
                    SRS: poi900913.map.getProjection(),
                    FORMAT: "png",
                    STYLES: "",
                    EXCEPTIONS: "application/vnd.ogc.se_xml",
                    BBOX: poi900913.map.getExtent().toBBOX(),
                    X: e.xy.x,
                    Y: e.xy.y,
                    INFO_FORMAT: 'text/html',
                    QUERY_LAYERS: "POI",
                    WIDTH: poi900913.map.size.w,
                    HEIGHT: poi900913.map.size.h});
    //alert(url);
    OpenLayers.loadURL(url, '', this, setHTML2);
    //OpenLayers.Event.stop(e);
}

function setHTML2(response) { 
    if (response.responseText.indexOf('no results') == -1 && response.statusText != "Internal Server Error") {
        //If there are any popups, then close them
        if (popup != null) {
            popup.destroy();
            popup = null;
        }
		
         if(response.responseText.length > 300){
			popup = new OpenLayers.Popup.FramedCloud("POI",
                                            mouseLoc,
                                            new OpenLayers.Size(250,250),
                                            response.responseText,
                                            null,
                                            true);
			popup.maxSize=new OpenLayers.Size(300,250);
			popup.minSize=new OpenLayers.Size(250,230);
			
        }
        else{
			popup = new OpenLayers.Popup.FramedCloud("POI",
											mouseLoc,
                                            new OpenLayers.Size(250,200),
                                            response.responseText,
                                            null,
                                            true);
			popup.maxSize=new OpenLayers.Size(300,200);
			popup.minSize=new OpenLayers.Size(250,180);
        }
        popup.setBackgroundColor("#FFFFFF");
        popup.setOpacity(0.8);
        map3.addPopup(popup);
    }
}



//################## MAP REFRESH FUNCTION ####################
function RefreshMap(){

var mapobj;
	
    //If there are any popups, then close them
    if (popup != null) {
        popup.destroy();
        popup = null;
    }
    //Set the filter options
    var groupid = document.getElementById("ctl00_mncontent_cbxCat"); 
   	groupid = groupid.options[groupid.selectedIndex].value;	
   	
	//Set the filter options
	if(groupid !=0){
	    poifilter = "Where groupid="+groupid;
	}
	else{
		poifilter = "Where groupid=groupid";
	}
       
    map.removeLayer(poi);
	poi = new OpenLayers.Layer.MapServer.Untiled( "POI", "http://www.mapexchange.co.za/wms/POI.asp",{layers:  'POI', where: poifilter, transparent: 'true'},{'buffer': 0,'isBaseLayer': false});
    map.addLayer(poi);
	
	if (document.getElementById("osminitflag").value=='1'){
		map3.removeLayer(poi900913);
		poi900913 = new OpenLayers.Layer.MapServer.Untiled( "POI", "http://www.mapexchange.co.za/wms/POI900913.asp",{layers:  'POI', where: poifilter, transparent: 'true'},{'buffer': 0,'isBaseLayer': false});
		map3.addLayer(poi900913);
	}
    
    if (document.getElementById("txtLat").value != 0 && document.getElementById("txtLong").value != 0){
        map.setCenter(new OpenLayers.LonLat(document.getElementById("txtLong").value, document.getElementById("txtLat").value), document.getElementById("txtZoom").value); 
    }
}

//################## MAP POI FUNCTIONS ####################
function GetPOI(){
    // Call the Web service method to get 
    // the default color.
    var groupid = document.getElementById("ctl00_mncontent_cbxCat"); 
   	groupid = groupid.options[groupid.selectedIndex].value;
    var searchtext = document.getElementById("ctl00_mncontent_txtSearch"); 
   	searchtext = searchtext.value;
    WebService.GetPOI(groupid,searchtext,SucceededCallback);  
}

function SucceededCallback(result){
    // Read the values returned by the
    // Web service.
    // Display the result.
    var displayResult = document.getElementById("POIResult");
    displayResult.innerHTML = "";
    var i = 0;
    var temp,str;
	
    while (i < result.length){
        result[i] = result[i].replace("'", "");
        temp = result[i].split("#");
        //str = "<a href='#' onclick='LoadPOI("+temp[2]+","+temp[3]+",\""+temp[0]+"<br>"+temp[1]+"\");' cursor='pointer'>"+temp[0]+"</a><br>";
		str = '<a href="#" onclick="LoadPOI('+temp[2]+','+temp[3]+',\''+temp[0]+'<br>'+temp[1]+'\');" cursor="pointer">'+temp[0]+'</a><br>';
        displayResult.innerHTML += str;
        i+=1;
    }
    //if there are no results then indicate that
    if(i==0){
        str = "<span>There are no results to display</span>";
        displayResult.innerHTML += str;
    }
}

function LoadPOI(x, y, content){
    //If there are any popups, then close them
    if (popup != null) {
        popup.destroy();
        popup = null;
    }
    //zoom to point
    if (x != 0 && y != 0){
        map.setCenter(new OpenLayers.LonLat(x, y), 8); 
    }
    //create popup
	popup = new OpenLayers.Popup.FramedCloud("POI",
											mouseLoc,
                                            new OpenLayers.Size(250,200),
                                            response.responseText,
                                            null,
                                            true);
			
	popup.maxSize=new OpenLayers.Size(300,250);
	popup.minSize=new OpenLayers.Size(250,180);
    popup.setBackgroundColor("#FFFFFF");
    popup.setOpacity(0.8);
    
    var markers = new OpenLayers.Layer.Markers( "Marker" );
	
	if (document.getElementById("osminitflag").value=='1'){
		map3.addLayer(markers);
	}
    
	map.addLayer(markers);

    var size = new OpenLayers.Size(32,32);
    var offset = new OpenLayers.Pixel(-(size.w/2-5), -size.h);
    var icon = new OpenLayers.Icon('Images/flag_yellow.png',size,offset);
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(x, y),icon)); 
    
	map.addPopup(popup);
	
		if (document.getElementById("osminitflag").value=='1'){
			map3.addPopup(popup);
	}
}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

//################## REGISTER EVENTS FUNCTION ####################
function registerEvents(layer) {
        layer.logEvent = function(event) {
        eventsLog.innerHTML = this.name + ": " + event;    
        document.getElementById("loadingdiv").style.display = "block"; 
    }
            
    layer.events.register("loadstart", layer, function() {
        this.logEvent("Loading..");
    });
     
    layer.events.register("tileloaded", layer, function() {
        this.logEvent("Loading... " + this.numLoadingTiles + " left.");
    });
            
    layer.events.register("loadend", layer, function() {
        this.logEvent("Loaded");
        document.getElementById("loadingdiv").style.display = "none" 
        eventsLog.innerHTML="";
    });
 }

/*########## HIGHQUALITYMAPCHECKBOX ##########*/

function HQMap(){

    if (document.getElementById("chkHQ").checked==true){

		map.removeLayer(mainmap);
			mainmap = new OpenLayers.Layer.WMS( "Street Map", "http://www.mapexchange.co.za/wms/streetmapHQ.asp",
			{layers:  'StreetMap',transparent: 'true'},
			{'buffer': 0,'isBaseLayer': false,'gutter': 10,'displayInLayerSwitcher':false,'attribution': 'Provided by <a href="http://www.mapexchange.co.za/">MAPexchange</a>',transitionEffect:'resize'}
			);
		map.addLayer(mainmap);
	      
		map.removeLayer(labels);
			labels = new OpenLayers.Layer.MapServer.Untiled( "Labels", "http://www.mapexchange.co.za/wms/PolyLabelsHQ.asp",
			{layers:  'all'},
			{'buffer': 0,'isBaseLayer': false,'gutter': 10,'displayInLayerSwitcher':false}
			);
		map.addLayer(labels);
	}
	else
	{
		map.removeLayer(mainmap);
			mainmap = new OpenLayers.Layer.WMS( "Street Map", "http://www.mapexchange.co.za/wms/streetmap.asp",
			{layers:  'StreetMap',transparent: 'false'},
			{'buffer': 0,'isBaseLayer': false,'gutter': 10,'displayInLayerSwitcher':false,'attribution': 'Provided by <a href="http://www.mapexchange.co.za/">MAPexchange</a>',transitionEffect:'resize'}
			);
		map.addLayer(mainmap);
	      
		map.removeLayer(labels);
			labels = new OpenLayers.Layer.MapServer.Untiled( "Labels", "http://www.mapexchange.co.za/wms/PolyLabels.asp",
			{layers:  'all'},
			{'buffer': 0,'isBaseLayer': false,'gutter': 10,'displayInLayerSwitcher':false}
			);
		map.addLayer(labels);
	}
	//Set the filter options
	var groupid = document.getElementById("ctl00_mncontent_cbxCat"); 
	groupid = groupid.options[groupid.selectedIndex].value;
	//Set the filter options
	if(groupid !=0){
		poifilter = "Where groupid="+groupid;
	}
	else{
		poifilter = "Where groupid=groupid";
	}
    map.removeLayer(poi);
	poi = new OpenLayers.Layer.MapServer.Untiled( "POI", "http://www.mapexchange.co.za/wms/POI.asp",{layers:  'POI', where: poifilter, transparent: 'true'},{'buffer': 0,'isBaseLayer': false});
    map.addLayer(poi);
}

/*##################*/

/*########## WORLDMAP ##########*/

function worldmapinit(){
	OpenLayers.Util.onImageLoadErrorColor = "transparent";
        eventsLog = OpenLayers.Util.getElement("eventsLogID");
		lon2 = 0;
        lat2 = 0;
        zoom2 = 0;

		var options2 = { maxResolution: "auto",
		'projection':'EPSG:4326', 
        maxExtent: new OpenLayers.Bounds(-180,-90,180,90),
        minResolution: 0.000003
        };

		map2 = new OpenLayers.Map( $('Worldmap') , options2);
		
		OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
		
		metacarta=new OpenLayers.Layer.WMS("MetaCarta WMS", 'http://labs.metacarta.com/cgi-bin/mapserv?map=/mapdata/geosearch/map/geosearch.map&',
		{layers:'Land'},
		{'buffer': 0,'isBaseLayer': true,'gutter': 10,'displayInLayerSwitcher':false,'attribution': 'Data provided by <a href="http://labs.metacarta.com//">MetaCarta Labs</a>',transitionEffect:'resize'}
		);
		
		worldmap = new OpenLayers.Layer.WMS( "World Map", "http://www.mapexchange.co.za/wms/WorldMap.asp",
		{layers:  'WorldMap',transparent: 'false'},
		{'buffer': 0,'isBaseLayer': true,'gutter': 10,'displayInLayerSwitcher':false,'attribution': 'Provided by <a href="http://www.mapexchange.co.za/">MAPexchange</a>',transitionEffect:'resize'}
		);
		
	    worldmaplabels = new OpenLayers.Layer.MapServer.Untiled( "World Labels", "http://www.mapexchange.co.za/wms/WorldMapPolyLabels.asp",
		{layers:  'all'},
		{'buffer': 0,'isBaseLayer': false,'gutter': 10,'displayInLayerSwitcher':false}
		);
		
		
		map2.addLayers([metacarta,worldmap,worldmaplabels]); 
		map2.setBaseLayer(worldmap);
		
		map2.addControl(new OpenLayers.Control.MousePosition());
		map2.addControl(new OpenLayers.Control.Scale());
		map2.addControl(new OpenLayers.Control.PanZoomBar());
		map2.addControl(new OpenLayers.Control.PanZoom());
		map2.addControl(new OpenLayers.Control.Attribution());
		
        // ###TOOLBARS
        //debugger;
        var  zb2 = new OpenLayers.Control.ZoomBox({title: "Zoom Box: Selecting it you can zoom on an area by clicking and draging"});
        var panel2 = new OpenLayers.Control.Panel({div:$('Worldpanel'),defaultControl: zb2,'displayClass': 'olControlPanel'}); 

        panel2.addControls([ new OpenLayers.Control.ZoomToMaxExtent(),new OpenLayers.Control.Navigation(), zb2 ]); 
        //add panel to map 
        map2.addControl(panel2);
               
        map2.setCenter(new OpenLayers.LonLat(lon2, lat2), zoom2);
		
		//hack for new popups
			OpenLayers.Feature.prototype.popupClass = OpenLayers.Popup.FramedCloud;
			OpenLayers.Layer.Text.prototype.markerClick = function(evt) {
            var sameMarkerClicked = (this == this.layer.selectedFeature);
            if (this.popup) {
                this.popup.toggle(); 
            } else {
                this.layer.map.addPopup(this.createPopup(true));
            }
            this.layer.selectedFeature = (!sameMarkerClicked) ? this :
null;
            OpenLayers.Event.stop(evt);        
        }
		//end hack for new popup
		
			//var papers = new OpenLayers.Layer.Text( "Papers", { location:"papers.txt"} );
            //map2.addLayer(papers);
}

/* #####################################*/
function toggleworldmap(){
	if (document.getElementById("MWM").checked==true){
		map2.setBaseLayer(metacarta);
		//SAMap.setVisibility(false);
		map2.removeLayer(worldmaplabels);
	}
	else{
		map2.setBaseLayer(worldmap);
		map2.addLayer(worldmaplabels);
	}
}
/*########## OSM MAP ##########*/

function osmmapinit(){

		var options3 = { 
		maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
		maxResolution: 'auto',
		projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        //minResolution: 0.000003,
		units: 'm'
        };
		map3 = new OpenLayers.Map( $('OSMmap') , options3);
		
		var groupid = document.getElementById("ctl00_mncontent_cbxCat"); 
       	groupid = groupid.options[groupid.selectedIndex].value;
       	       	
		//Set the filter options
		if(groupid !=0){
		    poifilter = "Where groupid="+groupid;
		}
		else{
		    poifilter = "Where groupid=groupid";
		}
	
            var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
			
					poi900913 = new OpenLayers.Layer.MapServer.Untiled( "POI", "http://www.mapexchange.co.za/wms/POI900913.asp",
					{layers:  'POI', where: poifilter, transparent: 'true'},
					{projection:"EPSG:900913"},
					{'buffer': 0,'isBaseLayer': false});
		
            map3.addLayers([layerMapnik,poi900913]);
			map3.addControl(new OpenLayers.Control.MousePosition());
			map3.addControl(new OpenLayers.Control.Scale());
			map3.addControl(new OpenLayers.Control.MousePosition());
			map3.addControl(new OpenLayers.Control.Scale());
			map3.addControl(new OpenLayers.Control.PanZoomBar());
			map3.addControl(new OpenLayers.Control.PanZoom());
			map3.addControl(new OpenLayers.Control.Attribution());
			
			var  zb3 = new OpenLayers.Control.ZoomBox({title: "Zoom Box: Selecting it you can zoom on an area by clicking and draging"});
			var panel3 = new OpenLayers.Control.Panel({div:$('OSMpanel'),defaultControl: zb3,'displayClass': 'olControlPanel'}); 

			panel3.addControls([ new OpenLayers.Control.ZoomToMaxExtent(),new OpenLayers.Control.Navigation(), zb3 ]); 
			//add panel to map 
			map3.addControl(panel3);
			
		map3.events.register('click', map3, function (e) {
            getPOI2(e);
        });
			
            map3.setCenter(new OpenLayers.LonLat(18.63,-34).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), 10);
			//map3.setCenter(new OpenLayers.LonLat(18.63,-34), 10);
     }

/* #####################################*/
function showworld(){
	if (document.getElementById("Worldmap").style.display=='none'){
		document.getElementById("Worldmap").style.display='block';
		document.getElementById("Worldpanel").style.display='block';
		document.getElementById("map").style.display='none';
		document.getElementById("panel").style.display='none';
		document.getElementById("OSMmap").style.display='none';
		document.getElementById("OSMpanel").style.display='none';
		
		if (document.getElementById("worldinitflag").value=="0"){
			worldmapinit();
			document.getElementById("worldinitflag").value="1";
		}
		
	}
}

function hideworld(){
	if (document.getElementById("Worldmap").style.display=='block'){
		document.getElementById("Worldmap").style.display='none';
		document.getElementById("Worldpanel").style.display='none';
		
		    if (document.getElementById("OS").checked==true){
				document.getElementById("map").style.display='none';
				document.getElementById("panel").style.display='none';
				document.getElementById("OSMmap").style.display='block';
				document.getElementById("OSMpanel").style.display='block';
				document.getElementById("disclaimer").style.display='none';
			}
			else{
				document.getElementById("map").style.display='block';
				document.getElementById("panel").style.display='block';
				document.getElementById("OSMmap").style.display='none';
				document.getElementById("OSMpanel").style.display='none';
				document.getElementById("disclaimer").style.display='block';
			}
	}
}
/* #####################################*/
function showosm(){
	if (document.getElementById("OSMmap").style.display=='none'){
		document.getElementById("OSMmap").style.display='block'
		document.getElementById("OSMpanel").style.display='block'
		document.getElementById("map").style.display='none'
		document.getElementById("panel").style.display='none'
		document.getElementById("HQdisclaimer").style.display='none'
		document.getElementById("mapsearch").style.display='none'
		document.getElementById("chkHQ").disabled=true;
		document.getElementById("disclaimer").style.display='none';
		if (document.getElementById("osminitflag").value=="0"){
			osmmapinit();
			document.getElementById("osminitflag").value="1";
		}
	}
}

function hideosm(){
	if (document.getElementById("OSMmap").style.display=='block'){
		document.getElementById("OSMmap").style.display='none'
		document.getElementById("OSMpanel").style.display='none'
		document.getElementById("map").style.display='block'
		document.getElementById("panel").style.display='block'
		document.getElementById("chkHQ").disabled=false;
		document.getElementById("disclaimer").style.display='block';
		document.getElementById("HQdisclaimer").style.display='block'
		document.getElementById("mapsearch").style.display='block'
	}
}

function ShowDiv(div){
	document.getElementById(div).style.display='block';
}

function HideDiv(div){
document.getElementById(div).style.display='none';
}