(function($){

$.fn.topSlide = function(options){

  var defaults = {
      "json" : "/top_slide.json",
      "on_opacity" : "1",
      "off_opacity" : "0.7",
      "limit_index" : 11,
      "current_index" : 0,
      "max_index" : 1,
      "autotimer_duration" : 3000,
      "autotimer_stop_duration" : 500
  }
  conf = $.extend({}, defaults, options);

  $("#tumbs").bind('mouseleave', function(){
      $("#tumbs a:eq("+conf.current_index +")").stop(true, true).css("opacity", conf.on_opacity);
      $("#main-image"+conf.current_index).stop(true, true).css({
          "z-index": conf.limit_index,
          "display": "block"
      });
  });

  $.getJSON(
      conf.json,
      function(data) {
          $(data).each(function(_i){
              var s_img = document.createElement("img");
              var l_img = document.createElement("img");
              var s_img_a = document.createElement("a");
              var l_img_a = document.createElement("a");

              // set action, style, url for small image anchor.
              $(s_img_a).attr("href", data[_i].url).bind({
                  "mouseenter": function(){
                      $(this).animate({
                          "opacity" : conf.on_opacity
                      }, 300)
                      .siblings()
                      .stop(true, true)
                      .css("opacity", conf.off_opacity);

                      $("#main-image"+$(this).data("index"))
                          .css("z-index", conf.limit_index)
                          .stop(true, true)
                          .fadeIn("fast")
                          .siblings().css("z-index", conf.limit_index - 1);

                      conf.current_index = $(this).data("index");
                  },
                  "mouseleave": function(){
                      $("#main-image"+$(this).data("index")).fadeOut("fast", function(){
                          $(this).css("z-index", $(this).data("index"));
                      });
                  }
              }).css({
                  "position": "relative",
                  "z-index" : "90",
                  "background": "#000",
                  "opacity" : conf.off_opacity 
              }).data("index", _i);
              
              // set style and id for large image anchor.
              $(l_img_a).attr({
                "href" : data[_i].url,
                "id"   : "main-image"+_i
              }).css({
                "position" : "absolute",
                "top" : "0",
                "right" : "0",
                "display": "none"
              }).data("index", _i);

              // set image to link anchor.
              $(l_img).attr("src", data[_i].main).appendTo($(l_img_a));
              $(s_img).attr("src", data[_i].thum).appendTo($(s_img_a));

              // link anchor set to each container.
              $("#tumbs").append(s_img_a);
              $("#main-image").append(l_img_a);
              
              // first main image set display.
              if ($(l_img_a).data("index") == 0) $(l_img_a).css("display", "block");
              if ($(s_img_a).data("index") == 0) $(s_img_a).css("opacity", "1");
          });
          
        conf.max_index = $(data).size() - 1;
        // set style class.
        $("#tumbs a:last").addClass("last");
        $("#tumbs a:first").addClass("first");
      }
  );

  return this;
};

$(function(){
    var last_index = 0;
    var prev_index = conf.max_index;
    var intvalID;
    var timerStatus = false;

    function rollWithIt() {
       $("#main-image"+prev_index).stop(true,true).fadeOut("fast", function(){
           $(this).css("z-index", $(this).data("index"));
       });
       $("#tumbs a:eq(" + last_index + ")").mouseenter();

       prev_index = last_index;
       last_index += 1;
       if (last_index > conf.max_index) last_index = 0;
    };

    function stopAutoTimer() {
        clearInterval(intvalID);
        timerStatus = false;
    };

    function setAutoTimer() {
        intvalID = window.setInterval(function(){
            timerStatus = true;
            rollWithIt();
        }, conf.autotimer_duration);
    };

    function setMenuHover() {
      $("#tumbs a").hover(
          function(e) {
              last_index = $(this).data("index");
              if (timerStatus) {
                  e.stopImmediatePropagation();
                  stopAutoTimer();
                  window.setTimeout(function(){setAutoTimer();}, conf.autotimer_stop_duration);
              }
          },
          function() {
              last_index = $(this).data("index");
          }
      );
    };

    if ($("#tumbs a").size() !== 0) {
      setMenuHover();
      setAutoTimer();
    } else {
      window.setTimeout(function(){
        setMenuHover();
        setAutoTimer();
      }, 100);
    }
});

})(jQuery);