// -----------------------------------------------------------------------------------
// 
// This page coded by Scott Upton
// http://www.uptonic.com | http://www.couloir.org
//
// This work is licensed under a Creative Commons License
// Attribution-ShareAlike 2.0
// http://creativecommons.org/licenses/by-sa/2.0/
//
// Associated APIs copyright their respective owners
//
// -----------------------------------------------------------------------------------
// --- version date: 11/28/05 --------------------------------------------------------


// Define each photo's name, width, height and caption
var photoArray = new Array(
	// Source, Width, Height, Caption
new Array("p1_pica1.jpg", "350", "320", "<br>Quelle pagaille! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>What a mess! book to come in 2010."),
new Array("p10_pica1.jpg", "350", "320", "<br>Quelle pagaille! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>What a mess! book to come in 2010."),
new Array("p11_pica1.jpg", "350", "320", "<br>Quelle pagaille! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>What a mess! book to come in 2010."),
new Array("p14_pica1.jpg", "350", "320", "<br>Quelle pagaille! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>What a mess! book to come in 2010."),
new Array("p16_pica1.jpg", "350", "320", "<br>Quelle pagaille! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>What a mess! book to come in 2010."),
new Array("p17_pica1.jpg", "350", "320", "<br>Quelle pagaille! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>What a mess! book to come in 2010."),
new Array("p27_pica1.jpg", "350", "320", "<br>Quelle pagaille! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>What a mess! book to come in 2010."),
new Array("P_garde1_moka1.jpg", "350", "320", "<br>Au lit, Moka! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>Get to bed, Moka! book to come in 2010."),
new Array("p4-5_moka1.jpg", "350", "320", "<br>Au lit, Moka! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>Get to bed, Moka! book to come in 2010."),
new Array("p6-7_moka1.jpg", "350", "320", "<br>Au lit, Moka! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>Get to bed, Moka! book to come in 2010."),
new Array("p12-13_moka1.jpg", "350", "320", "<br>Au lit, Moka! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>Get to bed, Moka! book to come in 2010."),
new Array("p16-17_moka1.jpg", "350", "320", "<br>Au lit, Moka! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>Get to bed, Moka! book to come in 2010."),
new Array("p26-27_moka1.jpg", "350", "320", "<br>Au lit, Moka! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>Get to bed, Moka! book to come in 2010."),
new Array("p26-27_moka1.jpg", "350", "320", "<br>Au lit, Moka! \u00E9crit par Danielle Marcotte et Laurence AurŽlie, la courte Žchelle, ˆ para”tre.","<br>Get to bed, Moka! book to come in 2010.")
	);

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

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

// if no photoId supplied or if request out of range then set default
var photoId = (!photoId)? 0 : photoId;
var photoId = (photoId<0)? 0 : photoId;
var photoId = (photoId>photoNum-1)? 0 : photoId;



// Photo directory for this gallery
var photoDir = "portfolio/sophie/";

// Icon directory for this gallery
var iconDir = "portfolio/sophie/";


// Icon prefix Note that icons must be gifs
var iconPrefix = "thumb_";


var iconsHTML = "&nbsp;"

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

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

var Slideshow = Class.create();

Slideshow.prototype = {
	initialize: function(photoId) {
		this.photoId = photoId;
		this.photo = 'Photo';
		this.photoBox = 'ImageContainer';
		this.photoContainer = 'OuterContainer';
		this.linkContainer = 'LinkContainer'
		this.prevLink = 'PrevLink';
		this.nextLink = 'NextLink';
		this.captionBox = 'CaptionContainer';
		this.captionFr = 'CaptionFr';
		this.captionEng = 'CaptionEng';
		this.counter = 'Counter';
		this.loader = 'Loading';
		this.iconsBox = 'IconContainer';
		this.icons = 'Icons';
	},
	getCurrentSize: function() {
		// Get current height and width, subtracting CSS border size
		this.wCur = Element.getWidth(this.photoBox) - borderSize;
		this.hCur = Element.getHeight(this.photoBox) - borderSize;
	},
/*	getNewSize: function() {
		// Get current height and width
		this.wNew = photoArray[photoId][1];
		this.hNew = photoArray[photoId][2];
	},
	getScaleFactor: function() {
		this.getCurrentSize();
		this.getNewSize();
		// Scalars based on change from old to new
		this.xScale = (this.wNew / this.wCur) * 100;
		this.yScale = (this.hNew / this.hCur) * 100;
	},
	*/
	setNewPhotoParams: function() {
		// Set source of new image    
		
		

		Element.setSrc(this.photo,photoDir + photoArray[photoId][0]);
		// Set anchor for bookmarking
		Element.setHref(this.prevLink, "#" + (photoId+1));
		Element.setHref(this.nextLink, "#" + (photoId+1));
	},
	setPhotoCaption: function() {
		// Add caption from gallery array
		Element.setInnerHTML(this.counter,((photoId+1)+'/'+photoNum));
		Element.setInnerHTML(this.captionFr,photoArray[photoId][3]);
		Element.setInnerHTML(this.captionEng,photoArray[photoId][4]);
	},

	showPhoto: function(){
		new Effect.Fade(this.loader, {delay: 0.5, duration: 0.5});
		// Workaround for problems calling object method "afterFinish"
		new Effect.Appear(this.photo, {duration: 1.0, queue: 'end', afterFinish: function(){ new Effect.Appear('CaptionContainer', {delay: 0.0, duration: 0.5}); new Effect.Appear('LinkContainer', {delay: 0.0, duration: 0.5});}});
	},
	nextPhoto: function(){
		// Figure out which photo is next
		(photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
		this.initSwap();
	},
	prevPhoto: function(){
		// Figure out which photo is previous
		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
		this.initSwap();
	},	

	
	goToPhoto: function(newId){
		// Set go to photo
		
		var tempId = newId;
		var splitTempId = tempId.split("_");
		var Id = splitTempId[1] - 1;   
		if(photoId != Id){
			photoId = Id;
			this.initSwap();
		}
	},
	
	
	initSwap: function() {
		// Begin by hiding main elements
		
		Element.hide(this.photo);
		Element.show(this.loader);
		Element.hide(this.captionBox);
		Element.hide(this.linkContainer);
		// Set new dimensions and source, then resize
		this.setNewPhotoParams();
		this.setPhotoCaption();
	},
	
	initIcons: function() {
	    // 
	    
		
		for (var i = 0; i < photoNum; i++) {
			tempName = photoArray[i][0].split(".");
			iconFileName = tempName[0] + ".gif"
			iconURL = (iconDir+iconPrefix+iconFileName);
			iconsHTML = iconsHTML + "<a href='#"+(i+1)+"'><img class='iconImages' id='ic_"+(i+1)+"' src='"+(iconURL)+"' alt='icon' width='41' height='41' /></a>";
		}
		Element.setInnerHTML('icons', iconsHTML);
		
		//Calculate the total width of all the icons including borders and margins
		var totalIconWidth = (Number(Element.getStyle('ic_1', 'margin-left').replace('px',''))+Number(Element.getStyle('ic_1', 'margin-right').replace('px',''))+Number(Element.getStyle('ic_1', 'border-left-width').replace('px',''))+Number(Element.getStyle('ic_1', 'border-right-width').replace('px',''))+Number(Element.getStyle('ic_1', 'width').replace('px','')))*photoNum + 5
		Element.setWidth('icons', totalIconWidth);
		
		//Scroll to current page
		
		var iconPageNumber=Math.ceil((photoId)/9)-1
		
		if (iconPageNumber>0) {
			scrollForward('IconFrame', 'icons', '531', iconPageNumber);
		}
		
	
		
		//debug(totalIconWidth);		
	},
	
	initCaption: function() {
		Element.setWidth(this.captionBox,this.wCur-(-borderSize));
	},	
	
	
	initSwapFirst: function() {
		// Begin by hiding main elements
		Element.hide(this.photo);
		Element.show(this.loader);
		Element.hide(this.captionBox);
		//Element.setInnerHTML(this.caption,"");
		//Element.setInnerHTML(this.counter,"");
		Element.hide(this.linkContainer);
		// Set new dimensions and source, then resize
		
		this.setNewPhotoParams();
		//this.resizePhotoBox();
		//this.initCaption();
		
		//To resize icon box, activate the following line
		//Element.setWidth(this.iconsBox,this.wCur-(-borderSize));
		this.setPhotoCaption();
		this.initIcons();
		Behaviour.apply();
	}
}

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

// Establish CSS-driven events via Behaviour script
var myrules = {

	'body' :  function(el){
			Effect.Center('WindowBox');
		window.onresize = function(el){
			Effect.Center('WindowBox');
		}
	},


	'#Photo' : function(element){
		element.onload = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.showPhoto();
		}
	},
	'#PrevLink' : function(element){
		element.onmouseover = function(){
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.prevPhoto();
		}
	},
/*	'#Icons img' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
			//Element.setOpacity(this,'1.00');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.goToPhoto(this.id);
			soundManager.play('select');
		}
		element.onmouseout = function(){
			//Element.setOpacity(this,'0.5');
		}
	},*/
	
	'#NextLink' : function(element){
		element.onmouseover = function(){
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
		}
	},
	

	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	},
	
	
	//Icon Behaviors
		

	'img.MouseOver' : function(el){
		setMouseOver(el);
		element.onmouseover = function(){
			mouseGoesOver(this);
		}
		element.onclick = function(){
		}
		element.onmouseout = function(){
			mouseGoesOut(this);
		}
	},	
	'#IconFrame img': function(el){
		element.onmouseover = function(){
			Element.setStyle(this, { border: 'solid 1px orange'} );
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.goToPhoto(this.id);
		}
			element.onmouseout = function(){
			Element.setStyle(this, { border: 'solid 1px white'} );
		}
	},
	
	'#icon_prev img'  : function(){
		element.onload = function(el){
		}

		element.onclick = function(el){
			scrollBack('IconFrame', 'icons', '531');
		}
	},
	'#icon_next img'  : function(){
		element.onload = function(el){
		}
		element.onclick = function(el){
			scrollForward('IconFrame', 'icons', '531', '1');
		}
	}

};


// Add window.onload event to initialize
Behaviour.addLoadEvent(init);
Behaviour.apply();
function init() {
	var myPhoto = new Slideshow(photoId);	
	myPhoto.initSwapFirst();
}