$(document).ready(function() {
  slideShow(8000);
  loadShow();
});

function loadShow()
{
  document.getElementById('intro').src = '/images/slideshow/intro.jpg';
  document.getElementById('elliot_wave').src = '/images/slideshow/elliott_wave.jpg';
  document.getElementById('monitors').src = '/images/slideshow/monitors.jpg';
  document.getElementById('trade').src = '/images/slideshow/trade.jpg';
  document.getElementById('alternate').src = '/images/slideshow/alternate_analysis.jpg';
  document.getElementById('themes').src = '/images/slideshow/themes.jpg';
  document.getElementById('commentary').src = '/images/slideshow/commentary.jpg';
  document.getElementById('instruments').src = '/images/slideshow/multiple_instruments.jpg';
  document.getElementById('compact').src = '/images/slideshow/compact_charts.jpg';
}

function slideShow(speed) {
  //append a LI item to the UL list for displaying caption
  $('ul.slideshow').append('<li id="slideshow-caption"><div class="slideshow-caption-container"></div></li>');

  //Set the opacity of all images to 0
  $('ul.slideshow li').css({opacity: 0.0});
  
  //Get the first image and display it (set it to full opacity)
  $('ul.slideshow li:first').css({opacity: 1.0});
  
  //Get the caption of the first image from REL attribute and display it
  var div = $('ul.slideshow li:first').find('div');
  $('#slideshow-caption').html(div.html());

  //Display the caption
  $('#slideshow-caption').css({opacity: 1.0});
  $('#slideshow-caption li').css({opacity: 1.0});

	document.getElementById('slideshow_ul').style.visibility="visible";
  
  //Call the gallery function to run the slideshow  
  var timer = setInterval('gallery()',speed);
  
  //pause the slideshow on mouse over
  $('ul.slideshow').hover(
    function () {
      clearInterval(timer); 
    },  
    function () {
      timer = setInterval('gallery()',speed);     
    }
  );
}

function gallery() {
  //if no IMGs have the show class, grab the first image
  var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
  
  //Get next image, if it reached the end of the slideshow, rotate it back to the first image
  var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
    
  //Set the fade in effect for the next image, show class has higher z-index
  next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
  
  //Hide the caption first, and then set and display the caption
  $('#slideshow-caption').animate({opacity: 0.0}, 1000, function () {
      //Display the content
      $('#slideshow-caption').html(next.find('div').html());
      $('#slideshow-caption li').css({opacity: 1.0});
      $('#slideshow-caption').animate({opacity: 1.0}, 1000); 
  });  

  //Hide the current image
  current.animate({opacity: 0.0}, 1000).removeClass('show');
}