var PhotoGallery = new Class({
	Implements: [Options, Events],
	options: {
		wrap: true,
		thumb_nail_container: $empty,
		image_container: $empty,
		table_rows: 1,
		table_cols: 3,
		thumb_dir: $empty,
		image_dir: $empty,
		image_src: $empty,
		main_image_size: '300px'
	},
	count_of_slides:0,
	current_page: 0,
	total_pages: 1,
	slide_images: [],

	initialize: function(options){
		this.setOptions(options);
		var img = new Element("img", {
			'styles': {
				'display' : 'none',
				'opacity' : '0',
				'height'  : this.options.main_image_size
			},
			'class': 'captioned'
		});
		this.options.image_container.getParent('td').style.width = this.options.main_image_size;
		img.inject(this.options.image_container);
	},
	addSlide: function(slide_link)
	{
		this.slide_images[this.count_of_slides] = slide_link;
		this.count_of_slides++;
	},
	addSlides: function(slide_array)
	{
		slide_array.each(function(item,index) {
			this.addSlide(item);
		});
	},
	displayImage: function(image_id, element)
	{
		var my_class = this;
		var img = this.options.image_container.getElement('img');
		
		$('imageLoadingWait').addClass('ajax-loading');
		$('imageLoadingWait').style.display = 'block';
		
		img.getParent('div').fade('hide');

		if (this.options.image_src != $empty && this.options.image_dir != $empty)
		{
			var img_src = this.options.image_src + this.options.image_dir + this.slide_images[image_id][0];
		}
		else
		{
			var img_src = this.slide_images[image_id][0];
		}

		var alt_text = this.slide_images[image_id][1];

		img.addEvent('load', function() {
			$('imageLoadingWait').removeClass('ajax-loading');
			$('imageLoadingWait').style.display = 'none';
			img.getParent('div').fade('in');
			my_class.addCaption();
		});

		img.src = img_src;
		img.title = alt_text;

		img.style.display = 'block';
		img.fade('in');
		
		this.options.thumb_nail_container.getElements('.selected_img').each(function(el) {
			el.removeClass('selected_img');
		});
		try
		{
		element.getParent('td').addClass('selected_img');
		}
		catch(err)
		{}
	
	},
	findTotalPages : function()
	{
		var col_count = 0;
		
		var total_pages = 1;
		var row_count = 0;
		var max_col = this.options.table_cols;
		var max_row = this.options.table_rows;
		this.slide_images.each(function(item,index)
		{
			if(col_count==0)
			{
				if(row_count >= max_row)
				{
					total_pages++;
				}
				row_count++;
			}
			col_count++;
			if(col_count==max_col)
			{
				col_count=0;
			}
		});
		this.total_pages = total_pages;
	},
	figureOutStartingImage : function()
	{
		var images_per_page = (this.options.table_cols * this.options.table_rows);
		return (images_per_page * this.current_page);
	},
	displayNextPage: function(page)
	{
		this.current_page = page;
		this.outputHtml();
	},
	displayButtons : function()
	{
		var my_class = this;
		if(this.current_page > 0)
		{
			//display back button
			var back_button = new Element("img",
			{
				'src':"back_arrow.gif",
				'events': 
				{
						'click': function() 
						{
							my_class.displayNextPage((--my_class.current_page));
						}
				}
				
			
			});
			back_button.inject(this.options.thumb_nail_container);
		}
		if(this.total_pages > (this.current_page+1))
		{
			//display forward button
			var forward_button = new Element("img",
			{
				'src':"forward_arrow.gif",
				'events': 
				{
						'click': function() 
						{
							my_class.displayNextPage((++my_class.current_page));
						}
				}
				
			
			});
			
			forward_button.inject(this.options.thumb_nail_container);
		}
		
	},
	
	
	outputHtml: function()
	{
		this.findTotalPages();
		this.options.thumb_nail_container.empty();
		var starting_picture_index = this.figureOutStartingImage()
		var my_table = new Element("table", {
			'class':'thumbnails'
		});
		var my_table_body = new Element('tbody').inject(my_table);
		var col_count = 0;
		var row_count = 0;
		var image_count = 0;
		var max_col = this.options.table_cols;
		var max_row = this.options.table_rows;
		var my_class = this;
		var my_tr;
		this.slide_images.each(function(item,index)
		{
			if(image_count >= starting_picture_index)
			{
			
				if(col_count==0)
				{
					row_count++;
					my_tr = new Element("tr");
				}
				
				if(row_count <= my_class.options.table_rows)
				{
				
					
					var my_td = new Element("td");
		
					if (my_class.options.image_src != $empty && my_class.options.thumb_dir != $empty)
					{
						var img_src = my_class.options.image_src + my_class.options.thumb_dir + item[0];
					}
					else var img_src = item[0];
					
					var div = new Element('div', {
						'title': item[1],
						'events': {
							'click': function() {
								my_class.options.image_container.getElement('img').fade('hide');
								my_class.displayImage(index, div);
							}
						},
						styles : {
							width      : '60px',
							height 	   : '60px',
							cursor     : 'pointer',
							background : "url('"+img_src+"') no-repeat center" 
						}
					}).inject(my_td);
		
					my_td.inject(my_tr);
		
		
					col_count++;
					if(col_count==max_col)
					{
						my_tr.inject(my_table_body);
						col_count=0;
					}
					
				}
			}
			image_count++;

		});

		if(col_count != 0)
		{
			my_tr.inject(my_table_body);
			
		}
		
		
		my_table.inject(this.options.thumb_nail_container);
		this.displayButtons();
		this.displayImage(0,null);
	},
	addCaption: function() {
		$$('img.captioned').each(function(el) {
			var captionText = ( el.getProperty('title')!=null ) ? el.getProperty('title') : el.getProperty('alt');
			if ( captionText == null ) {
				//captionText = el.getProperty('src');
				captionText = '';
			}
			
			if (el.getParent('div.figure'))
			{
				// if the div around the image already exists then only update the width and the caption text
				el.getParent('div.figure').style.width = (el.getSize().x.toInt()) + 'px';
				el.getParent('div.figure').getElement('p.caption').innerHTML = captionText;
			}
			else
			{
				var figure = new Element('div', {
					'class' : 'figure',
					'styles' : {
						'width' : (el.getSize().x.toInt()) + 'px',
						'padding' : '5px' 
					}
				});
				var caption = new Element('p', {
					'class' : 'caption',
					'html' : captionText
				});
				figure.wraps(el);
				caption.inject(el,'after');
			}
			
		});
	}
});