$(function(){
  var size = 556;
  var box  = $("#img");
  var btn  = $("#btn");
  var next = $("#btn .next");
  var prev = $("#btn .prev");
  var navi = $("#img_navi");
  var no1 = $("#img_navi .no1");
  var no2 = $("#img_navi .no2");
  var no3 = $("#img_navi .no3");
  var no4 = $("#img_navi .no4");
  var no5 = $("#img_navi .no5");
  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 - 40 + "px")
      $("li", box).first().appendTo(box);
      btn.fadeIn("fast");
    });
    $('img:not(:eq(2))', box).animate({
      marginTop : '24px',
      width : '480px'
    }, 800);
    $('img:eq(2)', box).animate({
      marginTop : '0',
      width : '535px'
    }, 800);
    var nowimg = $('li:eq(2)', box).attr('class');
    $('li.selected' , navi).removeClass("selected");
    $('li.' + nowimg , navi).addClass("selected");
  });

  prev.click(function(){
    btn.hide();
      box.animate({
      marginLeft : parseInt(box.css("margin-left"))+size+"px"
    }, 800, function(){
      box.css("margin-left",-size - 40 + "px")
      $("li", box).last().prependTo(box);
      btn.fadeIn("fast");
    });
    $('img:not(:eq(0))', box).animate({
      marginTop : '24px',
      width : '480px'
    }, 800);
    $('img:eq(0)', box).animate({
      marginTop : '0',
      width : '535px'
    }, 800);
    var nowimg = $('li:eq(0)', box).attr('class');
    $('li.selected' , navi).removeClass("selected");
    $('li.' + nowimg , navi).addClass("selected");
  });

  no4.click(function(){
    btn.hide();
      box.animate({
      marginLeft : parseInt(box.css("margin-left"))+size+"px"
    }, 800, function(){
      box.css("margin-left",-size * 2 - 40 + "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'}, 
     {
      duration: 800 ,
      complete: function () {prev.click();}
     }
    );

  });

/* 自動でスライドさせる場合
  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);
*/
});