$(function(){
  var size = 556;
  var box  = $("#img");
  var btn  = $("#btn");
  var next = $("#btn .next");
  var prev = $("#btn .prev");
  var time = 5000;

  next.click(function(){
    btn.hide();
    box.animate({
      marginLeft : parseInt(box.css("margin-left"))-size+"px"
    }, 800, function(){
      box.css("margin-left", -size * 2 + "px")
      $("li", box).first().appendTo(box);
      btn.fadeIn("fast");
    });
    $('img:not(:eq(3))', box).animate({
      marginTop : '44px',
      width : '480px'
    }, 800);
    $('img:eq(3)', box).animate({
      marginTop : '0',
      width : '556px'
    }, 800);
  });

  prev.click(function(){
    btn.hide();
      box.animate({
      marginLeft : parseInt(box.css("margin-left"))+size+"px"
    }, 800, function(){
      box.css("margin-left",-size * 2 + "px")
      $("li", box).last().prependTo(box);
      btn.fadeIn("fast");
    });
    $('img:not(:eq(1))', box).animate({
      marginTop : '44px',
      width : '480px'
    }, 800);
    $('img:eq(1)', box).animate({
      marginTop : '0',
      width : '556px'
    }, 800);
  });

  next.mouseup(function() {
    clearInterval(timerID);
    timerID = setInterval(function() {
      next.click();
    }, time);
  });
  prev.mouseup(function() {
    clearInterval(timerID);
    timerID = setInterval(function() {
      next.click();
    }, time);
  });
  timerID = setInterval(function() {
    next.click();
  },time);

});