/*
 * Require jQuery JavaScript Library v1.3.2+
 * http://jquery.com/
 *
 * Copyright © 2011 MBA Multimédia (www.mba-multimedia.com)
 * 
 *
 */
 
var rootApi, api;

$(function(){
	if(ie7) {
		//img.load semble bugger sous IE7
		$("#carrousel").fadeIn(500, function(){ initCarrousel(); });
	} else {
		// Attendre le chargement de la première image du carrousel pour lancer le carrousel
		$("#carrousel .item:first img").load(function(){ 
			$("#carrousel").fadeIn(500, function(){ initCarrousel(); });
		});
		// Attendre le chargement du masque pour lancer le carrousel
		/*$("#masque .img img").load(function(){ 
			$("#carrousel").fadeIn(500, function(){ initCarrousel(); });
		});*/		
	}
	$("#occasions .scrollable").scrollable({circular:true, mousewheel:true}).autoscroll({interval:3000}).navigator({navi:"#occasions-navi", naviItem:"a", history:false});
	$("#occasions .scrollable .item").hover(cadreOn,cadreOff).click(cadreClick);
});

function initCarrousel () {
	rootApi = $("#carrousel .scrollable").scrollable({circular:true, mousewheel:true}).autoscroll({interval:5000});
		
	// Api "maître"
	api = rootApi.data("scrollable"); 
		
	// Activer le défilement par le clavier de l'api maître (ne semble pas fonctionner sous FF)
	api.getConf().keyboard = true;
		
	// Aperçu par défaut
	$("#apercu_"+(api.getSize()-1)).addClass("apercu-left");
	$("#apercu_1").addClass("apercu-right");
		
	// Affichage des aperçus au survol des boutons suivant/précédent
	//$("#carrousel .prev").click(function(){ $(this).css({width:18}); }).hover (function(){ $(this).css({width:200}); $(".apercu-left").stop().animate({width:151}, 100); }, function(){ $(this).css({width:18}); $(".apercu-left").stop().animate({width:0}, 100); });
	//$("#carrousel .next").click(function(){ $(this).css({width:18}); }).hover (function(){ $(this).css({width:200}); $(".apercu-right").stop().animate({width:151}, 100); }, function(){ $(this).css({width:18}); $(".apercu-right").stop().animate({width:0}, 100); });
	
	$("#carrousel .browse a").click(function(){ 
		$(this).css({width:18}); 
	}).hover (
		function(){ $(this).css({width:151}); $(".apercu-left, .apercu-right").stop().animate({width:151}, 100); }, 
		function(){ $(this).css({width:18}); $(".apercu-left, .apercu-right").stop().animate({width:0}, 100); 
	});
	
	// Cacher le masque principal
	$("#masque .bg").delay(100).animate({opacity:0}, 400, function(){
		$("#masque").css({display:"none"});
		$("#masque .bg").css({opacity:.7});
	});
		
	// Action avant de changer de panneau sur l'api maître
	api.onBeforeSeek = function() {
		// Afficher le masque principal
		$("#masque").css({display:"block",opacity:1});
		
		// Cacher le masque sur l'item courant avant de le déplacer
		api.getItems().eq(api.getIndex()).find(".masque").css({opacity:0});

		// Raz des aperçus
		$(".apercu-left").removeAttr("style").removeClass("apercu-left");
		$(".apercu-right").removeAttr("style").removeClass("apercu-right");
	}
		
	// Action au changement de panneau de l'api maître
	api.onSeek = function() {
		// Id aperçu de gauche
		var nLeft = api.getIndex()-1;
		if (nLeft<0) nLeft = api.getSize()-1;
		
		// Id aperçu de droite
		var nRight = api.getIndex()+1;
		if (nRight>api.getSize()-1) nRight = 0;
		
		// Placement des aperçus
		$("#apercu_"+nLeft).addClass("apercu-left");
		$("#apercu_"+nRight).addClass("apercu-right");
		
		// Le masque de chaque item
		api.getItems().find(".masque").css({opacity:1});
		
		// Cacher le masque principal
		$("#masque").delay(100).animate({opacity:0}, 400, function(){
			$("#masque").css({display:"none"});
		});
		
		
	}
}