// this is to add to the existing transitions
Effect.Transitions.slowstop = function(pos) {
  return 1-Math.pow(0.5,20*pos);
}
// end custom transition

var Slideshow = Class.create();

Slideshow.prototype = {
	duration: 2, // setting
	padding: 10, // setting
	slideshow_height: 0, // setting, 0 means I find it myself
	show_nav: true, // setting
	show_descriptions: true, // setting
	nav_code: "", // setting, should be escaped html
	description_template: "#{description}", // setting, use #{number} for the actual image number replacement and #{description} for the actual description text and #{total} for the total number of images in the slideshow
	images_array: [],
	descriptions_array: [],
	total: 0,
	the_slide: {},
	current_image: 0,
	playing: false,
	element_id: "",
	proxy_pos: 0,
	proxy_string: "",
	ul_id: "", 
	initialize: function(element) {
		this.proxy_pos = Slideshows.push(this);
		this.proxy_string = "Slideshows.list["+this.proxy_pos+"]";
		this.element_id = element;
		
		this.setup(element);
	},
	setup: function(element) {
		$(element).setStyle({ overflow:'hidden'});
		this.ul_id = $$('#'+element+' ul')[0].id;
	},
	create: function() {
		this.resize(this.element_id);
		
		arrays = this.generate_image_array(this.element_id);
		
		this.images_array = arrays[0];
		this.descriptions_array = arrays[1];
		
		this.description_template = new Template(this.description_template);
		
		this.set_nav_code();
		
		this.mark_and_update(0);
	},
	next: function() {		
		if ( this.current_image == this.images_array.length-2 )
		{
			this.slide(0);
		} else {
			this.slide(this.current_image+1);
		}
	},
	previous: function() {
		if ( this.current_image == 0 ) 
		{
			this.slide(this.images_array.length-2);
		} else {
			this.slide(this.current_image-1);
		}
	},
	slide: function(number) {
		if ( this.current_image == number ) { return false; }
		
		if ( this.the_slide.currentFrame ) { this.the_slide.cancel(); }
		
		distance = this.get_distance(number);
		
		this.current_image = number;
		
		this.the_slide = new Effect.MoveBy(this.ul_id, 0, distance, { duration: this.duration, transition: Effect.Transitions.slowstop });
		
		return this.mark_and_update(number);
	},
	mark_and_update: function(number) {
		if ( this.show_descriptions && this.show_nav ) {			
			$('slideshow-description-'+this.proxy_pos).update(this.description_template.evaluate({ number:number+1, description:this.descriptions_array[number], total:this.total }));
		}
		return number;
	},
	resize: function(element) {
		if ( this.slideshow_height == 0 ) {
			new_height = $(element).getHeight() - 20 +'px';
		} else {
			new_height = this.slideshow_height + 'px';
		}
		$(element).setStyle({ height:new_height });
	},
	generate_image_array: function(element) {
		// set some defaults
		positions_array = [0];
		descriptions_array = [];
		current_position = 0;
		current_number_for_slide = 0;
		current_number_for_button = 1;
		padding = this.padding;
		html_for_menu = "";
		
		// find all images in element
		images = $$('#'+element+' img');
		// loop through them and save their widths and descriptions
		images.each(function(e) {
			// make a new current position by increasing the old one by the next image plus some padding
			current_position += e.getDimensions().width + padding;
			// save the width
			positions_array.push(-current_position);
			descriptions_array.push(e.alt);
		}); // end of images.each
		
		this.total = descriptions_array.length;
		return [positions_array, descriptions_array];
	}, // end of generate_project_image_array
	get_distance: function(number) {
		
		target_position = this.images_array[number];
		current_position = $(this.ul_id).getStyle('left').split('px')[0];
		distance = target_position - current_position;
		
		return distance;
	},
	set_nav_code: function() {
		if (this.nav_code == "" && this.show_nav) {
			this.nav_code = "<div class=\"slideshow-nav\">";	
			
			if ( this.show_descriptions ) {
				this.nav_code += "<div class=\"slideshow-description\" id=\"slideshow-description-"+this.proxy_pos+"\"></div>";
			}
			
			this.nav_code += "<div class=\"slideshow-next-prev\"><a href=\"#\" class=\"slideshow-prev\" onclick=\""+this.proxy_string+".previous(); return false\">Previous</a><a href=\"#\" class=\"slideshow-next\" onclick=\""+this.proxy_string+".next(); return false\">Next</a></div></div>";
			
			new Insertion.After(this.element_id, this.nav_code)
		}
	}
}


// This is a proxy object to keep track of multiple slideshows so the slideshow navigation can find it's particular slideshow
var Slideshows = {}

Slideshows = {
	list: [],
	push: function(slideshow) {
		current_pos = Slideshows.list.length
		Slideshows.list.push(slideshow);
		return current_pos;
	}
}