$(document).ready(function() {
   var slideMap = new Array();
   slideMap["slide1"] = 1;
   slideMap["slide2"] = 2;
   slideMap["slide3"] = 3;
   slideMap["slide4"] = 4;
   updateGotoBtns(1);
   $("#slideshow").cycle({
      timeout: 5000,
      fastOnEvent: 200,
      pause: true,
      before: function(curElement, nextElement, options, forward) {
         updateGotoBtns(slideMap[nextElement.id]);
      }
   });
});

function prevSlide() {
   $("#slideshow").cycle("prev");
   $("#slideshow").cycle("pause");
}

function nextSlide() {
   $("#slideshow").cycle("next");
   $("#slideshow").cycle("pause");
}

function gotoSlide(index) {
   $("#slideshow").cycle(index-1);
   $("#slideshow").cycle("pause");
}

function updateGotoBtns(index) {
   for (i=1; i<=4; i++) {
      if (index == i) {
         $("#gotoSlide"+i).removeClass("gotoSlideUp"+i);
         $("#gotoSlide"+i).addClass("gotoSlideDown"+i);
      } else {
         $("#gotoSlide"+i).removeClass("gotoSlideDown"+i);
         $("#gotoSlide"+i).addClass("gotoSlideUp"+i);
      }
   }
}