/*
 * Add a shuffle function to Array object prototype
 * Usage : 
 *  var tmpArray = ["a", "b", "c", "d", "e"];
 *  tmpArray.shuffle();
 */
Array.prototype.shuffle = function (){
    var i = this.length, j, temp;
    if ( i == 0 ) return;
    while ( --i ) {
        j = Math.floor( Math.random() * ( i + 1 ) );
        temp = this[i];
        this[i] = this[j];
        this[j] = temp;
    }
};



jQuery(document).ready(function() {		
	
	prepareSlideShow('.slideshow', '.hp-slideshow-temp',null);
	
	slideShow('.slideshow');
});

//get the markup ready for the slideshow.
function prepareSlideShow(targ, obj, setlink){
	
	//an array of objects for slideshow
	var items = new Array();
	//go through the temp layout and grab the properties to add to slideshow objects
	jQuery(obj + ' .hp-slideshow-item').each(
		function(){
			var _item = {};
			//we'll define a name an image and a link
			_item.name = jQuery(this).find('h3').text();
			_item.desc = jQuery(this).find('div.desc').html();
			_item.linkURL = jQuery(this).find('a:first').text();
			_item.imageURL = jQuery(this).find('img').attr('src');
			//add this to our array
			items.push(_item);
		}													 
	)
	
	items.shuffle();
	
	//variable to hold slideshow items HTML
	var itemHTML = jQuery(targ).html();
	
	for(k=0;k<items.length;k++){
		
		var itemLink;
		var itemClass;
		
		if(setlink != null) itemLink = setlink;
		else itemLink = items[k].linkURL;
			
		if(k == 0) itemClass = 'show';
		else itemClass = 'hide';
				
		//create the HTML for each slideshow item
		itemHTML += "<a href=\"" + itemLink + "\" class=\"" + itemClass + "\"><img src=\"" + items[k].imageURL + "\" alt=\"" + items[k].name + "\" title=\"" + items[k].name + "\" rel=\"" + items[k].name + "\"/><div class=\"hidden desc\">" + items[k].desc + "</div></a>";
	}
	//add to slideshow div
	jQuery(targ).html(itemHTML);	
}

function slideShow(slideShowObj) {
	
	//Set the opacity of all images to 0
	jQuery(slideShowObj + ' a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	jQuery(slideShowObj + ' a:first').css({opacity: 1.0});
	
	//Get next image caption
	var caption = jQuery(slideShowObj + ' a:first').find('img').attr('rel');	
	var description = jQuery(slideShowObj + ' a:first').find('div.desc').html();	
	
	//Get the caption of the first image from REL attribute and display it
	$('#slideshow-caption h3').html(caption);
	$('#slideshow-caption div').html(description);
	//update the Font using Cufon
	Cufon.replace('#slideshow-caption h3');
	//Display the caption
	$('#slideshow-caption').css({left:20});
	
	setInterval('gallery(\'' + slideShowObj + '\')',6000);
}

function gallery(slideShowObj) {
	
	//if no IMGs have the show class, grab the first image
	var current = (jQuery('.slideshow a.show')?  jQuery('.slideshow a.show') : jQuery('.slideshow a:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? jQuery('.slideshow a:first') :current.next()) : jQuery('.slideshow a:first'));	
	

	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');

	//Get next image caption
	var caption = next.find('img').attr('rel');	
	var description = next.find('div.desc').html();	

	//Hide the caption first, and then set and display the caption
	$('#slideshow-caption').animate({left:-300}, 300, function () {
			//Display the content
			$('#slideshow-caption h3').html(caption);
			$('#slideshow-caption div').html(description);
			//update the Font using Cufon
			Cufon.replace('#slideshow-caption h3');
			$('#slideshow-caption').animate({left:20}, 500);	
	});		

}