//Declaring some variables we will be using
var map;
var toggleState = 1;
var marker_hash = {};
var markerArray = new Array();
var circleArray = new Array();
var xmlhttp;
var targetDiv = "infotop";
var selected = false;
var overNode;
var markerSelected;


//This function is called from index.php
function initialize_map() {
	//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"));
	//Center the map on Leiden
	map.setCenter(new GLatLng(52.162687, 4.493294), 11); 
	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");
		loadXMLDoc("inc/node_info.php?type=single&name="+name+"");

		/*
		*Hieronder verdergaan met dekking
		*/
		
		map.removeOverlay(polygon);
	}
}
//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);
		map.addOverlay(polygon);
		loadXMLDoc("inc/node_info.php?type=single&name="+name+"");

		/*
		*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());
		}

		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;
	for(var i=0; i<markers.length; i++) {
		markerTitles.push(markers[i].marker.getTitle());
	}
	
	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 select()
{
	selected = true;
}

function deSelect()
{
	selected = false;
	loadXMLDoc("inc/node_info.php");
	markerSelected.setImage("../img/sleutelGroen.png");
	
}

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)
{
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);
    }
  }
}