/**
 * JS for Works
 * author:  Grace Pok
 * version 1.0
 */

//namespace -- if it's been defined in global script, don't do it again.
if ((typeof POK) == 'undefined') {
	var POK = {};
}


/* 
 * Project Image -- Constructor
 *   id (str) -- ID of the image
 *   img (str) -- image file name
 */
POK.Pimg = function(id, img, title, year, material, dim, coll, description, type){
	this.id = id;
	this.img = img;
	this.type = type; 	//int; 0=curr, 1=past, 2=draw
	this.editbtn = 'btnedit_' + id;
	this.texts = [title, year, material, dim, coll, description]; //must match the order in PimgSelect.textflds
};

/*--------------------------------------------------------------
END of Pimg class */


/* 
 * PimgSelect - Widget that lets you select from an array of Project Images
 * Removed BLIND effect b/c of problem with height set to 0
 * 		images - array of Pimg objects
 * IDs 	---- Below are all HTML element IDs
 * 		pix - IMG element ID 
 * 		title - 
 * 		year -
 * 		mat - material
 * 		dim
 * 		coll - collection
 * 		desc
 * 		next
 * 		prev
 * 		curr	- current item # 
 */
POK.PimgSelect = function(images, IDs){
	this.images = images;
	this.imageslen = this.images.length;
	
	this.config = IDs;
	
	//element holders
	this.pixdiv;	
	this.title;
	this.year;
	this.mat;
	this.dim;
	this.coll;
	this.desc;
	this.next;
	this.prev;
	this.curr;
	
	this.idx = -1;	//current index
	this.textflds = [];
};

POK.PimgSelect.prototype = {
	//hooks up the event handler
	init: function() {
		
		var id = this.config;
		var ii;

		//convert string ID to object
		this.pixdiv = $(id.pix);
		this.title = $(id.title);
		this.year = $(id.year);
		this.mat = $(id.mat);
		this.dim = $(id.dim);
		this.desc = $(id.desc);
		this.coll = $(id.coll);
		this.next = $(id.next);
		this.prev = $(id.prev);
		this.curr = $(id.curr);
		
		//hold all text fields.  order must match what's in Pimg
		this.textflds = [this.title, this.year, this.mat, this.dim, this.coll, this.desc];
		this.textfldslen = this.textflds.length;
		
		//make every image go to next except the last
		for (ii=0; ii<(this.imageslen-1); ii++){
			$(this.images[ii].id).observe("click", this.moveNext.bind(this));
			$(this.images[ii].id).addClassName('clickable');
		}
//		this.pixdiv.observe("click", this.moveNext.bind(this));
		this.next.observe("click", this.moveNext.bind(this));
		this.prev.observe("click", this.movePrev.bind(this));
		
		this.handleClick(0, -1);
		
	},
	moveNext : function (){
		if (this.idx < this.imageslen-1 )
			this.handleClick(this.idx+1, this.idx);
	},
	movePrev : function (){
		if (this.idx <= 0)
			return;
		this.handleClick(this.idx-1, this.idx);
	},
	//index - index into the images array
	//fin - fade in index;  fout - fade out index
	handleClick: function(fin, fout){
		var ii;
		var fadeimg = null;
		var curimg = this.images[fin];
		if (fout>=0 && fout < this.imageslen){
			fadeimg = this.images[fout];
		}

		for (ii=0; ii < this.textfldslen; ii++){
			this.textflds[ii].update(curimg.texts[ii]);
		}
		this.idx = fin;
		this.curr.update(fin+1);
		
		if (fin <= 0) {
			this.prev.removeClassName('clickable');
		}
		else {
			this.prev.addClassName('clickable');
		}
		if (fin == this.imageslen-1) {
			this.next.removeClassName('clickable');
		}
		else if (this.imageslen > 1){
			this.next.addClassName('clickable');
		}
		//Adopted from http://ajaxian.com/archives/css-crossfading-example
		(fadeimg) ? Effect.Fade(fadeimg.id, {duration: 0.8, from: 1.0, to: 0.0}) : null;
        Effect.Appear(curimg.id, { duration:0.8, from:0.0, to:1.0 });
	}
};
/*---------------------------------------------------------------
END of PimgSelect class  */

/**
//string truncation that does not end in the middle of the word
// modified from: Patrick Fitzgerald | http://www.barelyfitz.com/
 * @param {string} trunc
 * @param {int} len
 */
function truncate_string(trunc, len) {
    if (trunc.length > len) {

      /* Truncate the content of the P, then go back to the end of the
         previous word to ensure that we don't truncate in the middle of
         a word */
      trunc = trunc.substring(0, len);
      trunc = trunc.replace(/w+$/, '');

      /* Add an ellipses to the end and make it a link that expands
         the paragraph back to its original size */
      trunc += '...';
    }
  	return trunc;
}