/* Side Scrolling Javascript
	Requires Prototype v1.6.3 & Scriptaculous 1.8.2
	
	*/
	
var ViewFinder = Class.create();	
	
ViewFinder.prototype = {
	
	initialize: function(container, options) {
		if(!container.blank()) {
			this._container_id = container;
		}
		this.options = Object.extend({
									width: 300,
									height: 200,
									orient: 'x',
									nextTrigger: 'next',
									prevTrigger: 'prev',
									slideshowTrigger: 'play',
									showSpeed: 3,
									stopShowTrigger: 'stop',
									loop: false,
									autoplay: false,
									spacing: 0
									 }
		, options || {});
		document.observe("dom:loaded", function() {
			this._checkStructure();
			this._skinViewFinder();
			this._startTracking();
			this._setupObservers();
			this._flashCheck();
			if(this.options.autoplay) {
				this._controlShow();	
			}
												}.bind(this));
	},
	
	_setupObservers: function() {
		// Observe Next Button
		if($(this.options.nextTrigger)) {
			Event.observe(this.options.nextTrigger, 'click', this.moveNext.bindAsEventListener(this));
			this._nextTrigger = true;
		} else {
			this._nextTrigger = false;	
		}
		
		//Observe Prev Button
		if($(this.options.prevTrigger)) {
			Event.observe(this.options.prevTrigger, 'click', this.movePrev.bindAsEventListener(this));
			this._prevTrigger = true;
		} else {
			this._prevTrigger = false;	
		}
		
		//Observe Slideshow Button
		if($(this.options.slideshowTrigger)) {
			Event.observe(this.options.slideshowTrigger, 'click', this._controlShow.bindAsEventListener(this));
			this._slideshowTrigger = true;
		} else {
			this._slideshowTrigger = false;	
		}
		
		// Slideshow Stop Button
		if($(this.options.stopShowTrigger)) {
			Event.observe(this.options.stopShowTrigger, 'click', this._stopClicked.bindAsEventListener(this));
			$(this.options.stopShowTrigger).hide();
			this._stopShowTrigger = true;
		} else {
			this._stopShowTrigger = false;	
		}
	},
	
	_controlShow: function() {
		if(this._playing) {
			this._stopShow();	
		} else {
			if(this._stopShowTrigger) {
				$(this.options.stopShowTrigger).show();
			}
			if(this._slideshowTrigger) {
			$(this.options.slideshowTrigger).hide();
			}
			if(this.options.showSpeed>20) {
				this.options.showSpeed = 20;
			} else if(this.options.showSpeed<1) {
				this.options.showSpeed = 1;	
			}
			this._timer = setInterval(function() {
											   this._moveShow();
											   }.bind(this), this.options.showSpeed*1000);
			this._playing=true;
		}
	},
	
	_moveShow: function() {
		if(this._currentView==this._views.length) {
			this._stopShow();
			this._slide.appear({
							 duration: 0.5,
							 from: 1.0,
							 to: 0.0,
							 afterFinish: function() {
								 this._autoStopShow();
							 }.bind(this)
							 });			
		} else {
			this.moveNext();	
		}
	},
	
	_autoStopShow: function() {
		if(this.options.orient=='x') {
			this._slide.setStyle({
								left: '0px'									
								 });
		} else if (this.options.orient=='y') {
			this._slide.setStyle({
								 top: '0px'
								 });
		}
		this._startTracking();
		if(this._nextTrigger) {
			$(this.options.nextTrigger).show();
		}
		
		this._slide.appear({
						   duration: 0.5,
						   from: 0.0,
						   to: 1.0,
						   afterFinish: function() {}
							});
	},
	
	_stopClicked: function() {
		window.clearInterval(this._timer);
		this._playing=false;
		if(this._stopShowTrigger) {
			$(this.options.stopShowTrigger).hide();
		}
		if(this._slideshowTrigger) {
			$(this.options.slideshowTrigger).show();
		}
	},
	
	_stopShow: function() {
		window.clearInterval(this._timer);
		this._playing=false;
		if(this._stopShowTrigger) {
			$(this.options.stopShowTrigger).hide();
		}
		if(this._slideshowTrigger) {
			$(this.options.slideshowTrigger).show();
		}
		if(this.options.loop) {
			this._controlShow();	
		}
	},
	
	_startTracking: function() {
		this._currentView = 1;
		if(this._prevTrigger) {
			$(this.options.prevTrigger).hide();
		}
	},
	
	moveNext: function() {
		if(this._currentView<this._views.length) {
			// Show the previous trigger
			if(this._prevTrigger) {
				$(this.options.prevTrigger).show();
			}
			if(this.options.orient=='x') {
				new Effect.Move(this._slide, {x: -(this.options.width-1), y: 0, mode: 'relative', queue: 'end'});	
			} else if(this.options.orient=='y') {
				new Effect.Move(this._slide, {x: 0, y: -(this.options.height), mode: 'relative', queue: 'end'});	
			}
			this._currentView = this._currentView+1;
			if(this._currentView==this._views.length) {
				if(this._nextTrigger) {
					$(this.options.nextTrigger).hide();	
				}
			}
		}
	},
	
	movePrev: function() {
		if(this._currentView>1) {
			if(this._nextTrigger) {
				$(this.options.nextTrigger).show();
			}
			if(this.options.orient=='x') {
				new Effect.Move(this._slide, {x: (this.options.width), y: 0, mode: 'relative', queue: 'end'});	
			} else if(this.options.orient=='y') {
				new Effect.Move(this._slide, {x: 0, y: (this.options.height), mode: 'relative', queue: 'end'});	
			}
			this._currentView = this._currentView-1;
			if(this._currentView==1) {
				if(this._prevTrigger) {
					$(this.options.prevTrigger).hide();
				}
			}
		}
	},
	
	_checkStructure: function() {
		this._slide = $(this._container_id);
		if(this._slide!=null) {
			if(!this._slide.empty()) {
				this._views = this._slide.immediateDescendants();
				if(this._views!=null) {
					return true;	
				}
			}
		}
		
	},
	
	_skinViewFinder: function() {
		// Create our wrapper div
		this._frame = new Element('div', { 'style': 'position: relative;top: 110px;left: 90px;padding-left: 1px;' });
		this._slide.wrap(this._frame);
		
		// Set required styles for our frame
		this._frame.setStyle({			 
							 width: this.options.width+'px',
							 height: this.options.height+'px',
							 overflow: 'hidden',
							 display: 'block',
							 position: 'relative'
							 });
		
		// Find out if we are sliding up/down or left/right and set width / height accordingly
		if(this.options.orient=='x') {
			this._xSkin();
		} else if(this.options.orient=='y') {
			this._ySkin();
		}		
	},
	
	_xSkin: function() {
		// Calculate the width of our slide.
		this._slide.setStyle({                   
							
							 width: (this._views.length*(this.options.width+this.options.spacing)) +'px',
							 height: this.options.height+'px',
							 position: 'absolute'
							 });
		if(this._slide.tagName=='UL') {
			this._slide.setStyle({
								 margin: '0',
								 padding: '0'
								 });
		}
		this._views.each( function(v) {
								   v.setStyle({
											  display: 'block',
											  float: 'left',
											  height: this.options.height+'px',
											  width: (this.options.width-this.options.spacing)+'px',
											  position: 'relative',
											  marginRight: this.options.spacing+'px'
											  });
								   }.bind(this));
	},
	
	_ySkin: function() {
		this._slide.setStyle({
							 height: (this._views.length*(this.options.height+this.options.spacing)) +'px',
							 width: this.options.width+'px',
							 position: 'absolute'
							 });
		if(this._slide.tagName=='UL') {
			this._slide.setStyle({
								 margin: '0',
								 padding: '0'
								 });
		}
		this._views.each( function(v) {
								   v.setStyle({
											  display: 'block',
											  height: (this.options.height-this.options.spacing)+'px',
											  width: this.options.width+'px',
											  position: 'relative',
											  marginTop: this.options.spacing+'px'
											  });
								   }.bind(this));
	},
	
	_flashCheck: function() {
			var embeds = this._slide.select('embed');
			if(embeds!='') {
				embeds.each( function(v) {
									 v.writeAttribute('wmode', 'transparent');
									 }.bind(this));
			}
	},
	
	/* ------------- Variables ----------------- */
	
	_container_id: 'viewfinder',
	_options: new Object,
	_slide: null,
	_frame: null,
	_views: null,
	_viewCount: 0,
	_playing: false
	
}