$.fn.extend({ /* this is a function to create a new method to disable text selection on any element -- useful for text used as buttons */
      disableSelection: function() { 
          this.each(function() { 
          if (typeof this.onselectstart != 'undefined') {
               this.onselectstart = function() { return false; };
          } else if (typeof this.style.MozUserSelect != 'undefined') {
               this.style.MozUserSelect = 'none';
          } else {
                this.onmousedown = function() { return false; };
           }
          }); 
      } 
});

$(function() {
	$('nav').hide();
	var whichPic = ""; /* declare some variable to be used. by declaring them here they can be shared in multiple functions */
	var whichTitle="";
	var i=0;
	$('#controls').show(); /* show left right buttons hidden if no javascript */
	var timerInterval = 3000; /* set the time between slides in milliseconds */
	$('#windowOverlay').height($(document).height()); /* set overlay to height of document not just the window */
	$('span, #prevNext, #closeMe, #showControls').disableSelection(); /* prevent selection of text used as button  */
	
	$('header').hover( function() {
		$('nav').fadeIn();
	},
	function() {
		$('nav').fadeOut();
	});
		
	$('#windowOverlay').click(function(e) { /* read clicks in the overlay and respond */	
	if ($(e.target).is($('#closeX'))) {
		$('#closeX').click(); /* close the overlay */
		return
	}
		var element = $('#bigBox img')[0]; 
		var imageClick = e.pageX - element.offsetLeft; /* find the location of the click in the image */
		if ($(e.target).hasClass('nextPic')) { /* read a click on the next button */
		doNext=true;
		} else {
		doNext=false;
		}
		if ($(e.target).hasClass('prevPic')) { /* read a click on the prev button */
		doPrev=true;
		} else {
		doPrev=false;
		}
		/* the following conditional checks for clicks on the image AND the location of the click OR if doNext or doPrev is set to true by the code directly above. A click on the left side of the image OR the PREV button does the same thing. */
		if ((($(e.target).is('img'))&&(imageClick>400))||doNext) { /* respond to clicks on the image or the next prev buttons */
			getNext(); /* call the getNext function defined below */
			$('#stop').text("PLAY");
			clearInterval(t); /* stop the timer */
			
		} else if  ((($(e.target).is('img'))&&(imageClick<400))||doPrev) {
			getPrevious(); /* call the getPrevious function defined below */
			$('#stop').text("PLAY");
			clearInterval(t); /* stop the timer */
			
		} else if (!$(e.target).is('#showControls')&&!$(e.target).is('#closeControls')&&!$(e.target).is('#bigBox')&&!$(e.target).is('#bigBox p')&&!$(e.target).is('#controls p span')&&!$(e.target).is('#controls div')&&!$(e.target).is('#stop')&&!$(e.target).is('#stopSlides')) { /* respond to clicks on the overlay but off of the image box. Note the use of ! for NOT. If the click is on the overlay but not on the listed elements then hide the overlay */
			$('#closeX').click(); /* close the overlay */
			i=0;
		}
		return false;
		
	});
	$(document).keydown(function(event) { /* respond to the arrow keys */
		event.preventDefault();
	  if (event.which == '39') { /* keyCode 39 is the right arrow key */
		 getNext(); /* call the getNext function defined below */
		 $('#stop').text("PLAY");
		clearInterval(t); /* stop the timer */
		}
		
		if (event.which == '37') { /* keyCode 37 is the left arrow key */
		 getPrevious(); /* call the getPrevious function defined below */
		 $('#stop').text("PLAY");
		clearInterval(t); /* stop the timer */
		}
		if (event.which == '88') { /* keyCode 88 is the x key */
		 $('#closeX').click(); /* close the overlay */
		}
		 
	   
	});
	
	$('#closeX').click(function() { /* click function for X to close overlay */
		$('#windowOverlay').hide();
		clearInterval(t); /* stop the timer */
		
		i=0;
	});
	
	$('.thumb').click(function() { /* show the overlay */
		$('#slideWindow ul').hide();
		whichSet=$(this).attr('rel');
		$(whichSet).show();
		$('#windowOverlay').height($(document).height()); /* set overlay to height of document not just the window */
		$('#bigBox').css('margin-top', $(window).height()*.05);
		if($(window).height()<600) {
			$('#bigBox').css('margin-top', 10);	
		}
		$('#windowOverlay').fadeIn(); /* show the overlay */
		resetSlides();
		return false; /* prevent the default behavior of the click, if any */
	});
	
	
	
	$('#bigBox', '#windowOverlay').mouseover(function() {
		$('#overlayControls').slideDown();
		$('#showControls').fadeOut();
	});
	$('#closeControls').click(function(e) {
		$('#overlayControls').slideUp();
		$('#showControls').fadeIn();
		
	});
	$(window).resize(function() {
  		$('#windowOverlay').height($(window).height());
	});
	
var speed=1000;
var pause=5000;
var whichSet = "#recent";
var t; /* javascript timer */

function getNext() {
var $active = $('#slideWindow '+whichSet+' li.active');

    if ( $active.length == 0 ) $active = $('#slideWindow '+whichSet+' li:last'); /* alternative conditional syntax */

    var $next =  $active.next().length ? $active.next()
        : $('#slideWindow '+whichSet+' li:first'); /* alternative conditional syntax */

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, speed, function() {
            $active.removeClass('active last-active');
        });
}
function getPrevious() {
	
var $active = $('#slideWindow '+whichSet+' li.active');

    if ( $active.length == $('#slideWindow '+whichSet+' li').length ) $active = $('#slideWindow '+whichSet+' li:first'); /* alternative conditional syntax */

    var $prev =  $active.prev().length ? $active.prev()
        : $('#slideWindow '+whichSet+' li:last'); /* alternative conditional syntax */

    $active.addClass('last-active');

    $prev.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, speed, function() {
            $active.removeClass('active last-active');
        });
}



$('#stop').click( function() {
	if ($(this).text()=="PAUSE") {
			clearInterval(t); /* stop the timer */
			$(this).text("PLAY");
		} else {
		getNext();
		t = setInterval(getNext, pause);
		$(this).text("PAUSE");
	}
});

function resetSlides() {
	$('#slideWindow ul li').removeClass('active');
	$('#slideWindow ul li:first-child').each(function() {
		$(this).addClass('active');
	});
	t = setInterval(getNext, pause);
	$('#stop').text("PAUSE");
}

});