// --------------------------------------------------------
// © 2008 - EUROCEAN - DIATEAM
// --------------------------------------------------------
// Fonction de gestion de la MAP
// --------------------------------------------------------
// Avec l'aide de :
// http://www.acko.net/files/mouse-positioning.html
// --------------------------------------------------------

// --------------------------------------------------------
// Constructeur
// --------------------------------------------------------
var mapSelection = function (defaultLat,defaultLon) {
  // ------------------------------------------
  // Noeuds HTML associés à l'Objet
  // ------------------------------------------
  this.nodes = {
          mapDiv: document.getElementById('map'),
          inputs: {
                  lat : document.getElementById('latitude'),
                  lon : document.getElementById('longitude')
          },
          buttons: {
                  submiter: document.getElementById('lonLatButton'),
                  closer: document.getElementById('lonLatClose')
          },
          marker: document.getElementById('marker')
  };
  // ------------------------------------------
  // Variables associées à l'Objet
  // ------------------------------------------
  this.degree = {lat: document.getElementById('latitude').value, lon: document.getElementById('longitude').value};	
  this.memo = this.degree;
  this.pixel = this.deg2px(this.degree);
  this.memopx = this.pixel;
  this.placeMarker();
  this.gridIndexI = 133;
  this.gridIndexJ = 103;
}

// --------------------------------------------------------
// Fonctions
// --------------------------------------------------------
mapSelection.prototype = {
	// ------------------------------------------
	// Récupere la position de la MAP, rend les coordonnees
	// ------------------------------------------
	getAbsolutePosition : function(element)
	{
		var r = { x: element.offsetLeft, y: element.offsetTop };
		if (element.offsetParent)
		{
			var tmp = this.getAbsolutePosition(element.offsetParent);
			r.x += tmp.x;
			r.y += tmp.y;
		}
		return r;
	},

	// ------------------------------------------
	// Récupere les coordonnees de la souris
	// ------------------------------------------
	getRelativeCoordinates : function(event)
	{
		var x, y;
		event = event || window.event;
		var el = event.target || event.srcElement;
	
		if (!window.opera && typeof event.offsetX != 'undefined')
		{
			// Use offset coordinates and find common offsetParent
			var pos = { x: event.offsetX, y: event.offsetY };
	
			// Send the coordinates upwards through the offsetParent chain.
			var e = el;
			while (e)
			{
				e.mouseX = pos.x;
				e.mouseY = pos.y;
				pos.x += e.offsetLeft;
				pos.y += e.offsetTop;
				e = e.offsetParent;
			}
	
			// Look for the coordinates starting from the reference element.
			var e = this.nodes.mapDiv;
			var offset = { x: 0, y: 0 }
			while (e)
			{
				if (typeof e.mouseX != 'undefined')
				{
					x = e.mouseX - offset.x;
					y = e.mouseY - offset.y;
					break;
				}
				offset.x += e.offsetLeft;
				offset.y += e.offsetTop;
				e = e.offsetParent;
			}
				
			// Reset stored coordinates
			e = el;
			while (e) {
				e.mouseX = undefined;
				e.mouseY = undefined;
				e = e.offsetParent;
			}
		}
		else
		{
			// Use absolute coordinates
			var pos = this.getAbsolutePosition(this.nodes.mapDiv);
			x = event.pageX- pos.x;
			y = event.pageY - pos.y;
		}
		// Subtract distance to middle
		
		return { lon: x, lat: y };
	},

	// ------------------------------------------
	// Teste la position de la souris par rapport à l'eau
	// ------------------------------------------
	testValues : function(mode)
	{
		switch (mode)
		{
			case 'deg':
				var c = this.deg2px(this.memo);
				this.memopx = c;
				xajax_getGridIndex(this.memopx.lon, this.memopx.lat,this.memo.lon,this.memo.lat);
			break;
			case 'px':
				this.memopx = this.memo;
				var c = this.px2deg(this.memo);
				this.memo = c;
				xajax_getGridIndex(this.memopx.lon, this.memopx.lat,this.memo.lon,this.memo.lat);
			break;
		}
	},

	// ------------------------------------------
	// Pixels to degrees
	// ------------------------------------------
	px2deg : function(c)
	{
		var d = {};
		// Longitude
		if (c.lon < 20)
		{
			d.lon = Number(160)+Number(c.lon);
		}
		else if (c.lon > 380)
		{
			d.lon = Number(c.lon)-Number(180+380);
		}
		else
		{
			d.lon = Number(c.lon)-Number(200);
		}
		// Latitude
		d.lat = Number(90)-Number(c.lat);

		return d;
	},

	// ------------------------------------------
	// Degres to pixels
	// ------------------------------------------
	deg2px : function(c)
	{
		var d = {};

		var d =
		{
			lat : Number(90)-Number(c.lat),
			lon : Number(200)+Number(c.lon)
		}

		return d;
	},

	// ------------------------------------------
	// Place le marker sur la map
	// ------------------------------------------
	placeMarker : function()
	{
		this.nodes.marker.style.top = this.pixel.lat+'px';
		this.nodes.marker.style.left = this.pixel.lon+'px';
	},

	// ------------------------------------------
	// Remplis les champs
	// ------------------------------------------
	setInputs : function()
	{
		this.nodes.inputs.lat.value = this.degree.lat;
		this.nodes.inputs.lon.value = this.degree.lon;
	},

	// ------------------------------------------
	// Récupère les valeurs des champs
	// ------------------------------------------
	getInputs : function()
	{
		var c = {lat: this.nodes.inputs.lat.value, lon: this.nodes.inputs.lon.value};
		return c;
	},

	// ------------------------------------------
	// Applique les changements
	// ------------------------------------------
	applyChanges : function()
	{
		this.pixel = this.memopx;
		this.placeMarker();
		this.degree = this.memo;
		this.setInputs();
	}
}

// --------------------------------------------------------
// Initialisations
// --------------------------------------------------------
function initMap()
{
	// -------------------------------------------
	// Crée l'objet map
	// -------------------------------------------
	map = new mapSelection(16,12);

	// -------------------------------------------
	// Gestion des events
	// -------------------------------------------
	map.nodes.mapDiv.onclick = function (event)
	{
		var e = event || window.event;
		map.memo = map.getRelativeCoordinates(event);
		map.testValues('px');
		
	}
	// ------------------------------------------
	map.nodes.buttons.submiter.onclick = function()
	{
		document.getElementById("hide").style.display = "none";
		document.getElementById("mapInfos").className = '';
		map.memo = map.getInputs();
		map.testValues('deg');
	}
	// ------------------------------------------
	map.nodes.buttons.closer.onclick = function()
	{
		document.getElementById("hide").style.display = "none";
		document.getElementById("mapInfos").className = '';
		map.degree = px2deg(this.pixel);
		this.setInputs();
	}
	// ------------------------------------------
	map.nodes.inputs.lat.onchange = function()
	{
		if(this.value>90)
			this.value = 90;
		if(this.value<-90)
			this.value = -90;
	}
	// ------------------------------------------
	map.nodes.inputs.lon.onchange = function()
	{
		if(this.value>180)
			this.value = 180;
		if(this.value<-180)
			this.value = -180;
	}
	// ------------------------------------------
	map.nodes.inputs.lat.onclick =
	map.nodes.inputs.lat.onfocus = function()
	{
		var IsIE=!!document.all;
		var el = document.getElementById("hide");
		if(IsIE)
			el.style.filter='alpha(opacity=60)';
		else
			el.style.opacity=0.6;
		document.getElementById("hide").style.display = "block";
		document.getElementById("mapInfos").className = 'z3';
	
		//-----------------------------------
		// Gestion des touches fléchées	
		if(window.event) // If = IE
		{
			this.onkeypress = function(event){
				if (event.keyCode == "40" && getHide())
				{
					if (parseFloat(map.nodes.inputs.lat.value)-1 >= -90)
						this.value = parseFloat(this.value) - 1;
				}
				else if (event.keyCode == "38" && getHide())
				{
					if (parseFloat(map.nodes.inputs.lat.value)+1 <= 90)
						this.value = parseFloat(this.value) + 1;
				}
			}
		}
		else if(!IsIE) // If != IE
		{
			this.onkeypress = function(event){
				if (event.keyCode == "40" && getHide())
				{
					if (parseFloat(this.value)-1 >= -90)
						this.value -= 1;
				}
				else if (event.keyCode == "38" && getHide())
				{
					if (parseFloat(this.value)+1 <= 90)
						this.value = parseFloat(this.value) + 1;
				}
				else if (event.keyCode == "27")
				{
					document.getElementById("hide").style.display = "none";
					document.getElementById("mapInfos").className = '';
					map.degree = map.px2deg(this.pixel);
					this.setInputs();
				}
				else if (event.keyCode == "13")
				{
					document.getElementById("hide").style.display = "none";
					document.getElementById("mapInfos").className = '';
					map.memo = map.getInputs();
					map.testValues('deg');
				}
			}
		}
	}
	// ------------------------------------------
	map.nodes.inputs.lon.onclick =
	map.nodes.inputs.lon.onfocus = function()
	{
		var IsIE=!!document.all;
		var el = document.getElementById("hide");
		if(IsIE)
			el.style.filter='alpha(opacity=60)';
		else
			el.style.opacity=0.6;
		document.getElementById("hide").style.display = "block";
		document.getElementById("mapInfos").className = 'z3';
	
		//-----------------------------------
		// Gestion des touches fléchées	
		if(window.event) // If = IE
		{
			this.onkeypress = function(event){
				if (event.keyCode == "40" && getHide())
				{
					if (parseFloat(leChamp.value)-1 >= -180)
						this.value = parseFloat(this.value) - 1;
				}
				else if (event.keyCode == "38" && getHide())
				{
					if (parseFloat(leChamp.value)+1 <= 180)
						this.value = parseFloat(this.value) + 1;
				}
			}
		}
		else if(!IsIE) // If != IE
		{
			this.onkeypress = function(event){
				if (event.keyCode == "40" && getHide())
				{
					if (parseFloat(this.value)-1 >= -180)
						this.value -= 1;
				}
				else if (event.keyCode == "38" && getHide())
				{
					if (parseFloat(this.value)+1 <= 180)
						this.value = parseFloat(this.value) + 1;
				}
				else if (event.keyCode == "27")
				{
					document.getElementById("hide").style.display = "none";
					document.getElementById("mapInfos").className = '';
					map.degree = px2deg(this.pixel);
					this.setInputs();
				}
				else if (event.keyCode == "13")
				{
					document.getElementById("hide").style.display = "none";
					document.getElementById("mapInfos").className = '';
					map.memo = map.getInputs();
					map.testValues('deg');
				}
			}
		}
	}
}

// --------------------------------------
// vérification des lat/long
function verifMap()
{
	var lat = document.form.latitude.value;
	var lon = document.form.longitude.value;
	var petiteLat = parseInt(25-(map.nodes.marker.offsetTop/2));
	var petiteLon = parseInt(25-((map.nodes.marker.offsetLeft-20)/2));
	document.getElementById("img").style.backgroundPosition = petiteLon+'px '+petiteLat+'px ';
	document.getElementById("mapResume").innerHTML = "<ul><li>Latitude : "+lat+"°</li><li>Longitude : "+lon+"°</li></ul>";
	return {latitude: lat,longitude: lon, gridIndexI: map.gridIndexI, gridIndexJ: map.gridIndexJ};
}

getHide = function()
{
	if(document.getElementById("hide").style.display == "block")
		return true;
	else
		return false;
}