// class
var mvClass = "mv";
var backNavClass = "backNav";
var nextNavClass = "nextNav";
var numListClass = "numList";

// add class
var mvImageClass = "mvImage";
var mvOnClass = "mvOn";
var numListOnClass = "numListOn";

// setting
var length = 0;
var data = "";
var url = "/js/top_visual.json"; /* 画像表示設定ファイル */
var maxLength = 8; /* 最大画像設定数 */
var backNavImg = "/images/top_ic09.gif"; /* 前送りナビ画像 */
var nextNavImg = "/images/top_ic10.gif"; /* 次送りナビ画像 */

// animation setting
var fadeInTime = 300; /* フェードイン時間(ミリ秒) */
var fadeOutTime = 300; /* フェードアウト時間(ミリ秒) */
var displayTime = 7000; /* 1画像の表示時間(ミリ秒) */

$(function() {
  // load json
  $.ajax({
    url : url,
    dataType : "json",
    cache : false,
    success : function(json){
      data = json;
      length = data.length;
      
      if (length > maxLength) {
        jsonError();
        return;
      }
      
      // main image
      // <p><a><img></img></a></p> x length
      $("." + mvClass).append(
        $("<p>").addClass(mvImageClass).css({"display" : "block", "cursor" : "pointer"}).append(
          $("<img>").addClass(mvOnClass).css({"opacity" : "1", "position" : "absolute", "top" : "10px"}).attr({"src" : data[0].src, "width" : "689", "height" : "220", "alt" : ""})
        )
      );
      for (var i=1; i<length; i++) {
        $("." + mvClass + " p:last").after(
          $("<p>").addClass(mvImageClass).css({"display" : "none", "cursor" : "pointer"}).append(
            $("<img>").css({"opacity" : "0", "position" : "absolute", "top" : "10px"}).attr({"src" : data[i].src, "width" : "689", "height" : "220", "alt" : ""})
          )
        );
      }
      
      // side navigation
      // <ul>
      //   <li></li>
      //   <li></li>
      // </ul>
      $("." + mvClass).append(
        $("<ul>").append(
          $("<li>").addClass(backNavClass).append(
            $("<img>").addClass("rollover").attr({"src" : backNavImg, "width" : "24", "height" : "41", "alt" : ""})
          )
        ).append(
          $("<li>").addClass(nextNavClass).append(
            $("<img>").addClass("rollover").attr({"src" : nextNavImg, "width" : "24", "height" : "41", "alt" : ""})
          )
        )
      );
      
      // bottom navigation
      // <ul class="numList">
      //   <li></li> x length
      // </ul>
      $("." + mvClass).append(
        $("<ul>").addClass(numListClass)
      );
      for (var i=1; i<=length; i++) {
        var num = String(i);
        if (num.match(/\d{1}/)) num = "0" + num;
        
        $("." + numListClass).append(
          $("<li>").append(
            $("<img>").attr({"src" : "/images/top_ic"+ num +".gif", "width" : "16", "height" : "16", "alt" : i})

)
        )
      }
      
      changeBottomNavi(0);
      
      // setInterval
      t = setInterval("changeMainVisual('interval')", displayTime);
    },
    error : function(json){
      jsonError();
    }
  });

  // click(livequery)
  $("." + mvImageClass).livequery("click", function() {
    var index = $("." + mvImageClass + " img").index($("." + mvOnClass));
    location.href = data[index].href;
  });
  
  $("." + backNavClass).livequery("click", function() {
    var changeNum = $("." + numListClass + " img").index($("." + numListOnClass)) - 1;
    resetInterval(changeNum);
  });
  
  $("." + nextNavClass).livequery("click", function() {
    var changeNum = $("." + numListClass + " img").index($("." + numListOnClass)) + 1;
    resetInterval(changeNum);
  });
  
  $("." + numListClass + " li").livequery("click", function() {
    var preNum = $("." + numListClass + " img").index($("." + numListOnClass));
    var changeNum = $("." + numListClass + " li").index(this);
    
    if (preNum != changeNum) {
      resetInterval(changeNum);
    }
  });
  
  // hover(livequery)
  $("." + backNavClass).livequery(function() {
    var src = $(this).children().attr("src");
    
    $(this).hover(function() {
      $(this).children().attr({"src" : src.replace(/\.gif$/, "on.gif")});
    }, function() {
      $(this).children().attr({"src" : src.replace(/on\.gif$/, ".gif")});
    });
  });
  
  $("." + nextNavClass).livequery(function() {
    var src = $(this).children().attr("src");
    
    $(this).hover(function() {
      $(this).children().attr({"src" : src.replace(/\.gif$/, "on.gif")});
    }, function() {
      $(this).children().attr({"src" : src.replace(/on\.gif$/, ".gif")});
    });
  });
  
  $("." + numListClass + " img").livequery(function() {
    $(this).hover(function() {
      var src = $(this).attr("src");
      var nowNum = $("." + numListClass + " img").index($("." + numListOnClass));
      var hoverNum = $("." + numListClass + " img").index(this);
      
      if (src.match(/\d{2}on\.gif$/) == null && nowNum != hoverNum) {
        $(this).attr({"src" : src.replace(/\.gif$/, "on.gif")});
      }
    }, function() {
      var src = $(this).attr("src");
      var nowNum = $("." + numListClass + " img").index($("." + numListOnClass));
      var hoverNum = $("." + numListClass + " img").index(this);
      
      if (src.match(/\d{2}\.gif$/) == null && nowNum != hoverNum) {
        $(this).attr({"src" : src.replace(/on\.gif$/, ".gif")});
      }
    });
  });
  
});

function changeMainVisual(changeNum) {
  if (changeNum == "interval") {
    changeNum = $("." + numListClass + " img").index($("." + numListOnClass)) + 1;
  }
  
  if (changeNum == -1) {
    changeNum = length - 1;
  } else if (changeNum == length) {
    changeNum = 0;
  }
  
  var preNum = $("." + mvClass + " img").index($("." + mvOnClass));
  $("." + mvImageClass + " img").eq(preNum).fadeTo(fadeOutTime, 0, function() {
    $("." + mvClass + " p").eq(preNum).css({"display" : "none"});
    $("." + mvImageClass + " img").eq(preNum).removeClass(mvOnClass);
  });
  
  $("." + mvImageClass + " img").eq(changeNum).addClass(mvOnClass);
  $("." + mvClass + " p").eq(changeNum).css({"display" : "block"});
  $("." + mvOnClass).fadeTo(fadeInTime, 1, function() {
    $("." + mvImageClass + " img:not(." + mvOnClass + ")").css({"opacity" : "0"});
  });
  
  changeBottomNavi(changeNum);
}

function changeBottomNavi(int) {
  for (var i=0; i<length; i++) {
    var src = $("." + numListClass + " img").eq(i).attr("src");
    
    if (i == int) {
      $("." + numListClass + " img").eq(i).addClass(numListOnClass);
      
      if (src.match(/\d{2}on\.gif$/) == null) {
        $("." + numListClass + " img").eq(i).attr({"src" : src.replace(/\.gif$/, "on.gif")});
      }
    } else {
      $("." + numListClass + " img").eq(i).removeClass(numListOnClass);
      
      if (src.match(/\d{2}\.gif$/) == null) {
        $("." + numListClass + " img").eq(i).attr({"src" : src.replace(/on\.gif$/, ".gif")});
      }
    }
  }
}

function resetInterval(changeNum) {
  if ($("." + mvImageClass + " img").is(":animated") == false) {
    clearInterval(t);
    t = setInterval("changeMainVisual('interval')", displayTime);
    
    changeMainVisual(changeNum);
  }
}

function jsonError() {
  var text = $("noscript").text();
  if (text == "") {
    text = $("noscript").html();
  }
  
  $("." + mvClass).append(text);
}