//set the limit here
  var limit = 5;
  
//shouldn't need to edit anything else
$(document).ready(function(){
  //wait until the first image loads.  If you don't, we will get the wrong image heights.
  var t;
  window.WaitDude = function() {
    if(!document.getElementById("firstEpisode").complete) {
      t = setTimeout("WaitDude()", 500);
    } else {
      clearTimeout(t);
      BuildLeftMenu(); //this is a holder function for the rest of the script.  Without it, js will continue throughout the script defeating the purpose of the wait script.
    }
  }
  WaitDude();
  
  function BuildLeftMenu() {
    var howMany = $('.episode').length;
    //# get height for 10 divs and then hide the menu (won't work the other way around)
		var elemHeight = $('.episode').eq(0).height() + parseInt( $('.episode:first').css('marginBottom') );
		var divHeight = ( elemHeight * limit );
		$('.episode').hide();
		
		//# Set style for containing element
		$('#episodeBox').css({
		 height: (divHeight+limit) + 'px',
		 width: "205px",
		 overflow: 'hidden'
		});
		
		//# add rounded corners (these are styled in the PHP file, get-episodes.php)
		$('.episode').append('<div class="box-tl"></div><div class="box-tr"></div><div class="box-bl"></div><div class="box-br"></div>');
		
		//# fade in navigation one episode at a time
		var x = 0;
		function indvFadeIn() {
			$('.episode').eq(x).fadeIn("500", function(){
				if (x<howMany) {
					x++;
					indvFadeIn();
				}
			});
		}
		indvFadeIn();
		blocker = document.createElement('div');
		blocker.setAttribute('id', 'blocker');
		document.getElementById('episodeBox').appendChild(blocker);
		$('#blocker').css({
			position: "absolute",
			top: "0px",
			left: "-3000px",
			width: "210px",
			height: (divHeight+60)+"px",
			zIindex: "5",
			opacity: "0.5"
		});
		//# add a scrolldown button
		$('#downButton').show();
		var downLimit = parseInt(-( (howMany * (elemHeight+2)) - ((elemHeight+2) * limit) ));
		var oneBeforeBottom = parseInt(downLimit + (elemHeight+2));
		$('#downButton').click(function(){
			//# get current top value
			var topVal = parseInt( $('.episode:first').css('top') );
			if (isNaN(topVal)) { topVal = 0; } //safari NaN bug/thing
			if (topVal > downLimit) {
				$('#blocker').css('left', '0px');
				$('.episode').animate({
					top: (topVal - (elemHeight+2))+"px"
				}, 400, function() {
					$('#blocker').css('left', '-3000px');
				});
				$('#upButtonText').css('display', 'inline');
				//$('#upButton').css('background-image', 'url("/images/button-up.gif")');
				//alert(topVal+' '+oneBeforeTop+' '+oneBeforeBottom+' '+downLimit);
				if (topVal == oneBeforeBottom) {
				  $('#downButtonText').css('display', 'none');
				  //$('#downButton').css('background-image', 'url("/images/button-down-grayed.gif")');
				}
			}
		});
		
		//# add a scroll up button
		$('#upButton').show();
		$('#upButtonText').css('display', 'none');
		var oneBeforeTop = parseInt(-(elemHeight+2));
		$('#upButton').click(function(){
			//# get current top value;
			var topVal = parseInt( $('.episode:first').css('top') );
			if (isNaN(topVal)) { topVal = 0; } //safari NaN bug/thing.
			if (topVal < 0) {
				$('#blocker').css('left', '0px');
				$('.episode').animate({
					top: (topVal + (elemHeight+2))+"px"
				}, 400, function() {
					$('#blocker').css('left', '-3000px');
				});
				$('#downButtonText').css('display', 'inline');
				//$('#downButton').css('background-image', 'url("/images/button-down.gif")');
				if (topVal == oneBeforeTop) {
				  $('#upButtonText').css('display', 'none');
				  //$('#upButton').css('background-image', 'url("/images/button-up-grayed.gif")');
				}
			} else {
				//alert( topVal+' < 0' );
			}
		});

  
  
  }
});