/*
Format:
[{'title':'Protecting People. Reducing Risk.','alt:'Lorem ipsum','text':'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismo tincidunt ut laoreet dolore magna aliquam.','filename':'intro_image_001.jpg','href':''},
{'title':'Title number two.','alt:'Lorem ipsum','text':'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismo tincidunt ut laoreet dolore.','filename':'intro_image_002.jpg','href':''},
{'title':'Title number three.','alt:'Lorem ipsum','text':'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.','filename':'intro_image_003.jpg','href':''},
{'title':'Title number four.','alt:'Lorem ipsum','text':'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismo.','filename':'intro_image_004.jpg','href':''},
{'title':'Title number five.','alt:'Lorem ipsum','text':'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.','filename':'intro_image_005.jpg','href':''},
{'title':'Title number six.','alt:'Lorem ipsum','text':'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismo tincidunt utm.','filename':'intro_image_006.jpg','href':''}
];

*/

var DynaShow = Class.create();
DynaShow.prototype = {
	initialize: function() {
		var data = $A(arguments);
		var options = (data[0]) ? data[0] : {};
		
		this.curr_info_index = 0;
		this.thumbs = [];
		this.loop_timer = null;
		this.show_photos = [];
		this.thumbs_container = null;
		this.images_container = null;
		
		this.show_id = (options.show_id) ? options.show_id : '';
		this.show_info = (options.show_info) ? options.show_info : [];
		
		this.loop_show = (options.loop_show === true) ? true : false;
		this.loop_speed = (options.loop_speed) ? options.loop_speed : 4;
		this.loop_cont = (options.loop_cont === true) ? true : false;
		
		this.photo_w = (options.photo_w) ? options.photo_w : 378;
		this.photo_h = (options.photo_h) ? options.photo_h : 230;
		this.thumb_w = (options.thumb_w) ? options.thumb_w : 52;
		this.thumb_h = (options.thumb_h) ? options.thumb_h : 38;
		this.photo_dir = (options.photo_dir) ? options.photo_dir : 'images/intro/';
		this.thumb_dir = (options.thumb_dir) ? options.thumb_dir : this.photo_dir + 'thumbs/';
						
		if (this.show_info.length > 0) {
			this.list_width = this.show_info.length * this.photo_w;
			this.curr_offset = 0 - (this.list_width - this.photo_w);
			this.showInit();
		}
	},
	
	showInit:function () {
		var self = this;
		//pre-load images
		var loop = 0;
		var li_class,image_path,thumb_images='',full_images='';
		this.show_info.each(function(info,index) {
			li_class = (loop < 1) ? ' class="focus"' : '';
			
			// thumbnail image
			self.show_photos[loop] = new Image();
			var dot = info.filename.lastIndexOf('.');			
			var thumb_filename = info.filename.substr(0,dot) + '.szc' + self.thumb_w + 'x' + self.thumb_h + '.' + info.filename.substr(dot+1);
			image_path = self.thumb_dir + thumb_filename;
			
			
			self.show_photos[loop].src = image_path;
			thumb_images += '<li' + li_class + '><img src="' + image_path + '" alt="" /><\/li>';
			loop++;
			
			// full image
			self.show_photos[loop] = new Image();
			image_path = self.photo_dir + info.filename;
			self.show_photos[loop].src = image_path;
			full_images += '<li><img src="' + image_path + '"  alt="" /><\/li>';
			loop++;
		});
		
		// insert thumbs / images / copy
		$(this.show_id+'_thumbs').update('<ul>'+thumb_images+'</ul>');
		$(this.show_id+'_images').update('<ul>'+full_images+'</ul>');
		$(this.show_id+'_images').down('ul').setStyle({'width': this.list_width + 'px', 'left': this.curr_offset + 'px'});
		
		this.setCopy(this.curr_info_index);
		
		//set event handlers
		Event.observe(this.show_id,"mouseout",this.outEvent.bindAsEventListener(this));
		Event.observe(this.show_id,"mouseover",this.overEvent.bindAsEventListener(this));
		Event.observe(this.show_id,"mouseup",this.upEvent.bindAsEventListener(this));
		
		if (this.loop_show) { this.beginLoop(); }
	},
	
	upEvent:function(e) {
		var self = this;
		var target_el = Event.element(e);
		
		switch (target_el.tagName) {
		case 'IMG' :
			target_el = target_el.up('li');
			var parent_el = target_el.up('div');
			var pre_el = target_el;
			var target_index = 0;
			while (pre_el.previous() != 'undefined' && pre_el.previous() != null) {
				pre_el = pre_el.previous();
				target_index++;
			}
			
			//if (parent_el == $(this.show_id+'_thumbs')) {
				var href = this.show_info[target_index].href;
				if (href != '') {
					window.location = href;
				}
			//}
			break;
		}
	},
	
	overEvent:function(e) {
		var self = this;
		var target_el = Event.element(e);
		
		switch (target_el.tagName) {
		case 'LI' :
			var parent_el = target_el.up('div');
			var pre_el = target_el;
			var target_index = 0;
			while (pre_el.previous() != 'undefined' && pre_el.previous() != null) {
				pre_el = pre_el.previous();
				target_index++;
			}
			
			if (parent_el == $(this.show_id+'_thumbs')) {
				this.introChange(target_index,true);
			}
			break;
		}
	},
	
	outEvent:function(e) {
		var target_el = Event.element(e);
		var related_el = e.relatedTarget || e.toElement;
		while (related_el != target_el && related_el.nodeName != 'BODY') {
			related_el = related_el.parentNode;
		}
		if (related_el == target_el) return;
	
		switch (target_el.tagName) {
		case 'LI' :
			var parent_el = target_el.up('div');
			if (parent_el == $(this.show_id+'_thumbs')) {
				if (this.loop_cont) { this.beginLoop(); }
			}
			break;
		}
	},
	
	setCopy:function(info_index) {
		$(this.show_id+'_copy').update('<h2>' + this.show_info[info_index].title + '<\/h2><p>' + this.show_info[info_index].text + '<p\/>');
		$(this.show_id+'_title').update(this.show_info[info_index].title);
	},
	
	
	introChange:function () {
		var data = $A(arguments);
		var info_index = data[0];
		var self = this;
		
		// kill timer
		if (data[1] === true && this.loop_timer != null) {
			this.loop_timer.stop();
			this.loop_timer = null;
		}
		
		if (this.curr_info_index != info_index) {
			var move_amount = (info_index - this.curr_info_index) * this.photo_w;
			this.curr_offset = this.curr_offset + move_amount;
			new Effect.Move ($(this.show_id+'_images').down('ul'),{ x: move_amount, y: 0,duration: .5, mode: 'relative', transition: Effect.Transitions.linear, queue: {position:'end', scope: 'introscope'}});

			this.setCopy(info_index);
			
			$(this.show_id+'_thumbs').down('ul').down('li',this.curr_info_index).removeClassName('focus');
			$(this.show_id+'_thumbs').down('ul').down('li',info_index).addClassName('focus');
			this.curr_info_index = info_index;
		}	
	},
	
	beginLoop:function () {
		var self = this;
		this.loop_timer = new PeriodicalExecuter(function() { 
			var next_index = ( (self.curr_info_index + 1) >= self.show_info.length ) ? 0 : self.curr_info_index + 1;
			self.introChange(next_index,false);
			self.curr_info_index = next_index;
		}, this.loop_speed);
	}
}