var iconBlue = new GIcon(); 
    iconBlue.image = 'images/markers/marker2.png';
    iconBlue.shadow = '';
    iconBlue.iconSize = new GSize(15, 21);
    iconBlue.shadowSize = new GSize(22, 10);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(7, 0);
	
	var iconRed = new GIcon(); 
    iconRed.image = 'images/markers/marker3.png';
    iconRed.shadow = '';
    iconRed.iconSize = new GSize(15, 21);
    iconRed.shadowSize = new GSize(22, 10);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(7, 0);
	
	var iconGreen = new GIcon(); 
    iconGreen.image = 'images/markers/marker5.png';
    iconGreen.shadow = '';
    iconGreen.iconSize = new GSize(15, 21);
    iconGreen.shadowSize = new GSize(22, 10);
    iconGreen.iconAnchor = new GPoint(6, 20);
    iconGreen.infoWindowAnchor = new GPoint(7, 0);

	var iconOrange = new GIcon(); 
    iconOrange.image = 'images/markers/marker4.png';
    iconOrange.shadow = '';
    iconOrange.iconSize = new GSize(15, 21);
    iconOrange.shadowSize = new GSize(22, 10);
    iconOrange.iconAnchor = new GPoint(6, 20);
    iconOrange.infoWindowAnchor = new GPoint(7, 0);


	var gmarkers = [];
    var iconDark = new GIcon(); 
    iconDark.image = 'images/markers/marker1.png';
    iconDark.shadow = '';
    iconDark.iconSize = new GSize(15, 21);
    iconDark.shadowSize = new GSize(22, 10);
    iconDark.iconAnchor = new GPoint(6, 20);
    iconDark.infoWindowAnchor = new GPoint(7, 0);
	
    var customIcons = [];
    customIcons["S"] = iconBlue;
	customIcons["C"] = iconRed;
	customIcons["H"] = iconOrange;
	customIcons["N"] = iconGreen;
	customIcons["L"] = iconDark;

 
	 
//// shows all markers of a particular category, and ensures the checkbox is checked ==
		function show(category) {
			for (var i=0; i<gmarkers.length; i++) {
			  if (gmarkers[i].mycategory == category) {
				gmarkers[i].show();
			  }
			}
			// == check the checkbox ==
			document.getElementById(category+"box").checked = true;
		  }

//// == hides all markers of a particular category, and ensures the checkbox is cleared ==
		  function hide(category) {
			for (var i=0; i<gmarkers.length; i++) {
			  if (gmarkers[i].mycategory == category) {
				gmarkers[i].hide();
			  }
			}
			// == clear the checkbox ==
			//alert(category+"box")
			document.getElementById(category+"box").checked = false;
			// == close the info window, in case its open on a marker that we just hid
			map.closeInfoWindow();
		  }

//// == a checkbox has been clicked ==
		  function boxclick(box,category) {
			if (box.checked) {
			  show(category);
			} else {
			  hide(category);
			}
        // == rebuild the side bar
        createListing();
      }

      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }

//// Set the center of the map when icon is clicked	
			function ZoomIn(lat, lng) {
				map.setCenter(new GLatLng(lat, lng), 13);
			}
	

//// Recenters Map  
    var varlat = 38.044685;
	var varlong = -96.503909;
	var zoom = 3;
	function ResetZoom(){
	map.setCenter(new GLatLng(varlat,varlong),zoom);
	}
	
	
//// Loads MYmap div with controls
      function load() {
      if (GBrowserIsCompatible()) {
	  map = new GMap2(document.getElementById("MYmap"));
	  map.addControl(new GOverviewMapControl());
      map.addControl(new GSmallMapControl());
	  map.setCenter(new GLatLng(38.044685,-96.503909), 4);
	  gdir  = new GDirections(map, document.getElementById("directions")); 
	  geocoder = new GClientGeocoder();
	 
//// Read the data
      GDownloadUrl("map_data.xml", function(data) {

        var xmlDoc = GXml.parse(data);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
 		for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
			var name = markers[i].getAttribute("name");
			var storenumber = markers[i].getAttribute("storenumber");
			var location = markers[i].getAttribute("location");
			var address = markers[i].getAttribute("address");
			var city = markers[i].getAttribute("city");
			var state = markers[i].getAttribute("state");
			var zip = markers[i].getAttribute("zip");
			var lat = parseFloat(markers[i].getAttribute("lat"));
			var lng = parseFloat(markers[i].getAttribute("lng"));
			var point = new GLatLng(lat,lng);
			var storetype = markers[i].getAttribute("storetype");
			var category = markers[i].getAttribute("category");
			var storehours = markers[i].getAttribute("storehours");
			var phonenumber = markers[i].getAttribute("phonenumber");
			var wholefamily = markers[i].getAttribute("wholefamily");
			var petites = markers[i].getAttribute("petites");
			var womansize = markers[i].getAttribute("womansize");
			var homestore = markers[i].getAttribute("homestore");		 
			var baby = markers[i].getAttribute("baby");
			var classic = markers[i].getAttribute("classic");
			var html = "<div id='bubble'><div id='mapContainer'><div class='mapColumnLeft'><div class='mapStoretype'>" + storetype +  "</div><div>" + location + "</div><div>" + address + "</div><div>" + city + ", " + state + " " + zip + "</div><div>" + phonenumber + "</div><div>" + storehours + "</div></div><div class='mapColumnRight'><div><b>Lands' End products for:</b></div><div>" + wholefamily + "</div><div>" + petites + "</div><div>" + womansize + "</div><div>" + homestore + "</div><div>" + baby +"</div><div class='splash'>" + classic +"</div></div><div class='clear'></div></div><div class='mapDirectionsOne'></div><div class='mapDirectionsTwo'><a class='btn_opa' href='http://maps.google.com/maps?saddr=&daddr=" + point.toUrlValue() + "' target ='_blank'> get directions </a></div></div></div>";		  
          	var listing = "<div class='" + state + "'><h3>" + storetype + "</h3><div><p>" + location + "</p><p>" + phonenumber + "</p><p>" + storehours + "</p>&nbsp;</div><div><p>" + address + "</p><p>" + city + ", " + state + ", " + zip + "</p></div><div class='alignright'><a class='btn_opa' href='http://maps.google.com/maps?saddr=&daddr=" + point.toUrlValue() + "' target ='_blank'> get directions </a></div></div>";

		 // create the marker
			var marker = createMarker(point,name,html,category,listing,petites,storetype);
			map.addOverlay(marker);
		}

		  // create the initial sidebar ==
		  createListing();


//// == URL Parse
		
		if (window.location.hash){
			var hash = window.location.hash.valueOf();
			hash = hash.substring(1);
			//
			if(hash=="sears"){
				swapContent();
				show("S");
				hide("C");
				hide("H");
				hide("N");				
				hide("L");
			}
			else if(hash=="canada"){
				swapContent();
				hide("S");
				show("C");
				hide("H");
				hide("N");				
				hide("L");
			}
			else if(hash=="comingsoon"){
				swapContent();
				hide("S");
				hide("C");
				show("H");
				hide("N");				
				hide("L");
			}
			else if(hash=="new"){
				swapContent();
				hide("S");
				hide("C");
				hide("H");
				show("N");
				hide("L");
			}
			else if(hash=="inlets"){
				swapContent();
				hide("S");
				hide("C");
				hide("H");
				hide("N");
				show("L");
			}
			else if(hash=="future"){
				swapContent();
				hide("S");
				hide("C");
				show("H");
				show("N");
				hide("L");
			}
			else{
				swapContent();
				show("S");
				hide("C");
				hide("H");
				hide("N");
				hide("L");				
			}
		}
		else{
			show("S");
			hide("C");
			show("H");
			show("N");
			hide("L");				
		}
// == rebuild the side bar
        createListing();

      });
    }
 }
 

//// A function to create the marker and set up the event window
        function createMarker(point,name,html,category,listing) {
			var marker = new GMarker(point,customIcons[category]);
	// === Store the category and name info as a marker properties ===
			marker.mycategory = category;                                 
			marker.myname = name;
			marker.mylisting = listing;
			GEvent.addListener(marker, "click", function() {
				map.setCenter(point, 8);
				marker.openInfoWindowHtml(html, {maxWidth:380});
			});
			gmarkers.push(marker);
			return marker;
		}	

// == rebuilds the sidebar to match the markers currently displayed ==
      function createListing() {
		var html = "";
        for (var i=0; i<gmarkers.length; i++) {
          if (!gmarkers[i].isHidden()) {
                        html += '<li class="listitem" onclick="myclick(' + i + ')">' + gmarkers[i].mylisting +'<div clas="clear"></div></li>';

          }
        }
        document.getElementById("side_bar").innerHTML = html;
      }
	  
	  
//// Controls the search box utility
		function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
					alert(address + " not found");
			  			  
            } else {
              map.setCenter(point, 8);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml('<div id=\"mapBubbleTwo\"><div class=\"mapBubbleHeader\">Your location:</div><div class=\"mapBubbleAddress\">' + address + '</div><div class=\"mapBubbleInfo\">Click on any Lands\' End location to find out more information, about that specific shop.</div></div>');	
			  $('#side_bar li.listitem').show();
			  $("select option:selected").text('a state');
			  $('#creative-content').hide();
			  $('#creative-contianer').css({"height":"380px"});
			/* Would we like them to search all stores on search, or just the filtered stores?
				show("S");
				show("C");
				show("H");
				show("N");
				show("L");	
				createListing();
			*/
            }
          }
        );
      }
    }

//// Tool Tip for store type
	this.storetype = function(){	
		
		$("span.storetype").hover(function(e){											  
			this.t = this.title;
			this.title = "";
			$("#MYmap").append("<div id='storetype'>"+ this.t +"</div>");
			$("#storetype")
				.fadeIn("medium");		
		},
		function(){
			this.title = this.t;		
			$("#storetype").remove();
		});	
	};

	function swapContent(){
		$('#creative-content').hide();
		$('#creative-contianer').css({"height":"380px"});
	};


$(document).ready(function(){

//INFO Window
	storetype();	

	
	$('div#store_listings').click(swapContent);
	$('#creative-content').click(function(){
		swapContent();
		hide("S");
		hide("C");
		show("H");
		show("N");
		hide("L");
		createListing();
	});
	

//More Options toggle window
	$('#moreOptionsLink').click(function(){
		$('#additionalOptions').toggle("slow");
		$('#moreOptionsLink a').toggle();
		return false;
	});

//Additional Options State Filter	
	$('#statefilter').change(function () {
		var selectedstate = $("select option:selected").text();
		var state = $("select option:selected").val();
		var establishclass = "."
		var stateclass = establishclass + state;
		
		if (geocoder) {
        geocoder.getLatLng(
		selectedstate,
          function(point) {
              map.setCenter(point, 7);
            })
        }		

		show("S");
		show("C");
		show("H");
		show("N");
		show("L");	
		createListing();

		$('#side_bar li.listitem').hide();
		$('#side_bar li.listitem').children(stateclass).parent('.listitem').show();
		$('.resetmap').show();
		swapContent();
	});

	$('.resetmap').click(function(){
		$('#side_bar li.listitem').show();
		$("select option:selected").text('a state');
		 map.setCenter(new GLatLng(40.044685,-96.503909), 4);
		$(this).hide();
	});
	

});