/* Slideshow.js
 * Author: Josh Lamb
 * Date: March 3, 2009
 * Description: Contains the slideshow object, used in the slideshow doodad to
 * handle the slideshow. Add pictures by using the add_pic(url) method (where url
 * is the address of the picture you want to add), then when you're ready use the 
 * init(pic_id, cap_id) function to get things going. After you use init() you can't
 * add more pictures. Init should not be used before the picture img and caption div 
 * specified by pic_id and cap_id are rendered.
 */

var slide_show = {
	pics: [],
	cur_pic: 0,
	pic_el: {},
	cap_el: {},
	initialized: false,
	img_state: 0,
	pic_delay: 7000,
	pic_transp_increments: 50,
	pause: false,
	timeout: -1,
	component_preload: [],
	
	init: function(pic_id, cap_id) {
		this.initialized = true;
		this.pic_el = document.getElementById(pic_id);
		this.cap_el = document.getElementById(cap_id);
		
		this.preload();
		
		if (this.pics.length > 0) {
			this.cycler();
		}
	},
	
	preload: function() {
		var img_list = ['images/site/ss_play_sel.gif', 'images/site/ss_pause_sel.gif', 'images/site/ss_play.gif', 'images/site/ss_next_sel.gif', 'images/site/ss_back_sel.gif'];
		var len;
		var img;
		
		for (var i in img_list) {
			len = this.component_preload.length;
			img = new Image();
			img.src = img_list[i];
			
			this.component_preload[len] = img;
		}
	},
	
	add_pic: function(path, caption) {
		var result;
		var img;
		
		if (this.initialized) {
			result = false;
		}
		else {
			// Preloads the image and stores it into the pics list
			img = new Image();
			img.src = path;
			this.pics[this.pics.length] = [path, caption, img];
			
			result = true;
		}
		
		return result;
	},
	
	set_transparency: function(val) {
		var moz_transp = 1 - (val / 100);
		var alpha_transp = 100 - val;
		
		this.pic_el.style.MozOpacity = moz_transp;
		this.cap_el.style.MozOpacity = moz_transp;
		this.pic_el.style.opacity = moz_transp;
		this.cap_el.style.opacity = moz_transp;
		
		if (this.pic_el.filters) {
			this.pic_el.filters.alpha.opacity = alpha_transp;
		}
		
//								this.cap_el.filters.alpha.opacity = alpha_transp;
	},
	
	fader: function(direction, transp_val) {
		t = this.pic_transp_increments;
		var moz_transp;
		
		if (direction) {
			if (transp_val == 100) {
				this.img_state = 2;
				this.cycler();
			}
			else {
				transp_val = transp_val + 10;
				this.set_transparency(transp_val);
				
				this.timeout = setTimeout('slide_show.fader(true, ' + transp_val + ');', t);
			}
		}
		else {
			if (transp_val == 0) {
				this.img_state = 0;
				this.cycler();
			}
			else {
				transp_val = transp_val - 10;
				this.set_transparency(transp_val);

				this.timeout = setTimeout('slide_show.fader(false, ' + transp_val + ');', t);
			}
		}									
	},
	
	cycler: function() {
		var state = this.img_state;
		
		if ((this.pause) && ((state == 1) || (state == 2))) {
			/* In the event that pause is true, if picture is either ready 
			 * to change or fading out, create a delay instead of acting
			 */
			this.timeout = setTimeout('slide_show.cycler();', this.pic_delay);								
		}
		else if (state == 0) {
			/* Cycler has loaded an image and is preparing to start a delay so
			 * users may see the picture
			 */
			this.img_state = 1;
			this.timeout = setTimeout('slide_show.cycler();', this.pic_delay);
		}
		else if (state == 1) {
			/* The delay is finished and the picture is fading out
			 */									
			this.fader(true, 0);
		}
		else if (state == 2) {
			/* The picture is faded out to 100% transparent - change it to the 
			 * next image and caption in sequence
			 */
			this.changer(1);
			this.img_state = 3;
			this.cycler();
		}
		else if (state == 3) {
			/* Picture has been changed and is ready to fade in
			 */
			this.fader(false, 100);
		}
	},
	
	changer: function(increment) {
		var ind = this.cur_pic + increment;
		var pic_len = this.pics.length;
		
		if (ind == pic_len) {
			ind = 0;
		}
		else if (ind < 0) {
			ind = pic_len - 1;
		}
		
		this.pic_el.src = this.pics[ind][0];
		this.cap_el.innerHTML = this.pics[ind][1];
		this.cur_pic = ind;
	},
	
	toggle_pause: function(button_img) {
		if (this.pause) {
			this.pause = false;
			button_img.src = 'images/site/ss_pause_sel.gif';
		}
		else {
			this.pause = true;
			button_img.src = 'images/site/ss_play_sel.gif';
		}
	},
	
	manual_increment: function(increment) {
		if (this.timeout != -1) {
			clearTimeout(this.timeout);
		}
		
		this.img_state = 3;
		
		this.changer(increment);
		this.cycler();
	},
	
	mouse_move: function(el, name, enter_state) {
		var path = 'images/site/ss_';
		
		if (name == 'back') {
			path += 'back';
		}
		else if (name == 'next') {
			path += 'next';
		}
		else if (name == 'pause') {
			if (this.pause) {
				path += 'play';
			}
			else {
				path += 'pause';
			}
		}
		
		if (enter_state) {
			path += '_sel';
		}
		
		path += '.gif';
		
		el.src = path;
	}
};