var thumbTop = '60px'; 
var loadingAni = 'images/loading.gif'; 
var scalePercent = '300'; 


var imageArray = new Array;


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;
	}
});


var Frog = Class.create();
Frog.prototype = {
	
	
	initialize: function(){
		
		if(!document.getElementsByTagName){ return; }
		
	
		var anchors = $('Galeria').getElementsByTagName('a');
		for (var i=0; i<anchors.length; i++){
			imageArray[i] = new Array();
			imageArray[i]['full'] = anchors[i].getAttribute('href');
			imageArray[i]['credit'] = anchors[i].getAttribute('title');
			imageArray[i]['thumb'] = anchors[i].getElementsByTagName('img')[0].getAttribute('src');
			imageArray[i]['caption'] = anchors[i].getElementsByTagName('img')[0].getAttribute('alt');
			imageArray[i]['link'] = anchors[i].getAttribute('rel');
		}
		
	
		var ribbit = $('Galeria');
		ribbit.innerHTML = '';
		ribbit.style.position = 'relative';
		ribbit.style.display = 'block';
		ribbit.style.textAlign = 'center';
		
		var mainContainer = document.createElement("div");
		mainContainer.setAttribute('id','GaleriaMainContainer');
		mainContainer.style.margin = '0 auto';
		ribbit.appendChild(mainContainer);
		
		var mainImage = document.createElement("img");
		mainImage.setAttribute('id','GaleriaImage');
		mainImage.style.display = 'none';
		mainContainer.appendChild(mainImage);
		
		var credit = document.createElement("div");
		credit.setAttribute('id','GaleriaCredit');
		mainContainer.appendChild(credit);
		
		var caption = document.createElement("div");
		caption.setAttribute('id','GaleriaCaption');
		mainContainer.appendChild(caption);
		
		var loadingImg = document.createElement("img");
		loadingImg.setAttribute('id','GaleriaLoadingAni');
		loadingImg.src = loadingAni;
		loadingImg.style.display = 'none';
		loadingImg.style.position = 'absolute';
		loadingImg.style.top = thumbTop;
		ribbit.appendChild(loadingImg);
		
		var rThumb1 = document.createElement("img");
		rThumb1.setAttribute('id','GaleriarightThumb1');
		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','GalerialeftThumb1');
		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','GaleriarightThumb2');
		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','GalerialeftThumb2');
		lThumb2.style.display = 'none';
		lThumb2.style.position = 'absolute';
		lThumb2.style.top = thumbTop;
		lThumb2.style.left = '0';
		ribbit.appendChild(lThumb2);

		var myFrog = this;
		var imgPreloader = new Image();
		imgPreloader.onload=function(){
			myFrog.loadMainImage(0, imgPreloader.width);
			myFrog.thumbIn(1, 'right');
		}
		imgPreloader.src = imageArray[0]['full'];
	},
	

	loadImage: function(imageNum, side, width){
		
		myFrog.loadMainImage(imageNum, width);

		if(side=='right'){
			myFrog.mainIn(imageNum, 'right');
			myFrog.thumbIn(imageNum+1, 'right');
			myFrog.mainOut(imageNum-1, 'left');
			myFrog.thumbOut(imageNum-2, 'left');
		}else{
			myFrog.mainIn(imageNum, 'left');
			myFrog.thumbIn(imageNum-1, 'left');
			myFrog.mainOut(imageNum+1, 'right');
			myFrog.thumbOut(imageNum+2, 'right');
		}
	},
	

	loadMainImage: function(imageNum, width){
		Element.setCursor('GaleriaImage','');
		$('GaleriaImage').onclick = function(){};
		new Effect.Fade('GaleriaMainContainer', { duration:0.5, afterFinish: function(){ showMainImage(); } });
		function showMainImage(){
			$('GaleriaImage').style.display = 'block';
			$('GaleriaImage').src = imageArray[imageNum]['full'];
			$('GaleriaMainContainer').style.width = width+'px';
			$('GaleriaCredit').innerHTML = imageArray[imageNum]['credit'];
			$('GaleriaCaption').innerHTML = imageArray[imageNum]['caption'];
			new Effect.Appear('GaleriaMainContainer', { duration: 0.5, afterFinish: function(){ addOnclick(); } });
			function addOnclick(){
				if(imageArray[imageNum]['link']){
					Element.setCursor('GaleriaImage','pointer');
					$('GaleriaImage').onclick = function(){
						location.href = imageArray[imageNum]['link'];
					}
				}
			}
		}
	},
	

	thumbIn: function(imageNum, side){
		Element.hide('Galeria'+side+'Thumb1');
		if(imageArray[imageNum]){
			Element.setCursor('Galeria'+side+'Thumb1','');
			$('GaleriaLoadingAni').style.left = (side=='left') ? '0' : '';
			$('GaleriaLoadingAni').style.right = (side=='right') ? '0' : '';
			Element.show('GaleriaLoadingAni');
			var imgPreloader = new Image();
			imgPreloader.onload=function(){
				Element.hide('GaleriaLoadingAni');
				Element.removeDimensions('Galeria'+side+'Thumb1');
				Element.setCursor('Galeria'+side+'Thumb1','');
				$('Galeria'+side+'Thumb1').onclick = function(){};
				$('Galeria'+side+'Thumb1').src = imageArray[imageNum]['thumb'];
				new Effect.Appear('Galeria'+side+'Thumb1',{duration:1.0});
				new Effect.Scale('Galeria'+side+'Thumb1', 100, { duration: 1.0, scaleFrom: 0.1, afterFinish: function(){ addOnclick(); } });
				function addOnclick(){
					Element.setCursor('Galeria'+side+'Thumb1','pointer');
					$('Galeria'+side+'Thumb1').onclick = function(){
						myFrog.loadImage(imageNum, side, imgPreloader.width);
						Element.removeOnclick('GalerialeftThumb1');
						Element.removeOnclick('GaleriarightThumb1');
					}
				}
			}
			imgPreloader.src = imageArray[imageNum]['full'];
		}
	},
	

	thumbOut: function(imageNum, side){
		if(imageArray[imageNum]){
			$('Galeria'+side+'Thumb2').src = imageArray[imageNum]['thumb'];
			Element.show('Galeria'+side+'Thumb2');
			Element.removeDimensions('Galeria'+side+'Thumb2');
			new Effect.Fade('Galeria'+side+'Thumb2',{duration:1.0});
			new Effect.Scale('Galeria'+side+'Thumb2', 0, { duration: 1.0, scaleFrom: 100 });
		}
	},
	

	mainIn: function(imageNum, side){
		$('Galeria'+side+'Thumb2').src = imageArray[imageNum]['thumb'];
		Element.removeDimensions('Galeria'+side+'Thumb2');
		Element.show('Galeria'+side+'Thumb2');
		new Effect.Fade('Galeria'+side+'Thumb2',{duration:1.0});
		new Effect.Scale('Galeria'+side+'Thumb2', scalePercent, { duration: 1.0 });
	},
	

	mainOut: function(imageNum, side){
		Element.hide('Galeria'+side+'Thumb1');
		if(imageArray[imageNum]){
			Element.setCursor('Galeria'+side+'Thumb1','');
			var imgPreloader = new Image();
			imgPreloader.onload=function(){
				Element.removeDimensions('Galeria'+side+'Thumb1');
				$('Galeria'+side+'Thumb1').src = imageArray[imageNum]['thumb'];
				new Effect.Appear('Galeria'+side+'Thumb1',{duration:1.0});
				new Effect.Scale('Galeria'+side+'Thumb1', 100, { duration: 1.0, scaleFrom: scalePercent, afterFinish: function(){ addOnclick(); } });
				function addOnclick(){
					Element.setCursor('Galeria'+side+'Thumb1','pointer');
					$('Galeria'+side+'Thumb1').onclick = function(){
						myFrog.loadImage(imageNum, side, imgPreloader.width);
						Element.removeOnclick('GalerialeftThumb1');
						Element.removeOnclick('GaleriarightThumb1');
					}
				}
			}
			imgPreloader.src = imageArray[imageNum]['full'];	
		}
	}
}


function initFrog(){ myFrog = new Frog(); }
Event.observe(window, 'load', initFrog, false);