/********************************************************************************************/
//	Alexandre Vasseur - Javascript spécial pour lacroix
/********************************************************************************************/
$(window).ready(function(){
//	on choppe la largeur de la page
	var widthPage = $(window).width();
	var height_page = 0;

//	on choisi la bonne classe au body en fonction de la largeur de l'écran du gars
	if(widthPage >= 1900)
		var bodyClass = 'width1600';
	else if(widthPage >= 1600)
		var bodyClass = 'width1600';
	else if(widthPage >= 1400)
		var bodyClass = 'width1400';
	else if(widthPage >= 1200)
		var bodyClass = 'width1200';	
	else if(widthPage >= 1000)
		var bodyClass = 'width1000';
	else // classe par défaut
		var bodyClass = 'width1000';

//	on assigne la classe au body
	$('body').addClass(bodyClass);
	
//	alert('inside');
/********************************************************************************************/
//	on attends que toutes les images de la page soient chargées	
/********************************************************************************************/
	$('#left_column').waitForImages(function() {	
	/********************************************************************************************/
	//	Cas de la li qui decale pour faire afficher la pagination sur la deuxième ligne en bas à droite
	/********************************************************************************************/
		if($('#li_product_decaleur').length) {
		//	on affecte au li product decaleur la height du précédent
			$('#li_product_decaleur').css('height', $('#li_product_decaleur').prev().height());
		}	
			
	//	on définit la taille de la page	
		$('#page').css('height', $(window).height()+'px');

	//	hauteur de notre page
		height_page = $('#page').height();	


	/********************************************************************************************/
	//	si on a un system de vertical slider type page cms
	/********************************************************************************************/
		if($('.verticalslider').length) {
		//	on spécifie la taille du viewport
		//	alert(height_page);
		//	$('.verticalslider .viewport').css('height',height_page+'px');

		//	toute les images doivent avoir la même taille
			var taillepremiereimage = $('.verticalslider .viewport .overview img:first').height();
		
		//	pas de taille = pas d'image, alors on check la taille de la video
			if(taillepremiereimage == null) {
				var taillepremiereimage = $('.verticalslider .viewport .overview iframe:first').height();
			}
			
			$('.verticalslider .viewport').css('height',taillepremiereimage+'px');

		//	on assigne également la meme taille pour les li video sinon ça décalle le caroussel
			$('.verticalslider .viewport .overview li.thumbnail_video').css('height', taillepremiereimage+'px');
			$('.verticalslider .viewport .overview li.thumbnail_video').css('lineHeight', taillepremiereimage+'px');

		//	slider partie de gauche = caroussel vertical
			var oSlider = $('#oSlider');
			oSlider.tinycarousel({ axis: 'y', start : 1, interval : true, intervaltime:6000});

		//	on affiche l'image en opacité 0 à 1 pour tous les autres navigateurs que IE
		//	car lui seul bug et affiche des pixels blanc pourri, meme avec filter css opacity
			if(!$.browser.msie)
				$('.verticalslider .viewport .overview li').animate({opacity: 1}, {duration: 500});
				
		//	on arrête le caroussel au click sur une fleche, plus d'autoplay
		/*	$('#next_button').click(function(){
				alert('on stop');
				oSlider.tinycarousel_stop();
				return false;
			});
			
			$('#prev_button').click(function(){
				alert('on stop');
				oSlider.tinycarousel_stop();
				return false;
			});
		*/	
		}


	/********************************************************************************************/
	//	si on a un system de vertical slider sur la home
	/********************************************************************************************/
		if($('.verticalsliderhome').length) {
		//	on spécifie la taille du viewport	
		//	alert(height_page);
		//	$('.verticalslider .viewport').css('height',height_page+'px');

		//	toute les images doivent avoir la même taille
			var taillepremiereimage = $('.verticalsliderhome .viewport .overview img:first').height();
			$('.verticalsliderhome .viewport').css('height',taillepremiereimage+'px');

		//	on assigne également la meme taille pour les li video sinon ça décalle le caroussel
			$('.verticalsliderhome .viewport .overview li.thumbnail_video').css('height', taillepremiereimage+'px');
			$('.verticalsliderhome .viewport .overview li.thumbnail_video').css('lineHeight', taillepremiereimage+'px');

		//	slider partie de gauche = caroussel vertical
			$('.verticalsliderhome').tinycarousel({ axis: 'y', start : 1, interval : true, controls : false});

		//	on affiche l'image en opacité 0 à 1 pour tous les autres navigateurs que IE
		//	car lui seul bug et affiche des pixels blanc pourri, meme avec filter css opacity
			if(!$.browser.msie)
				$('.verticalsliderhome .viewport .overview li').animate({opacity: 1}, {duration: 500});
		}


	//	taille de la div left column
		var height_left_column = $('#left_column').height();

	//	calcul de la différence entre la partie de gauche et la hauteur de la page.
		var difference = (height_left_column - height_page) / 2;

	//	alert('taille bloc gauche ' + height_left_column+' - taille page : '+height_page+' - difference par 2 : ' + difference);

	//	on replace notre bloc gauche en conséquence
		if(difference > 0) // si la taille du bloc gauche est supérieur à la hauteur de la page on recalle l'image plus haut
			$('#left_column').css('marginTop', '-'+difference+'px');
		else // sinon on la centre
			$('#left_column').css('marginTop', difference.toString().substr(1,50)+'px');


	/********************************************************************************************/
	//	Si on a slider vertical de type page cms, on replace les next previous
	/********************************************************************************************/
		if($('.verticalslider').length) {
			if(difference > 0) {
				/*
				$('.verticalslider .prev').css('top',  function(index, style) {
					return parseInt(style, 10) + difference;
				});
				$('.verticalslider .next').css('top',  function(index, style) {
				  return parseInt(style, 10) + difference;
				});
				*/
				$('#navigation_buttons').css('top',  function(index, style) {
					return parseInt(style, 10) + difference;
				});
			}
		}
		
		//si on a un système de mosaique on recentre la partie gauche
		if($('#mosaique').length) {
		/********************************************************************************************/
		//	on gere le mouse hover sur les liens de la mosaiques pour faire afficher 
		//  la grande image, entièrement sur la partie de gauche
		/********************************************************************************************/
		/********************************************************************************************/
		//	mouse in
		/********************************************************************************************/
			$('#mosaique a').hoverIntent(function(event) {


			//	on isole l'id de la div à faire afficher
				var idtoshow = $(event.target).attr('id').substring(7);

			//	on isole la source pour chopper l'image qui a le meme nom mais dans le dossier large
				var src = $(event.target).attr('src').substring(7);
				var reg=new RegExp("[/]+", "g");
				array_src = src.split(reg);	

			//	passer le bloc gauche en opacité = 0
				$('#left_column').stop(true,true).delay(1).css({'opacity':'0'})
                                /* test zou _ en enlevant le hoverIntent par hover */
                                //$('#left_column').stop(true,true).delay(400).css({'opacity':'1'})
                                //.queue(function() {
				//	$('#left_column').css({'opacity':'0'});
                                //        $(this).dequeue();
				//})
                                /* Fin test zou */

			//	quand on a fait ça, on cache les images de la mosaique
			//	puis on charge l'image en background
			//	puis on déqueue pour passer à la suite
				.queue(function() {
					$('#mosaique a img').css({'opacity' : '0'});
                                        //  alert(array_src[(array_src.length-1)]+" + reso = "+bodyClass);
                                        //on ava decoupe la chaine pour place l'extension de la resolution sur l'image
                                        decoupe_image= array_src[(array_src.length-1)].split('.');
                                        nom_imgae_reso_adapte=decoupe_image[0]+"-"+bodyClass+"."+decoupe_image[1];

                                        //alert(nom_imgae_reso_adapte);
					//$('#left_column').css({'background-image': 'url('+baseDir+'themes/lacroix/img/left_column/' + array_src[(array_src.length-2)] + '/large/'+ array_src[(array_src.length-1)]+ ')', 'background-position': 'center center', 'background-repeat': 'no-repeat'});
                                        //alert(baseDir+'themes/lacroix/img/left_column/' + array_src[(array_src.length-2)] + '/large/'+ nom_imgae_reso_adapte);
                                        $('#left_column').css({'background-image': 'url('+baseDir+'themes/lacroix/img/left_column/' + array_src[(array_src.length-2)] + '/large/'+ nom_imgae_reso_adapte+ ')', 'background-position': 'center center', 'background-repeat': 'no-repeat'});
					$(this).dequeue();
				})
			//	enfin on repasse l'opacité du bloc gauche à 100%
			//	et on déqueue pour finir l'anim et passer au reste
				.queue(function() {
					$('#left_column').animate({'opacity':'1'}, 300);
					$(this).dequeue();
				});

			

		/********************************************************************************************/
		//	mouse out
		/********************************************************************************************/
			}, function(event) {			
			//	rien
			});
			
			
		
		/********************************************************************************************/
		//	hover partie gauche pour l'affichage de la partie de droite
		/********************************************************************************************/
			$('#mosaique a').hover(function(event) {
			//	on isole l'id de la div à faire afficher
				var idtoshow = $(event.target).attr('id').substring(7);
			
			//	on affiche le contenu dans la partie droite du site préalablement chargé
				$('#content_'+idtoshow).removeClass('hidden');
			}, function(event) {
			//	on isole l'id de la div à faire afficher
				var idtohide = $(event.target).attr('id').substring(7);

			//	on cache le contenu dans la partie droite du site
				$('#content_'+idtohide).addClass('hidden');
			})


		/********************************************************************************************/
		//	quand on repasse sur la div center column
		/********************************************************************************************/
			$('#center_column').hover(function(event) {
			//	on réaffiche les image de la mosaique
				$('#mosaique a img').stop(true,true).animate({ opacity: 1 }, 300)
			//	quand on a fait ça, on vire l'image de fond de la left column
			//	puis on charge l'image en background
			//	puis on déqueue pour passer à la suite
				.queue(function() {
					$('#left_column').css("background", "none");
					$(this).dequeue();
				});
			}, function(event) {
			//	console.log('do nothing');
			});
		}
		
	/********************************************************************************************/
	//	GALLERIE DE PRODUITS
	/********************************************************************************************/
	//	si on a un système de mosaique on recentre la partie gauche
		if($('#gallerie_product').length) {
		/********************************************************************************************/
		//	on gere le mouse hover sur les liens de la mosaiques pour faire afficher 
		//  la grande image, entièrement sur la partie de gauche
		/********************************************************************************************/
		/********************************************************************************************/
		//	mouse in
		/********************************************************************************************/
			$('#gallerie_product a').hover(function(event) {
			//	on isole l'id de la div à faire afficher
				var idtoshow = $(event.target).attr('id').substring(7);

			//	on isole la source pour chopper l'image qui a le meme nom mais dans le dossier large
				var src = $(event.target).attr('src').substring(7);
				var reg=new RegExp("[/]+", "g");
				array_src = src.split(reg);	

			//	on met en opacité tous les liens à 0.6 // sauf celui qu'on survole
				$('#gallerie_product a img:not(#'+$(event.target).attr('id')+')').stop(true,true).animate({ opacity: '0.2'}, 300);

			//	on affiche le contenu dans la partie droite du site préalablement chargé
				$('#content_'+idtoshow).removeClass('hidden');

		/********************************************************************************************/
		//	mouse out
		/********************************************************************************************/
			}, function(event) {			
			//	on isole l'id de la div à faire afficher
				var idtohide = $(event.target).attr('id').substring(7);

			//	on remet l'opacité aux élements 	
				$('#gallerie_product a img').stop(true,true).animate({ opacity:1}, 300);	

			//	on cache le contenu dans la partie droite du site
				$('#content_'+idtohide).addClass('hidden');
			});
		}
	
	});
	


/*	
//	on choppe la largeur de la page
	var widthPage = $(window).width();
	
//	on choisi la bonne classe au body en fonction de la largeur de l'écran du gars
	if(widthPage >= 1900)
		var bodyClass = 'width1900';
	else if(widthPage >= 1600)
		var bodyClass = 'width1600';
	else if(widthPage >= 1400)
		var bodyClass = 'width1400';
	else if(widthPage >= 1200)
		var bodyClass = 'width1200';	
	else if(widthPage >= 1000)
		var bodyClass = 'width1000';
	else // classe par défaut
		var bodyClass = 'width1000';
		
//	on assigne la classe au body
	$('body').addClass(bodyClass);
*/

	
/********************************************************************************************/
//	Si on a un click sur un lien zoom image
/********************************************************************************************/
	$('a.zoom').click(function(event) {		
	//	récuperer la href du lien
		var href = this.href;

	//	on affiche la div flash 
		$('#zoomFlash').css('zIndex', '2');

    //On envoi cette valeur à actionscript  // ne marche pas si $('#zoomflash') illogique
		document.getElementById('zoomFlash').openFlash(href);
		
	//	annuler l'action du href sur le liens
		event.stopPropagation();
		return false;
	});
	

/********************************************************************************************/
//	Rollover sur le logo = affichage du menu
/********************************************************************************************/
	$('#header_logo').hover(function(event) {
	//	on fait arriver le menu
		$('#rightColumn').stop().animate({right: '0px'}, {duration:700, easing:'easeInOutExpo'});
		$('#rightColumn').addClass('opened');
		
	
	}, function(event) {
	//	on fait arriver le menu
		if( !$('rightColumn').delay(100).hasClass('hoveringMenu')) {
			$('#rightColumn').stop().animate({right: '-1000px'}, {duration:700, easing:'easeInOutExpo'});
			$('#rightColumn').removeClass('opened');
			$('#rightColumn').removeClass('hoveringMenu');
		}
	});
	
	
	$('#rightColumn').hover(function(event) {
	//	on fait arriver le menu
		$('#rightColumn').addClass('hoveringMenu');
		$('#rightColumn').stop().animate({right: '0px'}, {duration:700, easing:'easeInOutExpo'});
		
	
	}, function(event) {
		$('#rightColumn').stop().animate({right: '-1000px'}, {duration:700, easing:'easeInOutExpo'});
		$('#rightColumn').removeClass('hoveringMenu');
	});

        //////////
        // Appel du menu lors du roolover sur le lien 'Menu'
        /////////////
        $('a.bouton_menu').hover(function(event) {
	//	on fait arriver le menu
		$('#rightColumn').stop().animate({right: '0px'}, {duration:700, easing:'easeInOutExpo'});
		$('#rightColumn').addClass('opened');


	}, function(event) {
	//	on fait arriver le menu
		if( !$('rightColumn').delay(100).hasClass('hoveringMenu')) {
			$('#rightColumn').stop().animate({right: '-1000px'}, {duration:700, easing:'easeInOutExpo'});
			$('#rightColumn').removeClass('opened');
			$('#rightColumn').removeClass('hoveringMenu');
		}
	});

	
	
/********************************************************************************************/
//	Scrollbar custom du site
/********************************************************************************************/
        if($('#scrollbar').length) {
	//	on défini la hauteur du block en fonction de sa position par rapport au haut de la page
	//	donc on lui dit de prendre le reste visible en hauteur et pas plus
		// Calcul de départ d'Alex //
		// var height_scrolling_zone = (height_page - ($('#scrollbar .viewport .overview').offset().top)); // 
		var height_scrolling_zone = (window.innerHeight - ($('#scrollbar .viewport .overview').offset().top)); 
		
	//	alert(height_scrolling_zone);
		$('#scrollbar .viewport').css('height',height_scrolling_zone+'px');

	//	on applique la scrollbar	
		oScroll = $('#scrollbar').tinyscrollbar({ size: 120, sizethumb : 40 });
	}
	
/********************************************************************************************/
//	Click sur caractéristiques techniques - fiche produit = deplier les caracteristiques	
/********************************************************************************************/
	/*
	if($('#features_ul').length) {
	//	par défaut ils sont ouvert, ont les cache après car le fait qu'il soit ouvert nous aide au calcul de la taille
		$('#features_ul').hide();

	//	click
		$('#technical_features').click(function(event) {
			$('#features_ul').slideToggle();

		//	annuler l'action du href sur le liens
			event.stopPropagation();
			return false;	
		})
	}
	*/
	
/********************************************************************************************/
//	bloc pagination left column
/********************************************************************************************/
	if($('div#pagination').length) {
	//	récupérer la taille hauteur et largeur d'une li
		//var height_li = $('#product_list li:first').height();
		var width_li = $('#product_list li:first').width();
                //var height_li = "";
                //alert(bodyClass);
                /**/
                //pour forcer la hauteur sur les navigateurs
                switch(bodyClass){
                    case 'width1000' : height_li = 251;
                        break;
                    case 'width1200' : height_li = 360;
                        break;
                    case 'width1400' : height_li = 421;
                        break;
                    case 'width1600' : height_li = 480;
                        break;
                }
                



                //alert("hauteur = "+height_li+" et largeur = "+width_li);
                
	//	l'assigner là où on en a besoin pour centrer
		$('div#pagination').css({height:height_li+'px', width:width_li+'px'});
		$('div#pagination ul.pagination').css({height:height_li+'px', width:width_li+'px'});
		$('li#pagination_previous a, li#pagination_previous span').css({margin:((height_li-100)/2)+'px auto'});
		$('li#pagination_next a, li#pagination_next span').css({margin:((height_li-100)/2)+'px auto'});
	}
	
/********************************************************************************************/
//	TinyTips
/********************************************************************************************/
	// zouher
        xOffset = -10;
        yOffset = 10;

        //on recupere la valeur de la langue
        var valeur_langue=$("body").attr("class");
        // alert(valeur_langue);
        tableau_chaine = valeur_langue.split(" ")
        // alert(tableau_chaine[0]);
        choix_langue=tableau_chaine[0];

        //affiche des info bulle pour les sommaires
        $("#mosaique a").hover(function(e){
            this.title = "";
            $("body").prepend("<div id='screenshot' style='width:90px; height: 90px; position:absolute; z-index: 20000;'><img src='"+baseDir+"themes/lacroix/img/pastille/pastille-mosaique-"+choix_langue+".png' border='0'></div>");
            $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");

        },function(){
                $("#screenshot").remove();
        });

        $("#mosaique a").mousemove(function(e){
            $("#screenshot")
                        .css("top",(e.pageY - xOffset ) + "px")
                        .css("left",(e.pageX + yOffset ) + "px");
        });


        //affiche des info bulle pour les produits
        $(".ajax_block_product a").hover(function(e){
            this.title = "";  
            $("body").prepend("<div id='screenshot' style='width:130px; height: 130px; position:absolute; z-index: 20000;'><img src='"+baseDir+"themes/lacroix/img/pastille/pastille-"+choix_langue+".png' border='0'></div>");
            $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        },function(){
                $("#screenshot").remove();
        });

        $(".ajax_block_product a").mousemove(function(e){
            $("#screenshot")
                        .css("top",(e.pageY - xOffset) + "px")
                        .css("left",(e.pageX + yOffset) + "px");
        });

	
});

/********************************************************************************************/
//	fermeture du zoom sur le flash
/********************************************************************************************/
function closeFlash() {
//	on affiche la div flash 
	$('#zoomFlash').css('zIndex', '-1');
}