/**
 * @class	GalleryThumbnailSliderHorizontal
 * @author	Jeffrey van der Veen
 */
var GalleryThumbnailSliderHorizontal = new Class(
{
	/**
	 * initialize
	 * @param	string	root_id
	 * @param	integer	effect_type
	 * @param	integer	time_interval
	 * @return	void
	 */
	initialize: function(root_id, effect_type, time_interval)
	{
		// nodes
		this.root_node = root_id ? $(root_id) : null;
		
		// classes
		this.image_viewport_class		= 'mb_gallery_image_viewport';
		this.image_class				= 'mb_gallery_image';
		this.image_active_class			= 'mb_gallery_image_active';
		this.image_hold_class			= 'mb_gallery_image_hold';
		this.images_class				= 'mb_gallery_images';
		this.image_prev_class			= 'mb_gallery_image_prev';
		this.image_next_class			= 'mb_gallery_image_next';
		this.image_info_class			= 'mb_gallery_image_info';
		this.image_counter_class		= 'mb_gallery_image_counter';
		this.image_title_class			= 'mb_gallery_image_title';
		this.image_description_class	= 'mb_gallery_image_description';
		this.info_title_class			= 'mb_gallery_info_title';
		this.info_description_class		= 'mb_gallery_info_description';
		this.info_link_class			= 'mb_gallery_info_link';
		this.info_link_target_class		= 'mb_gallery_info_link_taget';
		this.thumbnails_viewport_class	= 'mb_gallery_thumbnails_viewport';
		this.thumbnails_class			= 'mb_gallery_thumbnails';
		this.thumbnail_class			= 'mb_gallery_thumbnail';
		this.thumbnails_prev_class		= 'mb_gallery_thumbnails_prev';
		this.thumbnails_next_class		= 'mb_gallery_thumbnails_next';
		this.blocker_class				= 'mb_gallery_blocker';
		this.active_class				= 'active';
		this.disabled_class				= 'disabled';
		
		// prefixes
		this.image_prefix		= 'mb_gallery_image_';
		this.info_prefix		= 'mb_gallery_info_';
		this.thumbnail_prefix	= 'mb_gallery_thumbnail_';
		
		// settings
		effect_type			= effect_type ? parseInt(effect_type) : 0;
		time_interval		= time_interval ? parseInt(time_interval) : 0;
		this.effect_type	= isNaN(effect_type) ? 0 : effect_type;
		this.time_interval	= isNaN(time_interval) ? 0 : time_interval;
		
		// overall
		this.timer						= null;
		this.images_amount				= 0;
		this.image_viewport_width		= 0;
		this.thumbnails_viewport_width	= 0;
		this.thumbnail_span				= 0;
	},
	
	/**
	 * start
	 * @return	void
	 */
	start: function()
	{
		var _this = this;
		
		if (this.root_node)
		{
			var images_node					= this.root_node.getElement('.'+this.images_class);
			var image_viewport_node			= this.root_node.getElement('.'+this.image_viewport_class);
			var image_counter_node			= this.root_node.getElement('.'+this.image_counter_class);
			var thumbnails_viewport_node	= this.root_node.getElement('.'+this.thumbnails_viewport_class);
			var first_thumbnail_node		= this.root_node.getElement('.'+this.thumbnail_class);
			
			if (images_node)
			{
				var images_img_nodes = images_node.getElements('img');
				
				if (images_img_nodes)
				{
					this.images_amount = images_img_nodes.length;
					
					if (this.images_amount > 1)
					{
						this.stateHandler(this.image_next_class, 1);
						
						if (this.time_interval)
						{
							this.timer = new Fx(
							{
								duration	: this.time_interval,
								onComplete	: function()
								{
									_this.showImageSibling(1);
									_this.timer.start();
								}
							});
							
							this.timer.start();
						}
					}
				}
			}
			
			if (image_viewport_node)
			{
				var image_viewport_size		= image_viewport_node.getSize();
				this.image_viewport_width	= image_viewport_size.x;
			}
			
			if (image_counter_node)
			{
				var image_counter_text	= image_counter_node.get('text');
				image_counter_text		= image_counter_text.replace('#', '<span>1</span>');
				image_counter_text		= image_counter_text.replace('#', this.images_amount);
				
				image_counter_node.set('html', image_counter_text);
			}
			
			if (first_thumbnail_node)
			{
				var first_thumbnail_margin_right = parseInt(first_thumbnail_node.getStyle('margin-right'));
				
				if (!isNaN(first_thumbnail_margin_right))
				{
					this.thumbnail_span = first_thumbnail_margin_right;
				}
			}
			
			if (thumbnails_viewport_node)
			{
				var thumbnails_node				= this.root_node.getElement('.'+this.thumbnails_class);
				var thumbnails_viewport_size	= thumbnails_viewport_node.getSize();
				this.thumbnails_viewport_width	= thumbnails_viewport_size.x;
				
				if (thumbnails_node && this.thumbnails_viewport_width)
				{
					var thumbnails_img_nodes = thumbnails_node.getElements('img');
					
					if (thumbnails_img_nodes)
					{
						var thumbnails_img_sources = new Array();
						
						thumbnails_img_nodes.each(function(thumbnails_img_node)
						{
							thumbnails_img_src = thumbnails_img_node.get('src');
							
							if (thumbnails_img_src)
							{
								thumbnails_img_sources.push(thumbnails_img_src);
							}
						});
						
						if (thumbnails_img_sources.length)
						{
							new Asset.images(thumbnails_img_sources,
							{
								onComplete: function()
								{
									var thumbnails_size		= thumbnails_node.getSize();
									var thumbnails_width	= thumbnails_size.x-_this.thumbnail_span;
									
									if (thumbnails_width > _this.thumbnails_viewport_width)
									{
										_this.stateHandler(_this.thumbnails_next_class, 1);
									}
								}
							});
						}
					}
				}
			}
		}
		
		this.setEvents();
	},
	
	/**
	 * set events
	 * @return	void
	 */
	setEvents: function()
	{
		var _this = this;
		
		if (this.root_node)
		{
			var image_prev_node			= this.root_node.getElement('.'+this.image_prev_class);
			var image_next_node			= this.root_node.getElement('.'+this.image_next_class);
			var thumbnails_node			= this.root_node.getElement('.'+this.thumbnails_class);
			var thumbnails_prev_node	= this.root_node.getElement('.'+this.thumbnails_prev_class);
			var thumbnails_next_node	= this.root_node.getElement('.'+this.thumbnails_next_class);
			
			if (image_prev_node && image_next_node)
			{
				image_prev_node.addEvent('click', function()
				{
					if (!this.hasClass(_this.disabled_class))
					{
						_this.showImageSibling(2);
					}
				});
				
				image_next_node.addEvent('click', function()
				{
					if (!this.hasClass(_this.disabled_class))
					{
						_this.showImageSibling(1);
					}
				});
			}
			
			if (thumbnails_node)
			{
				var thumbnail_nodes = thumbnails_node.getElements('.'+this.thumbnail_class);
				
				if (thumbnail_nodes)
				{
					thumbnail_nodes.addEvent('click', function()
					{
						if (!this.hasClass(_this.active_class))
						{
							var thumbnail_img_node	= this.getElement('img');
							var thumbnail_img_class	= thumbnail_img_node.get('class');
							var thumbnail_index		= parseInt(thumbnail_img_class.replace(_this.thumbnail_prefix, ''));
							
							if (!isNaN(thumbnail_index))
							{
								var img_class				= _this.image_prefix+thumbnail_index;
								var active_thumbnail_node	= thumbnails_node.getElement('.'+_this.active_class);
								var direction				= 1;
								
								if (active_thumbnail_node)
								{
									var active_thumbnail_img_node	= active_thumbnail_node.getElement('img');
									var active_thumbnail_img_class	= active_thumbnail_img_node.get('class');
									var active_thumbnail_index		= parseInt(active_thumbnail_img_class.replace(_this.thumbnail_prefix, ''));
									
									if (!isNaN(active_thumbnail_index))
									{
										if (thumbnail_index < active_thumbnail_index)
										{
											direction = 2;
										}
									}
								}
								
								_this.showImage(img_class, direction);
								_this.showImageInfo(img_class);
							}
						}
					});
				}
			}
			
			if (thumbnails_prev_node && thumbnails_next_node)
			{
				thumbnails_prev_node.addEvent('click', function()
				{
					if (!this.hasClass(_this.disabled_class))
					{
						_this.scrollThumbnails(2);
					}
				});
				
				thumbnails_next_node.addEvent('click', function()
				{
					if (!this.hasClass(_this.disabled_class))
					{
						_this.scrollThumbnails(1);
					}
				});
			}
		}
	},
	
	/**
	 * show image
	 * @param	string	img_class
	 * @param	integer	direction
	 * @return	void
	 */
	showImage: function(img_class, direction)
	{
		var _this = this;
		
		if (this.root_node && img_class)
		{
			var image_node		= this.root_node.getElement('.'+this.image_class);
			var images_node		= this.root_node.getElement('.'+this.images_class);
			var img_index		= parseInt(img_class.replace(this.image_prefix, ''));
			var image_a_node	= null;
			
			if (!isNaN(img_index))
			{
				var thumbnails_node	= this.root_node.getElement('.'+this.thumbnails_class);
				var info_class		= this.info_prefix+img_index;
				var info_node		= this.root_node.getElement('.'+info_class);
				
				if (thumbnails_node)
				{
					var thumbnail_img_class	= this.thumbnail_prefix+img_index;
					var thumbnail_img_node	= thumbnails_node.getElement('.'+thumbnail_img_class);
					var thumbnail_node		= thumbnail_img_node.getParent('.'+this.thumbnail_class);
					
					if (thumbnail_node)
					{
						if (!thumbnail_node.hasClass(this.active_class))
						{
							var active_thumbnail_node = thumbnails_node.getElement('.'+this.active_class);
							
							if (active_thumbnail_node)
							{
								active_thumbnail_node.removeClass(this.active_class);
							}
							
							thumbnail_node.addClass(this.active_class);
						}
						
						_this.scrollThumbnails(direction, thumbnail_node);
					}
				}
				
				if (info_node)
				{
					var info_link_node = info_node.getElement('.'+this.info_link_class);
					
					if (info_link_node)
					{
						var info_link_target_node	= info_node.getElement('.'+this.info_link_target_class);
						var info_link_text			= info_link_node.get('text');
						
						image_a_node = new Element('a', {href: info_link_text});
						
						if (info_link_target_node)
						{
							var info_link_target_text = info_link_target_node.get('text');
							
							image_a_node.set('target', info_link_target_text);
						}
					}
				}
				
				switch (img_index)
				{
					case 1: // first
						this.stateHandler(this.image_prev_class, 0);
						
						if (this.images_amount == 1)
						{
							this.stateHandler(this.image_next_class, 0);
						}
						else
						{
							this.stateHandler(this.image_next_class, 1);
						}
						break;
					case this.images_amount: // last
						this.stateHandler(this.image_prev_class, 1);
						this.stateHandler(this.image_next_class, 0);
						break;
					default:
						this.stateHandler(this.image_prev_class, 1);
						this.stateHandler(this.image_next_class, 1);
						break;
				}
			}
			
			if (image_node && images_node)
			{
				var img_node = images_node.getElement('.'+img_class);
				
				if (img_node)
				{
					var img_node_clone			= img_node.clone();
					var img_node_clone_clone	= img_node_clone.clone();
					var image_active_node		= image_node.getElement('.'+this.image_active_class);
					var image_hold_node			= image_node.getElement('.'+this.image_hold_class);
					
					if (image_active_node)
					{
						if (this.effect_type && image_hold_node)
						{
							switch (this.effect_type)
							{
								case 1: // fade
									image_active_node.setStyle('z-index', 20);
									image_hold_node.setStyle('z-index', 10);
									
									img_node_clone.inject(image_hold_node);
									
									var effect = new Fx.Morph(image_active_node,
									{
										duration	: 500,
										transition	: Fx.Transitions.Quad.easeOut,
										onStart		: function()
										{
											_this.displayBlocker(1);
											_this.setTimer(0);
										},
										onComplete	: function()
										{
											image_active_node.set('html', null);
											img_node_clone_clone.inject(image_active_node);
											image_active_node.setStyle('opacity', 1);
											image_hold_node.set('html', null);
											
											if (image_a_node)
											{
												image_a_node.wraps(img_node_clone_clone);
											}
											
											_this.displayBlocker(0);
											_this.setTimer(1);
										}
									});
									
									effect.start(
									{
										'opacity': 0
									});
									break;
								case 2: // slide
									if (this.image_viewport_width)
									{
										var image_left_start	= 0;
										var image_left_end		= -this.image_viewport_width;
										
										direction = !isNaN(parseInt(direction)) ? direction : 1;
										
										switch (direction)
										{
											case 1: // left
												image_node.setStyle('left', 0);
												image_active_node.setStyle('left', 0);
												image_hold_node.setStyle('left', this.image_viewport_width);
												break;
											case 2: // right
												image_left_start	= -this.image_viewport_width;
												image_left_end		= 0;
												
												image_node.setStyle('left', -this.image_viewport_width);
												image_active_node.setStyle('left', this.image_viewport_width);
												image_hold_node.setStyle('left', 0);
												break;
										}
										
										img_node_clone.inject(image_hold_node);
										
										var effect = new Fx.Morph(image_node,
										{
											duration	: 500,
											transition	: Fx.Transitions.Quad.easeOut,
											onStart		: function()
											{
												_this.displayBlocker(1);
												_this.setTimer(0);
											},
											onComplete	: function()
											{
												image_active_node.set('html', null);
												img_node_clone_clone.inject(image_active_node);
												image_node.setStyle('left', image_left_start);
												image_hold_node.set('html', null);
												
												if (image_a_node)
												{
													image_a_node.wraps(img_node_clone_clone);
												}
												
												_this.displayBlocker(0);
												_this.setTimer(1);
											}
										});
										
										effect.start(
										{
											'left': image_left_end
										});
									}
									break;
							}
						}
						else
						{
							this.setTimer(0);
							this.setTimer(1);
							
							image_active_node.set('html', null);
							img_node_clone.inject(image_active_node);
							
							if (image_a_node)
							{
								image_a_node.wraps(img_node_clone);
							}
						}
					}
				}
			}
		}
	},
	
	/**
	 * show image sibling
	 * @param	integer	direction
	 * @return	void
	 */
	showImageSibling: function(direction)
	{
		if (this.root_node)
		{
			var image_active_node	= this.root_node.getElement('.'+this.image_active_class);
			var images_node			= this.root_node.getElement('.'+this.images_class);
			
			if (image_active_node && images_node)
			{
				var image_active_img_node = image_active_node.getElement('img');
				
				if (image_active_img_node)
				{
					var image_active_img_class = image_active_img_node.get('class');
					
					if (image_active_img_class)
					{
						var img_node = images_node.getElement('.'+image_active_img_class);
						
						if (img_node)
						{
							var img_sibling_node	= null;
							var img_sibling_class	= null;
							
							direction = !isNaN(parseInt(direction)) ? direction : 1;
							
							switch (direction)
							{
								case 1: // left
									img_sibling_node = img_node.getNext('img');
									
									if (!img_sibling_node)
									{
										img_sibling_class = this.image_prefix+1;
									}
									break;
								case 2: // right
									img_sibling_node = img_node.getPrevious('img');
									
									if (!img_sibling_node)
									{
										img_sibling_class = this.image_prefix+this.images_amount;
									}
									break;
							}
							
							if (img_sibling_node)
							{
								var img_sibling_class = img_sibling_node.get('class');
							}
							
							if (img_sibling_class)
							{
								this.showImage(img_sibling_class, direction);
								this.showImageInfo(img_sibling_class);
							}
						}
					}
				}
			}
		}
	},
	
	/**
	 * show image info
	 * @param	string	img_class
	 * @return	void
	 */
	showImageInfo: function(img_class)
	{
		var _this = this;
		
		if (this.root_node && img_class)
		{
			var img_index = parseInt(img_class.replace(this.image_prefix, ''));
			
			if (!isNaN(img_index))
			{
				var info_class	= this.info_prefix+img_index;
				var info_node	= this.root_node.getElement('.'+info_class);
				
				if (info_node)
				{
					var image_info_node			= this.root_node.getElement('.'+this.image_info_class);
					var image_counter_node		= this.root_node.getElement('.'+this.image_counter_class);
					var image_title_node		= this.root_node.getElement('.'+this.image_title_class);
					var image_description_node	= this.root_node.getElement('.'+this.image_description_class);
					var info_title_node			= info_node.getElement('.'+this.info_title_class);
					var info_description_node	= info_node.getElement('.'+this.info_description_class);
					var info_title_text			= info_title_node ? info_title_node.get('text') : null;
					var info_description_text	= info_description_node ? info_description_node.get('text') : null;
					
					if (image_info_node)
					{
						if ((info_title_node || info_description_node) && image_info_node.hasClass(this.disabled_class))
						{
							image_info_node.removeClass(this.disabled_class);
						}
						else if (!info_title_node && !info_description_node && !image_info_node.hasClass(this.disabled_class))
						{
							image_info_node.addClass(this.disabled_class);
						}
					}
					
					if (image_counter_node)
					{
						var image_counter_span_node = image_counter_node.getElement('span');
						
						if (image_counter_span_node)
						{
							image_counter_span_node.set('text', img_index);
						}
					}
					
					if (image_title_node)
					{
						image_title_node.set('text', info_title_text);
					}
					
					if (image_description_node)
					{
						image_description_node.set('text', info_description_text);
					}
				}
			}
		}
	},
	
	/**
	 * scroll thumbnails
	 * @param	integer	direction
	 * @param	object	thumbnail_node
	 * @return	void
	 */
	scrollThumbnails: function(direction, thumbnail_node)
	{
		var _this = this;
		
		if (this.root_node && this.thumbnails_viewport_width)
		{
			var thumbnails_viewport_node	= this.root_node.getElement('.'+this.thumbnails_viewport_class);
			var thumbnails_node				= this.root_node.getElement('.'+this.thumbnails_class);
			
			if (thumbnails_viewport_node && thumbnails_node)
			{
				var thumbnails_size		= thumbnails_node.getSize();
				var thumbnails_width	= thumbnails_size.x-this.thumbnail_span;
				
				if (thumbnails_width > this.thumbnails_viewport_width)
				{
					var thumbnails_max_left	= -(thumbnails_width-this.thumbnails_viewport_width);
					var thumbnails_position	= thumbnails_node.getPosition(thumbnails_viewport_node);
					var thumbnails_left		= thumbnails_position.x;
					var thumbnails_left_end	= null;
					
					if (thumbnail_node)
					{
						thumbnails_viewport_center	= parseInt(this.thumbnails_viewport_width/2);
						thumbnail_coords			= thumbnail_node.getCoordinates(thumbnails_node);
						thumbnail_left				= thumbnail_coords.left;
						thumbnail_width				= thumbnail_coords.width;
						thumbnail_center			= parseInt(thumbnail_width/2);
						
						thumbnails_left_end = -(thumbnail_left+thumbnail_center-thumbnails_viewport_center);
					}
					else
					{
						direction = !isNaN(parseInt(direction)) ? direction : 1;
						
						switch (direction)
						{
							case 1: // left
								if (thumbnails_left > thumbnails_max_left)
								{
									thumbnails_left_end = thumbnails_left-this.thumbnails_viewport_width;
									
									if (this.thumbnail_span)
									{
										thumbnails_left_end -= this.thumbnail_span;
									}
								}
								break
							case 2: // right
								if (thumbnails_left < 0)
								{
									thumbnails_left_end = thumbnails_left+this.thumbnails_viewport_width;
									
									if (this.thumbnail_span)
									{
										thumbnails_left_end += this.thumbnail_span;
									}
								}
								break;
						}
					}
					
					if (!isNaN(parseInt(thumbnails_left_end)))
					{
						if (thumbnails_left_end < thumbnails_max_left)
						{
							thumbnails_left_end = thumbnails_max_left;
						}
						else if(thumbnails_left_end > 0)
						{
							thumbnails_left_end = 0;
						}
						
						switch (thumbnails_left_end)
						{
							case 0: // first
								this.stateHandler(this.thumbnails_prev_class, 0);
								this.stateHandler(this.thumbnails_next_class, 1);
								break;
							case thumbnails_max_left: // last
								this.stateHandler(this.thumbnails_prev_class, 1);
								this.stateHandler(this.thumbnails_next_class, 0);
								break;
							default:
								this.stateHandler(this.thumbnails_prev_class, 1);
								this.stateHandler(this.thumbnails_next_class, 1);
								break;
						}
						
						var effect = new Fx.Morph(thumbnails_node,
						{
							duration	: 500,
							transition	: Fx.Transitions.Quad.easeOut,
							onStart		: function()
							{
								_this.displayBlocker(1);
							},
							onComplete	: function()
							{
								_this.displayBlocker(0);
							}
						});
						
						effect.start(
						{
							'left': thumbnails_left_end
						});
					}
				}
			}
		}
	},
	
	/**
	 * state handler
	 * @param	string	handler_class
	 * @param	integer	state
	 * @return	void
	 */
	stateHandler: function(handler_class, state)
	{
		if (this.root_node && handler_class)
		{
			var handler_node = this.root_node.getElement('.'+handler_class);
			
			if (handler_node)
			{
				state = !isNaN(parseInt(state)) ? state : 1;
				
				switch (state)
				{
					case 0: // disable
						handler_node.addClass(this.disabled_class);
						break;
					case 1: // enable
						handler_node.removeClass(this.disabled_class);
						break;
				}
			}
		}
	},
	
	/**
	 * display blocker
	 * @param	integer	display
	 * @return	void
	 */
	displayBlocker: function(display)
	{
		if (this.root_node)
		{
			var blocker_node = this.root_node.getElement('.'+this.blocker_class);
			
			if (blocker_node)
			{
				display = !isNaN(parseInt(display)) ? display : 1;
				
				switch (display)
				{
					case 0: // hide
						blocker_node.setStyle('display', 'none');
						break
					case 1: // show
						blocker_node.setStyle('display', 'block');
						break;
				}
			}
		}
	},
	
	/**
	 * set timer
	 * @param	integer	state
	 * @return	void
	 */
	setTimer: function(state)
	{
		if (this.timer)
		{
			state = !isNaN(parseInt(state)) ? state : 1;
			
			switch (state)
			{
				case 0: // stop
					this.timer.cancel();
					break
				case 1: // start
					this.timer.start();
					break;
			}
		}
	}
});