// -----------------------------------------------------------------------------------
// 
// 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 --------------------------------------------------------


// 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 = 2;

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

// Define each photo's name, height, width, and caption
var photoArray = new Array(
	// Source, Width, Height, Caption
	new Array("voyages_net.jpg", "500", "375", "<b>Voyages.Net :</b> the web site took nearly two years to design, code and implement and was recently launched, this is the home page"),
	new Array("voyages_net_categories.jpg", "500", "349", "<b>Categories :</b> the articles on the voyages.net web site are spread over nine different categories, this design aims at guiding people visually towards the area they are interested in"),
	new Array("voyages_net_type.jpg", "500", "365", "<b>Types of articles :</b> the articles on the voyages.net web site are also categorised by type of article, this design also aims at guiding people visually towards the area they are interested in"),
	new Array("voyages_net_article.jpg", "427", "375", "<b>Articles :</b> on the voyages.net web site the articles can include images and an editor can both align images (left, center, right) or give the image a shadow effect"),
	new Array("voyages_net_article2.jpg", "500", "342", "<b>Images in articles :</b> The articles on the voyages.net web site can include images and furthermore an editor can link to external sources like flickr, to allow users to see the image in a larger format. In this case javascript is used to grey out the article for a visual effect that puts the image in the spotlight"),	
	new Array("voyages_net_summaries.jpg", "500", "375", "<b>Article Summaries :</b> in the magazine part of Voyages.Net the articles are classified by categories and the articles are presented based upon the four different types, each type is a different colour."),
	new Array("voyages_net_comments.jpg", "500", "375", "<b>Comments :</b> visitors and members of the voyages.net web site can leave comments about articles. as you can see here the author's comments are displayed in a different way to other comments"),
	new Array("voyages_net_pres_ad.jpg", "500", "375", "<b>Presentation :</b> at the bottom of the voyages.net web site home page there is an ad to further explain the site that leads to a presentation page"),
	new Array("voyages_net_ranking.jpg", "500", "375", "<b>Ranking articles :</b> the voyages.net web site ranks articles depending on how many people read them combined with a voting system. Articles are displayed here in this manner and to the right a square colour informs about the type of article it is, hovering over this gives further detail"),	
	new Array("voyages_net_headers.jpg", "500", "375", "<b>Random Headers :</b> throughout the Voyages.Net web site, a part from the home page, random headers are displayed. These are a few examples."),
	new Array("voyages_net_personal.jpg", "472", "375", "<b>Personal Page :</b> The voyages.net web site allows users to create their own home page, introduce themselves, what they like, dislike and link to articles and comments they have posted, as well as linking to a flickr gallery/slideshow etc."),
	new Array("blogue_voyage.jpg", "500", "342", "<b>Travel Blogs :</b> to complement Voyages.Net articles system, I created a blog system that would allow each user to have their own blog, blogue-voyage.com is a listing site of these blogs and a excuse for a new design, this is the home page"),
	new Array("blogue_voyage_list.jpg", "379", "375", "<b>Travel Blogs :</b> to complement Voyages.Net articles system, I created a blog system that would allow each user to have their own blog, blogue-voyage.com is a listing site of these blogs and a excuse for a new design, this is the page listing available blogs"),
	new Array("ubikann.jpg", "500", "342", "<b>My own blog :</b> I recently created my own blog and it was an excuse to rejuvinate the ubikann logo")	
	);


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

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

// Additional methods for Element added by SU, Couloir
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() {
		// 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.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});
		// Dynamically resize caption box as well
		Element.setWidth(this.captionBox,this.wNew-(-borderSize));
	},
	showPhoto: function(){
		new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3});
		// Workaround for problems calling object method "afterFinish"
		new Effect.Appear(this.photo, {duration: 0.5, queue: 'end', afterFinish: function(){Element.show('CaptionContainer');Element.show('PrevLink');Element.show('NextLink');}});
	},
  // added by Bernie Zajac for thumbnail listing.
	specificPhoto: function(pID) {
		photoId = pID;
		this.initSwap();
	},
	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();
	},
	initSwap: function() {
		// Begin by hiding main elements
		Element.show(this.loader);
		Element.hide(this.photo);
		Element.hide(this.captionBox);
		Element.hide(this.prevLink);
		Element.hide(this.nextLink);
		// Set new dimensions and source, then resize
		this.setNewPhotoParams();
		this.resizePhotoBox();
		this.setPhotoCaption();
	}
}

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

// 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');
		}
	},
	'#NextLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
			soundManager.play('select');
		}
	},
		// added by bernie zajac for thumbnail listing.
	'.thumbnail' : function(element) {
		element.onclick = function() {
			var elementId = element.id;
			var newPhotoId = elementId.split("thmb");
			newPhotoId = newPhotoId[1];
			var myPhoto = new Slideshow(photoId);
			myPhoto.specificPhoto(newPhotoId);
		}		
	},
	'.fl' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			soundManager.play('select');
		}
	},	
	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	}
};

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