// <!--
/*

=========================================

Project Name: Pilkingtons
Creation date: 10/05/2011
Last modified: 10/05/2011
Description: Slideshow javascript for Pilkingtons website
Version: 1.0
Author: Ben baker
Company: Pagemakers

=========================================

*/
/*
//
// EXAMPLE customisable seeting for the slideshows
//
var slideshow_obj = { 	
				duration: 5, // time to stay on each slide
			    	startSlide: 0, // iamge to start on
				fadeInSpeed: 'slow', // fade in speed of image
				fadeOutSpeed: 'fast' // fadeout speed of image
			}
*/
//
//	Slideshow Class
// 	@param ss_ref (DOM object) = reference to slideshow containing div
// 	@param show_thumbs (boolean) = whether to show thumbnails
// 	@param force_location (boolean) = whether to add full path to thumbnails (fixes mod_rwerite issues)
//
Slideshow = function( ss_ref, show_thumbs, force_location ) {
	//
	// constructor
	//
	// private vars
	//
  	var _ss = $(ss_ref); // set slideshow reference
  	var _numSlides = _ss.find("img").length; // check has more than 1 image
  	if( _numSlides < 2){ /*showLink(0);*/ return}; // return back if not enough images for slideshow
  
  	var me = this; // ref to this for scope issues
  	var _url = (force_location == true) ? location.href.split("#")[0] : ''; // doc location - gets roung htaccess bug when using hashes in urls
  	
  	var curr_time = new Date().getTime().toString();// create unique id for each slideshow, will allow multiple in page
  	var _ss_uinque_id = 'ss' + curr_time.substring( 9 ); // store unique id
  	
  	var hasThumbnails = (show_thumbs == true); // set thumb state
  	var _thumbnails; // ref to thumbnail container div
  	
  	var _slideshowFadeInSpeed = 'slow'; // default fae in speed
	var slideshowFadeOutSpeed = 'fast'; // default fadeout speed
	var _slideshowTimer = null; // ref to timer
  	//
  	// public vars
  	// @note need to be for setInterval to call
  	//
  	this.slideshowCurrentIndex = 0; // default image index
  	this.slideshowDuration = 10; // default slide duration (in secs)
  	//
  	// thumbnail functions
  	//
  	function getUniqueId( str, index ){ 
  		var uid = "";
  		uid = _ss_uinque_id + "-"+str+"-" + index;
  		return  uid;
  	}// get unique id in form ss[1234]-[str]-[index]
  	//
  	// add thumbnail
  	// NOTE: uses unique id for slidehshow so that can have multiple anchors on page
  	//
  	function addThumb( index ){
  		var thumb = $("<a id='" + getUniqueId( 'thumb', index ) + "'></a>"); // create thumbnail
  		// thumb.attr("href", _url+'#'+getUniqueId( 'img', index )); // set href 
  		// trigger image change with thumb click
		thumb.mouseup(function( e ){
			e.preventDefault();
			
			var thumbindex = $(this).attr("id").split("-")[2];
			me.nextImage( thumbindex, false );
			
			e.preventProgpagation();
		});
  		$( thumb ).appendTo( $( _thumbnails ) );// add thumb to thumbnails to container
  	}
  	//
  	// constructor code
  	//
  	_ss.attr( 'id', _ss_uinque_id  ); // set slideshow div id
  	_ss.height( ( _ss.find("img").height() ) ); 
  	// if it has thumbs then create a div for them
  	if( hasThumbnails ){ 
  		var thumbs = $("<div class='slideshow_thumbnails'></div>");
  		$( thumbs ).appendTo( $( _ss ) );
  		_thumbnails = thumbs; // store thumbnail container element ref
  	}
  	// loop all images in slideshow
  	// @note by using find can have images not within an a tag
  	_ss.find("img").each(function( index )
  	{ 
  		$(this).hide(); // hide all images at start
  		$(this).attr("id", getUniqueId( 'img', index ) ); // set anchor/id
  		if( hasThumbnails ) addThumb( index );// if has thumbnails then addeach one
  	});
  	//
  	//	Public functions
  	//
  	//
  	// 	init slideshow
  	//	@param ss_obj = init object, duration, start slide, fade in speed, fade out speed
  	//
	this.init = function( ss_obj ){
		// set duration
		if( ss_obj.duration != undefined ) this.slideshowDuration = ss_obj.duration;
  		// set start slide
  		if( ss_obj.startSlide != undefined ) this.slideshowCurrentIndex = ss_obj.startSlide;
  		// set fade in speed of images
  		if( ss_obj.fadeInSpeed != undefined ) _slideshowFadeInSpeed = ss_obj.fadeInSpeed;
  		// set fade out speed of images
  		if( ss_obj.fadeOutSpeed != undefined ) _slideshowFadeOutSpeed = ss_obj.fadeOutSpeed;
  		// show the slideshow
  		// set slideshow going
  		showImage( this.slideshowCurrentIndex );
  	}
  	//
  	//	get next slideshow image index
  	// 	@note public for setinterval
	//
	this.getNextSlideIndex = function(){
		// if the current index is the last (same as length of children), then set it to beginning/0
		return ( ( this.slideshowCurrentIndex + 1) == _numSlides ) ? 0 : (this.slideshowCurrentIndex + 1);
	}
	//
	//	trigger next slideshow image
	// 	@note public for setinterval. fadeOut is disabled.
	//
	this.nextImage = function( index, playon ){
		
		// check for setting to smae index. do not allow
		if(index == this.slideshowCurrentIndex ) return;
		$(_ss).find("img").eq( this.slideshowCurrentIndex  ).hide();// hide current image
		showImage( index ,playon ); // trigger new image to show
	}
	//
	// 	private functions
	//
	//	
	//	starts set interval that triggers images
	//
	function startNextImageTimer(){
		//
		_slideshowTimer = setInterval( function(){ 
			// calculate the next index
			me.nextImage( me.getNextSlideIndex() );
		},
		me.slideshowDuration*1000 ); // when complete fade set next to go
	}
	//
	//	update the thumbnails to show selected
	//	@param index of thumb to set to on
	//
	function setThumbnail( index ){
		// set current image thmb to selected state
		$( "#" + getUniqueId( "thumb", index ) ).addClass('selected');
	}
	function unsetThumbnail( index ){
		// set current image thmb to selected state
		$( "#" + getUniqueId( "thumb", index ) ).removeClass('selected');
	}
	//
	// 	turns on a tag link around image
	//	@note written as there was a lag/jump in display of images
	function showLink( index ){
		//var img_link = $( _ss ).children("a").eq( index );
		//if( !img_link.is(':visible')  ) img_link.show();
	}
	//
	//	show an image and triggers setInterval	
	//	@param index = index 0-x of images within slideshow 
	//	@param playon = whether to trigger next image automatically
	//
	function showImage( index, playon ){
		// fix bug where all imagees show
		showLink( index );
		// default for clear timer
		if(playon != false) playon = true;
		//
		if( _slideshowTimer != null ) clearInterval( _slideshowTimer ); // clear the interval for triggering the next image
		// fade in the image
		$(_ss).find("img").eq( index ).stop().fadeIn( _slideshowFadeInSpeed );
		// 
		if( hasThumbnails ) unsetThumbnail( me.slideshowCurrentIndex ); // remove current thumbnail
		//
		me.slideshowCurrentIndex = index; // set current index @note must be 'me.' as a public var...
		// if playon then set timer to trigger next image
		if( playon )startNextImageTimer();
		// if has thumbs then set state
		if( hasThumbnails ) setThumbnail( index );
	}
} // END class
//-->