var map;
var centerLatitude = 30.306056, centerLongitude = -97.712823, startZoom = 10;


$(document).ready(function(){
	//date selection
	$("#date_selector").change(function(){
		$("select option:selected").each(function () {
       populatePage($(this).attr('value'));
     });   
	});
	
	//add map and sidebar content...
	init();
});

function init() {
	handleResize();
	
	map = new GMap(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GScaleControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	map.addControl(new GMapTypeControl());
	
	//set page defaults
	gig_date = "date_2008_03_12" //TODO: pick dynamically based on current date
	
	populatePage(gig_date);
}

function populatePage(gig_date){
	g = eval("gigs." + gig_date);
  $('#venues').html('');

	manager = new GMarkerManager(map);	
	batch = [];
	
  for (i = 0; i < g.length; i++){
		//add to map...
		batch.push(createMarker(g[i]));
	}
	
  manager.addMarkers(batch, 10);
	manager.refresh();
	centerAndZoom(batch);
}


function createMarker(gig) {
	var latlng = new GLatLng(gig.lat, gig.lng);
//	var icon = new GIcon();
//	icon.image = 'http://uwmike.com/maps/manhattan/img/red-marker.png';
//	icon.iconSize = new GSize(32, 32);
//	icon.iconAnchor = new GPoint(16, 16);
//	icon.infoWindowAnchor = new GPoint(25, 7);

/*	opts = {
		"icon": icon,
		"clickable": true,
		"labelText": pointData.abbr,
		"labelOffset": new GSize(-16, -16)
	};*/
	
	opts = {"clickable":true}
	var marker = new GMarker(latlng, opts);
	var handler = createMarkerClickHandler(marker, gig);
	
	GEvent.addListener(marker, "click", handler);

	//add to sidebar...
	var listItem = document.createElement('li');
	listItem.innerHTML = '<a href="#">'+ gig.venue_name +'</a><span class="address">' + gig.venue_address + '</span>';
	listItem.getElementsByTagName('a')[0].onclick = handler;

	$('#venues').append(listItem);

	//$('#venues').append('<li><a href="">'+ g[i].venue_name +'</a><span class="address">' + g[i].venue_address + '</span> </li>');

	return marker;
}

function createMarkerClickHandler(marker, gig) {
	return function() {
		//remove old artists elemt from dom.
		//There can be only one...
		$('#artists').remove();
		html = '<div class="gig"><h3>' + gig.venue_name + '</h3><span class="venue_address">'+gig.venue_address+'</span><ul id="artists">';
		html += '<li class="heading"><div class="time">Time</div><div class="fn">Artist</div><div class="genre">Genre</div><div class="city">City</div></li>';
		for (i = 0; i < gig.artists.length; i++){
			html += '<li><div class="time">' + gig.artists[i].time + "</div><div class='fn'>";
			html += (gig.artists[i].mp3 != "") ? '<a href="' + gig.artists[i].mp3 +'" class="mp3" onClick="javascript:return false;"><b>'+ gig.artists[i].name + '</b></a>' : "<b>"+gig.artists[i].name+"</b>";
			html += "</div><div class='genre'>" + gig.artists[i].genre + '</div><div class="city">' + gig.artists[i].city + '</div>'
			html += "</li>";
		}
		html += '</ul></div>';
		marker.openInfoWindowHtml(html);

		//add(tracks,pos,clear,play,showstate)
		YAHOO.MediaPlayer.addTracks(document.getElementById('artists'),0,true,true);
				
		return false;
	};
}

function centerAndZoom(markers){
  bounds = new GLatLngBounds();
  for(i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].getPoint());
  }        
  sw=bounds.getSouthWest();
  ne=bounds.getNorthEast();
  center=new GLatLng((sw.lat()+ne.lat())/2,(sw.lng()+ne.lng())/2);
  zoom=map.getBoundsZoomLevel(bounds);
  map.setCenter(center,zoom);
}

function handleResize() {
	var height = windowHeight() - document.getElementById('toolbar').offsetHeight - 30;
	document.getElementById('map').style.height = height + 'px';
	venues_height = height - 100;
	document.getElementById('venues').style.height = venues_height + 'px';
}

function windowHeight() {
	// Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight)
		return self.innerHeight;
	// IE 6
	if (document.documentElement && document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
	// IE 5
	if (document.body)
		return document.body.clientHeight;
	// Just in case. 
	return 0;
}

window.onresize = handleResize;
window.onunload = GUnload;