/*
	sfSlideshow v1.2, requires MooTools 1.2.
	(c)2008 Andrew Buckman
	http://www.stormyfrog.com/mootools/sfSlideshow/
	
	When crossfading, easeIn is recommended with your transition or linear
	otherwise, easeOut is recommended with your transition
*/
var sfSlideshow = new Class({
	Implements: [Options, Events],
	options: {
		captions: false,
		crossfade: true,
		duration: 300,
		linkNext: false,
		linkPrev: false,
		loop: true,
		scrollOffset: 0,
		scrollToMain: false,
		setActive: true,
		start: 0,
		transition: Fx.Transitions.linear,
		onChange: Class.empty,
		onFaded: Class.empty
	},
	
	initialize: function(fullsizeDiv, items, options) {
		// assign div wrapping main photo to this.main
		this.main = $(fullsizeDiv);
		this.main.setStyle('overflow', 'hidden');
		this.main.setStyle("cursor", "pointer");
		this.main.addEvent('click', function(){
												  												  
												  	window.open(this.items[this.current].image_large_src,"High_Res");												  												  
												  
												  }.bind(this))


		// assign first photo inside this.main to this.mainpic, this should be the large photo
		
		this.main.empty();
		
		//this.mainpic = this.main.getElement('object');
		
		this.items=items;
	   
		this.items.each(function(item, index){
						   
						   // item.setStyle('height',sizeImg.y);
						   var img=new Element('img', {'src': item.image_src});						   
						   item.image=img;						  
						   
						   
		});
		
		
		
		
		
		// setup array of thumbnail links (should be a set of A with IMGs inside)
		

		// process options passed in
		this.setOptions(options);

		// setup captions
		if (this.options.captions) {
			this.caption = $(this.options.captions);
		}

		// create reusable preloader
		this.preloader = new Element('img');
		
		this.preloader.addEvent('load', function() {
			this.preloaded = true;
			this.swap('preloaded');
		}.bind(this));


		
		// setup internal variables
		this.current = this.options.start;
		this.swapped = true;
		this.usingalt = false;
		
		//this.mainpic.empty();
		
		this.mainpic=this.items[this.current].image.inject(this.main);

		// override next link
		if (this.options.linkNext) {
			if(this.items.length==1)
				this.options.linkNext.setStyle('visibility','hidden');
				
			this.options.linkNext.addEvent('click', function(e) {
				e = new Event(e).stop();
				this.stop();
				this.next();
			}.bind(this));
		}

		// override previous link
		if (this.options.linkPrev) {			
			if(this.items.length==1)
				this.options.linkPrev.setStyle('visibility','hidden');
			
			this.options.linkPrev.addEvent('click', function(e) {				
				this.stop();			
				e = new Event(e).stop();
				this.previous();
			}.bind(this));
		}

		// setup secondary image for crossfade
		if (this.options.crossfade) {
			this.mainalt = new Element('img');
			this.main.setStyles({
				position: 'relative'
			});		
			
			this.mainalt.setStyles({
				position: 'absolute',
				top: 0,
				left: 0
				
			});
			this.mainalt.setOpacity(0);
			this.mainalt.injectInside(this.main);
		}
		
		// setup effects
		this.fx = {
			scroller: Class.empty,
			resizer: new Fx.Tween(this.main, { property: 'height', duration: this.options.duration, transition: this.options.transition }),
			fadeoutMain: new Fx.Tween(this.mainpic, {
				property: 'opacity',
				duration: this.options.duration, 
				transition: this.options.transition, 
				onComplete: function() {
					this.faded = true;
					this.fireEvent('onFaded');
					this.swap('faded');
				}.bind(this)
			}),
			fadeoutAlt: new Fx.Tween(this.mainalt, {
				property: 'opacity',
				duration: this.options.duration,
				transition: this.options.transition, 
				onComplete: function() {
					this.faded = true;
					this.fireEvent('onFaded');
					this.swap('faded');
				}.bind(this)
			}),
			fadeinMain: new Fx.Tween(this.mainpic, {
				property: 'opacity',
				duration: this.options.duration,
				transition: this.options.transition,
				onComplete: function() {
					this.swapped = true;
				}.bind(this)
			}),
			fadeinAlt: new Fx.Tween(this.mainalt, {
				property: 'opacity',
				duration: this.options.duration,
				transition: this.options.transition,
				onComplete: function() {
					this.swapped = true;
				}.bind(this)
			})
		};
		
		
		this.play();
		
		//if (Fx.Scroll) this.fx.scroller = new Fx.Scroll(window, { offset: { 'x': 0, 'y': this.options.scrollOffset } });
	},
	
	
	play: function() {
		$clear(this.timeDelay);
		this.timeDelay=this.next.periodical(5000, this);
		
	},
	
	stop: function(){
		$clear(this.timeDelay);
		this.timeDelay=false;
	},
	
	next: function() {
		// change to next picture
		this.change(this.current+1);
		return this;
	},
	previous: function() {
		// change to previous picture
		this.change(this.current-1);
		return this;
	},
	change: function(to) {
		// change to specified picture (referenced from thumbs array)
		if (!this.swapped) return false;
		if (this.options.loop) {
			// if new image is outside bounds, loop around to opposite end
			if (to >= this.items.length) to = 0;
			if (to < 0) to = this.items.length-1;
		} else {
			// if new image is outside bounds, use applicable extreme
			if (to >= this.items.length) to = this.items.length-1;
			if (to < 0) to = 0;
		}
		if (this.current==to) return false;
		this.current = to;
		this.faded = false;
		this.preloaded = false;
		this.swapped = false;
		// mark new thumb as active
		
		// scroll to main photo
		if (this.options.scrollToMain) this.fx.scroller.toElement(this.main);
		// fade out old image
		var useme = (this.usingalt) ? this.fx.fadeoutAlt : this.fx.fadeoutMain;
		useme.start(0);
		// preload image
		var mSize=this.main.getSize();
		var iSize=this.items[to].image.getProperty('width');
		
		var lPos=Math.round( (mSize.x-iSize)/2);
		
		this.preloader.setStyle("left", lPos);
		
		this.preloader.setStyle('width', iSize);
		this.preloader.src = this.items[to].image_src;
		
		// swap caption
		//if (this.caption) this.caption.set('html', this.getCaption(this.thumbs[to]));
		this.fireEvent('onChange', to);
		return this;
	},
	swap: function(why) {
		// swaps new photo in when ready (preloaded / faded out if applicable)
		var useme,usefx;
		if (this.options.crossfade && why=='preloaded') {
			useme = (this.usingalt) ? this.mainpic : this.mainalt;
			usefx = (this.usingalt) ? this.fx.fadeinMain : this.fx.fadeinAlt;
			this.usingalt = !this.usingalt;
		} else if (!this.options.crossfade && this.preloaded && this.faded) {
			useme = this.mainpic;
			usefx = this.fx.fadeinMain;
		} else {
			return false;
		}
		
		
		if (this.main.getStyle('height').toInt() != this.preloader.height) {
			if (this.faded) {
				this.fx.resizer.start(this.preloader.height).chain(function() {
					useme.src = this.preloader.src;
					usefx.start(1);
				}.bind(this));
			} else {
				// attach to onFaded event
				this.addEvent('onFaded', this.swapafter.pass([useme, usefx], this));
			}
		} else {
			useme.src = this.preloader.src;
			useme.setStyle('width', this.preloader.getProperty('width'));
			usefx.start(1);
		}
		return this;
	},
	swapafter: function(useme, usefx) {
		this.fx.resizer.start(this.preloader.height).chain(function() {
			useme.src = this.preloader.src;
			usefx.start(1);
		}.bind(this));
		this.removeEvents('faded');
	},
	getCaption: function(link) {
		// returns the caption for the image inside the specified thumb link
		return $(link).getElement('img').getProperty('alt');
	}
});