$(window).load(function(){


// ||||  Valeurs qui definissent la grandeur et la largeur de la grande image zoomée ||| 
		
//		alert( $('#imageShow>img').width() );
//		alert( $('#imageShow>img').height() );

    var largeurOriginal = $('#imageShow>img').width() * 2;
    var hauteurOriginal = $('#imageShow>img').height() * 2;
		
		// ||||  Valeurs qui definissent la grandeur et la largeur de l'image "normale" pas zoomée |||
		var largeurStretch = $('#imageShow>img').width();
		var hauteurStretch = $('#imageShow>img').height();
		
		var offX = largeurOriginal - largeurStretch;
		var offY = hauteurOriginal - hauteurStretch;
		
		jQuery(document).ready(function(){
		
		   $('#imageShow').mousemove(function(e){
			  
			  var offset = $(this).offset();
			  
				/*$('#image').css("left",e.pageX-largeurOriginal/2);
				$('#image').css("top",e.pageY-hauteurOriginal/2);
			  
				$('#image').css("height",hauteurOriginal);
				$('#image').css("width",largeurOriginal);*/
				
				$('#imageShow>img').css("left",-offX*(((e.pageX - (offset.left))*100/largeurStretch )/100 ) );
				$('#imageShow>img').css("top",-offY*(((e.pageY  - (offset.top ))*100/hauteurStretch )/100 ) );
			  
				$('#imageShow>img').css("height",hauteurOriginal);
				$('#imageShow>img').css("width",largeurOriginal);				

		   }); 
		   
		   $('#imageShow').mouseout(function(e){
		   
				$('#imageShow>img').css("height",hauteurStretch);
				$('#imageShow>img').css("width",largeurStretch);
				
				$('#imageShow>img').css("left",0);
				$('#imageShow>img').css("top",0);
		   
		   });
		   
		   $('#image1select').click(function(){		   
				$('#imageShow').html('<img id="image" src="image.jpg">');	
				$('#imageShow>img').css("height",hauteurStretch);
				$('#imageShow>img').css("width",largeurStretch);
		   });
		   
		   $('#image2select').click(function(){		
				$('#imageShow').html('<img id="image" src="image2.jpg">');
				$('#imageShow>img').css("height",hauteurStretch);
				$('#imageShow>img').css("width",largeurStretch);
		   });
		   
		   $('#image3select').click(function(){	
				$('#imageShow').html('<img id="image" src="image3.jpg">');	
				$('#imageShow>img').css("height",hauteurStretch);
				$('#imageShow>img').css("width",largeurStretch);
		   });
		   
		   $('#imageShow>img').css("height",hauteurStretch);
		   $('#imageShow>img').css("width",largeurStretch);
		   
		   $('#imageShow').css("height",hauteurStretch);
		   $('#imageShow').css("width",largeurStretch);
		   
		})
		
	});