$(function(){
  var eq = 0;
  var duration = 2000;
  var timeout = 5000;
  var ba = $("#mainimg #img_area li");
  var length = ba.length-1;
  var bottom = $("#mainimg ul#img_bottom");

  ba.css({"position":"absolute", "display":"none"});
  ba.eq(eq).css("display","block");
  bottom.css("backgroundPosition",146*eq + "px");

  //IEかどうか
  var ie = !-[1,];

  $.next = function(){
    var hide = ba.eq(eq);
    if(eq<length){
      if(eq==0){
        bottom.css("backgroundPosition","0px");
      }
      eq++;
    }else{
      eq = 0;
    }
    var show = ba.eq(eq);
    show.fadeTo(duration, 1).css("zIndex",1);
    hide.fadeTo(duration, 0).css("zIndex",0);
    if(ie){
      bottom.animate({backgroundPositionX:"+=146px"}, duration/2);
    }else{
      bottom.animate({backgroundPosition:"+=146px"}, duration/2);
    }
    setTimeout((function(){
      $.next();
    }), timeout);
  };

  $("ul#img_bottom li").click(function(){
    //現在位置
    var cur = eq;
    //目的位置
    var dep = $("ul#img_bottom li").index(this);
    //移動距離
    var move = dep - cur;
    if(move !=0){
      if(ie){
        bottom.animate({backgroundPositionX:"+=" + 146*move + "px"}, duration/3);
      }else{
        bottom.animate({backgroundPosition:"+=" + 146*move + "px"}, duration/3);
      }
      ba.eq(cur).fadeTo(duration/3, 0).css("zIndex",0);
      ba.eq(dep).fadeTo(duration/3, 1).css("zIndex",1);
      eq = dep;
    }
    return false;
  });

  setTimeout(function(){
    $.next();
  }, timeout);
});