/* Zoom */

var DetailZoom = {
	// image orignale
	originalImage : null, 
	originalContainer : null,
	originalIPosition : null,
	
	visible : false,
	
	// image zoomée
	zoomedImage : null,
	zoomedContainer : null,

	// rectangle de prévisualisation
	previewRect : null,
	
	
	// indication de préchgargement
	preload : null,
	
	/* 
	 * Création de la grande image, de son conteneur et du carré de preview 
	 */
	create : function() {
		var zoom_url = originalImage.src.replace( /274x362/, "822x1086" )

		// création de l'indicateur de préchargement
		preload = $(Builder.node("p", { id : "preloader" } ))
		preload.innerHTML = "Chargement du zoom en cours"

		// creation du conteneur du zoom 
		zoomContainer = $(Builder.node( "div", { id : "zoom_container" } ))
		zoomedImage = $(Builder.node( "img", { alt : "", id : "zoom_image" } ))
		zoomContainer.appendChild( zoomedImage )
		originalContainer.appendChild( preload )
		
		DetailZoom.resetZoom( zoom_url )
		
		// creation du rectangle de preview 
		previewRect = $(Builder.node( "div", { id : "preview_square" } ))
		
		// les éléments du zoom sont cachés au démarrage
		DetailZoom.hide()
				
		// ajout du zoom après le paragraphe de l'image normale 
		originalContainer.parentNode.insertBefore( zoomContainer, originalContainer.nextSibling )

		// ajout du rectangle de preview dans le conteneur original
		originalContainer.appendChild( previewRect )
	},

	resetZoom : function( url )
	{
		zoomedImage.src = url

		if( !zoomedImage.complete ) {
			preload.show()
			Event.observe( zoomedImage, 'load', DetailZoom.removePreload )
		} else 
			DetailZoom.removePreload()
	
	},

	/*
	 * Installation du zoom sur détail
	 */
	install : function( id_photo ) {
		originalImage = $(id_photo)
		originalContainer = $(originalImage.parentNode)
		
		DetailZoom.create()
		DetailZoom.getPositions()
		
		/* Installation des gestionnaires d'évenements */
		Event.observe( originalImage, 'mouseover', DetailZoom.show )
		
		// On observe le mouseover au dessus du document, sinon IE car IE ne prend pas le mouseout du previewRect
		Event.observe( document, 'mouseover', DetailZoom.hide2 )
		Event.observe( originalImage, 'mousemove', DetailZoom.move )
		Event.observe( previewRect, 'mousemove', DetailZoom.move )
		
		/* Swap des vignettes et de la grande image */		
		$$('a[rel=alternate]').each( function( el, index) { 
			el.observe( 'click', DetailZoom.swap );
		} );
		
		// Quand la fenêtre est redimensionnée ou scrollée on calcule les nouvelles position
		Event.observe( window, 'resize', DetailZoom.getPositions )
		Event.observe( window, 'scroll', DetailZoom.getPositions )
	},


	/*
	 * Installation des évènements
	 */ 
	removePreload : function() {
		preload.hide()
		DetailZoom.getPositions()
	},
	

	/*
	 * Montre les élements du zoom
	 */
	show : function( e )
	{
		visible = true
		zoomContainer.show()
		previewRect.show()
	},

	/*
	 * cache les éléments du zoom
	 */
	hide : function( e )
	{
		visible = false
		zoomContainer.hide()
		previewRect.hide()
	},

	/* pour compatibilité IE */
	hide2 : function( e )
	{
		var abs_mouseX = Event.pointerX(e)
		var abs_mouseY = Event.pointerY(e)
		
		if( Position.within( originalImage, abs_mouseX, abs_mouseY ) )
			return
		else if ( visible )
			DetailZoom.hide()
	},

	/*
	 * Calcul positions image et conteneur originaux
	 */
	
	getPositions : function( e ) 
	{
		originalIPosition = Position.page( originalImage )
		originalCPosition = Position.page( originalContainer )
	},

	/* 
	 * déplacement de l'image zoomée 
	 */
	move : function ( e )
	{	
	
		var scrolls = DetailZoom.scrollOffsets()
		var abs_mouseX = Event.pointerX(e) - scrolls[0]
		var abs_mouseY = Event.pointerY(e) - scrolls[1]
		
		var rel_mouseX = abs_mouseX - originalIPosition[0]
		var rel_mouseY = abs_mouseY - originalIPosition[1]
	
		// contraintes de déplacement du zoom 
		var newX = Math.min( -(rel_mouseX - 50) * 3, 0 )
		var newY = Math.min( -(rel_mouseY - 50) * 3, 0 )
		
		newX = Math.max( newX, - zoomedImage.width + zoomContainer.offsetWidth + 2 )
		newY = Math.max( newY, - zoomedImage.height + zoomContainer.offsetHeight + 2 )
		
		// affectation des nouvelles coordonnées
		zoomedImage.setStyle( { left : newX + "px", top : newY + "px" } )
			
		/* déplacement du rectangle de preview */
		rel_mouseX = abs_mouseX - originalCPosition[0] - 50
		rel_mouseY = abs_mouseY - originalCPosition[1] - 50
		
		var relIposX = originalIPosition[0] - originalCPosition[0]
		var relIposY = originalIPosition[1] - originalCPosition[1]
		
		
		// Contraint le rectangle de preview à l'interieur de l'image
		newX = Math.max( rel_mouseX, relIposX )
		newY = Math.max( rel_mouseY, relIposY )
		
		newX = Math.min( newX, relIposX + originalImage.width - 100 )
		newY = Math.min( newY, relIposY + originalImage.height - 100 )
	
		previewRect.setStyle( { left : newX + "px", top : newY + "px" } )
	},
	
	scrollOffsets : function()
	{
		var x,y;
		if (self.pageYOffset) // all except Explorer
		{
			x = self.pageXOffset;
			y = self.pageYOffset;
		}
		else if (document.documentElement && document.documentElement.scrollTop)
			// Explorer 6 Strict
		{
			x = document.documentElement.scrollLeft;
			y = document.documentElement.scrollTop;
		}
		else if (document.body) // all other Explorers
		{
			x = document.body.scrollLeft;
			y = document.body.scrollTop;
		}
		return [x, y]

	},
	
	/* 
	 * Echange la vignette et la grande image
	 */
	swap : function( e )
	{
		var newImage = Event.element(e)
		if( newImage.nodeName != "IMG" )
			newImage = newImage.getElementsByTagName("img")[0]
		
		var temp_src = originalImage.src
		originalImage.src = newImage.src.replace( /80x80/, '274x362' )
		newImage.src = temp_src.replace( /274x362/, '80x80' )
		
		DetailZoom.resetZoom( originalImage.src.replace( /274x362/, "822x1086" ) )
		
		Event.stop(e)
		
	}
};

DetailZoom.install('main-photo');