var map;
var lat = 28;
var lng = -48;
var zoom = 3;
var maptype = G_NORMAL_MAP;
// skip the first character, we are not interested in the "?"
var query = location.search.substring(1);
// split at each "&" character to give a list of  "name=value"  pairs
var pairs = query.split("&");
for (var i=0; i<pairs.length; i++) {
	//alert("Item " + i + " is:" + pairs[i] + ".");
	// break each pair at the first "=" to obtain the name and value
	var pos = pairs[i].indexOf("=");
	var argname = pairs[i].substring(0,pos).toLowerCase();
	var value = pairs[i].substring(pos+1).toLowerCase();

	// process only possible argname
	if (argname == "uid") {uid = parseFloat(value);}
	if (argname == "lat") {lat = parseFloat(value);}
	if (argname == "lng") {lng = parseFloat(value);}
	if (argname == "zoom") {zoom = parseInt(value);}
	if (argname == "type") {
		if (value == "m") {maptype = G_NORMAL_MAP;}
		if (value == "k") {maptype = G_SATELLITE_MAP;}
		if (value == "h") {maptype = G_HYBRID_MAP;}
	}
}
var existingMarkers = {};
var markerGroups = { "1": [], "2": [], "3": [], "4": [], "5": [], "6": [], "7": [], "8": [], "9": [], "10": [], "11": [], "12": [] };
function changeBodyClass(from, to) {
	document.body.className = document.body.className.replace(from, to);
	return false;
}

function load() {
	//show-hide sidebar
	document.getElementById('button-sidebar-hide').onclick = function() { return changeBodyClass('sidebar-right', 'nosidebar'); };
	document.getElementById('button-sidebar-show').onclick = function() { return changeBodyClass('nosidebar', 'sidebar-right'); };
	// Begin Search function
	latitude = document.getElementById('latitude');
	longitude = document.getElementById('longitude');
	// End Search function
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(lat, lng), zoom, maptype);
	// Begin Search function
	geocoder = new GClientGeocoder();
	latitude.value = ""; 
	longitude.value = "";
	document.forms[0].submit.disabled=false;
	// End Search function
	updateMarkers();
	makeLink();
	GEvent.addListener(map,'zoomend',function() {
		updateMarkers();
		makeLink();
	});
	GEvent.addListener(map,'moveend',function() {
		updateMarkers();
		makeLink();
	});
}

function updateMarkers() {
	//create the boundary for the data
	var mapBounds = map.getBounds();
	var southWest = mapBounds.getSouthWest();
	var northEast = mapBounds.getNorthEast();
	var getVars = 'ne=' + northEast.toUrlValue()
	+ '&sw=' + southWest.toUrlValue()
	//log the URL for testing
	//GLog.writeUrl('serveryoutube.php?'+getVars);
	//retrieve the points using Ajax
	var request = GXmlHttp.create();
	request.open('GET', 'serveryoutube.php?'+getVars, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var jscript = request.responseText;
			var points;
			eval(jscript);
			//create each point from the list
			for (i in points) {
				var point = new GLatLng(points[i].lat,points[i].lng);
				//var marker = createMarker(latlng, points[i].title, points[i].channel, points[i].vid);
				//map.addOverlay(marker);
			}
			//loop though each of the points in memory and remove those that
			//aren't going to be shown
			for(k in existingMarkers) {
        		if(!mapBounds.contains(existingMarkers[k].getPoint())) {
            		map.removeOverlay(existingMarkers[k]);
            		delete existingMarkers[k];
        		}
    		}

    		//Loop through each of the points from the global points object
    		//are create markers that don't exist
    		for (k in points) {
				var latlng = new GLatLng(points[k].lat,points[k].lng);
				//skip it if the marker already exists
				//or is not in the viewable area
        		if(!existingMarkers[k] && mapBounds.contains(latlng)) {
					existingMarkers[k] = createTabbedMarker(latlng, points[k].title, points[k].channel, points[k].vid);
					var channel = points[k].channel;
					map.addOverlay(existingMarkers[k]);
       			}
    		}
		}
	}
	request.send(null);
}

// custom markers
function getCustomIcon(channel){
	var cIcon =  new GIcon();
	var mmColor = "";
	switch (channel){
		case "1": mmColor = "orange"; //Historical
			break;
		case "2": mmColor = "green"; //Outdoors
			break;
		case "3": mmColor = "brown"; //Animals
			break;
		case "4": mmColor = "blue"; //Action-Sports
			break;
		case "5": mmColor = "red"; //Snorkeling/ Scuba
			break;
		case "6": mmColor = "gray"; //Off-Road
			break;
		case "7": mmColor = "white"; //Snow
			break;
		case "8": mmColor = "yellow"; //Funny
			break;
		case "9": mmColor = "purple"; //Misc
			break;
		case "10": mmColor = "wavewatch"; //Misc
			break;
		case "11": mmColor = "caltrans"; //Misc
			break;
		break;
		case "12": mmColor = "teal"; //hotel
	}
	cIcon.image = "http://www.mytageo.com/images/icons/mm_20_" + mmColor + ".png";
	cIcon.shadow = "http://www.mytageo.com/images/icons/mm_20_shadow.png";
	cIcon.iconSize = new GSize(20, 20);
	cIcon.shadowSize = new GSize(22, 20);
	cIcon.iconAnchor = new GPoint(6, 20);
	cIcon.infoWindowAnchor = new GPoint(5, 1);
	return cIcon;
}

// Create the marker, lablels, and infowindow
function createTabbedMarker(point, title, channel, vid) {
	var marker = new GMarker(point,{icon:getCustomIcon(channel),title:title});
	//pageLoad(html);
	var html = '<b>' + title + '</b><br><iframe height="320" width="400" scrolling="NO" frameborder="0" src="page2.php?vid='+ vid +'"/>';
	var html2 = '<b>' + title + '</b><br><iframe height="320" width="400" scrolling="NO" frameborder="0" src="page3.php?vid='+ vid +'"/>';
	
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowTabsHtml([new GInfoWindowTab('Video',html), new GInfoWindowTab('options',html2)]);
		
			//zoom on click 
			//var zoom = map.getZoom();
			//if (zoom!= 10) {
			//if (zoom < 10) {zoom = 10;}
			//map.setCenter(marker.getPoint(),zoom);
			//}
		});
	markerGroups[channel].push(marker);
	return marker;
}
// toggle markers -working
function toggleGroup(channel) {
      for (var i = 0; i < markerGroups[channel].length; i++) {
        var marker = markerGroups[channel][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }
      } 
}

// search response	
function addAddressToMap(response) {
	latitude = document.getElementById('latitude');
	longitude = document.getElementById('longitude');
	query = document.forms[0].q;
	//map.clearOverlays();
	if (!response || response.Status.code != 200) {
		alert("Sorry, we were unable to geocode that address.");
	} else {
		place = response.Placemark[0];
		point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
		map.setCenter(point, 10);
		document.tags.q.value = query.value;
		var country, state, county, city, street;
		if (place.AddressDetails.Country.AdministrativeArea) {
			country = place.AddressDetails.Country.CountryNameCode;
			state = place.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName;
			if (place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea) {
				county = place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.SubAdministrativeAreaName;
				city = place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName;
				street	= place.address;
			}
		}
	}
}

// Make link to function
function makeLink() {
	var a="http://mytageo.com/mymap.php" 
	+ "?lat=" + map.getCenter().lat().toFixed(6)
	+ "&lng=" + map.getCenter().lng().toFixed(6)
	+ "&zoom=" + map.getZoom()
	+ "&type=" + map.getCurrentMapType().getUrlArg();
	document.getElementById("link").innerHTML = 'Paste link in email or IM.<br \/><input type="text" id="links" value="' +a+ '" size="100"><br \/>'; //Paste HTML to embed in website<br \/><input type="text" id="embedlinks" value="<iframe width=\"425\" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +a+ '"><\/iframe>" \/>
	
}
// showLocation() is called when you click on the Search button
// in the form.  It geocodes the address entered into the form
function showLocation() {
	var address = document.forms[0].q.value;
	geocoder.getLocations(address, addAddressToMap);
}