// JavaScript Document
/**
 *
 */
// Definition des variables globales
// viewer
var egbxViewer = '';
var egbxViewer_id = '';
var egbxHandler = '';
var egbxHandler_id = '';
var egbxImage = '';
var egbxImage_id = '';
var egbxImage_alt = '';
var viewerWidth = '';
var viewerHeight = '';
// image HD
var mediaWidth_SD = '';
var mediaHeight_SD = '';
var mediaPath_SD = '';
// image HD
var mediaWidth_HD = '';
var mediaHeight_HD = '';
var mediaPath_HD = '';
// Position initial
var newInitLeft = 0;
var newInitTop = 0;
// Limites
var minLeft = 0;
var minTop = 0;
// Tailles
var newMediaPath ='';
var newMediaWidth = 0;
var newMediaHeight = 0;
// Tailles
var newHandlerWidth = 0;
var newHandlerHeight = 0;


	function egbxLoad()
	{
		var html_image = '<div id="'+egbxHandler_id+'"><img id="'+egbxImage_id+'" src="'+newMediaPath+'" alt="'+egbxImage_alt+'" /></div>';
		$(egbxViewer).html(html_image);
		$(egbxHandler).css({'position':'absolute','top':minTop,'left':minLeft,'width':newHandlerWidth,'height':newHandlerHeight});
		$(egbxImage).css({'position':'absolute','top':newInitTop,'left':newInitLeft});
		$(egbxImage).draggable({
			containment:egbxHandler,
			cursor:'move'
		});
		$(egbxImage).draggable('enable');
	}

	function egbxZoom()
	{
		// si on a un visuel HD
		if(mediaPath_HD!='')
		{
			$(egbxImage).live('dblclick', function() {
				// on annule l'aide contectuelle
				$(egbxViewer).attr('help','');
				// on définit les dimensions
				if($(egbxViewer).hasClass('zoom_on'))
				{
					
					$(egbxViewer).removeClass('zoom_on');
					$(egbxViewer).css({'cursor':'crosshair'});
					newMediaWidth = mediaWidth_SD;
					newMediaHeight = mediaHeight_SD;
					newMediaPath = mediaPath_SD;
				}
				else
				{
					$(egbxViewer).addClass('zoom_on');
					$(egbxViewer).css({'cursor':'move'});
					newMediaWidth = mediaWidth_HD;
					newMediaHeight = mediaHeight_HD;
					newMediaPath = mediaPath_HD;
				}

				// on calcule les positions minimum
				minLeft = viewerWidth - newMediaWidth;
				minTop = viewerHeight - newMediaHeight;

				// on calcule la position initial
				newInitLeft =  Math.abs(minLeft)/2;
				newInitTop =  Math.abs(minTop)/2;

				// on calcule la taille du conteneur et on le redimensione
				newHandlerWidth = Math.abs(minLeft) + newMediaWidth;
				newHandlerHeight = Math.abs(minTop) + newMediaHeight;

				$(egbxHandler).stop();
				$(egbxHandler).animate({
					'width':Math.round(newHandlerWidth)+'px',
					'height':Math.round(newHandlerHeight)+'px',
					'left':Math.round(minLeft)+'px',
					'top':Math.round(minTop)+'px'
				},300,function(){});


				// on positione l'image dans le conteneur
				$(egbxImage).stop();
				$(egbxImage).animate({
					'width':newMediaWidth+'px',
					'height':newMediaHeight+'px',
					'left':Math.round(newInitLeft)+'px',
					'top':Math.round(newInitTop)+'px'
				},300,function(){
					egbxLoad();
				});
			});
		}
	}

	function initZoom(target,SD,HD,alt)
	{
		// initialisation des objets
		egbxViewer_id = target;
		egbxViewer = '#'+target;
		egbxHandler_id = target+'_handler';
		egbxHandler = egbxViewer+' #'+egbxHandler_id;
		egbxImage_id = target+'_image';
		egbxImage_alt = alt;
		egbxImage = egbxViewer+' #'+egbxImage_id;
		mediaPath_SD = SD;
		mediaPath_HD = HD;
		newInitLeft = 0;
		newInitTop = 0;
		minLeft = 0;
		minTop = 0;
		// on charge le html
		egbxLoad('');
		// initialisation css
		$(egbxViewer).css({'position':'relative','cursor':'crosshair'});
		$(egbxImage).css({'opacity':0});

		// on charge l'image
		// une fois chargée, on récupère ses dimensions
		$(egbxImage).attr('src', mediaPath_SD).load(function() {
			// Image SD
			//$(image).width('480px');
			mediaWidth_SD = $(egbxImage).width();
			mediaHeight_SD = $(egbxImage).height();
			// image HD
			mediaWidth_HD = mediaWidth_SD*2;
			mediaHeight_HD = mediaHeight_SD*2;
			// Viewer
			viewerWidth = newHandlerWidth = mediaWidth_SD;
			viewerHeight = newHandlerHeight = mediaHeight_SD;
			// media


			$(egbxHandler).css({'top':newInitTop,'left':newInitLeft,'width':newHandlerWidth,'height':newHandlerHeight,'overflow':'hidden'});
			$(egbxViewer).stop();
			$(egbxViewer).animate(
				{width: viewerWidth+'px',height: viewerHeight+'px'},
				500,'easeOutQuint',
				function()
				{
					$(egbxImage).stop();
					$(egbxImage).animate(
						{opacity: 1},
						500,'easeOutQuint',
						function()
						{
							// callback function
						}
					);
				}
			);
			return false;
		});
		egbxZoom();

	}

	function initPreviews()
	{
		$('#previews li,#alt_previews li').click(function(){

			var SD=$(this).attr('sd');
			var HD=$(this).attr('hd');
			var target=$(this).attr('target');
			var alt=$(this).attr('alt');
			initZoom(target,SD,HD,alt);
		});
	}

$(document).ready(function(){
	initPreviews();
});