$(function() {
  var $box = $('#mainimg');
  var $img = $('#img');
  var $btn = $('#btn');
  var size = 900;
  var time = 5000;
  var timerID;
  var btnHover = false;
  slideTimer();
  $btn.find('img.next').click(nextClick).mouseup(slideTimer).end()
      .find('img.prev').click(prevClick).mouseup(slideTimer);
  $box.hover(
    function() {
      btnHover = true;
      if ($img.is(':animated')) { return false; }
      $btn.find('img').stop(true, true).fadeIn();
    },
    function() {
      btnHover = false;
      $btn.find('img').stop(true, true).fadeOut();
    }
  );
  function nextClick() {
    $btn.find('img').hide();
    $img.not(':animated').animate({
      marginLeft : parseInt($img.css('margin-left')) - size + 'px'
    }, 1000, 'easeOutQuart', function() {
      $(this).css('margin-left', - size + 'px').find('li:first').appendTo($img);
      if (btnHover == true) { $btn.find('img').fadeIn(); }
    });
  }
  function prevClick() {
    $btn.find('img').hide();
    if ($img.is(':animated')) { return false; }
    $img.css('margin-left', - size * 2 + 'px').animate({
      marginLeft : parseInt($img.css('margin-left')) + size + 'px'
      }, 1000, 'easeOutQuart', function() {
        if (btnHover == true) { $btn.find('img').fadeIn(); }
      }).find('li:last').prependTo($img);
  }
  function slideTimer() {
    clearInterval(timerID);
    timerID = setInterval(nextClick, time);
  }
});