var mapUserDataUrl = "/include/map/get_user_data.php";

var map;
var storedPosition;
var currentDate;
var userMarker;
var userData;
var baseIcon;

var shareColorControl;

var markerType = {NORMAL:0, USER:1};
var hasPickedColor = false;

var archiveScroll;
var totalArchive;
var currentArchiveX = 0;
var currentArchiveId;
var archiveSlideIntervalId;

function initMap() {	
	if (GBrowserIsCompatible()) {
		map = new GMap2($("map_main_area"));
		map.setCenter(new GLatLng(0, 0), 2);
		
		//some setting
		map.enableDoubleClickZoom();
		map.enableContinuousZoom();
		map.enableScrollWheelZoom();
		
		//controls
		map.addControl(new GLargeMapControl());
		
		//custom control
		shareColorControl = new ShareColorControl()
		map.addControl(shareColorControl);
		
		defineBaseIcon();
			
		userMarker = null;
		userData = null;
		
		clearTimeout(archiveSlideIntervalId);
		
		GDownloadUrl(mapUserDataUrl, map_readUserDataComplete);
	}
}

function changeMarker(date,i) {
	if (date == null) {
		GDownloadUrl(mapUserDataUrl, map_readUserDataComplete);
	}
	else {
		if (currentDate != date) {
			GDownloadUrl(mapUserDataUrl + "?date=" + date, map_readUserDataComplete);
		}
	}
}

function defineBaseIcon() {
	baseIcon = new GIcon();
	baseIcon.shadow = "/images/map/marker_shadow.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 0);
	baseIcon.infoShadowAnchor = new GPoint(18, 23);
}

function map_readUserDataComplete(data,responseCode) {
	var xml = GXml.parse(data);
	var users = xml.documentElement.getElementsByTagName("user");
	
	//clear map
	map.clearOverlays();
	
	for (var i = 0; i < users.length; i++) {
	
		var dataObj = {
			name: 		GXml.value(users[i].childNodes[1]),
			message: 	GXml.value(users[i].childNodes[2]),
			color:		GXml.value(users[i].childNodes[3]),
			lat: 		parseFloat(GXml.value(users[i].childNodes[4])),
			lng:		parseFloat(GXml.value(users[i].childNodes[5])),
			logDate:	GXml.value(users[i].childNodes[6])
		};
		
		map.addOverlay(createMarker(dataObj));
		
		if (i == 0) {
			var offset = 10;
			if (dataObj.lat > 0) {
				offset *= -1;
			}
			
			map.panTo(new GLatLng(dataObj.lat + offset, dataObj.lng));
			
			currentDate = dataObj.logDate;
		}
	}
}

function createMarker(dataObj) {
	var icon = new GIcon(baseIcon);  
	icon.image = "/images/map/marker1.png";
	
	var marker = new GMarker(new GLatLng(dataObj.lat, dataObj.lng),icon);
	
	GEvent.addListener(marker, "click", function() {
		onMarkerClicked(marker,markerType.NORMAL,dataObj);
	});
	
	GEvent.addListener(marker, "infowindowclose", function() {
		//map.returnToSavedPosition();
		map.panTo(storedPosition);
	});
	
	return marker;
}

function onMarkerClicked(marker,type,dataObj) {
	//store the current map position
	//map.savePosition();
	storedPosition = map.getCenter();
	
	var html = "";
	
	html += '<div id="infoWindowDiv">';
	html += '<table cellspacing="0" cellpadding="0" align="center">';
	html += 	'<tr>';
	html += 		'<td align="center">';
	html += 			'<img src="/images/ajax-loader.gif"/><br/>';
	html += 			'<img src="/images/spacer.gif" width="1" height="10"/><br/>';
	html += 			'<span class="loader_copy">Please wait...</span>';
	html += 		'</td>';
	html += 	'</tr>';
	html += '</table>';
	html += '</div>';

	marker.openInfoWindowHtml(html,{maxWidth: 230});
	
	//ajax call to update the div content
	var options = {
		method: 'get',
		evalScripts: true,
		update: 'infoWindowDiv',
		onComplete: function() {
			onInfoWindowContentLoaded(marker);
		}
	};
					   
	if (type == markerType.NORMAL) {
		var queryStr = Object.toQueryString(dataObj);
		var ajax = new Ajax("/elements/map/info_window_view.php?" + queryStr, options).request();
	}
	else if (type == markerType.USER) {	
		var ajax = new Ajax("/elements/map/info_window_submit.php", options).request();
	}
}

function onInfoWindowContentLoaded(marker) {
	$('infoWindowContentDiv').style.visibility = "visible";
	
	var effect = new Fx.Elements($('infoWindowDiv'),{
		duration: 1000,
		onComplete: function() {
			if ($('infoWindowDiv') != null) {
				$('infoWindowDiv').style.visibility = "visible";
			}
		}});
	
	effect.start({
		'0' : {
			'opacity': [0,1]
		}
	});
	
	marker.openInfoWindow($('infoWindowDiv'),{maxWidth: 230});
	
	//update location on the form
	if (document.submitColorForm != null) {
		document.submitColorForm.elements['lat'].value = userMarker.getPoint().lat();
		document.submitColorForm.elements['lng'].value  = userMarker.getPoint().lng();
	}
}

function onShareButtonClicked() {
	map.closeInfoWindow();
		
	if (userMarker == null) {
		var icon = new GIcon(baseIcon);  
		icon.image = "/images/map/marker2.png";
		
		userMarker = new GMarker(map.getCenter(),{
			icon: icon,
			draggable: true,
			title: "Drag me to the place you live.\nClick to submit your color"});
		
		GEvent.addListener(userMarker, "click", function() {
			onMarkerClicked(userMarker,markerType.USER);
		});
		
		GEvent.addListener(userMarker, "dragend", function() { 
			onMarkerDropped(userMarker);
		});
		
		GEvent.addListener(userMarker, "infowindowclose", function() {
			//map.returnToSavedPosition();
			map.panTo(storedPosition);
		});
		
		map.addOverlay(userMarker);
		
		//init the bubble to show some hints to the user
		var html = "";
	
		html += '<table cellspacing="0" cellpadding="0" align="center">';
		html += 	'<tr>';
		html += 		'<td align="left" class="map_copy">';
		html += 			'<li><strong>Drag me</strong> to the place you live.</li><br>';
		html += 			'<li><strong>Click me</strong> to share your color.</li>';
		html += 		'</td>';
		html += 	'</tr>';
		html += '</table>';

		userMarker.openInfoWindowHtml(html,{maxWidth: 230});
		
		storedPosition = map.getCenter();
	}
	else {
		userMarker.setPoint(map.getCenter());
		
		onMarkerClicked(userMarker,markerType.USER);
	}
}

function onMarkerDropped(userMarker) {
	map.closeInfoWindow();
	//onMarkerClicked(userMarker,markerType.USER);
}

//define new control here
function ShareColorControl() {}

ShareColorControl.prototype = new GControl();

ShareColorControl.prototype.initialize = function(map) {
	var container = document.createElement("div");  
	container.innerHTML = '<span id="shareImage" class="shareImage" style="width:129px;height:66px"><img src="/images/map/map_control_share.png" width="129" height="66" border="0" alt=""></span>';
	container.style.cursor = "pointer";
	
	GEvent.addDomListener(container, "click", onShareButtonClicked);
	GEvent.addDomListener(container, "mouseover", function() {
		document.getElementById('shareImage').className = 'shareImageOver';
	});
	GEvent.addDomListener(container, "mouseout", function() {
		document.getElementById('shareImage').className = 'shareImage';
	});
	
	map.getContainer().appendChild(container);  
	return container;
}

ShareColorControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}

//functions for the submission form
function initSubmitForm() {
	$('submitColorForm').addEvent('submit', function(e) {
		new Event(e).stop();
		
		if (!hasPickedColor) {
			alert("Please pick a color first");
		}
		else {
			if (confirm("Are you sure?")) {
				$('formDiv').style.display = "none";
				$('formLoader').style.display = "";
				userMarker.openInfoWindow($('infoWindowDiv'),{maxWidth: 230});
				
				var form = document.submitColorForm;
				if (form.elements['message'].onfocus != "") {
					form.elements['message'].value = "No message.";
				}
				if (form.elements['name'].onfocus != "") {
					form.elements['name'].value = "No name";
				}
				
				userData = {
					color:		form.elements['color'].value,
					message:	form.elements['message'].value,
					name:		form.elements['name'].value,
					lat:		form.elements['lat'].value,
					lng:		form.elements['lng'].value,
					logDate:	''};
					
				this.send({
					onComplete: function(response) {
						var xml = GXml.parse(response);
						var log_date = xml.documentElement.getElementsByTagName("log_date");
						
						userData.logDate = GXml.value(log_date[0].childNodes[0]);
						
						var html = "";
						
						html += '<table cellspacing="0" cellpadding="0" align="center">';
						html += 	'<tr>';
						html += 		'<td align="center">';
						html += 			'<span class="loader_copy">Data submitted!<br><br>Thanks for sharing!</span>';
						html += 		'</td>';
						html += 	'</tr>';
						html += '</table>';
						
						$('infoWindowDiv').innerHTML = html;
						
						onDataSubmitted();
					}
				});
			}
		}
	});
}

function onDataSubmitted() {
	userMarker.disableDragging();
			
	GEvent.clearInstanceListeners(userMarker);
	
	GEvent.addListener(userMarker, "click", function() {
		onMarkerClicked(userMarker,markerType.NORMAL,userData);
	});
	
	GEvent.addListener(userMarker, "infowindowclose", function() {
		//map.returnToSavedPosition();
		map.panTo(storedPosition);
	});
	
	map.removeControl(shareColorControl);
	
	setTimeout('onMarkerClicked(userMarker,markerType.NORMAL,userData)',1500);
	
	//reset to today
	//changeMarker();
	
	//update today's statistics
	var options = {
		method: 'get',
		evalScripts: true,
		update: 'map_today_statistic',
		onComplete: refreshArchive
	};
	
	var ajax = new Ajax("/elements/map/info_today_statistic.php", options).request();
}

function refreshArchive() {
	var options = {
		method: 'get',
		evalScripts: true,
		update: 'map_archive'
	};
	
	var ajax = new Ajax("/elements/map/archive.php", options).request();
	
	var options2 = {
				method: 'get',
				evalScripts: true,
				update: 'map_info_chart'
			};
		
	var ajax2 = new Ajax("/elements/map/info_chart.php", options2).request();
}

//other functions
function updateTableColor(rgb) {
	document.getElementById('colorTd').style.background = rgb.substring(0,7);
	document.submitColorForm.elements['color'].value = rgb;
	
	hasPickedColor = true;
}

function removeElement(element) {
	var d = document.getElementById(element);
	d.parentNode.removeChild(d);
}

function onElementFocus(element) {
	element.value = "";
	element.onfocus = "";
}

function textCounter(field, maxlimit) {
	if (field.value.length > maxlimit)
		field.value = field.value.substring(0, maxlimit);
}

//for archive
function initArchive() {
	archiveScroll = new Fx.Scroll('archive_wrapper', {
		wait: false,
		duration: 500,
		offset: {'x': 0, 'y': 0},
		transition: Fx.Transitions.Quad.easeInOut
	});
	
	currentArchiveId = 1;
	$("archive1_td").style.background = "#FFCC33";
}

function setTotalArchive(num) {
	totalArchive = num;
}

function switchArchiveStart(delta) {
	slideArchive(delta * 85);
}

function switchArchiveEnd() {
	clearTimeout(archiveSlideIntervalId);
}

function slideArchive(delta) {
	setCurrentArchiveX(currentArchiveX + delta);
	
	archiveSlideIntervalId = setTimeout('slideArchive(' + delta + ')',500);
}

function setCurrentArchiveX(value) {
	currentArchiveX = value;
	
	var maxRange = (totalArchive - 8) * 85;
	
	if (currentArchiveX < 0)
		currentArchiveX = 0;
	else if (currentArchiveX > maxRange)
		currentArchiveX = maxRange;
		
	archiveScroll.scrollTo(currentArchiveX,0);
}

function onArchiveClicked(id) {
	setCurrentArchiveX((id - 1) * 85);
	
	for (var i=1;i<=totalArchive;i++) {
		$("archive" + i + "_td").style.background = "";
	}
	
	currentArchiveId = id;
	$("archive" + id + "_td").style.background = "#FFCC33";
}

function onMouseOverArchiveTd(id) {
	if (id != currentArchiveId) {
		$("archive" + id + "_td").style.background = "#FFFF99";
	}
}

function onMouseOutArchiveTd(id) {
	if (id != currentArchiveId) {
		$("archive" + id + "_td").style.background = "";
	}
}