///////////////////////////////////////////////////////////
// Class Slideshow
///////////////////////////////////////////////////////////

var Slideshow = Class.create({

	///////////////////////////////////////////////////////////
	// initialize
	///////////////////////////////////////////////////////////
	
	initialize:function(){
		
		this.SLIDE_DELAY = 8; // seconds
		this.AUTO_WALK = true; // auto walk: boolean
		
		// slides
		this.slides = $$('#slides li');
		this.slides.invoke('hide');
		this.currentSlide = 0;
		
		// controls
		this.controls = $$('#controls li a');
		this.controlsDict = [];
		
		// handle controls
		this.controls.each(function(el, index){
			
			// create reference
			this.controlsDict[el] = index;
			
			// mouse handler
			el.observe('click', this.onControlMouseClick.bind(this));
			el.observe('mouseover', this.onControlMouseHover.bind(this));
			
		}.bind(this));
		
		// add span.arrow
		$('slideshow').insert({ bottom: '<span class="arrow"></span>' })
		
		// set first active
		this.setActiveClass(this.currentSlide, true);
		
		// transitions
		this.effects = [];
		
		// start
		this.start();
		
	},
	

	///////////////////////////////////////////////////////////
	// prepare next
	///////////////////////////////////////////////////////////

	prepare:function(n){
		
		if(n != this.currentSlide){
			
			this.hideLead();
		
			// clear all current transitions
			this.effects.invoke('cancel');
			this.effects = [];
		
			// do effect
			var effect = new Effect.Fade(this.slides[this.currentSlide], { duration: .5, afterFinish: function(e){
		
				// currentslide
				this.currentSlide = n;
		
				// next
				this.walk();
				
			}.bind(this) });
		
			// add effect
			this.effects.push(effect);
			
			// add active class
			this.setActiveClass(n);
		
		}
	},
	
	
	///////////////////////////////////////////////////////////
	// walk
	///////////////////////////////////////////////////////////
	
	walk:function(){
		
		this.hideLead();
		
		// fade in slide
		var effect = new Effect.Appear(this.slides[this.currentSlide], { 
			duration: .5,
			afterFinish: function(e){
				// animate lead
				var lead = this.slides[this.currentSlide].down('.lead');
				if(lead){	new Effect.BlindDown(lead, { duration: .5 });	}
			}.bind(this)
		});
		
		// store effect
		this.effects.push(effect);
	},
	
	
	///////////////////////////////////////////////////////////
	// next
	///////////////////////////////////////////////////////////
	
	next:function(){
		if(this.AUTO_WALK){
			this.autoWalk();
		}
		
		if(this.currentSlide < this.slides.length -1){
			this.prepare(this.currentSlide + 1);
		}else{
			this.prepare(0);
		}
	},


	///////////////////////////////////////////////////////////
	// previous
	///////////////////////////////////////////////////////////

	prev:function(){
		if(this.currentSlide > 0){
			this.prepare(this.currentSlide - 1);
		}else{
			this.prepare(this.slides.length-1);
		}
	},


	///////////////////////////////////////////////////////////
	// start
	///////////////////////////////////////////////////////////

	start:function(){
		this.walk();
		this.autoWalk();
	},


	///////////////////////////////////////////////////////////
	// autoWalk
	///////////////////////////////////////////////////////////

	autoWalk:function(){
		if(this.AUTO_WALK){
			this.pause();
			this.delay = setTimeout(this.next.bind(this), this.SLIDE_DELAY * 1000);
		}
	},


	///////////////////////////////////////////////////////////
	// pause
	///////////////////////////////////////////////////////////

	pause:function(){
		if(this.delay){	clearTimeout(this.delay);	}
	},


	///////////////////////////////////////////////////////////
	// onControlMouseClick
	///////////////////////////////////////////////////////////

	onControlMouseClick:function(e){
		
	},
	
	
	///////////////////////////////////////////////////////////
	// onControlMouseHover
	///////////////////////////////////////////////////////////

	onControlMouseHover:function(e){
		Event.stop(e);
		
		// stop auto walk
		if(this.AUTO_WALK){
			this.pause();
		}
		
		// prepare new slide
		var n = this.controlsDict[Event.element(e)];
		if(n != this.currentSlide){
			this.prepare(n);
		}
		
		Event.element(e).blur();

		// store mouse out listener
		this.mouseOutListener = this.onControlMouseOut.bind(this);

		// observe mouseout
		Event.element(e).observe('mouseout', this.mouseOutListener);
	},	
	
	
	///////////////////////////////////////////////////////////
	// onControlMouseOut
	///////////////////////////////////////////////////////////

	onControlMouseOut:function(e){
		
		// if it's the active item, start auto walk
		var n = this.controlsDict[Event.element(e)];
		if(n == this.currentSlide && this.AUTO_WALK){
			this.autoWalk();
		}
		
		// stop observing mouseout
		Event.element(e).stopObserving('mouseout', this.mouseOutListener);
		
		// remove current mouseout listener
		this.mouseOutListener = null;
	},


	///////////////////////////////////////////////////////////
	// setActiveClass
	///////////////////////////////////////////////////////////

	setActiveClass:function(n, isInit){
	
		// find all controls
		this.controls.each(function(el, index){
			
			// remove active class
			if(el.up().hasClassName('active') && !isInit){
				if(index != n){
					el.up().removeClassName('active');
				}
				
			// add active class
			}else{	
				if(index == n){
					el.up().addClassName('active');
				}
			}
		}.bind(this));
		
		// position arrow
		this.positionArrow(n);
	},
		
			
	///////////////////////////////////////////////////////////
	// hideLead
	///////////////////////////////////////////////////////////

	hideLead:function(){
		// hide lead
		var lead = this.slides[this.currentSlide].down('.lead');
		if(lead){	lead.setStyle({ display: 'none' });	}
	},
	
	
	///////////////////////////////////////////////////////////
	// positionArrow
	///////////////////////////////////////////////////////////

	positionArrow:function(n, isInit){
		var left = this.controls[n].up().offsetLeft + (this.controls[n].up().getWidth() / 2) - 8;
		$('slideshow').down('span.arrow').setStyle({ left: left+'px'})
	}
	
});

function highlightBox(){
	$('findLocationForm').hide();
	new Effect.Appear('findLocationForm');
//new Effect.Highlight('locationFinder', { startcolor: '#eb7a00', endcolor: '#fff6c8' });
};
//////////////////////////////////////////////////////////////////////////

document.observe('dom:loaded', function(){
	slideshowObj = new Slideshow();
	
	// dont's send if input is empty or default value
	Event.observe('findLocationForm', 'submit', function(e){
		if($F('postalCodeField') == $('postalCodeField').defaultValue || $F('postalCodeField') == ''){
			$('postalCodeField').focus();
			$('postalCodeField').select();
			Event.stop(e);
		}
	})
	highlightBox();
});