$(function() {
  var slide = $("#slide");
  var slideButtons = $("div#slide_btns img");

  // Preload slide images & start slideshow
  var totalSlides = 5;
  var slidePics = new Array(totalSlides);
  for(var i = 1; i <= totalSlides; i++) {
    slidePics[i] = new Image();
    slidePics[i].src = "images/slide" + i + ".jpg";
  }
  var slideshow = changeSlide(slide, slidePics, 1, totalSlides);
  
  // Goto prev/next slide
  slideButtons.bind("click", function(event) {
    clearInterval(slideshow);
    var currentSlide = slide.data("currentSlide");
    if(event.target.id == 'prev') {
      if(currentSlide == 1) newSlide = totalSlides;
      else newSlide = currentSlide - 1;
    }
    else {
      if(currentSlide == totalSlides) newSlide = 1;
      else newSlide = currentSlide + 1;
    }
    slideshow = changeSlide(slide, slidePics, newSlide, totalSlides);
  });
  
  // Show prev/next slide buttons on hover
  $("div#slide_nav").hover(
    function() { slideButtons.stop().fadeTo(300, 1); },
    function() { slideButtons.stop().fadeTo(800, 0); }
  );
  
  // Highlight nav buttons on hover; change body content and scroll down on click
  $("#nav-buttons tr").show();
  $("#nav-buttons a").hover(
    function(event) { $(this).addClass(event.target.id + "_hover"); },
    function(event) { $(this).removeClass(event.target.id + "_hover"); }
    ).click(function(event) {
      $.ajax({
        url: event.target.id + ".php",
        success: function(response) {
          $("#content").html(response);
          $("html, body").animate({scrollTop:$("#navbar").offset().top}, 500);
        }
      });
  });
});

function changeSlide(slide, slidePics, slideNum, slideCount) {
  // Set first slide
  slide.show()
       .css("background-image", "url(" + slidePics[slideNum].src + ")")
       .data("currentSlide", slideNum);
  
  // Loop through slideshow
  var slideshow = setInterval(
    function() {
      slideNum++;
      if( slideNum > slideCount ) slideNum = 1;
      slide.fadeTo(1000, .1, function() {
        slide.css("background-image", "url(" + slidePics[slideNum].src + ")").fadeTo(1000, 1);
      }).data("currentSlide", slideNum);
    },
  6000);
  
  return slideshow;
}
