// Initialize the slideshow as soon as the document is loaded and ready
$(document).ready(function() {

	//Hide the preview window by default, only show it when needed
	$('#preview').hide();

	//Slideshow initialization
	$('#slideshow').cycle({
		fx: 'fade',
		timeout: 10000,	//time between slides
		speed:  1000,
		pager: '#pager',
		next: '#next',
		prev: '#prev',
    	pagerAnchorBuilder: function(idx, slide) { //This builds the pager links
          var num = idx+1;
		  var src = $('img',slide).attr('src');
          return '<a preview="' + src + '" href="#"><img src="slideshow_new/img/pagerimage.png" width="20" height="21" border="0"></a>';
    	}
	});	//End slideshow initialization

	//Display the preview when the user points to an anchor on the pager
	$('#pager a').mouseover(function(evt) {
	
		//path to new preview  
  		var imgPath = $(this).attr("preview");
			   
   		//get reference to old preview
		//var oldPrev = $('#preview img'); 
	
		//create HTML for new image
		var newPrev = $('<img class="basic" src="' + imgPath +'" height="48" width="100">');
	 
		//make new image invisible
		newPrev.hide();  
	 
		//Add the preview html to the #preview div
		$('#preview').prepend(newPrev); 
		
		//Set the position of the #preview div based on the position of the mouse cursor
		var pos = $(this).offset();  
		var width = $(this).width();
		$("#preview").css( { "left": (pos.left - 38) + "px", "top":(pos.top - 63) + "px" } );
	
	 	//Display the preview div
		$('#preview').show();
		newPrev.fadeIn(850);  //Fade in the thumbnail
				
	}); // end mouseover

	//Clear and hide the #preview div when the mouse moves off of the pager
	$('#pager a').mouseout(function(evt) {
		$('#preview').hide();	//Hide the #preview div
		$('#preview').html("");  //Clear the #preview div
	});
	
	//Handle the pauseButton click
	$('#pauseButton').click(function() { 
		$('#slideshow').cycle('pause'); //pause the slide show
	});
	
	//Handle the playButton click
	$('#playButton').click(function() { 
		$('#slideshow').cycle('resume', true); //Resume the slideshow and move to next slide
	});

}); // end document ready()