var doughnut;
    	
      var map = '';
      var mapZoom;
      var goverlays = [];
      var currentPoint;
      var iconPlaced = false;
	  var preloading = false;
      var lastmarker;
      var iwform = '<span style=\"font-weight: bold; font-size: 14px;\">Hi, I\'m the Plane Spotter.<\/span><br /><br />Drag me to the spot you want to look for planes.<br />';


			var markers = ['one'];
			var htmlBlock = [];
			var map;
			
			$(document).ready(function(){
			      // ==== Make the map types semi transparent ===
			      G_NORMAL_MAP.getTileLayers()[0].getOpacity = function () {return 0.4;};
			      G_SATELLITE_MAP.getTileLayers()[0].getOpacity = function () {return 0.4;};
			      G_HYBRID_MAP.getTileLayers()[0].getOpacity = function () {return 0.4;};
			      G_HYBRID_MAP.getTileLayers()[1].getOpacity = function () {return 0.4;};
			      
				var map = new GMap2($("#map").get(0));
				var cityCenter = new GLatLng(38.61687,-98.173828);
				 map.setCenter(cityCenter, 4);
				var bounds = new GLatLngBounds();

			      
				/* Build Controls */
				
				$(iconHTML("up"))
					.css({ top:'10px', left:'32px' })
					.click(function(){
						map.panDirection(0, 1);
					})
					.appendTo("#map");
					
				$(iconHTML("left"))
					.css({ top:'32px', left:'10px' })
					.click(function(){
						map.panDirection(1, 0);
					})
					.appendTo("#map");
					
				$(iconHTML("right"))
					.css({ top:'32px', left:'54px' })
					.click(function(){
						map.panDirection(-1, 0);
					})
					.appendTo("#map");
					
				$(iconHTML("down"))
					.css({ top:'54px', left:'32px' })
					.click(function(){
						map.panDirection(0, -1);
					})
					.appendTo("#map");
					
				$(iconHTML("plus"))
					.css({ top:'84px', left:'32px' })
					.click(function(){
						map.zoomIn();
						$("#map-slider").slider("value", map.getZoom());
					})
					.appendTo("#map");
					
				$(iconHTML("minus"))
					.css({ top:'325px', left:'32px' })
					.click(function(){
						map.zoomOut();
						$("#map-slider").slider("value", map.getZoom());
					})
					.appendTo("#map");
				
				$("<div />").attr('id','map-slider').height(200)
					.slider({ 
						orientation: "vertical", 
						min:0, max:19, step:1, value:map.getZoom(),
						change:function(){
							map.setZoom( $(this).slider("value") );
						}
					})
					.css({ top:'115px', left:'38px', position:'absolute' })
					.appendTo("#map");
					;

		      // ==== THEN set the background colour of the map div ===
		      document.getElementById("map").style.backgroundColor="#009900";
		      
		      
		      // Build Plane Spotter Icon
			  var planeSpotterIcon = new GIcon(G_DEFAULT_ICON, "/templates/plane_spotter_area.png");
		      planeSpotterIcon.shadow = "/templates/plane_spotter_area_s.png";
		      planeSpotterIcon.iconSize = new GSize(325, 325);
		      planeSpotterIcon.iconAnchor = new GPoint(162,162);
		      planeSpotterIcon.imageMap = [0,0,325,0,325,325,0,325];
		      planeSpotterIcon.maxHeight = 25;

		      function importanceOrder (marker,b) {
		        return 900;
		      }

		      // Define and place the Plane Spotter icon
			  var point = new GLatLng(38.6,-98);
			  var markerD = new GMarker(point, {icon:planeSpotterIcon, draggable: true}); 
			  // Load planes
		
			  function notFound() {
			  	 if (preloading == true) {
				  	  document.getElementById("side_bar").innerHTML = "<div id=\"loadingBlock\">No planes were found for this area, try another spot.<br \/><br \/><br \/><\/div>";	  	 	
				  	  document.getElementById("loadingBox").innerHTML =  "<div id=\"loadingBlock\">No planes were found for this area, try another spot.<br \/><br \/><br \/><\/div>";	  	 	
			  	 }
			  }
			  $("#loadingBox").appendTo("#map").css({ top: '10px', left:'215px' });
			  $("#togglePS").appendTo("#map").css({ top: '10px', left:'480px' });
			  $('#togglePS').addClass('icon ui-state-default ui-corner-all');
			  $('#loadingBox').addClass('icon ui-corner-all');
			  $("#loadingBox").hide();
			  $('#togglePS').hide();
		      // == creates a draggable marker with an input form ==
		      function createInputMarker(point,marker) {
				GEvent.addListener(marker, "drag", function(){
					$('#togglePS').hide();
					currentPoint=markerD.getPoint().toUrlValue();
					document.getElementById('locationpoint').value=currentPoint;
				});   
		        GEvent.addListener(marker, "dragstart", function() {
		        	marker.closeInfoWindow();
		      	});
		        GEvent.addListener(marker, "dragend", function(point) {
		          $("#side_bar").html("<div id=\"loadingBlock\"><img src=\"/images/spinner.gif\" border=\"0\" align=\"absmiddle\" \/> &nbsp;&nbsp;Searching for Planes <br \/><br \/><br \/><\/div>");
			  	  $("#loadingBox").html("<div id=\"loadingBlockTop\"><img src=\"/images/spinner.gif\" border=\"0\" align=\"absmiddle\" \/> &nbsp;&nbsp;Searching for Planes <br \/><br \/><br \/><\/div>");
			  	  
			  	  $("#loadingBox").show();
			  	  preloading = true;
				  map.setCenter(point, 8);
				  
				  $.doTimeout(2000, function() {
					  
					  doughnut = new GGeoXml('http://www.helloflight.com/kml/radius.cfm?point='+currentPoint);
					  map.addOverlay(doughnut);
					  markerD.hide();
					  $('#togglePS').show();
					  $('#showPS').show();
					  $('#hidePS').hide();
					  $('#showPS').click(function(){
						  	markerD.show();
						  	$('#showPS').hide();
						  	$('#hidePS').show();
					  });
					  $('#hidePS').click(function(){
						  	markerD.hide();
						  	$('#hidePS').hide();
						  	$('#showPS').show();
					  });
				  });
				  
				  //setTimeout('getAircraft()',4000);
				  //setTimeout('notFound()',30000);
		          
				  iconPlaced = true;
		      	});
		        GEvent.addListener(marker, "click", function() {
		          //marker.openInfoWindowHtml(iwform);
		          iconPlaced = true;
		        });
		        map.addOverlay(marker);
		        //marker.openInfoWindowHtml(iwform);
		        lastmarker=marker;
		        return marker;
		      }
		      
		      GEvent.addListener(map,"addoverlay",function(overlay) {
		        // If this is a named overlay (e.g. not the GGeoXml itself, or the infowindow)
		        if (overlay.name) {
		          // check to see if we already know about this one
		          if (overlay.Known) {
		            // do nothing
		          } else {
		          	if (preloading == true) {
		          		document.getElementById("side_bar").innerHTML = "<br /><div style=\"display: block; position: relative; font-size: 14px; font-weight: bold; padding: 5px 0px 5px 10px; border: solid 1px gray; background-color: white; width: 260px;\">Flights in 100 Mile Radius<\/div><br /><br /><table width=\"280\"><tr><td class=\"FlightHeader\" width=\"80\">Flight<\/td><td class=\"FlightHeader\" width=\"100\">Departure<\/td><td class=\"FlightHeader\" width=\"100\">Arrival<\/td><\/tr><\/table>";
		          		document.getElementById("loadingBox").innerHTML ="";
		          		preloading = false;
		          	}
		            // Add a sidebar entry
		            var label = "";
			
		            if(overlay.snippet)
		            	label = overlay.snippet.split('|');
		            else {
		            	label = new Array();
		            	label[0] = overlay.description;
		            	label[1] = overlay.name.substring(0,overlay.name.indexOf("-"));
		            	if(label[0].indexOf("Departed From") != 0) {
		            		label[2] =
		            			label[0].substring(
		            				label[0].indexOf(
		            					"<span>",
		            					label[0].indexOf("Departed From")
		            				) + "<span>".length,
		            				label[0].indexOf(
		            					"</span>",
		            					label[0].indexOf("Departed From")
		            				)
		            			);
		            	} else {
		            		label[2] = "";
		            	}
		            	if(label[0].indexOf("Arriving At") != 0) {
		            		label[3] = 
		            			label[0].substring(
		            				label[0].indexOf(
		            					"<span>",
		            					label[0].indexOf("Arriving At")
		            				) + "<span>".length,
		            				label[0].indexOf(
		            					"</span>",
		            					label[0].indexOf("Arriving At")
		            				)
		            			);
		            	} else {
		            		label[3] = "";
		            	}
		            	label[0] = label[1]; // replace description with title
		            	label[1] = label[2]; // replace title with origin
		            	label[2] = label[3]; // replace origin with destination
		            	
		            }
		            document.getElementById("side_bar").innerHTML  += '<table width=\"300\"><tr><td width=\"90\"><a href="#" class="mapClick" rel="' + goverlays.length + '">' + label[0] + '<\/a><\/td><td width=\"105\" align=\"left\"><a href="#" class="mapClick" rel="' + goverlays.length + '">' + label[1] + '<\/a><\/td><td width=\"105\" align=\"left\"><a href="#" class="mapClick" rel="' + goverlays.length + '">' + label[2] + '<\/a><\/td><\/tr><\/table>';
		            $("#loadingBox").hide();
		            $('.mapClick').click(function(){
		            	GEvent.trigger(goverlays[this.rel], "click");
		            });

		            // Save a reference
		            goverlays.push(overlay);
		            // remember that we know about this one
		            overlay.Known = true;
		          }
		        }
		      }); 


		      // The infowindow contents can be modified as it opens.
		      GEvent.addListener(map,"infowindowprepareopen", function(iwtabs) {
		        iwtabs[0].contentElem.innerHTML+="<br />";
		      });

		      

		      
		      document.getElementById('locationpoint').value=map.getCenter();
		      //map.addOverlay(doughnut);
			  map.setCenter(new GLatLng(38.6,-98), 4);
			  
			  createInputMarker(point,markerD);
			  
			  
			});
		
		    
			function iconHTML(type) {
				switch (type) {
					case "up" 		: iconClass = 'ui-icon-circle-arrow-n'; break;
					case "down" 	: iconClass = 'ui-icon-circle-arrow-s'; break;
					case "left" 	: iconClass = 'ui-icon-circle-arrow-w'; break;
					case "right" 	: iconClass = 'ui-icon-circle-arrow-e'; break;
					case "plus" 	: iconClass = 'ui-icon-circle-plus'; break;
					case "minus" 	: iconClass = 'ui-icon-circle-minus'; break;
					case "close"	: iconClass = 'ui-icon-closethick'; break;
				}
				return '<div class="icon ui-state-default ui-corner-all"><span class="ui-icon '+iconClass+'" /></div>';
			}
			
			$.fn.uiHover = function(){
				return this.each(function(){
					$(this).hover(
						function(){ $(this).addClass('ui-state-hover'); },
						function(){ $(this).removeClass('ui-state-hover'); }
					);
				});
			}