/*******************************************
 * AlexanderReyna.com
 * 
 * Image Selector
 *   Classes:
 *   	Pimg - Project image
 *   	PimgSelect - contains array of Pimg.  For Projects page
 *   	FriendSelect - contains array of Pimg.  For Friends page
 *   	Scroll	- JS scrollbar -- depends on scriptaculous slider.js
 * 
 * author:  Grace Pok
 * version 1.0
 * 
 * 
 */

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

/*
 * config.
 * 		div - popup div
 * 		btnopen - btn that should open the popup
 * 		btnclose - btn that should close the popup
 */
POK.Popup = function (config) {
	this.config = config;
	this.div = null;
	this.btnopen = null;
	this.btnclose = null;
};
POK.Popup.prototype = {
	init: function () {
		this.div = $(this.config.div);
		this.btnopen = $(this.config.btnopen);
		this.btnclose = $(this.config.btnclose);
		
		if (!this.div) {
			return;
		}
		//hookup buttons
		if (this.btnclose) {
			this.btnclose.observe("click", this.close.bind(this));
		}
		if (this.btnopen) {
			this.btnopen.observe("click", this.open.bind(this));
		}
	},
	close : function () {
		this.div.hide();
	},
	open : function () {
		this.div.show();
	}
}
/* 
 * Project Image -- Constructor
 *   id (str) -- ID of the thumbnail's <A> element (generates the click event)
 *   thumb (str) -- thumbnail file
 *   big (str) -- big image file
 *   ismovie (bool) - true if this project is a movie clip
 *   moviefile (str) - if movie project, name of FLV
 */
POK.Pimg = function(id, thumb, big, title, ismovie, moviefile){
	this.id = id;
	this.big = big;
	this.thumb = thumb;
	this.title = title;
	this.ismovie = ismovie;
	this.moviefile = moviefile;
};

POK.Pimg.prototype = {
	
	//img click event handler -- simple skeleton to call the ImgSelect object's method
	//	imgselobj -- PimgSelect object that contains this image
	click: function(imgselobj) {
		

		imgselobj.loadImage(this);
		return;
	},
	//setup each thumbnail for click event
	//  imgselobj -- PimgSelect object that contains this image
	setClickEvent: function(imgselobj) {
		if ($(this.id)) {
			$(this.id).observe("click", this.click.bind(this, imgselobj));
		}
	}
};
/*--------------------------------------------------------------
END of Pimg class */


/* 
 * PimgSelect - Widget that lets you select from an array of Project Images
 * 				Also toggles between images and bio
 * 
 * 	images - array of Pimg objects
 * 	config - strings of ID for
 * 		img			- img element
 * 		moviediv	- movie container div
 * 		title		- title text element
 * 		viewnum		
 * 		viewtime	
 * 		imgpane - div that contains all the images
 * 		biopane - div that contains the bio
 * 		btnclose - btn that should close the image pane and restore bio
 */
POK.PimgSelect = function(images, config){
	this.config = config;
	
	this.images = images;
	this.lastimg = null;    //Pimg object that was clicked last
	this.movieplayer = null;	//pointer to flowplayer object

	this.img = null;
	this.moviediv = null;
	this.title = null;  //for archive only - title text container
	this.viewnum = null;
	this.viewtime = null;
	this.imgpane = null;
	this.biopane = null;
	this.btnclose = null;
};

POK.PimgSelect.prototype = {
	
	init : function () {
		//setup pointer to HTML elements
		this.img = $(this.config.img);
		this.moviediv = $(this.config.moviediv)
		this.title = $(this.config.title);
		this.viewnum = $(this.config.viewnum);
		this.viewtime = $(this.config.viewtime);
		this.imgpane = $(this.config.imgpane);
		this.biopane = $(this.config.biopane);
		this.btnclose = $(this.config.btnclose);
		
		//hook up event handler for each thumbnail
		for (var ii=0; ii < this.images.length; ii++) {
			this.images[ii].setClickEvent(this);
		}
		
		//hookup close button
		if (this.btnclose) {
			this.btnclose.observe("click", this.closeImgpane.bind(this));
		}	
	},
	
	//load pimg object
	loadImage: function(pimg) {
		
		//do nothing if same image is clicked
		if (this.lastimg == pimg) {
			return;
		}
		
		this.lastimg = pimg;
		this.title.update(pimg.title);
		
		
		//if movie, show movie player
		if (pimg.ismovie) {
			this.img.hide();
			this.moviediv.show();
			
			var moviepath = '../' + pimg.moviefile;
			
			this.movieplayer = flashembed(this.config.moviediv, {
				 	src:'flowplayer/FlowPlayerLP.swf', 
					width: 670, 
					height: 370  //player space 27px high
				},
				{config: {
					autoPlay: false,
					autoBuffering: true,
					controlBarBackgroundColor:'0x666666',
					menuItems: [true, true, true, false, false, false, false],
					initialScale: 'fit',
					usePlayOverlay: true,
					splashImageFile: pimg.big,  //relative to the HTML page, must be jpg
					videoFile: moviepath  // relative to the player's SWF file
				}} 
			);
		}
		else {
			this.moviediv.hide();
			this.img.show();
			this.img.src = pimg.big;
		}
		
		//request latest view# & time.  Do it by POST so server doesn't cache.		
		//hide bio
		this.biopane.hide();
		//show pane
		this.imgpane.show();
		var tempid = strip_prefix(pimg.id, 'img_');
		
		new Ajax.Request('req.php', {
			method: "post",
			parameters: {
				action: 'updateview',
				id:  tempid
			},
			onSuccess : this.callbackViewcount.bind(this),
			onFailure : this.failure.bind(this),
			onException : this.exception.bind(this)
		});
	},
	//ajax callback routine
	callbackViewcount : function (req){ 
		var response = req.responseText;
		var config = {};
		if (response.isJSON()) {
			config = response.evalJSON();
		}
		this.display_viewnum(config);
	},
	//expected object members: id, viewnum, viewtime
	display_viewnum : function(obj) {
		var curid = strip_prefix(this.lastimg.id, 'img_');
		if (obj.id && obj.id == curid) {
			//alert("id received:"+obj.id + '  Views:'+obj.viewnum);
			this.viewnum.update('Views ' + obj.viewnum);
			
			if (obj.viewtime == 1) {
				this.viewtime.update('Last viewed ' + obj.viewtime + ' minute ago');
			}
			else if (obj.viewtime == 'n/a' || obj.viewtime < 0 ) {
				this.viewtime.update('Last viewed: n/a');
			}
			else if (obj.viewtime == 0) {
				this.viewtime.update('Last viewed less than a minute ago');
			}
			else {
				this.viewtime.update('Last viewed ' + obj.viewtime + ' minutes ago');
			}

		}
		else {
			//nothing!
		}
	},
	//loads the given Images's title/desc into specified elements
	//only for archive projects
	loadText: function(title, desc) {
		$(this.titleID).update(title);
		$(this.descID).update(desc);
	},
	closeImgpane : function () {

		if (this.movieplayer){  //stop movie explicitly b/c in IE it will keep playing.
			this.movieplayer.Pause();
			this.movieplayer = null;
		}

		this.lastimg = null;
		this.imgpane.hide();
		this.biopane.show();
	},
	
	failure : function() {
		
	},
	exception: function () {
		
	}	
};
/*---------------------------------------------------------------
END of PimgSelect class  */



/* 
 * FriendSelect - Friend Selector
 * 
 * 	images - array of Pimg objects
 * 	config - strings of ID for
 * 		restoreDiv		- Div to restore to when friends bio is closed.
 * 		popDiv			- divId of that popups up
 * 		popContent		- divId that will hole the popup Content
 * 		scrollobj	- scrollbar object
 * 		btnclose 	- btn that should close the friends div and go back to restoreDiv
 */
POK.FriendSelect = function(images, config){
	this.config = config;
	
	this.images = images;
	this.lastimg = null;    //Pimg object that was clicked last
	this.restoreDiv = null;
	this.popDiv = null;
	this.popContent = null;
	this.scroll = config.scrollobj;
	this.btnclose = null;
	this.idprefix = 'img_';	//prefix for all <A> IDs (e.g. img_11).  Used to extract just # portion.
};

POK.FriendSelect.prototype = {
	
	init : function () {
		//setup pointer to HTML elements
		this.popDiv = $(this.config.popDiv);
		this.btnclose = $(this.config.btnclose);
		this.popContent = $(this.config.popContent);
		this.restoreDiv = $(this.config.restoreDiv);
		
		//hook up event handler for each thumbnail
		for (var ii=0; ii < this.images.length; ii++) {
			this.images[ii].setClickEvent(this);
		}
		
		//hookup close button
		if (this.btnclose) {
			this.btnclose.observe("click", this.closePopDiv.bind(this));
		}
	},
	
	//load pimg object -- this time load Friend Information via Ajax
	loadImage: function(pimg) {
		
		//simply re-display if same image clicked.
		if (this.lastimg == pimg) {
			this.showPopDiv();
			return;
		}
		
		this.lastimg = pimg;
		
		var tempid = strip_prefix(pimg.id, this.idprefix);
		
		//window.location='friends.php?id=' + tempid;
		
		new Ajax.Request('req.php', {
			method: "get",
			parameters: {
				action: 'friendprofile',
				id:  tempid
			},
			onSuccess : this.callbackDisplayProfile.bind(this),
			onFailure : this.failure.bind(this),
			onException : this.exception.bind(this)
		});
	},
	//ajax callback routine
	callbackDisplayProfile: function (req){
		var response = req.responseText;
		var curid = strip_prefix(this.lastimg.id, this.idprefix);
		this.popContent.update(response);
		this.showPopDiv();
		//refresh the scroll bar since text length changed
		/*if( this.scroll) {
			this.scroll.refresh();
		}*/
	},
	closePopDiv: function(){
		this.popDiv.hide();
		this.restoreDiv.show();
	},
	showPopDiv:function() {
		this.restoreDiv.hide();
		this.popDiv.show();
	},
	
	failure : function() {
		
	},
	exception: function () {
		
	}	
};
/*---------------------------------------------------------------
END of PimgSelect class  */

/*
 * Scroll Widget -- DEPENDS ON scriptaculous slider.js
 *   Constructor
 *		div (str) -- div where scrollable items are stored
 *		handle (str)
 *		track (str)
 *		wrap (str)
 *		direction (str:optional) -- 'v' or 'h' default: 'h'
 */
POK.Scroll = function(config){
	this.div = config.div;
	this.handle = config.handle;  //scrollbar handle ID
	this.track = config.track;		//scrollbar track ID
	this.wrap = config.wrapper;
	this.direction = config.direction ? config.direction : 'h';
	
	//calculate the initial position of the slider & menu
	this.initPos = 0;
	
	this.sliderObj = null;

	//pointer to the actual DIV objects
	this.scrollDiv = null;
	this.handleDiv = null;
	this.trackDiv = null;
	this.wrapDiv = null;
};

POK.Scroll.prototype = {

	// scroll the element horizontally based on its width and the slider maximum value
	scrollHorizontal: function(value, element, slider) {
		element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
	},
	
	scrollVertical: function(value, element, slider) {
		element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
	},
	
	load: function(dorefresh) {
		if(! dorefresh) { 
			this.scrollDiv = $(this.div);
			this.handleDiv = $(this.handle);
			this.trackDiv = $(this.track);
			this.wrapDiv = $(this.wrap);			
		}

		//if no scrolling content or if no scrollbar, don't do anything.
		if (!this.scrollDiv || !this.wrapDiv) {
			return;
		}

		/* Slider -------need to init after page is done loading-- */
		/* otherwise the slider will be hidden...  not sure why    */
		var that = this;

		// horizontal slider control
		if (this.direction == 'h'){
				this.sliderObj = new Control.Slider(this.handle, this.track , {
				onSlide: function(v) { that.scrollHorizontal(v, that.scrollDiv, that.sliderObj);  },
				onChange: function(v) { that.scrollHorizontal(v, that.scrollDiv, that.sliderObj); }
			});
			
			// disable scrolling if text doesn't overflow the div
			if (this.scrollDiv.scrollWidth <= this.scrollDiv.offsetWidth) {
				this.sliderObj.setDisabled();
				this.wrapDiv.hide();
			}
		}
		//vertical slider control
		else {
			this.sliderObj = new Control.Slider(this.handle, this.track , {
				axis: 'vertical',
				onSlide: function(v) { that.scrollVertical(v, that.scrollDiv, that.sliderObj);  },
				onChange: function(v) { that.scrollVertical(v, that.scrollDiv, that.sliderObj); }
			});
			
			// disable scrolling if text doesn't overflow the div
			if (this.scrollDiv.scrollHeight <= this.scrollDiv.offsetHeight) {
				this.sliderObj.setDisabled();
				this.wrapDiv.hide();
			}
			else {
				this.sliderObj.setEnabled();
				this.wrapDiv.show();
			}			
		}
		this.sliderObj.setValue(this.initPos);  //Goes from 0 to 1
	},
	
	refresh: function() {
		//this.sliderObj.setDisabled();
		this.sliderObj.dispose();
		this.sliderObj = null;
		
		//recreate HTML
		this.destroyTrack();
		this.createTrack();
		this.load(true);
	},
	destroyTrack : function () {
		this.trackDiv = null;
		this.handleDiv = null;
		this.handleimg = null;
		this.wrapDiv.update('');
	},
	createTrack : function() {
		/*recreate HTML:  
		 <div id="maintrack" class="scrolltrack"> 
			<div id="mainhandle" class="scrollhandle" ><img src="graphics/scrollhandle.gif" alt="scroll handle"/></div>
		</div>*/
		
		this.trackDiv = new Element ('div', {'id' : 'maintrack', 'class' : 'scrolltrack'});
		this.wrapDiv.insert(this.trackDiv);
		
		this.handleDiv = new Element ('div', {'id' : 'mainhandle', 'class' : 'scrollhandle'});
		this.trackDiv.insert(this.handleDiv);
		
		var handleimg = new Element('img', {'src' : 'graphics/scrollhandle.gif','alt' : 'scroll handle'});
		this.handleDiv.insert(handleimg);
	}
};

/*---------------------------------------------------------------
END of Scroll class  */