/*
 * 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-1', '.hp-slideshow-temp1','/our-customers.html');
	prepareSlideShow('.slideshow-2', '.hp-slideshow-temp2',null);
	
	slideShow('.slideshow-1');
	slideShow('.slideshow-2');

});

//get the markup ready for the slideshow.
function prepareSlideShow(targ, obj, setlink){
	
	slideShowObj = targ;

	//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.linkURL = jQuery(this).find('a').attr('href');
			_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(slideShowObj).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 + "\"/></a>";
	}
	//add to slideshow div
	jQuery(slideShowObj).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});
	
	//Set the caption background to semi-transparent
	if(slideShowObj == '.slideshow-2')
		jQuery('.slideshow-2-content').css({opacity: 0.0});

	//Resize the width of the caption according to the image width
	if(slideShowObj == '.slideshow-2')
		jQuery('.slideshow-2-content').css({width: jQuery(slideShowObj + ' a').find('img').css('width')});
	
	//Get next image caption
	var caption = jQuery(slideShowObj + ' a:first').find('img').attr('rel');	
	caption = "<h3><a href=\"" +  jQuery(slideShowObj + ' a:first').attr('href') + "\">" + caption + "</a></h3>";	
	
	//Get the caption of the first image from REL attribute and display it
	if(slideShowObj == '.slideshow-2')
		jQuery('.slideshow-2-content').html(caption).animate({opacity: 1.0}, 400);
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	if(slideShowObj == '.slideshow-1')
		setInterval('gallery01()',4000);
	else
		setInterval('gallery02()',4000);
}

function gallery01() {
	
	//if no IMGs have the show class, grab the first image
	var current = (jQuery('.slideshow-1 a.show')?  jQuery('.slideshow-1 a.show') : jQuery('.slideshow-1 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-1 a:first') :current.next()) : jQuery('.slideshow-1 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');
}



function gallery02() {
	
	//if no IMGs have the show class, grab the first image
	var current = (jQuery('.slideshow-2 a.show')?  jQuery('.slideshow-2 a.show') : jQuery('.slideshow-2 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-2 a:first') :current.next()) : jQuery('.slideshow-2 a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	caption = "<h3><a href=\"" +  next.attr('href') + "\">" + caption + "</a></h3>";	
	
	//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');
	
	jQuery('.slideshow-2-content').animate({opacity: 0.0},100, function(){jQuery('.slideshow-2-content').html(caption)});	

	
	jQuery('.slideshow-2-content').animate({opacity: 1.0},300 );

}