/* ImageViewer Class, a mootools based class made by Jaycode (jay@webextremecustomiser.com)
** it's all object oriented, baby!
** 15 Apr 2008
*/

var ImageViewer = new Class({

	arrowLeft_image_url : 'images/web_images/arrow_left.gif',
	arrowRight_image_url : 'images/web_images/arrow_right.gif',
	
	options: {
		small_container_width : 69,
		small_container_height : 75,
		scroll_size : 3 //How many images to scroll when left or right arrow pressed
	},
	
	initialize: function(medium_image_element, navigator_element, image_array, displayed_image_num, options) {
		this.medium_image_element = $(medium_image_element);
		this.navigator_element = $(navigator_element);
		this.num_small_images_displayed = displayed_image_num; //Number of small images displayed 
		this.total_image = image_array.length; //The total of images returned from server
		this.leftmost_image_index = 0; //Leftmost index of displayed image
		this.rightmost_image_index = displayed_image_num - 1; //Rightmost index of displayed image
		this.image_array = image_array;
		
		if (this.total_image <= this.num_small_images_displayed) {
			this.num_small_images_displayed = this.total_image;
			this.rightmost_image_index = this.total_image - 1;
		}
		
		this.set_previous_arrow();
		this.init_small_images();
		this.set_next_arrow();
		if (this.options.initialize) this.options.initialize.call(this);
	},
	
	set_small_images: function() { // Display all the small images
		for (var i=0; i < this.image_array.length; i++) {
			this.counter = i;
			var a_image = new Element('a', {
				'id' : 'image_small_link-' + i,
				'class' : 'back image_small',
				'styles' : {
					'height' : this.options.small_container_height + 'px',
					'width' : this.options.small_container_width + 'px'
				},
				'events' : {
					'click' : function(i) {
						//var id = this.getProperty('id').replace('image_small_link-','');
						this.set_medium_image(i);
						return false;
					}.bind(this, i)
				},
				'rel' : 'lightbox[gallery]',
				'title' : this.image_array[i]['image_title']
			});
			var img_image = new Element('img', {
				'width' : this.image_array[i]['image_width_small'],
				'height' : this.image_array[i]['image_height_small'],
				'styles': {
					'height': this.image_array[i]['image_height_small'],
					'width': this.image_array[i]['image_width_small']					
				},
				'src' : this.image_array[i]['image_path_small']
			});
			
			img_image.injectInside(a_image);
			a_image.injectInside(this.navigator_element);
		}
	},
	
	set_medium_image: function(index) {
		var a_image = new Element('a', {
			'id' : 'image_medium',
			'class' : 'image_medium',
			'href' : this.image_array[index]['image_path_large'],
			'rel' : 'lightbox[gallery]',
			'title' : this.image_array[index]['image_title']
		});
		var img_image = new Element('img', {
			'width' : this.image_array[index]['image_width_medium'],
			'height' : this.image_array[index]['image_height_medium'],
			'styles': {
				'width' : this.image_array[index]['image_width_medium'],
				'height' : this.image_array[index]['image_height_medium']		
			},
			'src' : this.image_array[index]['image_path_medium'],
			'alt' : this.image_array[index]['image_title'],
			'title' : this.image_array[index]['image_title']
		});
		
		this.medium_image_element.empty();
		
		img_image.injectInside(a_image);
		a_image.injectInside(this.medium_image_element);
		Lightbox.init();
	},
	
	set_displayed_small_images: function() { // Set which images to set visible or not
		for (var i = 0; i < this.image_array.length; i++) {
			if (i < this.leftmost_image_index || i > this.rightmost_image_index) {
				$('image_small_link-' + i).setStyle('display', 'none');
			}
			else {
				$('image_small_link-' + i).setStyle('display', 'block');
			}
			
		}
	},

	init_small_images: function() {
		if (this.total_image <= 1) { //No need to display small thumbnails if only one or less image found
			this.set_medium_image(0);
		}
		else {
			this.set_small_images();
			this.set_displayed_small_images();
			this.set_medium_image(0);
		}
	},

	set_previous_arrow: function(){
		var a_left = new Element('a', {
			'class' : 'back',
			'id' : 'arrow_left',
			'events' : {
				'click' : function() {
					if (this.leftmost_image_index > 0) {
						for (var i = 0; i < this.options.scroll_size && this.leftmost_image_index > 0; i++) {
							this.leftmost_image_index--;
							this.rightmost_image_index--;
						}
						this.set_displayed_small_images();
						$('img_arrow_right').setStyle('display', 'block');
					}
					if (this.leftmost_image_index == 0) {
						$('img_arrow_left').setStyle('display', 'none');
						$('span_spacer').setStyle('display', 'inline');
					}
				}.bind(this)
			}
		});
		
		var img = new Element('img', {
			'src' : this.arrowLeft_image_url,
			'id' : 'img_arrow_left',
			'styles' : {'display' : 'none'}
		});
		
		new Element('span', {'id' : 'span_spacer'}).setText('\xa0').injectInside(a_left);
		img.injectInside(a_left);
		
		a_left.injectInside(this.navigator_element);
	},

	set_next_arrow: function(){
		var a_right = new Element('a', {
			'class' : 'back',
			'id' : 'arrow_right',
			'events' : {
				'click' : function() {
					if (this.rightmost_image_index < this.total_image - 1) {
						for (var i = 0; i < this.options.scroll_size && this.rightmost_image_index < this.total_image - 1; i++) {
							this.rightmost_image_index++;
							this.leftmost_image_index++;
						}
						this.set_displayed_small_images();
						$('img_arrow_left').setStyle('display', 'block');
						$('span_spacer').setStyle('display', 'none');
					}
					if (this.rightmost_image_index == this.total_image - 1) {
						$('img_arrow_right').setStyle('display', 'none');
					}
				}.bind(this)
			}
		});
		
		if (this.num_small_images_displayed >= this.total_image) {
			var display_mode = 'none';
		}
		else {
			var display_mode = 'block';
		}
		var img = new Element('img', {
			'src' : this.arrowRight_image_url,
			'id' : 'img_arrow_right',
			'styles' : {
				'display' : display_mode
			}
		});
		
		img.injectInside(a_right);
		
		a_right.injectInside(this.navigator_element);
		
	}
});

ImageViewer.implement(new Options, new Events);