var mooMap = new Class ({

	map: {},

	pois: [],
	
	options: {
	},

	initialize: function() {
		if (GBrowserIsCompatible()) {
			this.map = new GMap2(document.getElementById("map"));
			this.map.setCenter(new GLatLng(43.606618, 3.883010), 15);
        		this.map.addControl(new GLargeMapControl());
        		this.map.addControl(new GMapTypeControl());
        		this.map.addControl(new GOverviewMapControl());
			this.gdir = new GDirections(this.map, document.getElementById("directions"));
			GEvent.addListener(this.gdir, "load", this.onGDirectionsLoad);
        		GEvent.addListener(this.gdir, "error", this.onGErrors);
			this.getPois();
		}
	},

	addIcon: function(obj) {
		var baseIcon = new GIcon(G_DEFAULT_ICON);
		baseIcon.iconSize = new GSize(100, 58);
		baseIcon.shadowSize = new GSize(0, 0);
		baseIcon.image = "images/"+obj.icon;
		var markerOptions = { icon: baseIcon };
		var marker = new GMarker(new GLatLng(obj.lat, obj.lon), markerOptions);
		// Popup
		var outp = '<table border="0"><tr><td>';
		if ($defined(obj.image)) {
			outp+='<div style="border:1px solid #000000"><img src="img/map/'+obj.image+'" /></div>';
		}
		outp += '</td><td valign="center">';
		if ($defined(obj.name)) {
			outp+='<b>'+obj.name+'</b><br>';
		}
		if ($defined(obj.description)) {
			outp+='<div style="font-size:11px;width:170px;">'+obj.description+'</div><br>';
		}
		if ($defined(obj.address)) {
			outp+='<div style="font-size:12px;width:170px;">'+obj.address+'</div>';
		}
		if ($defined(obj.tel)) {
			outp+='<div style="font-size:12px;width:170px;">'+obj.tel+'</div>';
		}
		if ($defined(obj.mail)) {
			outp+='<div style="font-size:12px;width:170px;"><a href="mailto:'+obj.mail+'">'+obj.mail+'</a></div>';
		}
		if ($defined(obj.web)) {
			outp+='<div style="font-size:12px;width:170px;"><a href="'+obj.web+'" target="_blank">'+obj.web+'</a></div>';
		}
		outp += '</td></tr></table>';
		GEvent.addListener(marker, "click", function() {
		  marker.openInfoWindowHtml(outp);
		});
		this.map.addOverlay(marker);
	},

	setDirections: function(from,to,locale, travelmode) {
		this.gdir.load("from: " + from + " to: " + to, { "locale": locale, travelMode: travelmode });		
	},

	getPois: function(type) {
		this.addIcon({name: 'Le Regency', description: 'Le restaurant Marocain de Montpellier', address: '4 rue Cité Benoit 34000 Montpellier', Tél: '04 67 64 42 69', mail:'contact@leregency.net', icon: 'map_icon.png', lat: 43.606618, lon: 3.883010});
	},

	onGDirectionsLoad: function(obj) {
		$('directions').set('html','');
		$('directions').setStyle('height','380px');
	},

	onGErrors: function(err) {
		$('directions').set('html', 'Veuillez pr&eacute;ciser votre recherche');
	}
});

window.addEvent("domready", function() {
	var om = new mooMap;	
	$("submitDirections").addEvent("click", function(e) {
		var mode = ($("travelmode").getSelected()[0].value == 'walk') ? G_TRAVEL_MODE_WALKING : G_TRAVEL_MODE_DRIVING ;
		om.setDirections($("fromAddress").value, $("toAddress").value, $("locale").value, mode);
	});
	$("itiSwitch").addEvent("click", function(e) {
		if ($("map").getStyle("display") == "block") {
			$("map").setStyle("display", "none");
			$("iti").setStyle("display", "block");
			$("itiSwitch").set("html", "Voir le plan");
		} else {
			$("map").setStyle("display", "block");
			$("iti").setStyle("display", "none");
			$("itiSwitch").set("html", "Calcul d'itinéraire");
		}
	});
	$("submitDirections").addEvent("click", function(e) {
			$("itiSwitch").set("html", "Voir l'itinéraire sur la carte");
	});
});

mooMap.implement(new Events, new Options);