var oDataTable;
var myMap;

var allMarkers = {}, stationMarkers = {}, infowindow, numMarkers = 0

var spinner = '<img src="images/spinner.gif" alt="loading...">';


$(document).ready(function() {
  $('.error').hide();


		var latlng = new google.maps.LatLng(43.567, -110.38);
		var myOptions = {
			zoom: 8,
			center: latlng,
			mapTypeControl: true,
			mapTypeControlOptions: {
				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			},
			scrollwheel: true,
			navigationControl : true,
			navigationControlOptions : {
					 style : google.maps.NavigationControlStyle.ZOOM_PAN
			},
			mapTypeId: google.maps.MapTypeId.TERRAIN
		};

		myMap = new google.maps.Map(document.getElementById("map"), myOptions);

				//this is like a global infowindow - only one is used and content isupdated.

     infowindow = new google.maps.InfoWindow( {
          disableAutoPan : false
     });

		 google.maps.event.addListener(myMap, "click", function() {
		    if(infowindow) {
		      infowindow.close();
		    }
		 });


		google.maps.event.trigger(myMap,'resize');



				//the below is to deal with clearing out markers before new search results
			google.maps.Map.prototype.markers = new Array();
			google.maps.Map.prototype.station_markers = new Array();


	 google.maps.Map.prototype.addMarker = function(marker, id) {
			this.markers[this.markers.length] = marker;
		};

	 google.maps.Map.prototype.addstationMarker = function(marker,id) {
		//	this.station_markers[this.station_markers.length] = marker;
			this.station_markers[id] = marker;
		};

		 google.maps.Map.prototype.hideStations= function() {
		    if(infowindow) {
		      infowindow.close();
		    }
		    for(var i=0; i<this.station_markers.length; i++){
		      //station markers are in the array by ID, not necessarily sequentailly
		      if (this.station_markers[i]) this.station_markers[i].setVisible(false);
		    }
		  };


		 google.maps.Map.prototype.showStations= function() {

		    for(var i=0; i<this.station_markers.length; i++){
		        if (this.station_markers[i])  this.station_markers[i].setVisible(true);
		    }
		  };


 google.maps.Map.prototype.clearMarkers = function() {
    if(infowindow) {
      infowindow.close();
    }
    for(var i=0; i<this.markers.length; i++){
      this.markers[i].setMap(null);
    }


};



	$('#map_legend').dialog({
				autoOpen: false,
				height: 300
		}
	);


		$('.info').click(function() {
					$('#map_legend').dialog('open');
		})


  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

	$("#start_date").datepicker();
	$("#end_date").datepicker();
	$('input#show_stations').attr('checked',true);


				//default dates to past week
	var today = new Date;
	var weekago = new Date;
	weekago.setDate(weekago.getDate()-7);
	$('#start_date').val((weekago.getMonth()+1) + "/" + weekago.getDate() + "/" + weekago.getFullYear());
	$('#end_date').val((today.getMonth()+1) + "/" + today.getDate() + "/" + today.getFullYear());

			//****** get the events for the first time in the page....   ******//
   var dataString = 'start_date='+ $("input#start_date").val() + '&end_date=' +$("input#end_date").val();
		$.ajax({
			 type: "POST",
			 url: "event_xml.php",
			 data: dataString,
			 dataType: "xml",
       success: function(xml){
       		refresh_data(xml);
			}
   });

   			//****** get the weather stations for the first time in the page....   ******//
   			//***** would like to do this via a KML overlay when that is an option
	   // var dataString = 'start_date='+ $("input#start_date").val() + '&end_date=' +$("input#end_date").val();
	 		$.ajax({
	 			 type: "POST",
	 			 url: "station_xml.php",
	 			 data: dataString,
	 			 dataType: "xml",
	        success: function(xml){
	        		load_stations(xml);
	 			}
	    });



			//****** submit of search form ******//
	$("#filter").submit(function () {
          // validate and process form
          // first hide any error messages
		$('.error').hide();
		var start_date = $("input#start_date").val();
		var end_date = $("input#end_date").val();
			var area_filter= $("#area_filter").val();

		if (start_date == "") {
			$("label#start_error").show();
			$("input#start_Date").focus();
			return false;
		}


			//setup the call to get the events
   var dataString = 'start_date='+ start_date + '&end_date=' + end_date + '&area=' + area_filter;
   //var num_events = 0;
   //alert (dataString);
		$.ajax({
			 type: "POST",
			 url: "event_xml.php",
			 data: dataString,
			 dataType: "xml",
       success: function(xml){
       		refresh_data(xml);
			}
   });
   return false;
   });


			//******* toggle between table and map ******//
	 $("#toggle").click(function () {
		 $("#table_data").toggle("slow");
		 $("#maparea").toggle("slow");
		 $("#jump").toggle();
		 $("#show_stations").toggle();
		 $("label[for='show_stations']").toggle();
		 $("#mapit").toggle();

		 if ($("#toggle").html() == 'Event Details') {
			$("#toggle").html( 'Map View') ;
		 } else {
					//just to be sure!? In IE, the tiles weren't always redrawing...
		 //	google.maps.event.trigger(myMap,'resize');
				$("#toggle").html('Event Details');
		 }
    });


       //****** Date range resetting ******//
	 	$('#dateranges').change(function() {
			var today = new Date;

			var option = $("#dateranges").val();
			switch(option) {
					case 'Past Week':
	 								//set up the default dates for first time into form
						var weekago = new Date;
						weekago.setDate(weekago.getDate()-7);
						$('#start_date').val((weekago.getMonth()+1) + "/" + weekago.getDate() + "/" + weekago.getFullYear());
						$('#end_date').val((today.getMonth()+1) + "/" + today.getDate() + "/" + today.getFullYear());
						break;

				  case 'Past 2 Weeks':
								//set up the default dates for first time into form
							var weekago = new Date;
							weekago.setDate(weekago.getDate()-14);
							$('#start_date').val((weekago.getMonth()+1) + "/" + weekago.getDate() + "/" + weekago.getFullYear());
							$('#end_date').val((today.getMonth()+1) + "/" + today.getDate() + "/" + today.getFullYear());
							break;

	 					case  'Past Month':
	 						var monthago = new Date;
	 						var m = monthago.getMonth() - 1;
	 						monthago.setMonth(m);
	 						$('#start_date').val((monthago.getMonth()+1) + "/" + monthago.getDate() + "/" + monthago.getFullYear());
	 						$('#end_date').val((today.getMonth()+1) + "/" + today.getDate() + "/" + today.getFullYear());
	 						break;
	 				}
					 $("#dateranges").val('Reset dates to...');
	 	});

			//****** jump to... ******//
	 	$('#jump').change(function() {
	 		//var latlng;
			var option = $("#jump").val();
				switch(option) {
				case 'Teton Area':
						latlng = new google.maps.LatLng(43.65, -110.77);
						break;
					case 'Togwotee Area':
						latlng = new google.maps.LatLng(43.77, -110.16);
						break;
				case 'Grey\'s River Area':
						latlng = new google.maps.LatLng(42.74, -110.74);
						break;
				}

				myMap.setCenter(latlng);
				myMap.setZoom(10);
				$('select:jump').val('Jump To...');

		});

			//****** turn stations  on/off... ******//
	 	$('#show_stations').change(function() {
	 		if ($('input#show_stations').is(':checked'))  {
	 			myMap.showStations();
	 		} else {
	 			myMap.hideStations();
	 		}


		});


	$("#mapit").click(function() {

		aSels = fnGetSelected(oDataTable);

		if (aSels.length <= 0) {
			alert("You don't have any selected events");
		} else {
			dataString = "ID=";
			for ( var i=0 ; i<aSels.length ; i++ ) {
				var y = aSels[i];
				//var x=aSels[i].cells;
				//alert(x[13].innerHTML);
				if (i > 0) dataString += ", ";
				dataString += y[13];
			}

			$.ajax({
				 type: "POST",
				 url: "event_xml.php",
				 data: dataString,
				 dataType: "xml",
				 success: function(xml){
						refresh_data(xml);
				}
		 });

				   //next is to display the map
			$("#toggle").click();

		}		/* if rows were selected */

	});
});				//end of on ready



//******* success funciton for ajax call to get avalanche events ******//
		function refresh_data(xml){
			var num_events = 0;
			var map_events = 0;

			$("#table_data").empty();
			var html = "<table class=\"display\" id=\"events\"> <thead> <tr>"
				+ "<th width=\"5%\">Date</th>"
				+ "<th width=\"4%\">Time</th>"
				+ " <th width=\"20%\">Pathanme</th>"
				+ "<th width=\"3%\">Type</th>"
				+ "<th width=\"2%\">Trig</th>"
				+ "<th width=\"5%\">Rel. Size</th>"
				+ "<th width=\"5%\">Des. Size</th>"
				+ "<th width=\"5%\">Dpth &quot;</th>"
				+ "<th width=\"5%\">Aspect</th>"
				+ "<th width=\"3%\">Elev</th>"
				+ "<th width=\"5%\">Slope Angle</th>"
				+ "<th width=\"5%\">Zone</th>"
				+"<th width=\"33%\">Notes</th>"
				+"<th width=\"0%\"ID</th>"
				 + "</tr>  </thead>  <tbody>  ";

			 myMap.clearMarkers();
/*     for ( var i in allMarkers) {
          allMarkers[i].setMap(null);
     }
     allMarkers = {}; */


			$(xml).find("marker").each(function(){
					var _marker = $(this);
					num_events++;
					var _ID = _marker.attr("ID");
					var _date = _marker.attr("date");
					var _time = _marker.attr("time");
					var _pathname = _marker.attr("pathname");
					var _type = _marker.attr("type");
					var _trigger= _marker.attr("trigger");
					var _relative_size= _marker.attr("relative_size");
					var _destructive_size= _marker.attr("destructive_size");


					var _elevation = _marker.attr("elevation");
					var _aspect = _marker.attr("aspect");

					var _depth = _marker.attr("depth");
					var _angle = _marker.attr("slope_angle");
					var _zone = _marker.attr("zone");
					var _notes = _marker.attr("notes");

					 html +=  "<tr><td>" + _date + "</td><td>" + _time + "</td><td>" + _pathname + "</td><td>" + _type + "</td><td>" + _trigger + "</td><td>" + _relative_size
					  + "</td><td>" + _destructive_size + "</td><td>" + _depth + "</td><td>" + _aspect + "</td><td>" + _elevation + "</td>"
					  + "<td>" + _angle + "</td><td>" + _zone + "</td><td>" + _notes + "</td><td class='mapit'>" + _ID + " </td></tr>";
					if (_marker.attr("lat") != 0) {
					 var point = new google.maps.LatLng(parseFloat(_marker.attr("lat")),
																					 parseFloat(_marker.attr("lng")));
					createMarker(_ID, point, _date, _time, _pathname, _type, _relative_size, _depth, _trigger, _elevation, _aspect);

					 map_events++;
				 }
			});

		 $("#status").html( num_events + " events were found for your search<br />" +map_events + " events have points that can be mapped");

			html += "</tbody>"
				+ "  <tfoot>    <tr> <th>Date</th> <th>Time</th>  <th>Pathname</th>  <th>Type</th><th>Trig</th>  <th>Rel. Size</th>"
				+ "   <th>Des. Size</th> <th>Depth</th><th>Aspect</th><th>Elev</th>"
				+ "<th>Slope Angle</th><th>Zone</th><th>Notes</th><th>ID</th></tr>  </tfoot> </table>";

			$("#table_data").append(html);

							//now set events and so on for the data table view
			$('#events tr').click( function() {
				if ( $(this).hasClass('row_selected') )
					$(this).removeClass('row_selected');
				else
					$(this).addClass('row_selected');
			} );

					/* Add a click handler to the rows - this could be used as a callback */
			$("#events tbody td.mapit").click(function(event) {
			/*		$(oDataTable.fnSettings().aoData).each(function (){
						$(this.nTr).removeClass('row_selected');
			});
					$(event.target.parentNode).addClass('row_selected'); */
				});



			oDataTable = $('#events').dataTable( {
				"bAutoWidth": false,
				"aaSorting": [[0,'desc']],
				"aoColumns": [
							/* date */ null,
							/*time */ null,
							/* path */ null,
							/* type */ null,
							/* trigger */ null,
							/* rel size */ null,
							/* d size */ null,
							/* depth */ null,
							/* aspect */ null,
							/* elev */ null,
							/* angle */ null,
							/* zone */ null,
							/* notes */ {"bSortable": false},
						/* ID */    {"bVisible": false}
				]
			} );

		}				//end of refresh data function


 function createMarker(id, point, date, time, pathname,type, size, depth, trigger, elevation, aspect) {
      var marker = new google.maps.Marker({
           position: point,
           map: myMap,
            icon: 'images/event.png',
           title: date
       });

		myMap.addMarker(marker,id);

		// var infohtml = "<b>Date/Time: " + date + " " + time + "</b> <br/>Path: " + pathname
		//	 + "<br /> Elevation: " + elevation  + " Aspect: "
		//		+ "<br /> Type: " + type + " Size: " + size + " Depth: " + depth + " Trigger: " + trigger;
				//+ "<br /><a href=\"javascript:zoom_center(" + point.lat() + "," + point.lng()  + ");\">Zoom Here</a>";


		//google.maps.event.addListener(allMarkers[id], 'click', function() {
		google.maps.event.addListener(marker,'click',function() {
				openInfoWindow(marker,id);
		});
	}


function openInfoWindow(marker,id) {
		  var markerLatLng = marker.getPosition();
		  /*infowindow.setContent([
		    '<b>Marker position is:</b><br/>',
		    markerLatLng.lat(),
		    ', ',
		    markerLatLng.lng(),
		    '<br /><a href=\"javascript:zoom_center(' + markerLatLng.lat() + ',' + markerLatLng.lng()  + ');\">Zoom Here</a>'

		  ].join(''));
		 infowindow.open(myMap, marker); */


      $   .ajax( {
                    type : "POST",
                    dataType : "xml",
                    url : "getEventInfoWindow.php",
                    data : {
                         id : id
                    },
                    beforeSend : function() {
                         infowindow.setContent(spinner);
                         infowindow.open(myMap, marker);

                        // infowindow.open(myMap, allMarkers[id]);
                         //var height = boundsJSON.n - boundsJSON.s;
                       // var lowercenter = (allMarkers[id].position.lat() + (height / 3));
                       //  map.panTo(new google.maps.LatLng(lowercenter,
                       //            allMarkers[id].position.lng()));
                    },
                    success : function(xml) {
                         data = parseInfoWindowData(xml,marker);
                         //setWindowInfo(data);
                         //infowindow.open(myMap,marker);
                    }
               });
}
		function setWindowInfo(content) {
			     infowindow.setContent(content);
			     alert("setting info windoow contnet " + content);
}

function parseInfoWindowData(xml, marker) {
	//this could eventually be for each slidepath polygon, which could then have multiple markers...

	$(xml).find("marker").each(function(){
		var markerLatLng = marker.getPosition();
		var _xmarker = $(this);

		strInfo =   '<b>Date/Time: ' + _xmarker.attr("date") + ' ' +  _xmarker.attr("time");
		strInfo += '</b> <br/>Path: '+ _xmarker.attr("pathname")  + '<br />'
					 + " Elevation: "+ + _xmarker.attr("elevation") + " Aspect: " + _xmarker.attr("aspect") + "<br /> Type: " + _xmarker.attr("type")
					 + "<br/> Size: " + _xmarker.attr("relative_size") + " Depth: " + _xmarker.attr("depth") + " Trigger: " + _xmarker.attr("trigger");

		infowindow.setContent([
			strInfo,
			'<br /><a href=\"javascript:zoom_center(' + markerLatLng.lat() + ',' + markerLatLng.lng()  + ');\">Zoom Here</a><br/><br/>'
		].join(''));
		infowindow.open(myMap, marker);

	});

	return strInfo;

}


/* center the map */
     function zoom_center(lat, lng) {
          // BUGGY:
         myMap.setCenter(new google.maps.LatLng(lat, lng));
         if (myMap.getZoom() < 12) {
         		myMap.setZoom(12);
         	}
     }


/*
 */
function fnGetSelected( oTableLocal )
{
	var aReturn = new Array();
	var aTrs = oTableLocal.fnGetNodes();

	for ( var i=0 ; i<aTrs.length ; i++ )
	{
		if ( $(aTrs[i]).hasClass('row_selected') )
		{
			//var aPos = oTableLocal.fnGetPosition($(aTrs[i]));
			//alert("apos = " + aPos);

			var aData = oTableLocal.fnGetData(i);
			aReturn.push(aData);

			//aReturn.push( aTrs[i] );
		}
	}
	return aReturn;
}

		function closeInfoWindows() {
		     if (infowindow !== undefined) {
		          infowindow.close();
		     }
		}

		function load_stations(xml){
			var num_stations = 0;

			$(xml).find("marker").each(function(){
					var _marker = $(this);
					var _ID = _marker.attr("ID");
					var _name = _marker.attr("name");
					var _description =  _marker.attr("description");
					var _lat = _marker.attr("lat");
					var _lng = _marker.attr("lng");
					if (_marker.attr("lat") != 0) {
			 		  var point = new google.maps.LatLng(parseFloat(_marker.attr("lat")),
																				 parseFloat(_marker.attr("lng")));

						var marker = new google.maps.Marker({
								 position: point,
								 map: myMap,
								 icon: 'images/station.png',
								 title: _description
						 });

						myMap.addstationMarker(marker,_ID);
						num_stations++;
						google.maps.event.addListener(marker,'click',function() {
							openStationInfo(_ID);
						});

				 }
			});




		}

	function openStationInfo(id) {
     $
			 .ajax( {
						type : "POST",
						dataType : "xml",
						url : "getStationInfoWindow.php",
						data : {
								 id : id
						},
						beforeSend : function() {
								 infowindow.setContent(spinner);
								 infowindow.open(myMap, myMap.station_markers[id]);
						},
						success : function(xml) {
								 content = parseStationData(xml);
								 infowindow.setContent(content);
						}
			 });
	}

	function parseStationData(xml) {

			$(xml).find("marker").each(function(){
				var _marker = $(this);

			 html =   "<b>Station: "+ _marker.attr("description")  +  "</b> Last Report: "+ _marker.attr("date")
					 + "<br /> 5AM Temp: " + _marker.attr("Temp_Current") + " Max Temp: " + _marker.attr("Temp_24Hr_Max") + " Min Temp: " + _marker.attr("Temp_24Hr_Min")
					 + "<br />Wind Speed: " + _marker.attr("Wind_Speed_Current") + " Direction: " + _marker.attr("Wind_Direction_Current") + " 24 Hour Avg: " + _marker.attr("Wind_Speed_24Hr_Average") + " - " + _marker.attr("Wind_Direction_24Hr_Average")
					 + "<br />New Snow: " + _marker.attr("NewSnow") + " Water Equivalent: " + _marker.attr("SWE") + " Density: " + _marker.attr("Density") + " Depth:  " + _marker.attr("SnowDepth");
			});

	return html;

}