/**
 * @author tchu
 */
var map;
var pidx;
var notice;
var address;
var garages;
var markers;
var destination;
var lat1 = 41.89060144786383;
var lat2 = 41.89060144786383;
var lng1 = -87.62367010116577;
var lng2 = -87.62367010116577;
var mapCenter;
var addrMarker;
var garageListPos;

function load() {
	initJS();
	initMap();
}

function initJS() {
	var time_a = new Array(48);
	time_a[0]="00:00";
	time_a[1]="00:30";
	time_a[2]="01:00";
	time_a[3]="01:30";
	time_a[4]="02:00";
	time_a[5]="02:30";
	time_a[6]="03:00";
	time_a[7]="03:30";
	time_a[8]="04:00";
	time_a[9]="04:30";
	time_a[10]="05:00";
	time_a[11]="05:30";
	time_a[12]="06:00";
	time_a[13]="06:30";
	time_a[14]="07:00";
	time_a[15]="07:30";
	time_a[16]="08:00";
	time_a[17]="08:30";
	time_a[18]="09:00";
	time_a[19]="09:30";
	time_a[20]="10:00";
	time_a[21]="10:30";
	time_a[22]="11:00";
	time_a[23]="11:30";
	time_a[24]="12:00";
	time_a[25]="12:30";
	time_a[26]="13:00";
	time_a[27]="13:30";
	time_a[28]="14:00";
	time_a[29]="14:30";
	time_a[30]="15:00";
	time_a[31]="15:30";
	time_a[32]="16:00";
	time_a[33]="16:30";
	time_a[34]="17:00";
	time_a[35]="17:30";
	time_a[36]="18:00";
	time_a[37]="18:30";
	time_a[38]="19:00";
	time_a[39]="19:30";
	time_a[40]="20:00";
	time_a[41]="20:30";
	time_a[42]="21:00";
	time_a[43]="21:30";
	time_a[44]="22:00";
	time_a[45]="22:30";
	time_a[46]="23:00";
	time_a[47]="23:30";

	markers = new Array();
	defaultZoom = 16;
	notice = document.getElementById('notice')
	lat = window.location.href.toQueryParams()['lat'];
	lng = window.location.href.toQueryParams()['lng'];
	dis = window.location.href.toQueryParams()['dis'];

	var dtform = $('addr_search_form');
	var faddress = dtform['pat_address'];
	var fday = dtform['day'];
	var fent = dtform['arrive'];
	var fdep = dtform['depart'];

	address = window.location.href.toQueryParams()['q'];
	var qd = window.location.href.toQueryParams()['qd'];
	var qe = window.location.href.toQueryParams()['qe'];
	var qp = window.location.href.toQueryParams()['qp'];

	if (isset(qd)) {
		if(qd == 8) {
			$(fday).selectedIndex = 0;
		} else {
			$(fday).selectedIndex = (qd - 1);
		}
	} else {
		$(fday).selectedIndex = new Date().getDay();
	}

	$(faddress).value = isset(address) ? address.gsub('[+]',' ') : '';
	$(fent).selectedIndex = isset(qe) ? qe : 16;
	$(fdep).selectedIndex = isset(qp) ? qp : 36;
	
	day = $F(fday);
	ent = time_a[$F(fent)];
	dep = time_a[$F(fdep)];
}

function initMap() {
	garageListPos = $('g_list').positionedOffset();
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());
		geocoder = new GClientGeocoder();

		defaultCenter = new GLatLng(41.89060144786383,-87.62367010116577);
		map.setCenter(defaultCenter, defaultZoom);
 
		baseIcon = new GIcon();
		baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
		baseIcon.iconSize = new GSize(20, 34);
		baseIcon.shadowSize = new GSize(37, 34);
		baseIcon.iconAnchor = new GPoint(9, 34);
		baseIcon.infoWindowAnchor = new GPoint(9, 2);
		baseIcon.infoShadowAnchor = new GPoint(18, 25);
		
		arrowIcon = new GIcon();
		arrowIcon.image = '/images/gp/greenarrow.png';
		arrowIcon.shadow = '/images/gp/arrowshadow.png';
		arrowIcon.transparent = '/images/gp/arrowtransparent.png';
		arrowIcon.iconSize = new GSize(39, 34);
		arrowIcon.shadowSize = new GSize(39, 34);
		arrowIcon.iconAnchor = new GPoint(12, 34);

		if(isset(lat) && isset(lng)) {
			mapCenter = new GLatLng(lat,lng);
		}
		centerMap(address,mapCenter);
	}
}
function centerMap(address,latlng) {
	if(isset(latlng)) {
		setDestination(latlng, defaultZoom);
		getGarages();
	} else if(isset(address)) {
		if (geocoder) {
			geocoder.getLatLng(
			address,
			function(point) {
			if (point) {
				setDestination(point, defaultZoom);
				getGarages();
			} else {
				userMessage('The Address you entered could not be found. Please check your address and try again.');
				setDestination(defaultCenter, defaultZoom);
			}
			});
		}
	} else {
		$('map_wrapper').setStyle({visibility: 'hidden'});
	}
}
function setDestination(latlng, zoom) {
	$('map_wrapper').setStyle({visibility: 'visible'});
	destination = latlng;
	mapCenter = latlng;
	map.setCenter(latlng, zoom);
	var bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
	lat1 = southWest.lat();
	lat2 = northEast.lat();
	lng1 = southWest.lng();
	lng2 = northEast.lng();

	if(addrMarker == null) {
		addrMarker = new GMarker(latlng, {icon:arrowIcon, draggable:true, autoPan:true});
		GEvent.addListener(addrMarker, "dragstart", function() {
			clearStuckPopups();
		});
		GEvent.addListener(addrMarker, "dragend", function() {
			destination = this.getPoint();
			map.setCenter(destination);
			getGarages();
		});
	}
	addrMarker.setPoint(latlng);
	map.removeOverlay(addrMarker);
	map.addOverlay(addrMarker);
}
function resetMarkers() {
	for (var i = 0; i < markers.length; i++) {
		map.removeOverlay(markers[i]);
	}
	var tmp_list = $('g_list').childElements();
	for (var i = 3; i < tmp_list.length; i++) {
		tmp_list[i].remove();
	}
	pidx=null;
}
function getGarages() {
	// Do nothing here. This function is implemented within an erb page to make use of Ruby
}
function getRate(gid) {
	// Do nothing here. This function is implemented within an erb page to make use of Ruby
}
function setMarkers() {
	for (var i = 0; i < garages.length; i++) {
		var panel = '<div class="g_info_panel"><span class="g_name">';
		panel += '<a href="javascript: void(0);" onclick="onMouseClick(' + i + ', false);">' + garages[i].name + '</a></span>';
		panel += '<span class="g_address">' + garages[i].address + '</span>';
		panel += '</div>';
		panel += '<div class="g_note_panel"><span class="g_dist">' + Math.round(garages[i].distance) + ' min</span>';
		panel += '</div><div class="clear"></div>';

		markers[i] = createMarker(garages[i].point, (i%10));
		markers[i].index = i;
		markers[i].panel = panel;
		markers[i].garage = garages[i];

		getRate(i);
	}
	showGarages(0,10);
}
function createMarker(point, index) {
	var letter = String.fromCharCode("A".charCodeAt(0) + index);
	var letteredIcon = new GIcon(baseIcon);
	letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
	
	markerOptions = { icon:letteredIcon };
	var marker = new GMarker(point, markerOptions);
	return marker;
}
function showGarages(startIdx,pageSize) {
	resetMarkers();
	if(!isset(startIdx)) startIdx = 0;
	if(!isset(pageSize)) pageSize = 10;
	var endIdx = (startIdx+pageSize > garages.length) ? garages.length : startIdx+pageSize;
	var txt = (startIdx+1)+" - "+(endIdx)+" of "+garages.length+" for parking near "+address.gsub('[+]',' ');
	$('g_counter').update(txt);
	var oe = 'even';
	for (var i = startIdx; i< endIdx; i++) {
		var letter = String.fromCharCode("A".charCodeAt(0) + i%10);
		var tmp_panel = new Element('div', { 'class': 'g_panel '+oe, id: 'g_panel_'+i }).update(markers[i].panel);
		Element.insert(tmp_panel, {top: new Element('img', { 'src': 'http://www.google.com/mapfiles/marker'+letter+'.png', 'onclick' : 'onMouseClick(' + i + ', false);' })});
		Element.insert(tmp_panel, {top: new Element('div', { 'class': 'g_rate_panel', id: 'g_rate_'+i })});
		Element.insert($('g_list'), {bottom: tmp_panel});
		GEvent.addListener(markers[i], 'click', function (){
			onMouseClick(this.index, true);
		});
		map.addOverlay(markers[i]);
		var tmp_r = 'g_rate_'+i;
		if(isset(markers[i].rate)) {
			$(tmp_r).update(markers[i].rate);
		}
		if(oe == 'even') {oe = 'odd';}
		else {oe = 'even';}
	}
	txt = '';
	if(startIdx>=pageSize)
	txt = '<a href="javascript:void(0)" onclick="showGarages('+(startIdx-pageSize)+','+pageSize+')">&#171;&nbsp;Previous</a>&nbsp;';
	if(endIdx<garages.length)
	txt += '<a href="javascript:void(0)" onclick="showGarages('+endIdx+','+pageSize+')">Next&nbsp;&#187;</a>';
	var tmp_panel = new Element('div', { 'class': oe, id: 'g_pager' }).update(txt);
	Element.insert(tmp_panel, {top: new Element('div', { 'class': 'g_rate_panel' })});
	Element.insert($('g_list'), {bottom: tmp_panel});

}
function onMouseClick(idx, movePanel) {
	if (isset(pidx)) {
		var tmp_panel = 'g_panel_' + pidx;
		$(tmp_panel).setStyle({ border: '', background: '' });
	}
	tmp_panel = 'g_panel_'+idx;
	$(tmp_panel).setStyle({ border: '1px solid red', background: '#B0D4EB' });
	pidx=idx;
	if(!isset(markers[idx].info)) {
		var info = '<div class="g_infowindow"><span class="g_name">'+markers[idx].garage.name+'</span>';
		if(isset(markers[idx].garage.phone)) {
			info += '<br /><span class="g_phone">'+markers[idx].garage.phone+'</span>';
		}
		if(isset(markers[idx].garage.address)) {
			info += '<br /><span class="g_address">'+markers[idx].garage.address+'</span>';
		}
		if(isset(markers[idx].garage.type)) {
			info += '<br /><span class="g_type">'+markers[idx].garage.type+'</span>';
		}
		if(isset(markers[idx].garage.note)) {
			info += '<br /><span class="g_note">'+markers[idx].garage.note+'</span>';
		}
		info += '</div>';
		markers[idx].info = info;
	}
	markers[idx].openInfoWindowHtml(markers[idx].info);
	if(movePanel) {
		$(tmp_panel).scrollTo();
	}
	positionMap();
}
function sortByDistance(tmpdata) {
	for (var i = 0; i < (tmpdata.length - 1); i++) {
		for (var j = i + 1; j < tmpdata.length; j++) {
			if (tmpdata[j].distance < tmpdata[i].distance) {
				var dummy = tmpdata[i];
				tmpdata[i] = tmpdata[j];
				tmpdata[j] = dummy;
			}
		}
	}
	return tmpdata;
}

function clearStuckPopups() {
	map.closeInfoWindow();
}

function userMessage(msg) {
	notice.update(msg).setStyle({ background: '#f0f0f0', border: '2px solid red', padding: '7px' });
}
function isset(obj) {
	if(typeof(obj) == 'undefined') {return false;}
	else if(obj == null) {return false;}
	else if(typeof(obj) == 'string' && obj.strip().empty()) {return false;}
	return true;
}
function pat_submit() {
	var url = '/pat_submit.php';
	var target = 'response_msg';

	var params = $('submit_form').serialize(true);
	var ajax = new Ajax.Updater(
	target, url, {parameters: params});
	document.getElementById('pat_f_div').style.display="none";
	document.getElementById('response_msg').style.display="block";
}

function positionMap() {
/*
	var winY = document.viewport.getScrollOffsets()[1];
	if (winY <= garageListPos[1]) {
		$('map_wrapper').setStyle({
			top: '0px'
		});
	} else if (winY > garageListPos[1]) {
		$('map_wrapper').setStyle({
			top: (winY-garageListPos[1]+5) + 'px'
		});
	}
*/
}