//-------------------------------------------------------------
//  FrogJS v.1.1
//  Created by Eric Puidokas (www.puidokas.com)
//
//  Licensed under the Creative Commons Attribution 2.5 License
//  (http://creativecommons.org/licenses/by/2.5/)
//-------------------------------------------------------------

// CONFIGURATION VARIABLES
var thumbTop = '50px'; // distance you want you thumbnails to be from the top of their container
var loadingAni = "images/load.gif"; // image displayed when preloading images
var scalePercent = '200'; // percent thumbnails expand when fading into main image
var widthMax = 275;       //largeur maximum de la photo principale
var heightMax = 300;	  //Hauteur maximum de la photo principale
var i=0;
// GLOBALS

var imageArray = new Array;

// Extensions to the Element class from prototype.js
Object.extend(Element, {
	removeDimensions: function(element){
	   	element = $(element);
	   	element.style.width = '';
		element.style.height = '';
	},
	removeOnclick: function(element){
	   	element = $(element);
	   	element.onclick = function(){}
	},
	setCursor: function(element, cursor){
		element = $(element);
		element.style.cursor = cursor;
	}
});

// Frog Class
var Frog = Class.create();
Frog.prototype = {
	// initialize()
	// Constructor runs once the page has been loaded.  It extracts any linked images within an element with id 'FrogJS' and builds the array for the FrogJS Gallery
	// It then empties the 'FrogJS' element and inserts the neccessary DOM elements to run a FrogJS gallery.  Lastly, it calls the functions to load the first image and thumbnail.
	initialize: function()
	{
		if(!document.getElementsByTagName){ return; }

		//-----------------------------------------
		// Inserting new HTML elements into 'FrogJS' Element
		//-----------------------------------------
		
		var ribbit = $('FrogJS');
		ribbit.innerHTML = '';
		ribbit.style.position = 'relative';
		ribbit.style.display = 'block';
		ribbit.style.textAlign = 'center';
		
		var mainContainer = document.createElement("div");
		mainContainer.setAttribute('id','FrogJSMainContainer');
		mainContainer.style.margin = '0 auto';
		ribbit.appendChild(mainContainer);
		
		var mainImage = document.createElement("img");
		mainImage.setAttribute('id','FrogJSImage');
		mainImage.style.display = 'none';
		mainContainer.appendChild(mainImage);
		
		var credit = document.createElement("div");
		credit.setAttribute('id','FrogJSCredit');
		mainContainer.appendChild(credit);
		
		var caption = document.createElement("div");
		caption.setAttribute('id','FrogJSCaption');
		mainContainer.appendChild(caption);
		
		var loadingImg = document.createElement("img");
		loadingImg.setAttribute('id','FrogJSLoadingAni');
		loadingImg.src = loadingAni;
		loadingImg.style.display = '';
		loadingImg.style.position = 'absolute';
		loadingImg.style.top = thumbTop;
		ribbit.appendChild(loadingImg);
		
		var rThumb1 = document.createElement("img");
		rThumb1.setAttribute('id','FrogJSrightThumb1');
		rThumb1.style.display = 'none';
		rThumb1.style.position = 'absolute';
		rThumb1.style.top = thumbTop;
		rThumb1.style.right = '0';
		rThumb1.style.cursor = 'pointer';
		ribbit.appendChild(rThumb1);
		
		var lThumb1 = document.createElement("img");
		lThumb1.setAttribute('id','FrogJSleftThumb1');
		lThumb1.style.display = 'none';
		lThumb1.style.position = 'absolute';
		lThumb1.style.top = thumbTop;
		lThumb1.style.left = '0';
		lThumb1.style.cursor = 'pointer';
		ribbit.appendChild(lThumb1);
		
		var rThumb2 = document.createElement("img");
		rThumb2.setAttribute('id','FrogJSrightThumb2');
		rThumb2.style.display = 'none';
		rThumb2.style.position = 'absolute';
		rThumb2.style.top = thumbTop;
		rThumb2.style.right = '0';
		ribbit.appendChild(rThumb2);
		
		var lThumb2 = document.createElement("img");
		lThumb2.setAttribute('id','FrogJSleftThumb2');
		lThumb2.style.display = 'none';
		lThumb2.style.position = 'absolute';
		lThumb2.style.top = thumbTop;
		lThumb2.style.left = '0';
		ribbit.appendChild(lThumb2);

		var myFrog = this; 
	},
		
	//-------------------------------------------------------------------------------
	// appel l'image principale et MAJ la vignette entrante et sortante
	//-------------------------------------------------------------------------------
	
	loadImage: function(clef,imageNum, side)
	{
		myFrog.loadMainImage(clef,imageNum);
		
		if(side=='right'){
			myFrog.mainIn(clef, imageNum, 'right');
			myFrog.thumbIn(clef, imageNum+1, 'right');
			myFrog.mainOut(clef, imageNum-1, 'left');
			myFrog.thumbOut(clef, imageNum-2, 'left');
		}
		else{
			myFrog.mainIn(clef, imageNum, 'left');
			myFrog.thumbIn(clef, imageNum-1, 'left');
			myFrog.mainOut(clef, imageNum+1, 'right');
			myFrog.thumbOut(clef, imageNum+2, 'right');
		}
	},
	
	//----------------------------------------------------------------------
	//     Affiche une nouvelle série de photos en fonction de myClef
	// ---------------------------------------------------------------------
	
	depart: function(myClef)
	{   	
		// efface les vignettes
		Element.hide('FrogJS'+'right'+'Thumb1');
		Element.hide('FrogJS'+'left'+'Thumb1');
		myFrog.loadMainImage(myClef,0);            // affiche la premiere image
		myFrog.thumbIn(myClef,1,'right');                 // vignette de droite
	},
	
	//-------------------------------------------------------------------
	// affiche la nouvelle image en effaçant l'ancienne
	//-------------------------------------------------------------------
	
	loadMainImage: function(clef,imageNum)
	{
		Element.setCursor('FrogJSImage','');
		$('FrogJSImage').onclick = function(){};
	
		new Effect.Fade('FrogJSMainContainer', { duration:0.5, afterFinish: function(){ showMainImage(); } });
		
		function showMainImage(){
			$('FrogJSImage').style.display = 'block';
			
			var myLargeur=photos[clef][imageNum].width;
			var myHauteur=photos[clef][imageNum].height;
			var myCoef=myLargeur/myHauteur;
			
			if (myLargeur>myHauteur)
		   	{  
			   if (myLargeur>widthMax) 
			   {
			   	  myLargeur=widthMax;
			   	  myHauteur=myLargeur/myCoef;
			   }	  
		   	}
			else
		   	{  
			   if (myHauteur>heightMax) 
			   {	
			   		myHauteur=heightMax;
			   		myLargeur=myHauteur*myCoef;
			   }		
		   	}
			$('FrogJSImage').width=myLargeur;
			$('FrogJSImage').height=myHauteur;
			$('FrogJSImage').src = photos[clef][imageNum].src;
			$('FrogJSMainContainer').style.width = myLargeur+'px';
			$('FrogJSCredit').innerHTML = imageArray[imageNum]['credit'];
			$('FrogJSCaption').innerHTML = imageArray[imageNum]['caption'];
			new Effect.Appear('FrogJSMainContainer', { duration: 0.5, afterFinish: function(){ addOnclick(); } });

			function addOnclick(){
				if(imageArray[imageNum]['link']){
					Element.setCursor('FrogJSImage','pointer');
					$('FrogJSImage').onclick = function(){
						//alert(imageArray[imageNum]['link']);
						myLightbox.start(imageNum,clef);
						//location.href = imageArray[imageNum]['link'];
					}
				}
			}
		}
	},
	
	//----------------------------------------------------------------------------
	// thumbIn()
	// appel une nouvelle vignette et charge si nécéssaire
	//----------------------------------------------------------------------------
	
	thumbIn: function(clef,imageNum, side){
		Element.hide('FrogJS'+side+'Thumb1');
		
		// si la vignette existe
		if(imageArray[imageNum])
		{	
			Element.setCursor('FrogJS'+side+'Thumb1','');
			$('FrogJSLoadingAni').style.left = (side=='left') ? '0' : '';
			$('FrogJSLoadingAni').style.right = (side=='right') ? '0' : '';
			Element.show('FrogJSLoadingAni');
			
			var myVignette=vignettes[clef][imageNum];
			
				Element.hide('FrogJSLoadingAni');
				Element.removeDimensions('FrogJS'+side+'Thumb1');
				Element.setCursor('FrogJS'+side+'Thumb1','');
				$('FrogJS'+side+'Thumb1').onclick = function(){};
				$('FrogJS'+side+'Thumb1').src = myVignette.src;
				new Effect.Appear('FrogJS'+side+'Thumb1',{duration:1.0});
				new Effect.Scale('FrogJS'+side+'Thumb1', 100, { duration: 1.0, scaleFrom: 0.1, afterFinish: function(){ addOnclick(); } });
						
				function addOnclick() // gestion de l'événement onclick
				{
					Element.setCursor('FrogJS'+side+'Thumb1','pointer');
					$('FrogJS'+side+'Thumb1').onclick = function()
					{	
						myFrog.loadImage(clef,imageNum, side);
						Element.removeOnclick('FrogJSleftThumb1');
						Element.removeOnclick('FrogJSrightThumb1');
					}
				}
		}
	},
	
	// thumbOut()
	// Affiche l'ancienne vignette
	//------------------------------------------------------------------------------
	thumbOut: function(clef, imageNum, side){
		if(imageArray[imageNum]){
			$('FrogJS'+side+'Thumb2').src = vignettes[clef][imageNum].src;
			Element.show('FrogJS'+side+'Thumb2');
			Element.removeDimensions('FrogJS'+side+'Thumb2');
			new Effect.Fade('FrogJS'+side+'Thumb2',{duration:1.0});
			new Effect.Scale('FrogJS'+side+'Thumb2', 0, { duration: 1.0, scaleFrom: 100 });
		}
	},
	
	// mainIn()
	// Fades thumbnail into main image
	
	mainIn: function(clef, imageNum, side)//mainIn(cle,imageNum,'right')
	{
		$('FrogJS'+side+'Thumb2').src = vignettes[clef][imageNum].src;
		Element.removeDimensions('FrogJS'+side+'Thumb2');
		Element.show('FrogJS'+side+'Thumb2');
		new Effect.Fade('FrogJS'+side+'Thumb2',{duration:1.0});
		new Effect.Scale('FrogJS'+side+'Thumb2', scalePercent, { duration: 1.0 });
	},
	
	// mainOut()
	// -> Fades old main image into thumbnail
	mainOut: function(clef,imageNum, side)
	{	
		Element.hide('FrogJS'+side+'Thumb1');
		if(imageArray[imageNum])
		{
			var myVignette = vignettes[clef][imageNum];
			
			Element.setCursor('FrogJS'+side+'Thumb1','');
			Element.removeDimensions('FrogJS'+side+'Thumb1');
				$('FrogJS'+side+'Thumb1').src = myVignette.src;
				new Effect.Appear('FrogJS'+side+'Thumb1',{duration:1.0});
				new Effect.Scale('FrogJS'+side+'Thumb1', 100, { duration: 1.0, scaleFrom: scalePercent, afterFinish: function(){ addOnclick(); } });
				
				function addOnclick() // Gestion de l'evennement onclick
				{
					Element.setCursor('FrogJS'+side+'Thumb1','pointer');
					$('FrogJS'+side+'Thumb1').onclick = function()
					{
						myFrog.loadImage(clef,imageNum, side);
						Element.removeOnclick('FrogJSleftThumb1');
						Element.removeOnclick('FrogJSrightThumb1');
					}
				}	
		}
	}
}

// It's time for this frog to hop

function initFrog()
{ 
	myFrog = new Frog(); 
}