/*
 * add an overlay with a crosshair that can be used to choose a location
 *
 * version 0.3 2010-12-09
 *
 * changes since 0.2:
 * - compatible with ugmo 3
 * - crosshair not aligned to parent of map div but to map div itself
 *
 * TODO: make path of crosshair bitmap relative... 
 *
 */
UGMO.prototype.addCrosshair = function(callback){
	
	var ugmo_							= this;
	
	// text for interface
	this.latLonLabelText				= this.latLonLabelText == undefined ? 'Latitude / Longitude: ' : this.latLonLabelText;
	
	var crosshair 						= document.createElement('div');
	crosshair.style.backgroundImage		= "url(http://www.carteo.nl/apps/ugmo3/plugins/crosshair/crosshair.png)";
	crosshair.style.height				= '35px';
	crosshair.style.width				= '35px';
	crosshair.style.marginLeft			= '-17px';
	crosshair.style.marginTop			= '-34px';
	crosshair.style.position			= 'absolute';
	// position crosshair at center of map
	crosshair.style.top					= '50%';
	crosshair.style.left				= '50%';
	crosshair.style.zIndex				= '300';
	crosshair.style.backgroundPosition	= 'center center';
	crosshair.style.backgroundRepeat	= 'no-repeat';
	crosshair.setAttribute('id', 'crosshairImage');
	
	$(crosshair).click(function(){
		alert('Versleep de kaart totdat het kruisje op de juiste plek staat om een andere locatie te kiezen! (klik dus niet op het kruisje, maar juist op de kaart)');
	});
	

	var latLonDiv						= document.createElement('div');
	latLonDiv.setAttribute('id', ugmo_.divName + '_latlon');

	var latLonLabel						= document.createElement('label');
	latLonLabel.setAttribute('for', 'latLonBox');
	latLonLabel.innerHTML				= this.latLonLabelText;

	var latLonBox						= document.createElement('input');
	latLonBox.type						= 'text';
	latLonBox.id						= 'latLonBox';
	
	latLonDiv.appendChild(latLonLabel);
	latLonDiv.appendChild(latLonBox);
	
	// get parent element of map
	var mapDiv							= ugmo_.mapdiv;
	var parentDiv	 					= mapDiv.parentNode;
	
	// and append this stuff to it
	mapDiv.appendChild(crosshair);
	//parentDiv.appendChild(latLonDiv);
	
	if(typeof(ugmo_.map) !== 'undefined'){
		
		// set lat/lon to initial coordinates
		var center = ugmo_.map.getCenter();
		
		google.maps.event.addListener(ugmo_.map, 'dragend', function(){									  
			var center = ugmo_.map.getCenter();
			
			if(document.getElementById('latLonBox')){
				document.getElementById('latLonBox').value = center.lat() + ', ' + center.lng();
			}
			// if there are elements that have id 'lat' and 'lon' and 'zoom', update their values too
			if(document.getElementById('lat')){
				document.getElementById('lat').value = center.lat();
			}
			if(document.getElementById('lon')){
				document.getElementById('lon').value = center.lng();
			}
			if(document.getElementById('zoom')){
				document.getElementById('zoom').value = ugmo_.map.getZoom();
			}
			
			if(callback !== undefined && callback){
				callback();
			}
			
		});
	}else{
			throw('The google map object hasn\'t been initialised. Make sure you call the addCrosshair function AFTER calling ugmo.show()!');
	}
	
}