$(document).ready(function(){

$('#slideshow').addClass('pics');

//removes <p> tags made by contribute!
$("#slideshow p").each(function(){
	$("#tooltip").after( $(this).html() ); 
	$(this).remove();
});





	$('#slideshow').before('<ul id="nav">').cycle({ 				
		fx:        'cover',
        cssBefore: { opacity: 1 },
        animOut:   { opacity: 0 },
		timeout: 6000, 	
		before: onBefore,
		after:   onAfter,		
		slideExpr: 'img', 		
		pager:  '#nav',	    
		 
		// callback fn that creates a thumbnail to use as pager anchor 
		pagerAnchorBuilder: function(idx, slide) { 
			return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
		} 
		
	});

	

//Sets Pause Button and open current image in new window link to pause slideshow
	$('#pauseButton , #openinnewwindowlink').click(function() { 
		pauseslideshow();
	});
		
//Sets up resume Button	
	$('#resumeButton').click(function() { 
		$('#slideshow').cycle('resume');
		$('#status').html("Playing...");
	});
	
	
	
      $('#playbuttonimg').hover(function() {
        $(this).attr("src","../imgs/play2.png");
      }, function() {
        $(this).attr("src","../imgs/play.png");
      });
      $('#pausebuttonimg').hover(function() {
        $(this).attr("src","../imgs/pause2.png");
      }, function() {
        $(this).attr("src","../imgs/pause.png");
      });


//START Blue Overlay mouseover image
//Add's finger class to all img's inside slideshow div. also sets up tooltip toggle and window open.
      
      $("#slideshow img").addClass('finger')
      .click(function(){
      	 pauseslideshow(); 	
		 picurl = $(this).attr("src");
		 window.open(picurl);
      }).hover(function(){
		   $("#tooltip").queue([]);$("#tooltip").toggle();
      }, function(){
		   $("#tooltip").queue([]); $("#tooltip").toggle();
      });
      
//Fixes bug when mouse over blue overlay      
      
      $("#tooltip").hover(function(){
		$("#tooltip").queue([]);$("#tooltip").toggle();
      }, function(){
   		$("#tooltip").queue([]); $("#tooltip").toggle();
      });
//END of Blue Overlay

 
});

//End of DOM ready


function pauseslideshow(){
	$('#slideshow').cycle('pause'); 
	$('#status').html("<span style='color:red'>Paused</span>");		
}


function onBefore() {  
	$("#slideshow").height( (this.height + 32) );
    $("#commenttxt").slideUp();
}

function onAfter() {  
	$("#openinnewwindowlink").attr("href",this.src);
    $('#commenttxt').html(this.alt);
      if(this.alt != ""){
      $("#commenttxt").slideDown();
      }
}