$(document).ready(function() {
  window.setTimeout('populateSlider()', 5000);
})

function populateSlider() {
  $.each(slides, function(i, image) {
    var buttonItem = '<div class="buttonItem" id="slide' + i + '">' + 
      '<span class="buttonTitle">' + image.buttonTitle + '</span>' +
      '<span class="buttonText">' + image.buttonText + '</span>' +
      '</div>';
    $('div#linkColumn').append(buttonItem);
    $('body').append('<img class="slide-image" src="' + image.imageSrc + '" alt="' + image.imageAlt + '" title="' + image.imageTitle + '" id="slide-image-' + i + '" />');
    $('img#slide-image-' + i).hide();
  });
  totalSlides = slides.length;
  $('div.buttonItem').mouseover(function() {
    $(this).addClass('hover');
  }).mouseout(function() {
    $(this).removeClass('hover');
  });
  $('div.buttonItem').click(clickButton);
  startSlider();
}

function startSlider() {
  $('div.buttonItem').removeClass('sel');
  $('div#slide' + currentSlide).addClass('sel');
  var s = slides[currentSlide];
  $('img.slide-image').appendTo('body').hide();
  $('div#contentColumn').html(
    '<a href="' + s.linkURL + '" title="' + s.imageTitle + '" id="slide-link-' + currentSlide + '" ></a>' +
    '<div id="imageTextBox">' +
    '<span class="imageTitle">' + s.imageTitle + '</span>' +
    '<span class="imageText">' + s.imageText + '</span>' +
    '</div>');
  $('img#slide-image-' + currentSlide).show();
  $('img#slide-image-' + currentSlide).appendTo('a#slide-link-' + currentSlide);
  $('div#imageTextBox').click(function() {
    window.location = s.linkURL;
  });
  currentSlide++;
  if(currentSlide == totalSlides)
    currentSlide = 0;
  if(!userClick) {
    t = window.setTimeout('startSlider()', timeDelay);
  } else {
    userClick = false;
    t = window.setTimeout('startSlider()', userClickDelay);
  }
}

function clickButton() {
  var id = $(this).attr('id');
  id = id.substr(5);
  currentSlide = id;
  userClick = true;
  window.clearTimeout(t);
  startSlider();
  return false;
}

function clickSlide() {
  
}