//Slideshow RC2 for Mootools 1.0. Copyright (c) 2007 Aeron Glemann, <http://electricprism.com/aeron/slideshow>, MIT Style License.
// Modified heavily by Ryan Scheuermann <http://www.concept64.com/>
Slideshow = new Class({
	
	initialize: function(slideshow, props) {
		this.props = Object.extend({
			captions: false,
			links: false,
			duration: [2000, 4000],
			height: false,
			hu: '/',
			images: [],
			transition: Fx.Transitions.sineInOut,
			type: 'fade',
			width: false,
			direction: 'right'
		}, props || {});

		if (this.props.images.length <= 1) { return; }

		this.slideshow = $E(slideshow);

		this.a = img = $E('img', this.slideshow);

		this.fx = null;
	},

	start: function() {
		this.slideshow.setHTML('');

		this.a.setStyles({display: 'block', position: 'absolute', right: '0px', top: '0px', height: 'auto', width: 'auto', zIndex: 1});
		this.a.injectInside(this.slideshow);
		
		if(this.fx != null) {
			this.fx.time = fx.options.duration = 0;
			this.fx.stop(true);		
		}
		
		obj = this.a.getCoordinates();

		this.height = ((this.props.height) ? this.props.height : obj['height']);
		this.width = ((this.props.width) ? this.props.width : obj['width']);
		
		this.slideshow.setStyles({display: 'block', position: 'relative', width: this.width + 'px'});

		// Images appear within a bounding div inside of the slideshow div
		// This div may be used to attach events - such as myShow.div.onmouseover - in order to show / hide navigation or further manipulate the slideshow
		this.div = new Element('div');
		this.div.setStyles({display: 'block',cursor: 'pointer', height: (this.height + 'px'), overflow: 'hidden', position: 'relative', width: (this.width + 'px')});
		this.div.injectInside(this.slideshow);
		
		if(this.props.captions != false) {				
			this.caption = new Element('div').addClass('caption');
			this.caption.setStyles({display: 'block', zIndex: 1000});
			this.caption.setStyle(this.props.direction, 0);
			
			this.caption_fx = new Fx.Style(this.caption,this.props.direction,{duration: this.props.duration[0], transition: this.props.transition, 
					onStart: function() {
						this.caption_p_fx.set('0');
					}.bind(this),
					onComplete: function() {
						this.caption_p.setText(this.props.captions[(this.curr[0] == 0) ? this.props.images.length-1 : this.curr[0] - 1]);
						this.caption_p_fx.start('1');
					}.bind(this)});
					
			
			this.caption_p = new Element('p').setHTML(this.props.captions[0]);
			
			this.caption_p_fx = new Fx.Style(this.caption_p, 'opacity', {duration: 500});
			
			this.caption_p.injectInside(this.caption);
			this.caption.injectInside(this.div);
		}
		if(this.props.links != false) {
			this.a.setProperty('rel', 0);
			this.a.onclick = function(slide) {
				slide.props.links[this.getProperty('rel')].fireEvent('click');
			}.bind(img).pass(this);
		}
		
		this.a.injectInside(this.div);
				
		this.b = this.a.clone();
		this.b.setStyle('opacity', 0);
		this.b.injectAfter(this.a);
		
		//if(this.props.captions == false) {
				this.a.addEvent('mouseover', function() {
					this.run = false; 
					if(this.fx != null) {
						this.fx.stop().options.duration = 100;
						if(this.curr[1] % 2) {
							this.fx.start({ 
								'0': this.p2,
								'1': this.p4
							});
						}else {
							this.fx.start({ 
								'0': this.p3,
								'1': this.p2
							});
							this.curr[0] = (this.curr[0] == 0) ? this.props.images.length - 1 : this.curr[0] - 1;
							this.curr[1]--;
							this.loader.src = this.props.hu + this.props.images[this.curr[0]].trim();
						}
						if(this.props.captions != false) {
							this.caption_fx.stop().options.duration = 100;
							this.caption_fx.start(0);
						}
						this.fx = null;
					}
				}.bind(this)
				).addEvent('mouseout', function() {
					this.run = true;
					this.preload();
				}.bind(this));

				this.b.addEvent('mouseover', function() {
					this.run = false; 
					if(this.fx != null) {
						this.fx.stop().options.duration = 100;
						if(this.curr[1] % 2) {
							this.fx.start({ 
								'0': this.p3,
								'1': this.p2
							});
							this.curr[0] = (this.curr[0] == 0) ? this.props.images.length - 1 : this.curr[0] - 1;
							this.curr[1]--;
							this.loader.src = this.props.hu + this.props.images[this.curr[0]].trim();
						}else {
							this.fx.start({ 
								'0': this.p2,
								'1': this.p4
							});
						}

						if(this.props.captions != false) {
							this.caption_fx.stop().options.duration = 100;
							this.caption_fx.start(0);
						}
						this.fx = null;
					}
				}.bind(this)
				).addEvent('mouseout', function() {
					this.run = true; 
					this.preload();					
				}.bind(this));
			//}

		this.p0 = {};					
		this.p0[this.props.direction] = [this.width, 0];
		this.p1 = {};
		this.p1[this.props.direction] = [0, (this.width * -1)];
		
		this.p2 = {};
		this.p2[this.props.direction] = [0];
		this.p3 = {};
		this.p3[this.props.direction] = [this.width];
		this.p4 = {};
		this.p4[this.props.direction] = [(this.width * -1)];
		

		this.curr = [1, 1];
		this.timer = (this.timer) ? [0] : [(new Date).getTime() + this.props.duration[1], 0];

		this.loader = new Image();
		this.loader.src = this.props.hu + this.props.images[this.curr[0]].trim();


		this.run = true;
		this.preload();
	},
	
	stop: function() {
	
		this.run = false;
	},
	
	restart: function() {
		this.run = true;
		this.preload();	
	},

	preload: function(fast) {
		if(this.run == true) {
			if (this.loader.complete && ((new Date).getTime() > this.timer[0])) {
				img = (this.curr[1] % 2) ? this.b : this.a;
				img2 = (this.curr[1] % 2) ? this.a : this.b; 
				
				img.setStyles({opacity: 1, zIndex: this.curr[1], left: 'auto', right: 'auto'});
				img.setProperty('src', this.loader.src);
				img.setProperty('rel', this.curr[0]);
				img.setStyle(this.props.direction, this.width + 'px');
				
				if(this.props.links != false) {
					img.onclick = function(slide) {
						slide.props.links[this.getProperty('rel')].fireEvent('click');
					}.bind(img).pass(this);
				}
		
				//this.fx = [];

				this.fx = new Fx.Elements([img, img2], {duration: this.props.duration[0], transition: this.props.transition});
				this.fx.start({'0': this.p0, '1': this.p1});
				//this.fx.push(fx);
				
				if(this.props.captions != false) {				
					this.caption.setStyle(this.props.direction, this.width * -1);
					this.caption_fx.options.duration = this.props.duration[0];
					this.caption_fx.start(0);
				}
					
				this.loaded();
			}
			else { this.timeout = this.preload.delay(100, this); }		
		}
	},

	loaded: function() {
		this.curr[0] = (this.curr[0] == this.props.images.length - 1) ? 0 : this.curr[0] + 1;
		this.curr[1]++;
		this.timer[0] = (new Date).getTime() + this.props.duration[1] + this.props.duration[0];
		this.timer[1] = (new Date).getTime() + this.props.duration[0];

		this.loader = new Image();
		this.loader.src = this.props.hu + this.props.images[this.curr[0]].trim();
		
		this.preload();
	}


});