/**
 * @author Nosy Mena
 */

dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.StackContainer");
dojo.require("nosymena.widgets.VoyageRow");

var hotelsMap;
var circuitsMap;

dojo.addOnLoad(function () {

	displayPanel();
	
	dojo.query("#voyageOnglets LI").connect("onclick", onclickController);
	dojo.query("#voyageOnglets IMG").connect("onmouseover", rollover);
	dojo.query("#voyageOnglets IMG").connect("onmouseout", rollover);
	
	dojo.query("#formatOnglets LI").connect("onclick", onclickController);
	
	dojo.removeClass("voyages", "cache");
	dojo.addClass("loading", "cache");
});
        
function onclickController( evt ) {
	// Pour éviter d'avoir le cadre de sélection sur l'onglet
	evt.target.blur();

	// Le menu est une suite de LI.
	// On recherche l'index du LI sélectionné.
	var selectedNode = evt.target.parentNode;
	var selectedIndex = dojo.indexOf(dojo.query("li", selectedNode.parentNode), selectedNode);
	if (selectedIndex == -1) return;
	
	var controllerId = selectedNode.parentNode.id;
	
	// On supprime la class "active" à tous les LI et on l'ajout au LI sélectionné
	dojo.query("li", selectedNode.parentNode).removeClass("active");
	dojo.addClass(selectedNode, "active");
	
	// On switch les images des onglets
	switchImagesOnglets(controllerId, selectedIndex);
	
	// On sauvegarde le choix de l'utilisateur
	if (controllerId == "voyageOnglets") {
		var choix = new Array("hotels", "circuits");
		dojo.cookie("voyages.type", choix[selectedIndex]);
	}
	if (controllerId == "formatOnglets") {
		var choix = new Array("liste", "carte");
		dojo.cookie("voyages.format", choix[selectedIndex]);
	}
	
	// On affiche le bon panel
	displayPanel();
	
	// On ne propage pas l'évènement pour ne pas recharger la page
	evt.preventDefault();
}

function switchImagesOnglets( controllerId, selectedIndex ) {

	dojo.query("li", dojo.byId(controllerId)).forEach(function(node, index) {
		var imgNode = (dojo.query("img", node))[0];
		var imgSrc = imgNode.src;
		
		if (index == selectedIndex) {
			// On est sur l'onglet à activer
			imgSrc = imgSrc.replace("_off", "");	// en supprimant le suffixe _off, on obtient l'image "activée"
		}
		else {
			// On est sur un onglet à desactiver ou déjà desactivé
			var indexOfOff = imgSrc.lastIndexOf("_off");
			if (indexOfOff == -1) {
				// Onglet à desactiver
				var indexOfPoint = imgSrc.lastIndexOf(".");
				var extension = imgSrc.substring(indexOfPoint);
				imgSrc = imgSrc.replace(extension, "_off"+extension);
			}
		}
		imgNode.src = imgSrc;
	});	
}

function displayPanel() {
	var ongletIndex = 0;
	if (dojo.cookie("voyages.type") && (dojo.cookie("voyages.type") == "circuits")) ongletIndex = 1;
	var ongletIndexDecalage = 0;
	if (dojo.cookie("voyages.format") && (dojo.cookie("voyages.format") == "carte")) ongletIndexDecalage = 2;

	var widOnglets = dijit.byId("voyages");
	widOnglets.selectChild(widOnglets.getChildren()[ongletIndex + ongletIndexDecalage]);
	
	// On gère le cas où l'utilisateur a choisit d'afficher une carte
	if (ongletIndexDecalage) {
		// Affichage de la carte des hotels si demandé
		if ( (ongletIndex == 0) && (hotelsMap == null) ) displayHotelsMap();
	}
}


function rollover( evt ) {
	if (dojo.hasClass(evt.target.parentNode, "active")) return;
	
	var imgSrc = evt.target.src;
	
	var indexOfOff = imgSrc.lastIndexOf("_off");
	if (indexOfOff == -1) { // Onglet avec une sélection
		// On ajoute _off
		var indexOfPoint = imgSrc.lastIndexOf(".");
		var extension = imgSrc.substring(indexOfPoint);
		imgSrc = imgSrc.replace(extension, "_off"+extension);
	}
	else {
		imgSrc = imgSrc.replace("_off", "");
	}
	evt.target.src = imgSrc;
}


function displayHotelsMap() {
	// Affichage de la carte
	var latlng = new google.maps.LatLng(mapInfo.center.latitude, mapInfo.center.longitude);
	var options = {
		zoom: mapInfo.zoom,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.TERRAIN,
		mapTypeControlOptions: {
	    	style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
	  	},
		navigationControlOptions: {
    		style: google.maps.NavigationControlStyle.SMALL
  		},
		scaleControl : true,
		backgroundColor: "#FFFFFF"
	};
	hotelsMap = new google.maps.Map(dojo.byId('mapHotels'), options);
	
	var myParser = new geoXML3.parser({map: hotelsMap, zoom: false});
	myParser.parse('ressources/reperes.kml');
	
	dojo.query(".voyageRowWrapper", "hotels").forEach(function(node){
		if (node.getAttribute("lat") && node.getAttribute("long")) {
			// Connaissance des coordonnées de l'hôtel

			// Ajout du marker
			titleNode = dojo.query("A", node)[0];
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(node.getAttribute("lat"), node.getAttribute("long")),
		  		map: hotelsMap,
				title: titleNode.getAttribute("title"),
				icon: '/ressources/images/icon-hotel.png',
				zIndex: 10000000
			});
			var infowindow = new google.maps.InfoWindow({
			  content: '<div class="voyageRowWrapper">' + node.innerHTML + '</div>'
			});
			google.maps.event.addListener(marker, 'click', function() {
			  infowindow.open(hotelsMap, marker);
			});
			
		}
	});
}