/*
Script: slideshow.js
 
Dependancies:
 mootools.js
 
Author: eBestPractice, <http://wwwm.eBestPractice.net>
*/

// get current photo id from URL
var thisURL = document.location.href;
//var splitURL = thisURL.split("#");
//var photoId = splitURL[1] - 1;

// if no photoId supplied then set default
var photoId = (!photoId)? 0 : photoId;

// CSS border size x 2
var borderSize = 4;


var currentSelection = "0";

// Photo directory for this gallery
//var initialPhotoDir = "../images/lozano/";

// Photo directory for this gallery
var photoDirs = new Array();
photoDirs['obres1'] = "../images/lozano/obres1/";
photoDirs['obres2'] = "../images/lozano/obres2/";
photoDirs['obres3'] = "../images/lozano/obres3/";
photoDirs['noticies4'] = "../images/exposicio/aac/";

// Define each photo's name, height, width, and caption (360)
var photoArrays = new Array();
photoArrays['obres1'] = new Array(
	// Source, Width, Height, Caption
	new Array("IMG001.jpg", "369", "301", ""), 
	new Array("IMG002.jpg", "456", "295", ""),
	new Array("IMG003.jpg", "384", "262", ""),
	new Array("IMG004.jpg", "372", "310", ""), 
	new Array("IMG005.jpg", "372", "310", ""),
	new Array("IMG006.jpg", "456", "256", ""),
	new Array("IMG007.jpg", "375", "310", ""),
	new Array("IMG008.jpg", "240", "310", ""),
	new Array("IMG009.jpg", "379", "310", ""),
	new Array("IMG010.jpg", "395", "310", ""),
	new Array("IMG011.jpg", "381", "310", ""),
	new Array("IMG012.jpg", "401", "310", "")
);

// Define each photo's name, height, width, and caption (360)
photoArrays['obres2'] = new Array(
	// Source, Width, Height, Caption
	new Array("IMG001.jpg", "456", "301", ""), 
	new Array("IMG002.jpg", "431", "310", ""),
	new Array("IMG003.jpg", "456", "262", ""),
	new Array("IMG004.jpg", "423", "310", ""), 
	new Array("IMG005.jpg", "429", "310", ""),
	new Array("IMG006.jpg", "398", "310", ""),
	new Array("IMG007.jpg", "427", "310", ""),
	new Array("IMG008.jpg", "422", "310", ""),
	new Array("IMG009.jpg", "439", "310", ""),
	new Array("IMG010.jpg", "426", "310", ""),
	new Array("IMG011.jpg", "456", "303", ""),
	new Array("IMG012.jpg", "420", "310", "")
);

// Define each photo's name, height, width, and caption (360)
photoArrays['obres3'] = new Array(
	new Array("IMG001.jpg", "456", "302", ""), 
	new Array("IMG002.jpg", "454", "310", ""),
	new Array("IMG003.jpg","209",  "310", ""),
	new Array("IMG004.jpg", "227", "310", ""), 
	new Array("IMG005.jpg", "251", "310", ""),
	new Array("IMG006.jpg", "425", "310", ""),
	new Array("IMG007.jpg", "434", "310", ""),
	new Array("IMG008.jpg", "412", "310", ""),
	new Array("IMG009.jpg", "420", "310", ""),
	new Array("IMG010.jpg", "435", "310", ""),
	new Array("IMG011.jpg", "456", "281", ""),
	new Array("IMG012.jpg", "413", "310", "")
);

photoArrays['noticies4'] = new Array(
	new Array("IMG001.jpg", "403", "290", "Anet Duncan - El dia que es farà l' aigua quieta (50x70)"), 
	new Array("IMG002.jpg", "563", "290", "Anna Llorens - Tardor a Evendin (40x84)"),
	new Array("IMG003.jpg", "429", "290", "Anna Lopez - Reflexos (37x55)"),
	new Array("IMG004.jpg", "401", "290", "Ballestar - Hivern a Setcases (70x80)"), 
	new Array("IMG005.jpg", "390", "290", "Barris Pous - Sense títol (55x75)"),
	new Array("IMG006.jpg", "407", "290", "Elisa Llad&oacute; - Codonys (70x100)"),
	new Array("IMG007.jpg", "402", "290", "Emili Tarrus - Riera de Cànoves (50x70)"),
	new Array("IMG008.jpg", "405", "290", "Enric Ballera - Les golfes (50x70)"),
	new Array("IMG009.jpg", "234", "290", "Francesc Bueno - Pensament II: Fugir (81x65)"),
	new Array("IMG010.jpg", "393", "290", "Jaume Tarin - Nàutic (68x90)"),
	new Array("IMG011.jpg", "207", "290", "Jose Martin - Pueblo Nuevo 2007 (100x70)"),
	new Array("IMG012.jpg", "171", "290", "Juan A. Usea - La herradura (70x40)"),
	new Array("IMG013.jpg", "408", "290", "Laurentino Marti - Anecs a l' estany (64x90)"), 
	new Array("IMG014.jpg", "402", "290", "R. Borras - La Plaça Major (50x70)"),
	new Array("IMG015.jpg", "373", "290", "Manel Plana - Pas a nivell - Vallbona (50x65)"),
	new Array("IMG016.jpg", "215", "290", "Mar Gri&ntilde;on - Atzavara (50x35)"), 
	new Array("IMG017.jpg", "404", "290", "Maria Navarro - Horitzó (50x70)"),
	new Array("IMG018.jpg", "398", "290", "Martha Caycedo - Horizonte blanco (72x52)"),
	new Array("IMG019.jpg", "392", "290", "Montserrat To - Puigcerdà nevat (40x60)"),
	new Array("IMG020.jpg", "445", "290", "Rafael Pujals - Barca a port (40x55)"),
	new Array("IMG021.jpg", "387", "290", "Raimundo Lopez - L'antiga Llotja (70x90)"),
	new Array("IMG022.jpg", "290", "290", "Rosa Permanyer - Rastres d' aigua (76x76)"),
	new Array("IMG023.jpg", "384", "290", "Silio Hern&aacute;ndez - Drassanes de Roses (50x70)"),
	new Array("IMG024.jpg", "192", "290", "Teresa Jord&aacute; - La Mar (160x120)"),
	new Array("IMG025.jpg", "389", "290", "Victoria Ramos - Riu (55x75)")
);

var photoArray = photoArrays['obres1'];
var photoDir = photoDirs['obres1'];

// Number of photos in this gallery
var photoNum = photoArray.length;

/*--------------------------------------------------------------------------*/

var Slideshow = Class.create();

Slideshow.prototype = {
	initialize: function(photoId) {
		Slideshow.photoId = photoId;
		Slideshow.photo = 'Photo';
		Slideshow.photoBox = 'Container';
		Slideshow.prevLink = 'PrevLink';
		Slideshow.nextLink = 'NextLink';
		Slideshow.captionBox = 'CaptionContainer';
		Slideshow.caption = 'Caption';
		Slideshow.counter = 'Counter';
		Slideshow.loader = 'Loading';
 	},
	getCurrentSize: function() {
		// Get current height and width, subtracting CSS border size 
		Slideshow.wCur = $(Slideshow.photoBox).getStyle('width').toInt() - borderSize;
		Slideshow.hCur = $(Slideshow.photoBox).getStyle('height').toInt() - borderSize;
	},
	getNewSize: function() {
		// Get current height and width 
		Slideshow.wNew = photoArray[photoId][1];
		Slideshow.hNew = photoArray[photoId][2];
	},
	getScaleFactor: function() {
		this.getCurrentSize();
		this.getNewSize();
		// Scalars based on change from old to new 
		Slideshow.xScale = (Slideshow.wNew / Slideshow.wCur) * 100;
		Slideshow.yScale = (Slideshow.hNew / Slideshow.hCur) * 100;
	},
	setNewPhotoParams: function() {
		// Set source of new image
		$(Slideshow.photo).setProperty('src',photoDir + photoArray[photoId][0]);
		// Set anchor for bookmarking
		//$(Slideshow.prevLink).setProperty('href', "#" + (photoId+1));
		//$(Slideshow.nextLink).setProperty('href', "#" + (photoId+1)); 
	},
	setPhotoCaption: function() {
		// Add caption from gallery array
		$(Slideshow.caption).setHTML(photoArray[photoId][3]);
		$(Slideshow.counter).setHTML(((photoId+1)+'/'+photoNum));
	},
	showPhoto: function(){
		this.getScaleFactor();
		var myEffect = new Fx.Height ('Container', {duration: 500});
  
		myEffect.custom(Slideshow.hCur,Slideshow.hNew).chain(function() {
			var myEffect2 = new Fx.Width('Container', {duration: 500});
			myEffect2.custom(Slideshow.wCur,Slideshow.wNew ).chain(function() {
				var myEffect3 = new Fx.Style(Slideshow.photo, 'opacity', {
								duration: 500,
								onComplete: function() {
									$(Slideshow.captionBox).setStyle('display','block');
									$(Slideshow.photoBox).setStyle('opacity','1');
									$(Slideshow.prevLink ).setStyle('opacity','1');
									$(Slideshow.nextLink).setStyle('opacity','1');
								}
				});

				myEffect3.custom(0,1).chain(function() {
					new Fx.Style(Slideshow.loader, 'opacity', {duration: 300}).custom(1,0);
				});                           
			});
		});

		// Dynamically resize caption box as well
		$(Slideshow.captionBox).setStyle('width',Slideshow.wNew-(-borderSize) + 'px');
	},
	nextPhoto: function(){
		// Figure out which photo is next
		$(photoId + "").getFirst().removeClass("ThumbSelected");
		(photoId == ( photoArray.length - 1)) ? photoId = 0 : photoId++;
		$(photoId + "").getFirst().addClass("ThumbSelected");
		this.initSwap();
	},
	prevPhoto: function(){
		// Figure out which photo is previous
		$(photoId + "").getFirst().removeClass("ThumbSelected");
		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
		$(photoId + "").getFirst().addClass("ThumbSelected");
		this.initSwap();
	},
	selectedPhoto: function() {
		this.initSwap();
	},
	initSwap: function() {
		// Begin by hiding main elements
		$(Slideshow.loader).setStyle('opacity',1);
		$(Slideshow.photo).setStyle('opacity',0);
		$(Slideshow.photoBox).setStyle('opacity',0.5);
		$(Slideshow.captionBox).setStyle('display','none');
		$(Slideshow.prevLink).setStyle('opacity',0);
		$(Slideshow.nextLink).setStyle('opacity',0);
		// Set new dimensions and source, then resize 
		this.setNewPhotoParams();
		this.setPhotoCaption();
		currentSelection = photoId + "";
	}
}

/*--------------------------------------------------------------------------*/

// Establish CSS-driven events via Behaviour script
var myrules = {
	'#Photo' : function(element){
		element.onload = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.showPhoto();
		}
	},
	'#PrevLink' : function(element){
		element.onmouseover = function(){
			//soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.prevPhoto ();
			//soundManager.play('select');
		}
		element.onfocus = function(){
			this.blur();
		}
	},
	'#NextLink' : function(element){
		element.onmouseover = function(){
			//soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
			//soundManager.play('select');
		}
		element.onfocus = function(){
			this.blur();
		}
	},
	'.ThumnnailsClass' : function(element){
		element.onclick = function(){
			$(this.id).getFirst().addClass("ThumbSelected");

			if (currentSelection != null && currentSelection != this.id) {
				$(currentSelection).getFirst().removeClass("ThumbSelected");
			}
			currentSelection = this.id;		
			
			photoId = element.id.toInt();
			var myPhoto = new Slideshow(photoId); 
			myPhoto.selectedPhoto();
		}
	}/*,
	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	}*/
};

// Add window.onload event to initialize
function init(target) {
	photoDir = photoDirs[target] + "pictures/";
	photoArray = photoArrays[target];
/*	if (target == "obres1") {
		photoArray = photoArray1;
	}
	else if (target == "obres2") {
		photoArray = photoArray2;
	}
	else if (target == "obres3") {
		photoArray = photoArray3;
	}*/
	
	photoNum = photoArray.length;
	
	photoId = 0;
	var myPhoto = new Slideshow(photoId);
	myPhoto.initSwap();
	
	var thumb = $(photoId + "");
	if(thumb!=null)
		thumb.getFirst().addClass("ThumbSelected");
 //soundManagerInit();
}