/**
 * @author Grace Pok
 * Dependencies:
 * 		prototype.js
 * 		Scriptaculous
 */

//namespace
if ((typeof POK) == 'undefined') {
	POK = {};
}

//constructor for an image
POK.Image = function(linkId, img, desc) {
	this.linkId = linkId;
	this.img = img;
	this.desc = desc || '';
	
	this.activeClass = 'projImage_cur';
};

POK.Image.prototype = {
	
	setInactive: function () {
		var el = $(this.linkId);
		
		if (el.hasClassName(this.activeClass)) {
			el.removeClassName(this.activeClass);
		}
	},
	setActive: function() {
		var el = $(this.linkId);
		
		if (!el.hasClassName(this.activeClass)) {
			el.addClassName(this.activeClass);
		}
	}
};

/*
 * constructor for project -- contains a chain of images
 * 	ImageArr:  array of Pok.Image objects
 * 	config
 * 		.bigimg:  ID of the big project img element
 * 		.bigimgtrigger: ID of the element that triggers the click
 * 		.caption: ID of the individual image caption
 */
POK.Proj = function(ImageArr, config) {
	this.images = ImageArr;
	this.config = config;

	this._bigimg = null;
	this._bigimgtrigger = null;
	this._caption = null;
	this._curimg =-1;  //index into the current image in the array
	
};

POK.Proj.prototype = {
	load : function() {	
		$(this.bigimg).observe('click', this.shownextimgHack.bind(this));
	},
	
	load2 : function() {

		//retrieve the HTML elements
		this._bigimg = $(this.config.bigimg);
		this._bigimgtrigger = $(this.config.bigimgtrigger);
		this._caption = $(this.config.caption);
		
		//hook up event handlers
		this._bigimgtrigger.observe('click', this.shownextimg.bind(this));
		for ( var ii=0; ii< this.images.length; ii++){
			$(this.images[ii].linkId).observe('click', this.showImage.bind(this, ii));
		}
		//show the first image
		this.showImage(0);
	},
	
	//display image by index number
	showImage : function(idx){
	
		//if redisplaying the same image, do nothing.
		if(this._curimg == idx) {
			return;
		}

		//check boundary
		if(idx < 0 || idx >= this.images.length) {
			return;
		}
		
		//display the new image, and toggle
		this._bigimg.src = this.images[idx].img;
		this._caption.update(this.images[idx].desc);
		
		if (this._curimg >= 0) {  //only applies the first time
			this.images[this._curimg].setInactive();
		}
		this.images[idx].setActive();
		this._curimg = idx;
	},
	shownextimg : function() {
		//find out the next image
		var next = (this._curimg + 1) % this.images.length;
		this.showImage(next);
	}
	
};