var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;


var photoId = (!photoId)? 0 : photoId;


var borderSize = 10;


var photoDir = "photos/borde costero/";


var photoArray = new Array(
	
	new Array("1costa.jpg", "500", "375", "Nuestras Costas"),
	new Array("2chunguita.jpg", "500", "375", "Chungungo - Lontra felina"),
	new Array("2dchun.jpg", "500", "375", "Chungungo - Lontra felina"),
	new Array("4escuela playa.jpg", "500", "375", "Niña observa la playa"),
	new Array("4escuela playa2.jpg", "500", "375", "Niños recorren la playa y observan las especies"),
	new Array("4franklin g.jpg", "500", "375", "Gaviota Franklin"),
	new Array("4gaviott.jpg", "500", "375", "Juvenil Gaviota Dominicana"),
	new Array("4huairaro.jpg", "500", "375", "Huairavo"),
	new Array("4kajar2.jpg", "500", "375", "Playero"),
	new Array("4nidi winos.jpg", "500", "375", "Nidos de Pingüino"),
	new Array("4pelica.jpg", "500", "375", "Pelicanos"),
	new Array("4pilp.jpg", "500", "375", "Pilpilén negro"),
	new Array("4pilpi comun.jpg", "500", "375", "Pilpilén común"),
	new Array("4yeco.jpg", "500", "375", "Cormorán yeco"),
	new Array("4zarapi garum.jpg", "500", "375", "Zarapitos y gaviotas garumas"),
	new Array("5franklin.jpg", "500", "375", "Gaviota Franklin"),
	new Array("6caracol.jpg", "500", "375", "Caracoles"),
	new Array("6fosiles quiri.jpg", "500", "375", "Fósiles en acantilados"),
	new Array("6lapas comewiro.jpg", "500", "375", "Lapas comiendo Huiros"),
	new Array("6rocas.jpg", "500", "375", "Playa de rocas"),
	new Array("6vricass.jpg", "500", "375", "Fauna litoral"),
	new Array("7lobos quint.jpg", "500", "375", "Lobos de Mar en Quintero"),
	new Array("7quintero.jpg", "500", "375", "Lobos de Mar en Quintero"),
	new Array("8rocaverd.jpg", "500", "375", "Rocas y vegetación del borde costero"),
	new Array("8zapallare.jpg", "500", "375", "Liolaemus zapallarensis - lajarto de Zapallar"),
	new Array("9atarde.jpg", "500", "375", "Hermosa puesta de sol")
	);


var photoNum = photoArray.length;


Object.extend(Element, {
	getWidth: function(element) {
   	element = $(element);
   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   	element = $(element);
    	element.style.height = h +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});



var Slideshow = Class.create();

Slideshow.prototype = {
	initialize: function(photoId) {
		this.photoId = photoId;
		this.photo = 'Photo';
		this.photoBox = 'Container';
		this.prevLink = 'PrevLink';
		this.nextLink = 'NextLink';
		this.captionBox = 'CaptionContainer';
		this.caption = 'Caption';
		this.counter = 'Counter';
		this.loader = 'Loading';
	},
	getCurrentSize: function() {
		
		this.wCur = Element.getWidth(this.photoBox) - borderSize;
		this.hCur = Element.getHeight(this.photoBox) - borderSize;
	},
	getNewSize: function() {
		
		this.wNew = photoArray[photoId][1];
		this.hNew = photoArray[photoId][2];
	},
	getScaleFactor: function() {
		this.getCurrentSize();
		this.getNewSize();
		
		this.xScale = (this.wNew / this.wCur) * 100;
		this.yScale = (this.hNew / this.hCur) * 100;
	},
	setNewPhotoParams: function() {
	
		Element.setSrc(this.photo,photoDir + photoArray[photoId][0]);
		
		Element.setHref(this.prevLink, "#" + (photoId+1));
		Element.setHref(this.nextLink, "#" + (photoId+1));
	},
	setPhotoCaption: function() {
	
		Element.setInnerHTML(this.caption,photoArray[photoId][3]);
		Element.setInnerHTML(this.counter,((photoId+1)+'/'+photoNum));
	},
	resizePhotoBox: function() {
		this.getScaleFactor();
		new Effect.Scale(this.photoBox, this.yScale, {scaleX: false, duration: 0.3, queue: 'front'});
		new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, delay: 0.5, duration: 0.3});
		
		Element.setWidth(this.captionBox,this.wNew-(-borderSize));
	},
	showPhoto: function(){
		new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3});
	
		new Effect.Appear(this.photo, {duration: 0.5, queue: 'end', afterFinish: function(){Element.show('CaptionContainer');Element.show('PrevLink');Element.show('NextLink');}});
	},
	nextPhoto: function(){
		
		(photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
		this.initSwap();
	},
	prevPhoto: function(){
		
		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
		this.initSwap();
	},
	initSwap: function() {
		
		Element.show(this.loader);
		Element.hide(this.photo);
		Element.hide(this.captionBox);
		Element.hide(this.prevLink);
		Element.hide(this.nextLink);
		
		this.setNewPhotoParams();
		this.resizePhotoBox();
		this.setPhotoCaption();
	}
}


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');
		}
	},
	'#NextLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
			soundManager.play('select');
		}
	},
	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	}
};


Behaviour.addLoadEvent(init);
Behaviour.apply();
function init() {
	var myPhoto = new Slideshow(photoId);
	myPhoto.initSwap();
	soundManagerInit();
}