//Declaring some variables we will be using
var gmap_search_state = false;
var map;
var markerArray = new Array();
var circleArray = new Array();
var xmlhttp;
var targetDiv = "infotop";
var selected = false;
var overNode;
var markerSelected;
var polygons_on_map_array = new Array();


//This function is called from index.php
function initialize_map() {
	suggestMarkers("");
	//We will only do this function if the browser is compatible
	if (GBrowserIsCompatible()) {
	//Adding the google map into the div called #mapcanvas
	map = new GMap2(document.getElementById("mapcanvas"), {googleBarOptions : {style : "new",}});
	//Center the map on Leiden
	map.setCenter(new GLatLng(52.162687, 4.493294), 11); // Vars should go to config
	map.setUIToDefault();

 

	//Go through the array 'markers' (Declared in index.php) and add a marker for each marker stored in the array using our addMarker function
	for (var i=0; i<markers.length; i++) {
		var current = markers[i];
		var gMarker  = addMarker(current, i);
	}
	
	GEvent.addListener(map, "click", function() {
		if(!overNode == true)
			deSelect();
	});
	
	/*
	 * Hier zo circles toevoegen.
	 
	for(var  i=0; i<circleArray.length; i++) {
		map.addOverlay(circleArray[i]);
	}
	*/
	
	var markerClusterer = new MarkerClusterer(map, markerArray);
  }
} 

//This function will contain the displaying and not displaying of nodes on the map
function toggleMyKml() {

}

//This function adds a marker with an object from our 'marker'array defined in index.php
function addMarker(current, i) {
	var id = current.id;
	var latitude = Number(current.latitude[0]);
	var longitude = Number(current.longitude[0]);
	//var circle = drawCircle(latitude, longitude, 2.0, "#6C3", 1, 0.75, "#0F0",.2); 
	var marker  = new GMarker(new GLatLng(current.latitude[0], current.longitude[0]), {title: current.name[0], icon: greenIcon});
	
	//Added mouseover listener that calls on our mouseOver function when the mouse moves over a marker on the map
	GEvent.addListener(marker, 'mouseover', function() {
	mouseOverNode(current.id, current.name[0],latitude, longitude);
	});
	GEvent.addListener(marker, 'click', function() {
	mouseClickNode(current.id, current.name[0], marker);
	});
	GEvent.addListener(marker, 'mouseout', function() {
	mouseOutNode(current.id, current.name[0]);
	});
	
	markerArray.push(marker);
	//circleArray.push(circle);
	return marker;
}

//Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
function mouseClickNode(id, name, marker)
{	
	if(selected == true)
		deSelect();
	
	if(markerSelected == marker)
	{
		deSelect();
		markerSelected = "";
	}
	else
	{
		selected = true;
		
		markerSelected = marker;
		marker.setImage("../img/sleutelGroenSelected.png");//Path should be in config
		loadXMLDoc("inc/node_info.php?type=single&name="+name+""); //Should also be in config

		/*
		*Hieronder verdergaan met dekking
		*/
		
	}
}
//Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
function mouseOverNode(id, name, latitude, longitude)
{
	overNode = true;
	if(!selected == true)
	{
		
		drawCircle(latitude, longitude, 2.0, "#6C3", 1, 0.75, "#0F0",.2, 200);
		polygons_on_map_array.push(polygon);
		map.addOverlay(polygon);
		
		loadXMLDoc("inc/node_info.php?type=single&name="+name+"");//Path should be in config

		/*
		*Hieronder verdergaan met dekking
		*/
			
	}	
}

function mouseOutNode(id, name)
{
	overNode = false;
	map.removeOverlay(polygon);

}

//Our mouseover function for Cluster nodes. 'markers' is an array containing all markers within the cluster
function mouseOverCluster(markers)
{
	if(!selected == true)
	{
		//Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
		var markerTitles = new Array;
		
		
		for(var i=0; i<markers.length; i++) {
			
			markerTitles.push(markers[i].marker.getTitle());
		}


		
		for (var i=0; i<markerLatLngs.length; i++)
		{
			latLng = String(markerLatLngs[i]);	
						
			pos = latLng.indexOf(',');
			pos2 = latLng.length-1;
			
			var latitude = Number(latLng.substring(1, pos) );
			var longitude = Number(latLng.substring(2 + pos, pos2) );
			
			
			drawCircle( latitude, longitude,2.0, "#6C3", 1, 0.75, "#0F0",.2);
			


			map.addOverlay(polygon);
			
		}
		
		var markerTitleSerialized;

		//start
		var a_php = "";
		var total = 0;

		for (var i=0; i<markerTitles.length; i++)
		{
			++ total;
			a_php = a_php + "s:" +
					String(i).length + ":\"" + String(i) + "\";s:" +
					String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
		}
		a_php = "a:" + total + ":{" + a_php + "}";
		//end

		loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"")
		/*
		*Hieronder verdergaan met dekking
		*/
	}
}

//Our click function for Cluster nodes. 'markers' is an array containing all markers within the cluster
function clickCluster(markers)
{	
	if(selected == true)
		deselect();
	
	//Let the rest of the program know that something is selected
	select();

	//Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
	var markerTitles = new Array;
	var markerLatLngs = new Array;
	
	for(var i=0; i<markers.length; i++) {
		markerTitles.push(markers[i].marker.getTitle());		
		markerLatLngs.push(markers[i].marker.getLatLng() );
	}


	
	for (var i=0; i<markerLatLngs.length; i++)
	{
		latLng = String(markerLatLngs[i]);	
					
		pos = latLng.indexOf(',');
		pos2 = latLng.length-1;
		
		var latitude = Number(latLng.substring(1, pos) );
		var longitude = Number(latLng.substring(2 + pos, pos2) );
		
		
		drawCircle( latitude, longitude,2.0, "#6C3", 1, 0.75, "#0F0",.2);
		


		map.addOverlay(polygon);
		
	}
	
	var markerTitleSerialized;
	
	//start
	var a_php = "";
    var total = 0;
	
    for (var i=0; i<markerTitles.length; i++)
    {
        ++ total;
        a_php = a_php + "s:" +
                String(i).length + ":\"" + String(i) + "\";s:" +
                String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
    }
    a_php = "a:" + total + ":{" + a_php + "}";
	//end
	
	loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"&sel=selected")
}

function mouseOutCluster(markers)
{
	deSelect();
	map.removeOverlay(polygon);
	map.removeOverlay(polygon);
	
	//TODO DELETE ALL CIRCLES 
	
	/*
	for (var i=0; i<markers.length; i++) {
	
		map.removeOverlay(polygon[i]);
		
	}
	*/
	

}

function select()
{
	selected = true;
}

function deSelect()
{
	selected = false;
	loadXMLDoc("inc/node_info.php");
	markerSelected.setImage("../img/sleutelGroen.png");
	
	for(var i=0; i<polygons_on_map_array.length; i++) 
	{
		var currentpolygon = polygons_on_map_array[i];
		map.removeOverlay(polygon);
	}
	
}

function removeOtherSelect()
{
	for(var i=0; i<markerArray.length; i++) 
	{
		currentmarker = markerArray[i];
		currentmarker.setImage("../sleutelGroen.png");
	}
	return true;
}

//Code from w3schools. http://www.w3schools.com/dom/dom_http.asp
function loadXMLDoc(url, targetDiv)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for Firefox, Opera, IE7, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change();
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = "OK"
    document.getElementById(targetDiv).innerHTML=xmlhttp.responseText;
    }
  else
    {
    alert("Problem retrieving data:" + xmlhttp.statusText);
    }
  }
}

function loadSuggest(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for Firefox, Opera, IE7, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_ChangeSuggest;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_ChangeSuggest()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = "OK"
    document.getElementById("searchlist").innerHTML=xmlhttp.responseText;
    }
  else
    {
    alert("Problem retrieving data:" + xmlhttp.statusText);
    }
  }
}

function toggleGoogleSearchMap()
{
	if(gmap_search_state)
	{
		gmap_search_state = false;
	}
	else
	{
		gmap_search_state = true;
	}
	
	if(gmap_search_state)
	{
		map.enableGoogleBar();
	}
	
	if(!gmap_search_state)
	{
		map.disableGoogleBar();
	}
}

function suggestMarkers(value)
{
	loadSuggest("inc/suggestions.php?value="+value);
}