/**
 * JavaScript for home page.
 */

window.PK = {};

/**
 * The home page slider do-dad that does awesome things. Initialize with
 * options, if necessary.
 * 
 * - interval:       milliseconds between each transition [5000]
 * - speed:          milliseconds of time for animation (higher for slower animation) [800]
 * - textAreaHeight: pixel height of text area [380]
 * - imageAreaWidth: pixel width of main image area [608]
 * - textAreaId:     ID of text area container div ['slider_text']
 * - imagesAreaId:   ID of images area container div ['slider_images']
 * - thumbsAreaId:   ID of thumbnail UL ['slider_thumbs']
 * - highlightClass: CSS class used to turn on thumbnail hightlight ['highlight']
 */
PK.HomePageSlider = function(options) {
	
	// settings object with default values
	this.settings = {
		interval : 5000,
		speed : 800,
		textAreaHeight : 380,
		imageAreaWidth : 608,
		textAreaId : 'slider_text',
		imagesAreaId : 'slider_images',
		thumbsAreaId : 'slider_thumbs',
		highlightClass : 'highlight'
	};
	
	// the images UL and it's child LI elements
	this.imageSlider = $('#' + this.settings.imagesAreaId + ' ul');
	this.imageSliderElements = this.imageSlider.children();
	
	// the text UL and it's child LI elements
	this.textSlider = $('#' + this.settings.textAreaId + ' ul');
	this.textSliderElements = this.textSlider.children();
	
	// the thumbnail UL and it's child elements
	this.thumbSlider = $('#' + this.settings.thumbsAreaId);
	this.thumbSliderElements = this.thumbSlider.children();
	
	// active flag
	this.active = false;
	
	// current and last transition states
	this.current = 1;
	this.last = 0;

	// if we got options, override the defaults
	if (options) {
		$.extend(this.settings, options);
	}
	
	// let's get this party started!
	// or at least buy the beer
	this.init();
};

PK.HomePageSlider.prototype = {

	/**
	 * Initial setup.
	 * 
	 * @return void
	 */
	init : function() {
		var i, self;
		self = this;
		$('#' + this.settings.thumbsAreaId + ' li').click( function(evt) {
			self.onThumbClick(evt, this);
		});
	},

	/**
	 * Click handler for thumbnail images.
	 * 
	 * @param Object evt the click event
	 * @param Object el  the thumb element that was clicked
	 * 
	 * @return void
	 */
	onThumbClick : function(evt, el) {
		var i, which;

		this.stop();

		which = -1;
		for (i = 0; i < this.thumbSliderElements.length; i++) {
			if (this.thumbSliderElements[i].id == el.id) {
				which = i;
				break;
			}
		}

		if (which > -1 && this.last != which) {
			this.current = which;
			this.next(this.current, this.last);
		}
	},

	/**
	 * Start the transitions.
	 * 
	 * @return void
	 */
	start : function() {
		var self;

		this.active = true;

		self = this;
		window.setTimeout(( function() {
			self.onTimeout(self);
		}), self.settings.interval);

		$(this.textSliderElements[0]).show();
		$(this.thumbSliderElements[0]).toggleClass(this.settings.highlightClass);
	},

	/**
	 * Stop the transitions.
	 * 
	 * @reutrn void
	 */
	stop : function() {
		this.active = false;
	},

	/**
	 * The transition timeout function.
	 * 
	 * @param Object self me
	 * 
	 * @return void
	 */
	onTimeout : function(self) {

		if (self.active) {

			self.next(this.current, this.last);

			window.setTimeout(( function() {
				self.onTimeout(self);
			}), self.settings.interval);
		}
	},

	/**
	 * Transitions to the next state.
	 * 
	 * @param Number current the state to transition to
	 * @param Number last	 the state to transition from
	 * 
	 * @return void
	 */
	next : function(current, last) {
		var self = this;

		// transition the image
		this.imageSliderElements[last].style.zIndex = 1;
		this.imageSliderElements[current].style.zIndex = 2;
		
		$(this.imageSliderElements[current]).animate({
			left: 0
		}, this.settings.speed, 'swing');
		
		$(this.imageSliderElements[last]).animate({
			left: (-1 * this.settings.imageAreaWidth) + 'px'
		}, this.settings.speed, 'swing', function() {
			self.imageSliderElements[last].style.left = self.settings.imageAreaWidth + 'px';
		});

		// transition the text
		this.textSliderElements[last].style.zIndex = 1;
		this.textSliderElements[current].style.zIndex = 2;
		
		$(this.textSliderElements[current]).animate({
			top: 0
		}, this.settings.speed, 'swing');
		
		$(this.textSliderElements[last]).animate({
			top: this.settings.textAreaHeight + 'px'
		}, this.settings.speed, 'swing', function() {
			self.textSliderElements[last].style.top = (-1 * self.settings.textAreaHeight) + 'px';
		});

		// transition the thumb
		$(this.thumbSliderElements[last]).toggleClass(this.settings.highlightClass);
		$(this.thumbSliderElements[current]).toggleClass(this.settings.highlightClass);

		if ((current + 1) < this.imageSliderElements.length) {
			this.current = current + 1;
			this.last = current;
		} else {
			this.current = 0;
			this.last = this.imageSliderElements.length - 1;
		}

	},

	/**
	 * Remove the filter attribute - useful for IE.
	 * 
	 * @param Object element the element to remove the filter from
	 */
	removeFilter : function(element) {
		if (element.style.removeAttribute) {
			element.style.removeAttribute('filter');
		}
	}

};

/**
 * When the document is done loading and ready, start things up.
 */
$(document).ready( function() {

	var hpslider, img;
	
	// pre-load the background images
	img = new Image(910, 182);
	img.src = '/images/slider/thumbs-sprite.jpg';
	
	// create and start the home page slider thingy
	hpslider = new PK.HomePageSlider( {
		interval : 4000,
		speed : 1000,
		textAreaHeight : 380,
		imageAreaWidth : 608,
		textAreaId : 'slider_text',
		imagesAreaId : 'slider_images',
		thumbsAreaId : 'slider_thumbs',
		highlightClass : 'highlight'
	});
	hpslider.start();
});