//<![CDATA[

/*	var waveIcon = new GIcon();
	waveIcon.image = "http://caricoos.org/app/icons/wave.png";
	waveIcon.iconSize = new GSize(34,28);
	waveIcon.shadow = "http://caricoos.org/app/icons/waveshadow.png";
	waveIcon.shadowSize = new GSize(50,20);
	//22,43
	waveIcon.iconAnchor = new GPoint(1,24);
	//24,24
	waveIcon.infoWindowAnchor = new GPoint(30,2);
	waveIcon.transparent ="http://caricoos.org/app/icons/wavetrans.png";
	waveIcon.imageMap=[0,0, 34,0, 34,28, 0,28];*/
	



	//var map; 
		var BuoysCoords = new Array();
	function load() {
		if (GBrowserIsCompatible()) {
			var map = new GMap2(document.getElementById("map"));
			map.setCenter(new GLatLng(18.27, -66), 8);
			map.addControl(new GMenuMapTypeControl());
			map.addControl(new GOverviewMapControl());
			map.addControl(new GSmallMapControl());
			map.addControl(new GScaleControl());
			map.addMapType(G_PHYSICAL_MAP);
        	map.setMapType(G_PHYSICAL_MAP);
			map.enableScrollWheelZoom();
			//Put Buoy Markers

			//
			GDownloadUrl("http://caricoos.org/app/wavestreams/streamsXML.php5", function(data) {
				var xml = GXml.parse(data);
				var buoys = xml.documentElement.getElementsByTagName("stream");
				for (var i = 0; i < buoys.length; i++) {
					var id = buoys[i].getAttribute("stream_id");
					var type = buoys[i].getAttribute("type");
					var name = buoys[i].getAttribute("name");
					var linked = buoys[i].getAttribute("linkedModel");
					var point = new GLatLng(parseFloat(buoys[i].getAttribute("lat")),
					parseFloat(buoys[i].getAttribute("lon")));
					var lat = buoys[i].getAttribute("lat");
					var lon = buoys[i].getAttribute("lon");
					if (type != "model") {
						if (linked == "true") {
							var marker = createNode(id, name, buoys[i].getAttribute("lat"), buoys[i].getAttribute("lon"), point);
							/*GEvent.addListener(marker, "click", function() {
								fillInfoPanel (name, lat, lon);
								loadGraph(id);
							});*/
							var opt3 = { color: 'red', weight: 2, length: 5, padding: 15 };
							var mt = new MarkerTracker(marker, map, opt3);
							map.addOverlay(marker);
						} else {
							var marker = createNode(id, name, buoys[i].getAttribute("lat"), buoys[i].getAttribute("lon"), point);
							var opt3 = { color: 'red', weight: 2, length: 5, padding: 15 };
							var mt = new MarkerTracker(marker, map, opt3);

							map.addOverlay(marker);
						}
					}
				}
			});
			//Buoy selection list
			GEvent.addDomListener(document.buoysFrm.buoysList, 'change', function() {
				var choiceIndex = document.getElementById('buoysList').selectedIndex;
				var choice = document.getElementById('buoysList')[choiceIndex].value;
				if (choice != "") {
					map.setCenter(BuoysCoords[choice]);
				}
			});
	
		}
	}
	
	//
	function createNode(id, name, lat, lon, point) {
/*	var waveIcon = new GIcon();
	waveIcon.image = "http://caricoos.org/app/icons/wave.png";
	waveIcon.iconSize = new GSize(34,28);
	waveIcon.shadow = "http://caricoos.org/app/icons/waveshadow.png";
	waveIcon.shadowSize = new GSize(50,20);
	//22,43
	waveIcon.iconAnchor = new GPoint(1,24);
	//24,24
	waveIcon.infoWindowAnchor = new GPoint(30,2);
	waveIcon.transparent ="http://caricoos.org/app/icons/wavetrans.png";
	waveIcon.imageMap=[0,0, 34,0, 34,28, 0,28];*/
		// Create our "tiny" marker icon
var waveIcon = new GIcon();
waveIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
waveIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
waveIcon.iconSize = new GSize(12, 20);
waveIcon.shadowSize = new GSize(22, 20);
waveIcon.iconAnchor = new GPoint(6, 20);
waveIcon.infoWindowAnchor = new GPoint(5, 1);
// Set up our GMarkerOptions object literal
markerOptions = { icon:waveIcon };
	
	
		var marker = new GMarker(point, waveIcon);
		GEvent.addListener(marker, "click", function() {
			//fillInfoPanel (name, lat, lon);
			//loadGraph(id);
			graphsansajax(id);
			uglypanel(name,lat,lon);
			anchor_scroll();
		});
		
		return marker;
	
	}
	
	function graphsansajax(streamID){
		var imageURL10 = 'http://caricoos.org/app/wavestreams/graph.php5?streamID='+streamID+'&type=10m';
		var imageURL4 = 'http://caricoos.org/app/wavestreams/graph.php5?streamID='+streamID+'&type=4m';
		//var loader = new ImageLoader(imageURL);
		document.getElementById("graph10").src=imageURL10
		document.getElementById("graph4").src=imageURL4
		}

	function uglypanel(name,lat,lon) { 
		var x=document.getElementById('infoPanel');
		x.innerHTML = "<b>Name:</b> "+name+"<br /><b>Lat:</b> "+lat+"<br /><b>Lon:</b> "+lon+"<br />";
	}
	
	function loadGraph(streamID) {
		//alert('appear');
		Element.show('Loader');//.show();//, { duration:1, from:0.0, to:1.0 });
		Element.hide('Graph', { duration:1, from:1.0, to:0.0 });

		var imageURL = 'http://caricoos.org/app/wavestreams/graph.php5?streamID='+streamID;
		var loader = new ImageLoader(imageURL);
		//set event handler
		loader.loadEvent = function(url, image){
			//action to perform when the image is loaded
			while($('Graph').firstChild) {
				$('Graph').removeChild($('Graph').firstChild);
			}
			//alert('hide');
			$('Graph').appendChild(image);
			Element.hide('Loader');//, { duration:1, from:1.0, to:0.0 });
			Element.show('Graph');//.show();//, { duration:1, from:0.0, to:1.0 });
		}
		loader.load();
	}
	function fillInfoPanel (name, lat, lon) {
		$('infoPanel').innerHTML = "<b>Name:</b> "+name+"<br /><b>Lat:</b> "+lat+"<br /><b>Lon:</b> "+lon+"<br />";
	
	}
	// 
	function populateBuoyList() {
						var point_0 = new GLatLng(19.0000, -66.5000);
				BuoysCoords.push(point_0);
								var point_1 = new GLatLng(17.5000, -66.5000);
				BuoysCoords.push(point_1);
								var point_2 = new GLatLng(18.4425, -66.1190);
				BuoysCoords.push(point_2);
								var point_3 = new GLatLng(18.3734, -64.7024);
				BuoysCoords.push(point_3);
								var point_4 = new GLatLng(18.5032, -66.1222);
				BuoysCoords.push(point_4);
								var point_5 = new GLatLng(18.5098, -66.7087);
				BuoysCoords.push(point_5);
								var point_6 = new GLatLng(18.4801, -66.7113);
				BuoysCoords.push(point_6);
								var point_7 = new GLatLng(17.7738, -64.9191);
				BuoysCoords.push(point_7);
								var point_8 = new GLatLng(18.2735, -64.9361);
				BuoysCoords.push(point_8);
								var point_9 = new GLatLng(18.0081, -64.7117);
				BuoysCoords.push(point_9);
								var point_10 = new GLatLng(17.8956, -66.6317);
				BuoysCoords.push(point_10);
								var point_11 = new GLatLng(17.8166, -66.5908);
				BuoysCoords.push(point_11);
								var point_12 = new GLatLng(17.9162, -67.0757);
				BuoysCoords.push(point_12);
								var point_13 = new GLatLng(17.8468, -67.0723);
				BuoysCoords.push(point_13);
								var point_14 = new GLatLng(20.9900, -66.5000);
				BuoysCoords.push(point_14);
								var point_15 = new GLatLng(15.0100, -67.5000);
				BuoysCoords.push(point_15);
								var point_16 = new GLatLng(17.7690, -64.7230);
				BuoysCoords.push(point_16);
								var point_17 = new GLatLng(14.6000, -56.2010);
				BuoysCoords.push(point_17);
								var point_18 = new GLatLng(17.8600, -66.5240);
				BuoysCoords.push(point_18);
								var point_19 = new GLatLng(18.3632, -67.2762);
				BuoysCoords.push(point_19);
								var point_20 = new GLatLng(17.8600, -66.5240);
				BuoysCoords.push(point_20);
								var point_21 = new GLatLng(18.3621, -67.2733);
				BuoysCoords.push(point_21);
								var point_22 = new GLatLng(18.3491, -67.2703);
				BuoysCoords.push(point_22);
								var point_23 = new GLatLng(18.5600, -67.3000);
				BuoysCoords.push(point_23);
								var point_24 = new GLatLng(18.3600, -67.4200);
				BuoysCoords.push(point_24);
								var point_25 = new GLatLng(18.2200, -67.3300);
				BuoysCoords.push(point_25);
								var point_26 = new GLatLng(18.1000, -67.3500);
				BuoysCoords.push(point_26);
						document.buoysFrm.buoysList.options[0] = new Option("--Observational Buoys--", "");
					document.buoysFrm.buoysList.options[1] = new Option("41043 Observation", "14");
						document.buoysFrm.buoysList.options[2] = new Option("42059 Observation", "15");
						document.buoysFrm.buoysList.options[3] = new Option("41140 Observation", "16");
						document.buoysFrm.buoysList.options[4] = new Option("East of Martinique", "17");
						document.buoysFrm.buoysList.options[5] = new Option("42085 Observation", "18");
						document.buoysFrm.buoysList.options[6] = new Option("42085 South of Caja de Muertos", "20");
					document.buoysFrm.buoysList.options[7] = new Option("--Virtual Buoys--", "");
					document.buoysFrm.buoysList.options[8] = new Option("PR North", "0");
						document.buoysFrm.buoysList.options[9] = new Option("PR South", "1");
						document.buoysFrm.buoysList.options[10] = new Option("San Juan Bay", "2");
						document.buoysFrm.buoysList.options[11] = new Option("S. Francis Drake Channel", "3");
						document.buoysFrm.buoysList.options[12] = new Option("San Juan Offshore", "4");
						document.buoysFrm.buoysList.options[13] = new Option("Arecibo offshore", "5");
						document.buoysFrm.buoysList.options[14] = new Option("Arecibo Bay", "6");
						document.buoysFrm.buoysList.options[15] = new Option("St. Croix", "7");
						document.buoysFrm.buoysList.options[16] = new Option("St. Thomas", "8");
						document.buoysFrm.buoysList.options[17] = new Option("St. Thomas to St. Croix route", "9");
						document.buoysFrm.buoysList.options[18] = new Option("Ponce Inshore", "10");
						document.buoysFrm.buoysList.options[19] = new Option("Ponce Offshore", "11");
						document.buoysFrm.buoysList.options[20] = new Option("Parguera Inshore", "12");
						document.buoysFrm.buoysList.options[21] = new Option("Parguera Offshore", "13");
						document.buoysFrm.buoysList.options[22] = new Option("Domes", "19");
						document.buoysFrm.buoysList.options[23] = new Option("El Faro", "21");
						document.buoysFrm.buoysList.options[24] = new Option("Tres Palmas", "22");
						document.buoysFrm.buoysList.options[25] = new Option("Aguadilla", "23");
						document.buoysFrm.buoysList.options[26] = new Option("Rincon Offshore", "24");
						document.buoysFrm.buoysList.options[27] = new Option("Mayaguez", "25");
						document.buoysFrm.buoysList.options[28] = new Option("Cabo Rojo", "26");
				}