var pictures = new Array();
var captions = new Array();
var titles = new Array();
var i = 0;
var basepath;
var paused = false;

pictures[0] = "/images/banner/tin.jpg";
titles[0]   = "<a href='http://www.drinkstorm.com/products/accessories'>Shop Accessories</a>";
captions[0] = "Freshness tins, designed to keep your coffee fresh longer.  <a href='http://www.drinkstorm.com/products/tins'>Learn more</a> about our tins.";

pictures.push("/images/banner/mediumbeans.jpg");
titles.push("<a href='http://www.drinkstorm.com/products/coffee'>Shop Coffee</a>");
captions.push("Our roasted coffee is known for its rich and pleasant flavor profiles.  <a href='http://www.drinkstorm.com/products/coffee'>Learn more</a>.");

//pictures.push("/images/banner/bag.jpg");
pictures.push("/images/banner/temp.jpg");
titles.push("<a href='http://www.drinkstorm.com/products/coffee'>Shop Coffee</a>");
captions.push("Our coffee is hand-roasted in small batches and packaged to order.  We take great care to bring you a coffee you will love.");

pictures.push("/images/banner/tea.jpg");
titles.push("<a href='http://www.drinkstorm.com/products/tea'>Shop Tea</a>");
captions.push("The tea we have chosen is all freshly cut and chopped.  The ingredients are blended for a very smooth and flavorful cup.  Perfect for you everyday or as a gift.");

pictures.push("/images/banner/nutmeg.jpg");
titles.push("<a href='http://www.drinkstorm.com/products/spices'>Shop Spices</a>");
captions.push("Did you know that nutmeg looked like this?<br> We have fresh spices of the season and more!  Visit our <a href='http://www.drinkstorm.com/products/spice'>fresh spice menu</a>.");

jQuery(document).ready(function() {
  basepath = jQuery('#changer>img').attr('basepath');

//use javascript to override non-js defaults
  jQuery('#caption>h2').html(titles[0]);
  jQuery('#caption>p').html(captions[0]);
  jQuery('#changer>img').attr('src', basepath + pictures[0]).show();
  jQuery('#controls').show();

//change image automatically
  setInterval('autoChange()', 5000);

//handle the image changer controls
  jQuery('#pause').click(function() {
    if (paused) {
      paused = false;
      jQuery('#pause').attr('src', basepath + '/images/pause.png');
    } else {
      paused = true;
      jQuery('#pause').attr('src', basepath + '/images/play.png');
    }
  });

  jQuery('#next').click(function() {
    nextImage();
  });

  jQuery('#prev').click(function() {
    i -= 2;
    if (i<0) i = pictures.length + i;
    nextImage();
  });
});

function autoChange(){
  if (!paused) nextImage();
}

function nextImage(){
  if (++i >= pictures.length) i = 0;
  jQuery('#changer').css('background-image', 'url(' + basepath + pictures[i] + ')');
  jQuery('#changer>img').fadeOut("slow", function() {
    jQuery('#caption>h2').html(titles[i]);
    jQuery('#caption>p').html(captions[i]);
    jQuery('#changer>img').attr('src', basepath + pictures[i]);
    jQuery('#changer>img').fadeIn();
  });
}
;