$(function(){

	
	
	/********************************************************************************  
								OUVERTURE DE L'INTERFACE
	********************************************************************************/	  
	time=(4000/4)
	out=200;
	invisible=0;
	$('#photo').prepend("<div id='loader1' class='loader'></div><div id='loader2' class='loader'></div><div id='loader3' class='loader'></div><div id='loader' class='loader'></div>");

	
	$('#loader1').fadeOut(out);			
	$("#etape1").fadeIn(time, function(){
		
		couleur=$('.fondVignettes.selected IMG').attr('rel');
		gamme=$('#menu_catalogue LI.select SPAN.selected').attr('id');
		
		
		$('#cadre2 #scroll').load('_ajax/tetes_chargement.ajax.php',{gamme:gamme, couleur:couleur},function(){
			
			
			$('#loader').fadeOut(out);	
									   
			evtCadre2();	
																   
			$('#loader2').fadeOut(out);	
			
			$("#etape2").fadeIn(time, function(){
				$(".petit_detail").fadeIn(time);	
					$('#scroll').jScrollPane({showArrows:true});		   								   
			});	
		});
	});	
	
	/********************************************************************************  
								EVT CADRE 1 (couleurs)
	********************************************************************************/	
	
	$('#cadre1 .fondVignettes').bind('click', function(){
		$('#cadre1 .selected').removeClass('selected');
		$(this).addClass('selected')
		
		changeTetes(); 
	})
	
	/********************************************************************************  
								FONCTION EVT CADRE 2 (gammes)
	********************************************************************************/	
	
	$('#menu_catalogue LI ').bind('click', function(){
		
		$('#menu_catalogue LI.select').removeClass('select').addClass('no_select').children('SPAN.selected').removeClass('selected').addClass('no_selected');
		$(this).removeClass('no_select').addClass('select').children('SPAN.no_selected').removeClass('no_selected').addClass('selected');
		changeTetes(); 
	})
	
	
	function  evtCadre2(){
		
		
		$('#cadre2').find('.vignette').live('click', function(){
			$('#cadre2 ').find('.vignette DIV').removeClass('clique').addClass('hover_border');
			$('.ajout').remove()
			$(this).children('DIV:first').removeClass('hover_border').addClass('clique');
			$(this).append('<p class="ajout">'+$('#menu_catalogue LI.select SPAN.selected SPAN.prix').html() +' &euro;<input type="submit" name="ajouterPanier" id="ajouterPanier" value="Ajouter au panier" /></p>')
			$('#nom').val($(this).attr('rel'))
			$('#prix').val($('#menu_catalogue LI.select SPAN.selected SPAN.prix').html())

		}) 
	}
	
	
	/********************************************************************************  
								FONCTION RECHAGRE LA LISTE DES TETES
	********************************************************************************/	
	function changeTetes(){
		$('#cadre2 #scroll').fadeOut(500,function(){
			$('#loader').fadeIn(500, function(){
				couleur=$('.fondVignettes.selected IMG').attr('rel');
				gamme=$('#menu_catalogue LI.select SPAN.selected').attr('id');
				$('#cadre2 #scroll').load('_ajax/tetes_chargement.ajax.php',{gamme:gamme, couleur:couleur},function(){
					$('#loader').fadeOut(500,function(){
						$('#cadre2 #scroll').fadeIn(500, function(){
							$('#scroll').jScrollPane({showArrows:true});	
						})
					})
				})
			})
		})
		
		
	}
		/********************************************************************************  
						EVT AJOUTER AU PANIER
	********************************************************************************/	
	$('#ajouterPanier').live('click',function(){
		
		code=$('#cadre2').find('.clique').attr('id');
		
		
		$('BODY').prepend('<div id="ecran"></div>');
		$('#ecran').css('opacity',0.5).fadeIn(500, function(){
			$('#ecran').bind('click',function(){closePopup()});
			$.post('_ajax/ajout_panier.ajax.php',{ref:code},function(response){
				if(response.indexOf('true')!=-1){
					$('BODY').prepend('<div id="popup"><a class="ferme" href="javascript:closePopup()"><img src="_images/fermer.gif" alt="Fermer la fenêtre" border="0" height="13" width="13"/></a><br><br>Votre produit a bien été ajouté au panier : <br>"'+$("#nom").val()+'"<br>Prix : '+$('#prix').val()+' Euros <br><br><br><a href="panier.php">Terminer ma commande</a><br>ou<br><a href="javascript:closePopup()">Choisir une nouvelle tête</a> / <a href="creez-modele.php">Créer un Sacroche</a></div>')
					$('#popup').fadeIn(500)
					 
				}
				else {
					alert("Impossible d'ajouter le produit au panier : "+response)
					closePopup();
				}
			});		
		});
		
	})
	
	/********************************************************************************  
						EVT PANIER
	********************************************************************************/	
	function panier_animation(){
		$('#panier').one('mouseover', function(){
			 $('#panier').animate({top:'66px'}).animate({top:'36px'}).animate({top:'36px'},2000).animate({top:'53px'},500,'',function(){panier_animation()});
			 
		})
	}
	panier_animation()
	
	
	$('#panier').bind('click', function(){
		document.location.href='panier.php'
	})
	
})		





function closePopup(){
	$('#popup').fadeOut(500, function (){
		$('#ecran').fadeOut(500)
		$('#popup, #ecran').remove();
		ongletPanier()
	})	
}

function ongletPanier(){
	$.get('_ajax/etat_panier.ajax.php',null,function(infos){
		if(infos.indexOf('false')==-1){
			$('#panier').css({display:'block'})
			$('#panier').children('DIV').html(infos);
			 $('#panier').animate({top:'66px'}).animate({top:'36px'}).animate({top:'36px'},2000).animate({top:'53px'},500);
		
		}
	})
	
}