(function($) {
   $.fn.horzScrollBox = function(options){
      options = options || {};
      if (!options.speed) options.speed = "normal";
      var isBusy = false;
      var targetIdx = false;
      var othis = this;

      var cnt = this.find(".scrollBoxContent");

      cnt.find(".scrollBoxItem").css("display", "none");
      cnt.css("display", "block");
      cnt.css("visibility", "visible");

      var w = cnt.prepend("<div class=\"tempScrollBoxTest\" style=\"width: auto; height: 1px;\"></div>").find("div.tempScrollBoxTest").width();
      cnt.find("div.tempScrollBoxTest").remove();
      var h = cnt.height();
      h = (h <= 0) ? "auto" : h + "px";

      cnt.css("overflow", "hidden");
      //if (jQuery.browser == "msie") {
         cnt.css("position", "relative");
      //}
      cnt.css("white-space", "nowrap");
      cnt.css("width", w + "px");

      var itemstyle = "";
      var itemwidth = false;
      if (options.itemsPer > 0) {
         itemwidth = w / options.itemsPer;
         itemstyle = "width: " + itemwidth + "px; height: " + h + ";";
      }

      var nhtml = "";
      var count = 0;
      cnt.find(".scrollBoxItem").each(function() {
            nhtml += "<td class=\"scrollBoxItem\" style=\"vertical-align: top; " + itemstyle + "\">" + $(this).html() + "</td>";
            count++;
            $(this).remove();
         });

      widthstyle = (itemwidth) ? "width: " + (itemwidth * count) + "px; " : "";
      var ipos = /* (jQuery.browser == "msie") ? */"absolute"/* : "relative"*/;
      cnt.html("<table class=\"scrollBoxItems\" style=\"" + widthstyle + "position: " + ipos + "; left: 0px;\"><tbody><tr>" + nhtml + "</tr></tbody></table>");

      var pag = (itemwidth) ? this.find(".scrollBoxPagination") : false;
      if ((pag) && (!pag.length)) pag = false;

      if (pag) {
         var otmp = pag.find(".scrollBoxPagItem:eq(0)");
         pag.find(".scrollBoxPagItem").remove();
         var pagCount = Math.ceil(count / options.itemsPer);
         for (var i=1; i <= pagCount; i++) {
            var tmp = otmp.clone();
            tmp.attr("idx", i);
            tmp.find(".scrollBoxPagNo").text(i);
            tmp.click(function(){
                  if (isBusy) return false;
                  isBusy = true;
                  targetIdx = $(this).attr("idx");                  
                  var targetLeft = ((targetIdx - 1) * options.itemsPer) * itemwidth;
                  var ctnr = othis.find(".scrollBoxContent");
                  var tbl = ctnr.find("table.scrollBoxItems");
                  var max = ctnr.width();
                  var cofs = ctnr.offset();
                  var tofs = tbl.offset();
                  var left = cofs.left - tofs.left;

                  var items = pag.find(".scrollBoxPagItem");
                  items.removeClass("active");
                  var cnt = items.length;
                  pag.find(".scrollBoxPagItem:eq(" + (targetIdx - 1) + ")").addClass("active");
                  othis.find(".scrollBoxLeft,.scrollBoxRight").removeClass("disabled");
                  if (targetIdx == 1) {
                     othis.find(".scrollBoxLeft").addClass("disabled");
                  }
                  if (targetIdx == items.length) {
                     othis.find(".scrollBoxRight").addClass("disabled");
                  }

                  var motion = (targetLeft < left) ? "-=" + (targetLeft - left) : "+=" + (left - targetLeft);
                  tbl.animate({"left": motion + "px"}, options.speed, null, function() { isBusy = false; });
                  return false;
               });
            pag.append(tmp);
         }
         pag.find(".scrollBoxPagItem").removeClass("active");
         pag.find(".scrollBoxPagItem:eq(0)").addClass("active");
      }
      othis.find(".scrollBoxLeft").addClass("disabled");
      othis.find(".scrollBoxRight").removeClass("disabled");

      this.find(".scrollBoxLeft").click(function(){
            if (isBusy) return false;
            isBusy = true;
            var ctnr = othis.find(".scrollBoxContent");
            var tbl = ctnr.find("table.scrollBoxItems");
            var max = ctnr.width();
            var cofs = ctnr.offset();
            var tofs = tbl.offset();
            var left = cofs.left - tofs.left;
            if (left < 0) left = 0;
            if (left > max) left = max;
            if (left > 0) {
               var relpos = (cofs.left - tofs.left) - left;
               if (pag) {
                  var idx = Math.floor(relpos / itemwidth);
                  pag.find(".scrollBoxPagItem").removeClass("active");
                  pag.find(".scrollBoxPagItem:eq(" + idx + ")").addClass("active");
               }
               othis.find(".scrollBoxLeft,.scrollBoxRight").removeClass("disabled");
               if (relpos <= 0) {
                  othis.find(".scrollBoxLeft").addClass("disabled");
               }
               tbl.animate({"left": "+=" + left + "px"}, options.speed, null, function() { isBusy = false; });
            } else {
               isBusy = false;
            }
            return false;
         });

      this.find(".scrollBoxRight").click(function(){
            if (isBusy) return false;
            isBusy = true;
            var ctnr = othis.find(".scrollBoxContent");
            var tbl = ctnr.find("table.scrollBoxItems");
            var max = ctnr.width();
            var cofs = ctnr.offset();
            cright  = cofs.left + ctnr.width();
            var tofs = tbl.offset();
            tright  = tofs.left + tbl.width();
            right = tright - cright;
            if (right < 0) right = 0;
            if (right > max) right = max;
            if (right > 0) {
               var relpos = (cofs.left - tofs.left) + right;
               if (pag) {
                  var idx = Math.floor(relpos / itemwidth);
                  pag.find(".scrollBoxPagItem").removeClass("active");
                  pag.find(".scrollBoxPagItem:eq(" + idx + ")").addClass("active");
               }
               othis.find(".scrollBoxLeft,.scrollBoxRight").removeClass("disabled");
               if (tright - right <= cright) {
                  othis.find(".scrollBoxRight").addClass("disabled");
               }
               tbl.animate({"left": "-=" + right + "px"}, options.speed, null, function() { isBusy = false; });
            } else {
               isBusy = false;
            }
            return false;
         })
   };

})(jQuery);