$(document).ready( function () {
  hs = { //history
    imageList      : [],
    imageListNum   : 0,
    currentList    : 0,
    hsDataSet      : [],

    setImageList : function ( data ) {
      var historyView, className, ul, li, img, divOuter, reSearch, rgbCSS;
      
      // 12枚画像がたまると別のUL要素に子要素を付加する
      if ( hs.imageList.length%12 == 0 ) {
        hs.imageListNum++;
        ul = document.createElement("ul");
        //ul.setAttribute("class", "hsImgOuter clearfix historyViewNum" + hs.imageListNum);
        //ul.setAttribute("class", "hsImgOuter clearfix");
        $(ul).addClass( "hsImgOuter clearfix" );
        ul.setAttribute("id", "historyViewNum" + hs.imageListNum);
        $("#hsWrap").append(ul);
        
        if ( hs.imageListNum > 1 ) {
          hs.currentList = hs.imageListNum;
      
          //初期設定 150はhsAreaのwidth
          $("#hsWrap").css("width", 150 * $("#hsWrap ul").size() + "px" );
          //$("#hsWrap ul:last").prependTo("#hsWrap");
        
          // 最初に見える位置の設定
          $("#hsWrap").css("margin-left", parseInt( hs.imageListNum - 2 ) * 150 * (-1) + "px");
          $("#hsWrap").animate({
                                 marginLeft : parseInt( $("#hsWrap").css("margin-left") ) - 150 + "px"
                               }, "slow", "swing",
                               function () {
                                 // 移動して止まる位置
                                 $("#hsWrap").css("margin-left", parseInt( hs.imageListNum - 1 ) * 150 * (-1) + "px")
                                 //$("#hsWrap ul:first").appendTo("#hsWrap");
                                 $("#hsNext").hide();
                                 $("#hsPrev").show();
                               });
        } else {
          hs.currentList = 1;
        }

        //hs.init();
      }
      
      
      hs.imageList[hs.imageList.length] = data.id;
      li = document.createElement("li");
      className = (hs.imageList.length%2 == 0) ? "hsImgR" : "hsImgL";
      $(li).addClass( className )

      // 類似検索
      if ( wv.prototype.mode == "similar" ) {
        hs.hsDataSet[ data.id ] = { tag : data.tag, imgUrl : data.imgUrl, clickUrl : data.clickUrl, Title : data.Title, Price : data.Price };
        img = document.createElement( "img" );
        img.setAttribute("src", data.thub);
        img.setAttribute("width", 63);
        img.setAttribute("height", 63);
        reSearch = document.createElement( "a" );
        reSearch.setAttribute("id", "hs_" + data.id);
        $(reSearch).addClass( "hisSearch" );
        reSearch.innerHTML = "再検索";
        $(li).hover(
            function () {
              $(this).children("img").css( {opacity : "0.4"} );
              $(this).children("a").show();
            },
            function () {
              $(this).children("img").css( {opacity : "1"} );
              $(this).children("a").hide();
            }   
        );
        $(reSearch).bind( "click", function ( event ) {
                                     var targetid = event.target.id.slice( 3 );
                                     var targetParent = $(event.target).parent();
                                     var targetimg = targetParent.children( "img" )[0];
                                     var src = targetimg.getAttribute( "src" );
                                     var tag = hs.hsDataSet[targetid].tag,
                                         imgUrl = hs.hsDataSet[targetid].imgUrl,
                                         clickUrl = hs.hsDataSet[targetid].clickUrl,
                                         Title = hs.hsDataSet[targetid].Title,
                                         Price = hs.hsDataSet[targetid].Price;
                                     var div, queryimg, data;
      
                                     //左上にクエリ画像表示
                                     data = {
                                              id : targetid,
                                              thub : src,
                                              tag : tag,
                                              imgUrl : imgUrl,
                                              clickUrl : clickUrl,
                                              Title : Title,
                                              Price : Price
                                            };
                                     is.setQueryImage( data );
      
                                     //カテゴリ選択
                                     if ( tag != "undefined" ) {
                                       ct.selectCategoryFromTag( tag );
                                     }
      
                                     is.doSearch( targetid, "imageClick" );
                                   } );
        $(reSearch).css( { position: "absolute", top: "0px", left: "0px", width : "63px", height: "47px", textAlign : "center", paddingTop: "18px"} );
        $(reSearch).hide();
        $(li).append(img);
        $(li).append(reSearch);
      
      // 色検索
      } else {
        divOuter = document.createElement("div");
        $(divOuter).addClass("mainColorHsShow");
        // data.id は"."区切りなので、","区切りに変更
        rgbCSS = data.id.replace( /\./g, "," );
        $(divOuter).css("backgroundColor", "rgb(" + rgbCSS + ")" );

        reSearch = document.createElement( "a" );
        reSearch.setAttribute("id", data.id );
        $(reSearch).addClass( "hisSearch" );
        reSearch.innerHTML = "再検索";
        $(li).hover(
            function () {
              $(this).children("div").css( {opacity : "0.4"} );
              $(this).children("a").show();
            },
            function () {
              $(this).children("div").css( {opacity : "1"} );
              $(this).children("a").hide();
            }   
        );
        $(reSearch).bind( "click", function ( event ) {
                                     cs.doSearch( event.target.id, "historyClick" );
                                   } );
        $(reSearch).css( { position: "absolute", top: "0", left: "0", width : "63px", height: "47px", textAlign : "center", paddingTop : "18px"} );
        $(reSearch).hide();
        $(li).append(divOuter);
        $(li).append(reSearch);
      }
      
      $("#historyViewNum" + hs.imageListNum).append(li);
    },

    init : function () {
      
      //戻るボタン
      $("#hsPrev").click( function ( event ) {
         $("#hsNext").show();
        //初めと一番左にいるとき(表示されないのでクリックされることはないはず)
        if ( hs.currenList == 1 ) { 
          if ( hs.imageListNum > 1 ) {
            $("#hsNext").show();
            $("#hsPrev").hide();
          }
          return;

        //2番目以降にいるとき
        } else {
          hs.currentList--;
          $("#hsWrap").animate({
                                 marginLeft : parseInt( $("#hsWrap").css("margin-left") ) + 150 + "px"
                               }, "slow", "swing",
                               function(){
                                 $("#hsNext").show();
                                 if ( hs.currentList == 1 ) {
                                 //if ( parseInt( $("#hsWrap").css( "margin-left" ) ) == 0 ) {
                                   $("#hsPrev").hide();
                                 }
                               });
        
          if ( event.preventDefault ) {
            event.preventDefault();
          }
          event.returnValue = false;
          }
      });

      //進むボタン
      $("#hsNext").click( function ( event ) {
        $("#hsPrev").show();
        //一番右にいるとき
        if ( hs.currentList == hs.imageListNum ) {
          if ( imageListNum > 1 ) {
            $("#hsNext").hide();
            $("#hsPrev").show();
          }
          return;

        } else {
          hs.currentList++;
          $("#hsWrap").animate({
                                 marginLeft : parseInt($("#hsWrap").css("margin-left")) - 150 + "px"
                               }, "slow", "swing",
                               function(){
                                 if ( hs.currentList == hs.imageListNum ) {
                                 //if ( parseInt( $("#hsWrap").css("margin-left") ) * (-1) + 150 == 150 * $("#hsWrap ul.hsImgOuter").size() ) {
                                   $("#hsNext").hide();
                                   $("#hsPrev").show();
                                 }
                               });
        
          if (event.preventDefault) {
            event.preventDefault();
          }
          event.returnValue = false;
        }
      });
    }
  }
  hs.init();
});