var ShowNearby, map, panel, directions, point, addmenu, delmenu, pos, delAcUid, dragAcUid;
var newMarkers = [], latLngs = [], icons = [], acs = [], points = [], acUid = 0;
var alphabets = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y'];
var textaddmenu = "Add Destination", textdelmenu = "Delete Destination";

$(document).ready(function() {
	ShowNearby = new ShowNearby();
	$('#sidebar').append('<ul id="inputs"></ul><div id="buttons"><a href="" onclick="addinput(); return false;">Add destination</a><button onclick="getdirections(); return false;">Get Directions</button></div><div id="results"></div>');
	addinput();	addinput(); $('#acinput0').focus();
	$("#inputs").sortable({ placeholder:'placeholder', update:function(){getdirections()} });

	if (GBrowserIsCompatible()) {
		$(window).unload(function() {GUnload()});
		map = new GMap2(document.getElementById("map"));
		map.addControl(new ShowNearbyMapLogo());
		map.addControl(new GLargeMapControl3D());
		map.addControl(new GMapTypeControl());
		map.enableScrollWheelZoom();
		map.enableContinuousZoom();
  		map.setCenter(new GLatLng(1.352083,103.819836),map.getCurrentMapType().getMaximumResolution()-6);
		directions = new GDirections(map, document.getElementById("results"));
		$('#map').scrollFollow({offset:15});
		
		var x = location.href.split('from-');
		if (x[1]) var y = x[1].split('-to-'); 
		if (y) for (var i=0; i<y.length; i++) {
			acs[i] ? acs[i].populate(decodeURIComponent(y[i]).replace(/-/g, ' ')) : addinput(decodeURIComponent(y[i]).replace(/-/g, ' '));
		}
		
		GEvent.addListener(directions,"addoverlay",function(i) {
			map.savePosition();
			loading.style.visibility = "hidden";
		});
		GEvent.addListener(directions,"load",function(i) { 
			if (points.length > 2) $('#results').html('<div class="total">Total distance: '+directions.getDistance().html+' (about '+directions.getDuration().html+')</div>');
		});
		GEvent.addListener(directions,"error",function(i) {
			if (points.length > 1) $('#results').html('<div class="error">Sorry, we are unable to determine the directions between the specified destinations.</div>'); 
			loading.style.visibility = "hidden";
		});
		
		loading = document.createElement('div');
		loading .id = 'loading';
		loading .innerHTML = '<img src="http://api.shownearby.com/images/loading.gif" alt="" style="float:left;" />Loading...';
		map.getContainer().appendChild(loading);
		var lpos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(map.getSize().width/2-50,map.getSize().height-28));  
		loading.style.visibility = "hidden";
		lpos.apply(loading);
		
		// add waypoint menu
		addmenu = document.createElement('div');
		addmenu.id = 'addmenu';
		addmenu.className = 'context';
		addmenu.innerHTML='<a onclick="addrgc(point); hidemenus();">'+textaddmenu+'</a>';
		map.getContainer().appendChild(addmenu);
		pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(20,20));  
		pos.apply(addmenu);
		
		// del waypoint menu
		delmenu = document.createElement('div');
		delmenu.id = 'delmenu';
		delmenu.className = 'context';
		delmenu.innerHTML='<a onclick="removeinput(delAcUid); hidemenus();">'+textdelmenu+'</a>';
		map.getContainer().appendChild(delmenu);
		pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(20,20)); 
		pos.apply(delmenu);
		
		// display context menu
		GEvent.addListener(map, "singlerightclick", function(px, src, overlay) {
			hidemenus(); 
			menu = overlay ? delmenu : addmenu;
			if (menu == addmenu) {
				point = map.fromContainerPixelToLatLng(px);
			}
			else if (menu == delmenu) {
				$("#inputs").children('li').each(function(i) {
					if (directions.getMarker(i)) {
						if (directions.getMarker(i).getPoint() == overlay.getPoint()) 
							delAcUid = this.id.substr(2); 
					}
				});
			}
			if (px.x > map.getSize().width - menu.clientWidth - 10) {px.x = map.getSize().width - menu.clientWidth - 10}
			if (px.y > map.getSize().height - menu.clientHeight - 10) {px.y = map.getSize().height - menu.clientHeight - 10}
			pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(px.x,px.y));  
			pos.apply(menu);
			menu.style.visibility = "visible";
		});
		
		GEvent.addListener(directions, "addoverlay", function() {
			// Remove the old markers
			for (var i=0; i<newMarkers.length; i++) {
				map.removeOverlay(newMarkers[i]);
			}
			// Loop through the markers and create draggable copies
			for (var i=0; i<=directions.getNumRoutes(); i++) {
				var originalMarker = directions.getMarker(i);
				latLngs[i] = originalMarker.getLatLng();
				icons[i] = originalMarker.getIcon();
				// Find acUid of the current Marker
				$("#inputs").children("li").each(function(k) {
					if (i==k) dragAcUid = this.id.substr(2);
				});
				// Add dragAcUid to title to find it easier  
				newMarkers[i] = new GMarker(latLngs[i], {icon:icons[i], draggable:true});
				newMarkers[i].acUid = dragAcUid;
				// Add cloned marker to map 
				map.addOverlay(newMarkers[i]);
				// Create event handler for cloned marker
				GEvent.addListener(newMarkers[i], "dragend", function(draglatlon) { 
					dragAcUid = this.acUid; 
					dragrgc(draglatlon); 
				});
				// Maintain "Click" event for the clone
				copyClick(newMarkers[i],originalMarker);	
				// Get rid of the original marker
				map.removeOverlay(originalMarker);
			}
			// Copy the "click" event
			function copyClick(newMarker,oldMarker){
				GEvent.addListener(newMarker, 'click', function() {
					GEvent.trigger(oldMarker, 'click');
				});
			}									  
		});
		GEvent.addListener(map, "click", function() { hidemenus() });
	}
});

function addrgc(point) {
	loading.style.visibility = "visible";
	ShowNearby.loadPOIs('?q='+point.lat()+','+point.lng()+'&callback=addrgccb');
}
function addrgccb(response) {
	data = JSON.parse(response);
	if (!response||data.status != 200) {alert("SnbSearchStatusCode: "+data.status)} else {
		var done = 0;
		$("#inputs").children('li').each( function(i)  {
			var acUid = this.id.substr(2);
			if ($.trim(document.getElementById("acinput"+acUid).value).length == 0) {
				if (!done) acs[acUid].populate(data.pois[0].name);
				done = 1;
			}
		});
		if (!done) addinput(data.pois[0].name);
	}
}

function dragrgc(point) {
	loading.style.visibility = "visible";
	ShowNearby.loadPOIs('?q='+point.lat()+','+point.lng()+'&callback=dragrgccb');
}
function dragrgccb(response) {
	data = JSON.parse(response);
	if (!response||data.status != 200) {alert("SnbSearchStatusCode: "+data.status)} else {
		acs[dragAcUid].populate(data.pois[0].name);
	}
}

function hidemenus() {
	addmenu.style.visibility = "hidden";
	delmenu.style.visibility = "hidden";
}

function onselectcallback(acDiv) {
	//if only 1 location is on map create marker and bubble
	//map.setCenter(new GLatLng(acDiv.results[acDiv.selected].latitude, acDiv.results[acDiv.selected].longitude));
	getdirections();
}

function getdirections() {
	loading.style.visibility = "visible";
	$('#inputs .search').each(function(i) {
		$(this).val($.trim($(this).val()));
		if ($(this).val().length == 0) {
			$(this).closest('li').remove();
			if ($('#inputs').children('li').length < 2) addinput();
		}
	});
	refreshinputs();
	points = [];
	$('#inputs .results').each(function(i) {
		if (typeof(this.selected) != 'undefined')
			points[i] = this.results[this.selected].latitude+', '+this.results[this.selected].longitude;
	});
	$('#results').html('');
	points.length < 2 ? clearmap() : directions.loadFromWaypoints(points);
}

function clearmap() {
	map.clearOverlays(); 
	directions.clear();
	loading.style.visibility = "hidden";
}

function addinput(txt) {
	if ($('#inputs').children('li').length < 25) {
		$('#inputs').append('<li id="li'+acUid+'"><table><tr><td width="20"><span class="azcircle"></span></td><td><div class="searchdiv"><input id="acinput'+acUid+'" name="acinput'+acUid+'" value="" class="search" /><div id="acdiv'+acUid+'" class="results"></div></div></td><td width="20"><span class="delete" style="visibility:hidden" onclick="removeinput('+acUid+'); return false;">x</span></td></tr></table></li>');
		acs[acUid] = new ShowNearby.autocomplete('acs['+acUid+']', document.getElementById('acinput'+acUid), document.getElementById('acdiv'+acUid));
		txt ? acs[acUid].populate(txt) : acs[acUid].focus(); acUid++; refreshinputs();
	}
}

function removeinput(acUid) {
	var nodeToRemove = document.getElementById("li"+acUid);
    nodeToRemove.parentNode.removeChild(nodeToRemove);
	if ($('#inputs').children('li').length < 2) addinput();
	getdirections();
}

function refreshinputs() {
	$('#inputs .azcircle').each(function(i) {
		this.className = 'azcircle '+alphabets[i];
		this.innerHTML = alphabets[i];
	});
	$('#inputs .delete').each(function(i) {
		this.style.visibility = $('#inputs .delete').length > 2 ? 'visible' : 'hidden';
	});
}