var slides;
var slidesNum;
var slide;
var buttons;
var button;
var nextButton;
var prevButton;
var progress;
var tooltip;
  
$(document).ready(function() {

  // Setup slides and current slide, hide all but the first slide
  slides = $('#background div');
  slide = slides.eq(0);
  slidesNum = slides.length;
  slides.not(slide).hide();
  
  // Add navigation based on number of slides
  for(var count = 0 ; count < slidesNum ; count++) {
    $('#background-nav').append('<li></li>');
  }
  
  // Set the first tooltip in the footer
  tooltip = $('#footer-tip');
  tooltip.attr('title' , slide.attr('title'));
  
  // Setup buttons and current button
  buttons = $('#background-nav li');
  button = buttons.eq(0);
  button.addClass('active');
  
  // Set next/prev buttons, fade them in
  nextButton = $('#background-next');
  prevButton = $('#background-prev');
  nextButton.fadeIn('slow');
  prevButton.fadeIn('slow');
  
  // Set progress bar and start timer
  progress = $('#progressbar-value');
  $('#progressbar').fadeIn('slow');
  progress.animate({ width: ['100%','linear'] }, 8000, function() { nextSlide(); });
  
  // next / prev button controllers
  nextButton.click(function() { nextSlide('next'); });
  prevButton.click(function() { nextSlide('prev'); });

  
  // Handler for when a button is pressed
  buttons.click(function() {

    // Figure out which button was pressed
    var index = buttons.index(this);

    // Change slide and button if the active button wasn't pressed
    if(buttons.index(button) != index) {
      slide.hide();
      button.removeClass('active');
      progress.stop().css({ 'width':'0' }).animate({ width: ['100%','linear'] }, 8000, function() { nextSlide(); });
		  
      button = buttons.eq(index);
      slide = slides.eq(index);
		  
      slide.show();
      button.addClass('active');
      tooltip.attr('title' , slide.attr('title'));
    }
		
  });
  
  // Handler for when a button is pressed
  tooltip.hover(
    function () {
      progress.stop();
    }, 
    function () {
      progress.css({ 'width':'0' }).animate({ width: ['100%','linear'] }, 8000, function() { nextSlide(); });
    }
  );

});


// Auto-rotate / Next / Previous function
function nextSlide(action) {

  // Clear current activity
  slide.hide();
  button.removeClass('active');
  if (action) { progress.stop(); }
  progress.css({ 'width':'0' }).animate({ width: ['100%','linear'] }, 8000, function() { nextSlide(); });

  if (action == 'prev') {
    // If we're on the first slide, go back to the last; otherwise, go to the previous
    if(slides.index(slide) == 0) {
      slide = slides.last();
      button = buttons.last();
    } else {
      slide = slide.prev();
      button = button.prev();
    }
  } else {
    // If we're on the last slide, go back to the first; otherwise, go to the next
    if(slides.index(slide) == (slidesNum - 1)) {
      slide = slides.first();
      button = buttons.first();
    } else {
      slide = slide.next();
      button = button.next();
    }
  }

  // Show new activity
  slide.show();
  button.addClass('active');
  tooltip.attr('title' , slide.attr('title'));
  
}