// JavaScript Document
var timer = null;
var transitionSpeed = 5000;
$(document).ready(function() {		
	
	//Execute the slideShow, set 4 seconds for each images
	slideShow(transitionSpeed);

});

function slideShow(speed) {
	
	var hdnPrev = document.getElementById('hdnPrev')
	var hdnNext = document.getElementById('hdnNext')
	var hdnPause = document.getElementById('hdnPause')
	
	
	//append a LI item to the UL list for displaying caption
	$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p><a href="#">Read More</a><br/ class="clear"><div class="img_control"><span style="height:40px;" onclick="gallery(0);"><img src='+hdnPrev.value+' width="28" height="30" style="cursor:pointer;"/></span><span style="height:40px;" onclick="pauseAndPlay();"><img id="pause-play" src='+hdnPause.value+' width="28" height="30" style="cursor:pointer;"/></span><span style="height:40px;" onclick="gallery(1);"><img src='+hdnNext.value+' width="28" height="30" style="cursor:pointer;"/></span></div><div id="pagination"><span>&nbsp;</span><span id="current_page">1</span><span> of </span><span id="total_pages"></span></div></div></li>');

// replced with "pages" to "&nbsp;" after the "Pagination id" 

	//Set the opacity of all images to 0
	$('ul.slideshow li').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('ul.slideshow li:first').css({opacity: 1.0});
	
	//Get the caption of the first image from REL attribute and display it
	$('#slideshow-caption h3').html($('ul.slideshow h3:first').html());
	$('#slideshow-caption p').html($('ul.slideshow p:first').html());
	//$('#slideshow-caption a').html($('ul.slideshow div:first').html());
	$('#slideshow-caption a').attr('href',$('ul.slideshow a:first').attr('href'));
	$('#slideshow-caption a').attr('target',$('ul.slideshow a:first').attr('target'));
		
	//Display the caption
	$('#slideshow-caption').css({opacity: 0.7, bottom:0});
	
	$('#pagination #total_pages').html($('ul.slideshow li').length-1);
	
	//Call the gallery function to run the slideshow	
	if(timer != null) clearInterval(timer);
	timer = setInterval('gallery(1)',speed);
	
}

function gallery(direction) {
	clearInterval(timer);
	
	//if no IMGs have the show class, grab the first image
	var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

	if(direction == 1)
	{
		//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().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
	}
	else
	{
		var next = (current.prev().length)? current.prev() :  $('ul.slideshow li:last').prev();
	}

	//Get next image caption
	var title = next.find('h3').html();	
	var desc = next.find('p').html();
	//var link_text = next.find('div').html();
	var link_url = next.find('a').attr('href');
	var link_target = next.find('a').attr('target');
	
	//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}, 500);
	
	$('#pagination #current_page').html($('ul.slideshow li').index(next)+1);
	
	//Hide the caption first, and then set and display the caption
	/*$('#slideshow-caption').animate({bottom:-150}, 1000, function () {
			//Display the content		
			
			$('#slideshow-caption h3').html(title);
			$('#slideshow-caption p').html(desc);
			//$('#slideshow-caption a').html(link_text);
			$('#slideshow-caption a').attr('href',link_url);
			$('#slideshow-caption a').attr('target',link_target);
			$('#slideshow-caption').animate({bottom:0}, 1000);	
	});*/
	
	$('#slideshow-caption').animate({bottom:-150}, 0);
	//Display the content		
	$('#slideshow-caption a').attr('href',link_url);
	$('#slideshow-caption a').attr('target',link_target);
	$('#slideshow-caption p').html(desc);
	$('#slideshow-caption h3').html(title);
	$('#slideshow-caption').animate({bottom:0}, 500);

	//Hide the current image
	current.animate({opacity: 0.0}, 500).removeClass('show');
	
	if(pauseAndPlayFlag === 1){
		timer = setInterval('gallery(1)',transitionSpeed);
	}
}

var pauseAndPlayFlag = 1; //setting 1 for play and 0 for paused state; the pages starts with the play mode
function pauseAndPlay() {
	
	var hdnPlay = document.getElementById('hdnPlay')
	var hdnPause = document.getElementById('hdnPause')
	
	if(pauseAndPlayFlag === 1){
		clearInterval(timer);
		pauseAndPlayFlag = 0;
		$("#pause-play").attr("src", hdnPlay.value);
	}else if(pauseAndPlayFlag === 0){
		timer = setInterval('gallery(1)',transitionSpeed);
		pauseAndPlayFlag = 1;
		$("#pause-play").attr("src", hdnPause.value);
	}
}