var myImageFull = new Image();
var myImageBefore = new Image();
var loaded = false;

function getWindowSize() {
	var w = 15000;
	var h = 15000;
	if( typeof( window.innerWidth ) == 'number' ) { //Non-IE
		w = window.innerWidth;
		h = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode'
		w = document.documentElement.clientWidth;
		h = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible
		w = document.body.clientWidth;
		h = document.body.clientHeight;
	}
	return {w: w, h: h};
}

function resizePicture() {
	if (loaded) {
		var width = myImageFull.width;
		var height = myImageFull.height;
		var ws = getWindowSize();

		for (var i = 100; i > 0; i -= 5) {
			var wwidth = parseInt(width * i / 100);
			var hheight = parseInt(height * i / 100);
			
			if ((wwidth < (ws.w - 60)) && (hheight < (ws.h - 175))) {
				width = wwidth;
				height = hheight;
				break ;
			}
		}

		setWidth('fullpicture', width+'px');
		setHeight('fullpicture', height+'px');

		setWidth('beforepicture', width+'px');
		setHeight('beforepicture', height+'px');

		setWidth('map', width+'px');
		setHeight('map', height+'px');

		width = width - 50;
		setWidth('details', width+"px");

	}
}

function loadSuccessfull() {
	loaded=true;
	document.getElementById('fullpicture').src=myImageFull.src;
	resizePicture();

	myImageBefore.src = getInfo("param_before");
	myImageBefore.onload = loadSuccessfull2;
	myImageBefore.onerror = loadFailure2;
}

function loadFailure() {
	document.getElementById('fullpicture').src="img/error.png";
}

function loadSuccessfull2() {
	document.getElementById('beforepicture').src=myImageBefore.src;
}

function loadFailure2() {
	document.getElementById('beforepicture').src="img/error.png";
}

function init() {
	myImageFull.src = getInfo("param_picture");
	myImageFull.onload = loadSuccessfull;
	myImageFull.onerror = loadFailure;
	setDisplay('full', 'block');
	setDisplay('process', 'none');
	setDisplay('geo', 'none');
	setDisplay('details', 'none');
}


function switchDisplay(whichLayer) {
	if (getDisplay(whichLayer) == "block") {
		setDisplay(whichLayer, "none");
	} else {
		setDisplay(whichLayer, "block");
	}
}

function menu_detail() {
	switchDisplay('details');
}

function menu_originale() {
	setDisplay('full', 'block');
	setDisplay('process', 'none');
	setDisplay('geo', 'none');
}

function menu_traitement() {
	setDisplay('full', 'none');
	setDisplay('process', 'block');
	setDisplay('geo', 'none');
}

function menu_geo() {
	setDisplay('full', 'none');
	setDisplay('process', 'none');
	setDisplay('geo', 'block');
	initMap();
}


//-------------------------------------------------


var map = null;
var tinyIcon;
var arrowIcon;
var reversegeocoder;
var infoAdded = false;

function addMapPhoto(lat1, lng1, lat2, lng2) {
	if (infoAdded) return ;
	var width = myImageFull.width;
	var height = myImageFull.height;
	for (var i = 100; i > 0; i -= 5) {
		var wwidth = parseInt(width * i / 100);
		var hheight = parseInt(height * i / 100);
		
		if ((wwidth < 300) && (hheight < 300)) {
			width = wwidth;
			height = hheight;
			break ;
		}
	}
	var html = "<img src='" + getInfo("param_picture") + "' width='" + width + "' height='" + height +"' />";


	var bounds = new GLatLngBounds();
	var from = new GLatLng(lat1, lng1);
	var to = new GLatLng(lat2, lng2);
	var polyline = new GPolyline([from, to]);
	map.addOverlay(polyline);
	arrowHead(from, to, html);
	bounds.extend(from);
	bounds.extend(to);
	map.setZoom(map.getBoundsZoomLevel(bounds) - 1);
	map.setCenter(bounds.getCenter());
	infoAdded = true;
}

function addDot(lat, lng, city) {
	var latlng = new GLatLng(lat,lng);
	var markerOptions = { icon:tinyIcon };
	var marker = new GMarker(latlng, markerOptions);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(city);
	});
	map.addOverlay(marker);
}


function initMap() {
	if (loaded == false) {switchDisplay('full'); switchDisplay('geo'); return ;}
	if (map != null) return ;
    if (!GBrowserIsCompatible()) {alert("Sorry, the Google Maps API is not compatible with this browser"); return ; }
	var baseIcon = new GIcon();
	baseIcon.iconSize=new GSize(32,32);
	baseIcon.shadowSize=new GSize(56,32);
	baseIcon.iconAnchor=new GPoint(16,32);
	baseIcon.infoWindowAnchor=new GPoint(16,0);
	//see http://econym.googlepages.com/geicons.htm for all avaible icons
	var iphoto = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon46.png", null, "http://maps.google.com/mapfiles/kml/pal4/icon46s.png");

	arrowIcon = new GIcon();
	arrowIcon.iconSize = new GSize(24,24);
	arrowIcon.shadowSize = new GSize(1,1);
	arrowIcon.iconAnchor = new GPoint(12,12);
	arrowIcon.infoWindowAnchor = new GPoint(0,0);


	tinyIcon = new GIcon();
	tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
	tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	tinyIcon.iconSize = new GSize(12, 20);
	tinyIcon.shadowSize = new GSize(22, 20);
	tinyIcon.iconAnchor = new GPoint(6, 20);
	tinyIcon.infoWindowAnchor = new GPoint(5, 1);



	map = new GMap2(document.getElementById("map"));
	map.addMapType(G_PHYSICAL_MAP);
	map.setCenter(new GLatLng(0,0),1);

	map.enableScrollWheelZoom();
	map.enableContinuousZoom();
	map.setMapType(G_HYBRID_MAP);

	map.addControl(new GMapTypeControl());



	//prevent page scrolling
	GEvent.addDomListener(map.getContainer(), "DOMMouseScroll",wheelevent);
	map.getContainer().onmousewheel = wheelevent; 


/*

    reversegeocoder = new GReverseGeocoder(map);
	
	GEvent.addListener(reversegeocoder, "load",
		function(placemark) {
			writeInfo(placemark.address);
		}
	);

	GEvent.addListener(reversegeocoder, "error",
		function() {
			//writeInfo("Unknown adress");
		}
	);

	reversegeocoder.reverseGeocode(to);
*/
}

function changeMapType(type) {
	map.setMapType(type);
}


function arrowHead(from, to, html) {
	var dir = bearing(from,to);
	var dir = Math.round(dir/3) * 3;
	while (dir >= 120) {dir -= 120;}
	arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";

	var marker = new GMarker(to, arrowIcon);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});

	map.addOverlay(marker);
}

var degreesPerRadian = 180.0 / Math.PI;
function bearing( from, to ) {
	var lat1 = from.latRadians();
	var lon1 = from.lngRadians();
	var lat2 = to.latRadians();
	var lon2 = to.lngRadians();
	var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
	if ( angle < 0.0 )
		angle  += Math.PI * 2.0;
	angle = angle * degreesPerRadian;
	angle = angle.toFixed(1);
	return angle;
}

function wheelevent(e) {
	if(true){
		if (!e){
			e = window.event
		}
		if (e.preventDefault){
			e.preventDefault()
		}
		e.returnValue = false;
	}
}

function writeInfo(html) {
	if (document.getElementById)
		document.getElementById('adress').innerHTML = html;
	else if (document.all)
		document.all.adress.innerHTML = html;
	else if (document.layers) {
		document.layers['adress'].document.open();
		document.layers['adress'].document.write(html);
		document.layers['adress'].document.close();
	}
}


function getInfo(whichlayer) {
	if (document.getElementById)
		return document.getElementById(whichlayer).innerHTML;
	else if (document.all)
		return document.all[whichlayer].innerHTML;
	else if (document.layers) {
		document.layers[whichlayer].document.open();
		var html = document.layers[whichlayer].document.read();
		document.layers[whichlayer].document.close();
		return html;
	}
}

window.onload = init;
window.onresize = resizePicture;