$(document).ready(function() {		
	$('#ja_header_jsfade').before('<div id="nav" style="top: 400px;"><span id="resumeButton">Play</span> | <span id="pauseButton">Pause</span>').cycle({ 
		speed:  2000, 
		timeout: 7000,
		slideHeight: 330,
		pager:  '#nav' ,
		pagerAnchorBuilder: function(idx, slide) {
			return '<span class="SSsmallImg"><a href="#"><img src="' + slide.id + '" width="50" height="50" /></a></span>'; 
		}
	});
	
	var beingShown = false;
    var shown = false;
    
	$('#slideshow').hover(
		function () {
			if (beingShown || shown) {
				return;
			} else {
				beingShown = true;
				$('#nav').animate({ 
					top: "245px",
					opacity: 1
				}, 800, null, function(){
					beingShown = false;
	          		shown = true;
				}); 
			}
		},
		function () { 
			if(!beingShown){
				$('#nav').animate({ 
					top: "370px"
				}, 800, null, function(){
					shown = false;
				});
			}
		}
	);
	
	$('#pauseButton').click(function() { 
		$('#ja_header_jsfade').cycle('pause'); 
	});
	$('#resumeButton').click(function() { 
		$('#ja_header_jsfade').cycle('resume'); 
	});
	
	$("#nav").ready(function() {
		changeStyleHover("#resumeButton", "yellowText");
		changeStyleHover("#pauseButton", "yellowText");					 
	});
});