var map;
var geocoder;



var scheduleRowList;
var pageUserid;
var scheduleSort = new Array;
var locationList = new Array;
var pointList = new Object();
var classList = new Array;
var zipcodeList = new Array;
var pastMarkers = new Array();
	

$(document).ready(function(){
	initScheduleTable();
	filterScheduleTable();
	geocoder = new GClientGeocoder();
});

function initScheduleTable()
{
	
	// Set up filter selectors.
	$('#locationSelect').change(function(){filterScheduleTable(); centerMap();});
	var selectedCourse = window.location.hash;
	selectedCourse = selectedCourse == '' ? '' : decodeURIComponent(selectedCourse.substring(1));
	$('#courseSelect')
		.val(selectedCourse)
		.change(function(){
			filterScheduleTable();
		});
	
	// Set up table effects.
	$('#scheduleTable tbody tr').hover(
		function() 
		{
			$(this).css('background-color', '#9BD34A');
		},
		function() 
		{
			$(this).css('background-color', '');
		}
	);
	
	// Set up ajax links.
	$('.courseName').parent('a').click(function() {
		var courseId = $(this).parents('tr').data('courseId');
		var box = $('<div>Loading description...</div>')
			.attr({'title': 'Course Description'})
			.dialog({'width': 800, 'height': 500, 'modal': true, 'overlay': {'background-color': 'black', 'opacity': .5}})
			.load('/courses/description/'+courseId);
		return false;
	});
	$('.detailsLink').click(function() {
		var liveClassId = $(this).parents('tr').data('id');
		var box = $('<div>Loading details...</div>')
			.attr({'title': 'Class Details'})
			.dialog({'width': 800, 'height': 500, 'modal': true, 'overlay': {'background-color': 'black', 'opacity': .5}})
			.load('/live_classes/register/'+liveClassId);
		return false;
	});
	
	//Initialize the map
	map = new GMap2($("#gmapCanvas").get(0));
	map.setCenter(new GLatLng(38.341656,-94.833984), 4);
	map.addControl(new GLargeMapControl());
	
	// Load the table data.
	var markers = {};
	
	$("#scheduleTable tbody tr").each(function(i) {
		$(this).data('id', $('span.liveClassId', this).html())
			.data('courseId', $('span.courseId', this).html())
			.data('courseName', $('span.courseName', this).html())
			.data('location', $('span.location', this).html());
		
		var date = $('span.date', this).html();
		var lat = $('span.lat', this).html();
		var lng = $('span.lng', this).html();
		var registerLink = $('span.registerLink', this).html();
		
		var markerText = "<tr><td>" + date + "</td><td>" + $(this).data('courseName') + "</td><td>" + registerLink + "</td></tr>";
			latlng = lat + "," + lng;
			if (typeof markers[latlng] == "undefined") {
				markers[latlng] = {};
				markers[latlng].classList = [];
				markers[latlng].location = $(this).data('location');
			}
			markers[latlng].classList.push(markerText);
	});
	addMarkers(markers);
}

function filterScheduleTable() {
	var selectedCourse = $("#courseSelect").val();
	var selectedLocation = $("#locationSelect").val();
	var counter = 0;
	$("#scheduleTable tbody tr").each(function(i) {
		var row = $(this);
		if( ( row.data('courseName') == selectedCourse || selectedCourse == "" ) 
			&& ( row.data('location') == selectedLocation || selectedLocation == "" ) ) {
			
			counter++;
			row.show();
			if (counter % 2 == 0) {
				row.addClass('alt');
			} 
			else {
				row.removeClass('alt');
			}
		} 
		else {
			row.hide();
		}
	});
}

function centerMap(){
	var selectedLocation = $("#locationSelect").val();
	if(map){
		if(selectedLocation == "") {
			map.setCenter(new GLatLng(38.341656,-94.833984), 4);
		} else {
			geocoder.getLatLng(
				selectedLocation,
				function(point) {
					if (point) {
						map.setCenter(point, 7);
					}
				}
			);
		}
	}
}

function addMarkers(markers) {
	var schoolIcon = new GIcon();
	
	//build icon
	schoolIcon.image = "/img/gIcon_main.png";
	schoolIcon.shadow = "/img/shadow-gIcon_main.png";
	schoolIcon.iconSize = new GSize(39, 39);
	schoolIcon.shadowSize = new GSize(59, 39);
	schoolIcon.iconAnchor = new GPoint(19, 40);
	schoolIcon.infoWindowAnchor = new GPoint(20, 20);
	schoolIcon.transparent = "/img/transparent-gIcon_main.png";
	schoolIcon.imageMap = [20,0, 39,20, 20,39, 0,20];
	for(var i in markers) {
		var coord = i.split(",");
		var marker = new GMarker( new GLatLng(coord[0], coord[1]), {icon:schoolIcon, title:markers[i].location} );
		var tabList = [];
		var classTable = "<table class='gInfoTab'>";
		for(var j = 0; j < markers[i].classList.length; j++){
			classTable += markers[i].classList[j];
		}
		classTable +="</table>";
		tabList[0] = new GInfoWindowTab("Classes", classTable);
		//tabList[1] = new GInfoWindowTab("Address", markers[i].address);
		marker.bindInfoWindowTabsHtml(tabList);
		map.addOverlay(marker);
	}
}