//$(document)だと、offsetHeightが動かないので、htmlを使う。
$("html").ready(function(){
//  //var contentHeight = parseInt($("#content").css("height")) + 20 + "px";
//  var contentHeight = parseInt($("#content").height()) + 20 + "px";
//  $("#leftSide").css("height",contentHeight);
//  $("#rightSide").css("height",contentHeight);
//  //var contentHeightCSSValue = contentHeight + "px";
//  //alert(contentHeight);
  
//  alert($('div#recommended a').length);
  var status = 0;
  var productURL = ["本当はalertはでないよ","配列にURLを格納してもらいます","mouseoverしたかったけど、画像が足りませんですた。"]
  $("#recommended li:last>a").attr("href", "#" + productURL[0]);// debugONLY
  
  $("li.products").each(function (i){
    if(i > 0){
      $("#imgContainer").append('<img src="user_data/packages/default/img/photo-sample-0' + i + '.jpg" />');
      }
    //var cssValueBG = "url('user_data/packages/default/img/bg-recommended-0" + i + ".png')";
    var top = i * (-40);
    var cssValueBG = "url('user_data/packages/default/img/bg-recommended.png') no-repeat 0px " + top + "px"; //前半がleft 後半がtop
    var position = -1440 + (i+1) * 480;
    $(this).mouseover(function(){
      $(this).css("cursor", "pointer");
      //alert("url('img/bg-recommended-0" + i + "'.png')");
    }).mouseout(function(){
    });
    $(this).click(function(){
      if(status != i){
        $(this).parent().css("background", cssValueBG);
        //alert(position);
        $("#imgContainer").animate({right:position}, 900,function(){
        //$("#imgContainer>img:last-child").remove();  
          });
        $("#recommended li:last>a").attr("href", "#" + productURL[i]);
        status = i;
      }
    });
  });

  $("#recommended li:last>a").click(function(){
    alert($("#recommended li:last>a").attr("href"));
  });
  /*
  for ( var obj in $('div#recommended')){
    $('#recommended>li:nth-child(' + obj[0] + ')>a').text("shine");
  }
  for (var i = 1; i <= $('div#recommended a').length ; i++ ){
  $('div#recommended a')
}
  */
//	データ型を数値にするてすと
//  var paddingTop = $('#main').css("padding-top").replace("px" , "") -0;
//	これは動く(10進数のみ)
//  var paddingTop = new Number($('#main').css("padding-top").replace("px" , ""));
//	これも動く
//このような場合に動くのは、Number(hogehoge);のhogehogeが変数として扱われるから。
//逆に言えば、;をつけると関数の実行になってしまうので動かない。
//  var paddingTop = new Number($('#main').css("padding-top").replace("px" , ""););
//	これは動かない
//  var paddingTop = new Number(function(){$('#main').css("padding-top").replace("px" , "");});
//	これもダメ(callbackが無いので動かないのは当然)
//  var paddingTop = parseInt($('#main').css("padding-top").replace("px" , ""));
//	これは動く
//  var paddingTop = parseInt($('#main').css("padding-top"));
//	これが一番スマートか？(16進数も扱える)
//  var paddingTop = parseFloat($('#main').css("padding-top"));
//	これもあるが浮動小数点数になってしまう。
});