// JavaScript Document


 $(document).ready(function(){
	var secur=1;
	
	Scroll('#peinture_onglet1 .contenu','#curseur_peinture_onglet1','#bar_peinture_onglet1');
	Scroll('#peinture_onglet2 .contenu','#curseur_peinture_onglet2','#bar_peinture_onglet2');
	Scroll('#peinture_onglet3 .contenu','#curseur_peinture_onglet3','#bar_peinture_onglet3');
	Scroll('#peinture_onglet4 .contenu','#curseur_peinture_onglet4','#bar_peinture_onglet4');
						
				
			
			//initialisation
		
	$('#peinture_onglet2 .contenu').hide();
	$('#bar_peinture_onglet2').hide();
	
	$('#peinture_onglet3 .contenu').hide();
	$('#bar_peinture_onglet3').hide();
	
	$('#peinture_onglet4 .contenu').hide(); 
	$('#bar_peinture_onglet4').hide();
	
	$('#peinture_galerie2').hide();
	$('#peinture_galerie3').hide();
	$('#peinture_galerie4').hide();

	$('#peinture_galerie1').fadeIn();
	// test


	$('#peinture_onglet1').animate({width:'180px'},0); //met le contenu a 180px direct

	
	


			//création du soulignement
	$('#peinture_onglet1 h1').css('border-bottom','2px solid #bfc1c0');
	$('#peinture_onglet1 h1').css('padding-bottom','2px');
	//$('#peinture_onglet1 h1').css('margin-right','10px');
	$('#peinture_onglet1 h1').css('background-image','none');
	
	
	//Case Onglet1	
	$('#peinture_onglet1 h1').click(function() 
	{
	
	//apparition de la bonne galerie et disparition des autres
	setTimeout("$('#peinture_galerie1').fadeIn()",1000);
	
	$('#peinture_galerie2').fadeOut();
	$('#peinture_galerie3').fadeOut();
	$('#peinture_galerie4').fadeOut();
	
	quitteGrande();

	
	secur=1;
	setTimeout("$('#bar_peinture_onglet1').show()",1500);
	
	$('#peinture_onglet1').animate({width:'180px'},1000);
	setTimeout("$('#peinture_onglet1 .contenu').slideDown('slow')",1000);
	
	//Création du soulignement gris
	setTimeout("$('#peinture_onglet1 h1').css('border-bottom','2px solid #bfc1c0')",200);
	setTimeout("$('#peinture_onglet1 h1').css('padding-bottom','2px')",200);
	//supression de la fléche de bienvenue
	$('#peinture_onglet1 h1').css('background-image','none');
	
	//supression du scroll des autres onglets
	$('#bar_peinture_onglet2').fadeOut();
	$('#bar_peinture_onglet3').fadeOut();
	$('#bar_peinture_onglet4').fadeOut();

	
	//diminution des autres onglets
	$('#peinture_onglet2 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet2').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet2 h1').css('background-image',"url('./image/fleche.png')");
	setTimeout("$('#peinture_onglet2 h1').css('background-position','120px 15px')",1000);
	$('#peinture_onglet2 h1').css('border-bottom','0px');
	$('#peinture_onglet2 h1').css('padding-bottom','0px');

	
	$('#peinture_onglet3 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet3').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet3 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet3 h1').css('border-bottom','0px');
	$('#peinture_onglet3 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet3 h1').css('background-position','120px 15px')",1000);
	
	$('#peinture_onglet4 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet4').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet4 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet4 h1').css('border-bottom','0px');
	$('#peinture_onglet4 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet4 h1').css('background-position','120px 15px')",1000);
	
	//création des fleches des autres onglets
	$('#peinture_onglet2 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet2 h1').css('background-position','120px 15px');
	
	$('#peinture_onglet3 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet3 h1').css('background-position','120px 15px');

	$('#peinture_onglet4 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet4 h1').css('background-position','120px 15px');
	});	
						
						
	//Case Onglet 2					
						
	$('#peinture_onglet2 h1').click(function() 
	{
	
	quitteGrande();

	
	secur=2;
	setTimeout("$('#bar_peinture_onglet2').show()",1500);
	
	$('#peinture_onglet2').animate({width:'180px'},1000);
	setTimeout("$('#peinture_onglet2 .contenu').slideDown('slow')",1000);
	
	//apparition de la bonne galerie et disparition des autres
	setTimeout("$('#peinture_galerie2').fadeIn()",1000);
	
	$('#peinture_galerie1').fadeOut();
	$('#peinture_galerie3').fadeOut();
	$('#peinture_galerie4').fadeOut();
	
	//Création du soulignement gris
	setTimeout("$('#peinture_onglet2 h1').css('border-bottom','2px solid #bfc1c0')",200);
	setTimeout("$('#peinture_onglet2 h1').css('padding-bottom','2px')",200);
	//supression de la fléche de bienvenue
	$('#peinture_onglet2 h1').css('background-image','none');
	
	//supression du scroll des autres onglets
	$('#bar_peinture_onglet1').fadeOut();
	$('#bar_peinture_onglet3').fadeOut();
	$('#bar_peinture_onglet4').fadeOut();

	
	//diminution des autres onglets
	$('#peinture_onglet1 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet1').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet1 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet1 h1').css('border-bottom','0px');
	$('#peinture_onglet1 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet1 h1').css('background-position','120px 15px')",1000);
	
	$('#peinture_onglet3 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet3').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet3 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet3 h1').css('border-bottom','0px');
	$('#peinture_onglet3 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet3 h1').css('background-position','120px 15px')",1000);
	
	$('#peinture_onglet4 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet4').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet4 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet4 h1').css('border-bottom','0px');
	$('#peinture_onglet4 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet4 h1').css('background-position','120px 15px')",1000);
	
	//création des fleches des autres onglets
	$('#peinture_onglet1 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet1 h1').css('background-position','120px 15px');
	
	$('#peinture_onglet3 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet3 h1').css('background-position','120px 15px');

	$('#peinture_onglet4 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet4 h1').css('background-position','120px 15px');
	});
	
	//Case Onglet 3					
						
	$('#peinture_onglet3 h1').click(function() 
	{
	
	quitteGrande();
	
	secur=3;
	setTimeout("$('#bar_peinture_onglet3').show()",1500);
	
	$('#peinture_onglet3').animate({width:'180px'},1000);
	setTimeout("$('#peinture_onglet3 .contenu').slideDown('slow')",1000);
	
		//apparition de la bonne galerie et disparition des autres
	setTimeout("$('#peinture_galerie3').fadeIn()",1000);
	
	$('#peinture_galerie2').fadeOut();
	$('#peinture_galerie1').fadeOut();
	$('#peinture_galerie4').fadeOut();
	
	//Création du soulignement gris
	setTimeout("$('#peinture_onglet3 h1').css('border-bottom','2px solid #bfc1c0')",200);
	setTimeout("$('#peinture_onglet3 h1').css('padding-bottom','2px')",200);
	//supression de la fléche de bienvenue
	$('#peinture_onglet3 h1').css('background-image','none');
	
	//supression du scroll des autres onglets
	$('#bar_peinture_onglet1').fadeOut();
	$('#bar_peinture_onglet2').fadeOut();
	$('#bar_peinture_onglet4').fadeOut();

	
	//diminution des autres onglets
	$('#peinture_onglet1 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet1').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet1 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet1 h1').css('border-bottom','0px');
	$('#peinture_onglet1 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet1 h1').css('background-position','120px 15px')",1000);
	
	$('#peinture_onglet2 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet2').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet2 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet2 h1').css('border-bottom','0px');
	$('#peinture_onglet2 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet2 h1').css('background-position','120px 15px')",1000);
	
	$('#peinture_onglet4 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet4').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet4 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet4 h1').css('border-bottom','0px');
	$('#peinture_onglet4 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet4 h1').css('background-position','120px 15px')",1000);
	
	//création des fleches des autres onglets
	$('#peinture_onglet1 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet1 h1').css('background-position','120px 15px');
	
	$('#peinture_onglet2 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet2 h1').css('background-position','120px 15px');

	$('#peinture_onglet4 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet4 h1').css('background-position','120px 15px');
	});

	//Case Onglet 4					
						
	$('#peinture_onglet4 h1').click(function() 
	{
	
	quitteGrande();
	
	secur=4;
	setTimeout("$('#bar_peinture_onglet4').show()",1500);
	
	$('#peinture_onglet4').animate({width:'180px'},1000);
	setTimeout("$('#peinture_onglet4 .contenu').slideDown('slow')",1000);
	
		//apparition de la bonne galerie et disparition des autres
	setTimeout("$('#peinture_galerie4').fadeIn()",1000);
	
	$('#peinture_galerie2').fadeOut();
	$('#peinture_galerie3').fadeOut();
	$('#peinture_galerie1').fadeOut();
	
	//Création du soulignement gris
	setTimeout("$('#peinture_onglet4 h1').css('border-bottom','2px solid #bfc1c0')",200);
	setTimeout("$('#peinture_onglet4 h1').css('padding-bottom','2px')",200);
	//supression de la fléche de bienvenue
	$('#peinture_onglet4 h1').css('background-image','none');
	
	//supression du scroll des autres onglets
	$('#bar_peinture_onglet1').fadeOut();
	$('#bar_peinture_onglet3').fadeOut();
	$('#bar_peinture_onglet2').fadeOut();

	
	//diminution des autres onglets
	$('#peinture_onglet1 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet1').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet1 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet1 h1').css('border-bottom','0px');
	$('#peinture_onglet1 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet1 h1').css('background-position','120px 15px')",1000);
	
	$('#peinture_onglet3 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet3').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet3 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet3 h1').css('border-bottom','0px');
	$('#peinture_onglet3 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet3 h1').css('background-position','120px 15px')",1000);
	
	$('#peinture_onglet2 .contenu').slideUp('slow');
	setTimeout("$('#peinture_onglet2').animate({width:'130px'},1000)",1000);
	$('#peinture_onglet2 h1').css('background-image',"url('./image/fleche.png')");
	$('#peinture_onglet2 h1').css('border-bottom','0px');
	$('#peinture_onglet2 h1').css('padding-bottom','0px');
	setTimeout("$('#peinture_onglet2 h1').css('background-position','120px 15px')",1000);
	
	//création des fleches des autres onglets
	$('#peinture_onglet1 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet1 h1').css('background-position','120px 15px');
	
	$('#peinture_onglet3 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet3 h1').css('background-position','120px 15px');

	$('#peinture_onglet2 h1').css('background-image',"url('./image/fleche.png')"); 
	$('#peinture_onglet2 h1').css('background-position','120px 15px');
	});	
						
 //hover sur les h1

$('#peinture_onglet1 h1').mouseover(function() 	
{
if(secur!=1){
$('#peinture_onglet1').attr('class','ongletHover');
}
});

$('#peinture_onglet1 h1').mouseout(function() 	
{
$('#peinture_onglet1').removeAttr('class');
});


$('#peinture_onglet2 h1').mouseover(function() 	
{
if(secur!=2){
$('#peinture_onglet2').attr('class','ongletHover');
}
});

$('#peinture_onglet2 h1').mouseout(function() 	
{
$('#peinture_onglet2').removeAttr('class');
});

$('#peinture_onglet3 h1').mouseover(function() 	
{
if(secur!=3){
$('#peinture_onglet3').attr('class','ongletHover');
}
});

$('#peinture_onglet3 h1').mouseout(function() 	
{
$('#peinture_onglet3').removeAttr('class');
});

$('#peinture_onglet4 h1').mouseover(function() 	
{
if(secur!=4){
$('#peinture_onglet4').attr('class','ongletHover');
}
});

$('#peinture_onglet4 h1').mouseout(function() 	
{
$('#peinture_onglet4').removeAttr('class');
});




 $('.miniature').mouseover(function(){
   
	
	var posContenu = $('#contenuPrincipal').findPos();
//retourne le coordonnées via
	var posMiniature= $(this).findPos();
	
	var posX = posMiniature.x-posContenu.x;
	var posY = posMiniature.y-posContenu.y;
   

	
	$('#apercu').html('<table width="100%" height="100%" ><tr><td><img name="'+$(this).attr('name')+'" src="./photo/peinture/petitFormat/'+$(this).attr('name')+'" id="encours" alt="'+$(this).attr('alt')+'"/></td></tr></table>');
	$('#apercu').css({'top':posY-40,'left':posX-40});
	  
	$('#apercu img').load(function(){
	$('#apercu').show();
	 $('#apercu').attr('class','hover');
	});
 });
 

 
 $('#apercu').mouseout(function(){
	$('#apercu').hide();
 });
	
 $('#apercu').click(function(){
 
//alert('ggg : '+$('#apercu img').attr('alt'));

	$('#grande').html('<table width="100%" height="100%" ><tr><td><img src="./photo/peinture/grandFormat/'+$('#apercu img').attr('name')+'" id="encours"/><p>'+$('#apercu img').attr('alt')+'</p></td></tr></table>');
	// attend le chargement de l'image pour l'afficher.
	$('#grande img').load(function(){
		$('#grande').fadeIn(1500);
		$('.miniature').fadeOut(1500);
		$('#apercu').fadeOut();
	});
	
	
 });
 
	
 $('#grande').click(quitteGrande);


function quitteGrande(){
	$('#grande').fadeOut();
	$('.miniature').fadeIn();
 }
 
 
 
 
 
 
 
 
 
 
 
jQuery.fn.extend({
   findPos : function() {
       obj = jQuery(this).get(0);
       var curleft = obj.offsetLeft || 0;
       var curtop = obj.offsetTop || 0;
       while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
       }
       return {x:curleft,y:curtop};
   }
});
  
	
});