jQuery(document).ready(function($) {
  //Fixes an animation glitch caused by the
  //div's dynamic height.  Need to set the
  //height style so the slide functions work
  //correctly.
  $("div.slideBody").each(function(){
    $(this).css("height", $(this).height() + "px");
    });

  //hook the mouseup events to each header
  $("div.slidePanel").children(
    "div.slideHeader").mouseup(function(){
 
    //find the body whose header was clicked
    var body = $(this).parent().children("div.slideBody");

    //slide the panel
    if(body.is(":hidden")) {
      body.slideDown();
	  load();
	}
    else { 
      body.slideUp();
	  unload();
	}
  });

    /*These arrays store GMarkers, which are then passed into markerCluster*/
	var j = 0;
	var to_array = [];		//array for toronto
    var sc_array = [];    	//array for scarborough
    var et_array = [];  	//array for etobicoke
    var ny_array = [];		//array for north york
    var ey_array = [];		//array for east york
    var yo_array = [];		//array for york
    var ot_array = [];		//array for others (any postal code that is not in database)
    
    /*This function loads the map and displays markers in it using MarkerClusterer. Style the clusterer in the getClusterOptions() function*/
    function load() {
      	var map = new GMap2(document.getElementById("map"));
      	var defaultzoom = 11;
      	map.setCenter(new GLatLng(43.726887, -79.3816),defaultzoom);
     	var mapControl = new GMapTypeControl();
		map.addControl(mapControl);
		map.addControl(new GLargeMapControl());
		controlZoomLevels(map,defaultzoom,20);

      //GDownloadUrl("markers.php", function(data) {
	  //var selectedPost = "markers.xml";
	  var selectedPost = "/bot_db_to_xml.php?selectedPost=" + pid;
	  GDownloadUrl(selectedPost, function(data) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
        
        	/*Fetch Data from XML*/
        	var area = markers[i].getAttribute("reg");
			var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
							  parseFloat(markers[i].getAttribute("lng")));
					
					
			/*Even when there is only a single icon, show the cluster icon. Determine which cluster icon to show via switch statement below*/
			var custom = new GIcon();	
			custom.iconSize = new GSize(99, 85);
			custom.iconAnchor = new GPoint(20, 39);	
			var point;
			switch (area)
			{
				case 'ny':
					j = ny_array.length;
					custom.image = "/wp-content/themes/TorontoBoardOfTrade/images/icons/northyork.png";
					markerOptions = { icon:custom };
					point = new GMarker(latlng,markerOptions);
					ny_array[j] = point;
					break;
				case 'to':
					j = to_array.length;
					custom.image = "/wp-content/themes/TorontoBoardOfTrade/images/icons/toronto.png";
					markerOptions = { icon:custom };
					point = new GMarker(latlng,markerOptions);					
					to_array[j] = point;
					
					break;
				case 'et':
					j = et_array.length;
					custom.image = "/wp-content/themes/TorontoBoardOfTrade/images/icons/etobicoke.png";
					markerOptions = { icon:custom };
					point = new GMarker(latlng,markerOptions);
					et_array[j] = point;
					break;
				case 'sc':
					j = sc_array.length;
					custom.image = "/wp-content/themes/TorontoBoardOfTrade/images/icons/scarb.png";
					markerOptions = { icon:custom };
					point = new GMarker(latlng,markerOptions);
					sc_array[j] = point;
					break;
				case 'ey':
					j = ey_array.length;
					custom.image = "/wp-content/themes/TorontoBoardOfTrade/images/icons/eastyork.png";
					markerOptions = { icon:custom };
					point = new GMarker(latlng,markerOptions);
					ey_array[j] = point;
					break;
				case 'yo':
					j = yo_array.length;
					custom.image = "/wp-content/themes/TorontoBoardOfTrade/images/icons/york.png";
					markerOptions = { icon:custom };
					point = new GMarker(latlng,markerOptions);
					yo_array[j] = point;
					break;
				case 'ot':
					j = ot_array.length;
					ot_array[j] = point;
					break;
			}
		
		//var custom_label_offset = new GSize(21,10);
		//var custom_label = new ELabel(latlng, 1, "mapLabel", custom_label_offset);
		//map.addOverlay(custom_label);
		
		}
		//Display clusters based on their area code.
       var markerCluster_to = new MarkerClusterer(map, to_array, getClusterOptions('to'));
       var markerCluster_ny = new MarkerClusterer(map, ny_array, getClusterOptions('ny'));         
       var markerCluster_et = new MarkerClusterer(map, et_array, getClusterOptions('et'));   
       var markerCluster_sc = new MarkerClusterer(map, sc_array, getClusterOptions('sc'));      
       var markerCluster_ey = new MarkerClusterer(map, ey_array, getClusterOptions('ey'));      
       var markerCluster_yo = new MarkerClusterer(map, yo_array, getClusterOptions('yo')); 
       
       
       /*Handle People who are from "Other" area:*/
	
		//Construct others marker
		var others = new GIcon();
		others.image = "/wp-content/themes/TorontoBoardOfTrade/images/icons/other.png";
		others.iconSize = new GSize(82, 83);
		others.iconAnchor = new GPoint(35, 79);
		othersOptions = { icon:others };
		var othersLatlng = new GLatLng(43.77431,-79.5017); 		//Random area norh of Toronto
		var othersMarker = new GMarker(othersLatlng,othersOptions);
		
		//Construct label showing how many users are from outside toronto
		var ot_label_offset = new GSize(-3,-33);
		var ot_label_number = ot_array.length;
		var ot_label = new ELabel(othersLatlng, ot_label_number, "mapLabel", ot_label_offset);
		
		//Display the others marker with the label in the correct place
		if (ot_label_number > 0)
		{
		map.addOverlay(othersMarker);
		map.addOverlay(ot_label);
		}
      });
      }
      
      /*This function restricts the zoom level of gmap by [min, max]*/	
      function controlZoomLevels(gmap,min,max) {
		var mt = gmap.getMapTypes();
		for (var i=0; i<mt.length; i++) {
   			mt[i].getMinimumResolution = function(){return min};
   			mt[i].getMaximumResolution = function(){return max};
		} 
      } 
      
      /*This function creates a MarkerClustererOptions object and returns it. Perform all styling here*/
      function getClusterOptions(area) {
      	var clusterStyle;
      	/*clusterStyle stores an array of MarkerStyleOptions. These determine how the clusters will be displayed. The array should be listed from the smallest cluster to the largest.*/
    	switch (area)
           {
           		case 'ny':      				
      				clusterStyle = [
      				{
						url: '/wp-content/themes/TorontoBoardOfTrade/images/icons/northyork.png',
        				height: 85,
        				width: 99,
        				opt_anchor: [36, 42], /*Leave this empty to get the number to be centered horizontally/vertically*/
        				opt_textColor: '#000'     
      				}];
           			break;
           		case 'to':
      				clusterStyle = [
      				{
						url: '/wp-content/themes/TorontoBoardOfTrade/images/icons/toronto.png',
        				height: 85,
        				width: 99,
        				opt_anchor: [36, 42], /*Leave this empty to get the number to be centered horizontally/vertically*/
        				opt_textColor: '#000'     
      				}];
           			break;
           		case 'et':
           			clusterStyle = [
    				{
						url: '/wp-content/themes/TorontoBoardOfTrade/images/icons/etobicoke.png',
        				height: 85,
        				width: 99,
        				opt_anchor: [36, 42], /*Leave this empty to get the number to be centered horizontally/vertically*/
        				opt_textColor: '#000'     
      				}];
           			break;
           		case 'sc':
           			clusterStyle = [
    				{
						url: '/wp-content/themes/TorontoBoardOfTrade/images/icons/scarb.png',
        				height: 85,
        				width: 99,
        				opt_anchor: [36, 42], /*Leave this empty to get the number to be centered horizontally/vertically*/
        				opt_textColor: '#000'     
      				}];
           			break;
           		case 'ey':
           			clusterStyle = [
    				{
						url: '/wp-content/themes/TorontoBoardOfTrade/images/icons/eastyork.png',
        				height: 85,
        				width: 99,
        				opt_anchor: [36, 42], /*Leave this empty to get the number to be centered horizontally/vertically*/
        				opt_textColor: '#000'     
      				}];
           			break;
          		case 'yo':
           			clusterStyle = [
    				{
						url: '/wp-content/themes/TorontoBoardOfTrade/images/icons/york.png',
        				height: 85,
        				width: 99,
        				opt_anchor: [36, 42], /*Leave this empty to get the number to be centered horizontally/vertically*/
        				opt_textColor: '#000'     
      				}];
           			break;
           		case 'ot':
           			clusterStyle = [
    				{
						url: '/wp-content/themes/TorontoBoardOfTrade/images/icons/other.png',
        				height: 83,
        				width: 82,
        				opt_anchor: [33, 32], /*Leave this empty to get the number to be centered horizontally/vertically*/
        				opt_textColor: '#000'     
      				}];
           			break;
           }
    	/*clusterOpts is a MarkerClustererOptions object literal. It determines behavior of the MarkerClusterer, and takes 3 params: gridSize, maxZoom, styles.*/
		var clusterOpts = { gridSize: 120, maxZoom: 13, styles: clusterStyle};
		return clusterOpts;
       }
	   
		function unload() {
			to_array.length=0;		//array for toronto
			sc_array.length=0;    	//array for scarborough
			et_array.length=0;  	//array for etobicoke
			ny_array.length=0;		//array for north york
			ey_array.length=0;		//array for east york
			yo_array.length=0;		//array for york
			ot_array.length=0;
			GUnload();
		}
       
    
});