/*
 * 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('h2').text();
			_item.desc = jQuery(this).find('div.desc').text();
			_item.linkURL = jQuery(this).find('span.link').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 = 'hide show';
		else itemClass = 'hide';

		//create the HTML for each slideshow item
		if (itemLink != '')
		    itemHTML += "<div class=\"" + itemClass + "\"><img src=\"" + items[k].imageURL + "\" alt=\"" + items[k].name + "\" title=\"" + items[k].name + "\" rel=\"" + items[k].name + "\"/><p class=\"hidden desc\">" + items[k].desc + "<a href=\"" + itemLink + "\" class=\"find-out-more\">Find Out More</a></p></div>";
        else
            itemHTML += "<div class=\"" + itemClass + "\"><img src=\"" + items[k].imageURL + "\" alt=\"" + items[k].name + "\" title=\"" + items[k].name + "\" rel=\"" + items[k].name + "\"/><p class=\"hidden desc\">" + items[k].desc + "</p></div>";
    }
	//add to slideshow div
	jQuery(targ).html(itemHTML);	
}

function slideShow(slideShowObj) {
	
	//Set the opacity of all images to 0
    jQuery(slideShowObj + ' div').css({ opacity: 0.0 });
	
	//Get the first image and display it (set it to full opacity)
    jQuery(slideShowObj + ' div:first').css({ opacity: 1.0 });
	
	//Get next image caption
	var caption = jQuery(slideShowObj + ' div:first').find('img').attr('rel');	
	var description = jQuery(slideShowObj + ' div:first').find('.desc').html();	
	
	//Get the caption of the first image from REL attribute and display it
	jQuery('#slideshow-caption h2').html(caption);
	jQuery('#slideshow-caption div').html(description);
	//update the Font using Cufon
	Cufon.replace('#slideshow-caption h2',{fontStyle: 'italic'});
	//Display the caption
	jQuery('#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(slideShowObj + ' div.show') ? jQuery(slideShowObj + ' div.show') : jQuery(slideShowObj + ' div: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(slideShowObj + ' div:first') : current.next()) : jQuery(slideShowObj + ' div: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('p.desc').html();	

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

}