// slider settings
slider_pause_time = 1500;
slider_speed = 500;
slide_width = 940;

// when the page loads, wait a given amount of time, and then init the slider
jQuery(document).ready(function () {
  
  // setup one of the slides as the default (I would do this hard coded in the
  // html but we're using this great inline editor thing and the html is not
  // that grandular)
  jQuery('div.image_slider_wrapper ul.image_slider li:first').addClass('shown');
  
  slider_init();
  
});

// basically the "play button"
function slider_init()
{
  // wait a given amount of time, then swap the slides
  setTimeout(function () {
    slider_slide(jQuery('div.image_slider_wrapper ul.image_slider li.shown'));
  }, slider_pause_time);
}

// swaps the element you give it with the next element
function slider_slide(ele)
{
  // find the next slide
  var next = get_next_slide(ele);
  
  // slide in the next slide
  next.animate({ left: '0px' }, slider_speed);
  
  // simeltaneously slide out the current slide
  ele.animate({ left: '-'+slide_width+'px' }, slider_speed, function () {
    
    // on completion:
    // set the new slide as "shown"
    next.addClass('shown');
    
    // unset the old slide's shown status
    ele.removeClass('shown');
    
    // reset the old slide to the staging area
    ele.css('left', slide_width+'px');
    
    // restart the slider with the new slide
    slider_init();
  });
  
}

// get the next element in the unordered list (wraps around at the end)
function get_next_slide(ele)
{
  var next = ele.next();
  if (!next.length)
  {
    next = ele.parent().find('li:first-child');
  }
  return next;
}