(function($){
   $.fn.title_browser = function () {

     return this.each
     (function(){

        var obj = $(this);

        var slate = $(".title-grid-item", obj);
        var width_slate = slate.outerWidth({margin: 1});
        if (width_slate > 300) {
          width_slate /= 4;
        }
        var per_page = Number(obj.attr('vbpage'));
	var numbering_format_phrase = obj.attr('vbphrase');
        var vb = {
          "per_page": per_page,
          "total":  $(".title-grid-item",obj).length,
          "width": width_slate,
          "current": 1,
          "seen": per_page,
          "numbering_format": numbering_format_phrase,
          setNumbering: function(from, to) {

            var phrase = vb.numbering_format;
            phrase = phrase.replace(/{\$from}/,  from);
            phrase = phrase.replace(/{\$to}/,    to);
            phrase = phrase.replace(/{\$total}/, vb.total); 

            $('.numbering', obj).html(phrase);

            if (from <= vb.per_page) {
              $('button:first', obj).addClass('disabled');
            }
            else {
              $('button:first', obj).removeClass('disabled');
            }
            if (to < vb.total) {
              $('button:last', obj).removeClass('disabled');
            }
            else {
              $('button:last', obj).addClass('disabled');
            }
          },

          scrollTo: function(n) {
            var to = n + vb.per_page - 1;
            if (to > vb.total) {
              to = vb.total;
            }

            var scroll = vb.width * (n -1);
            $('.browser-slider', obj).stop()
              .animate
            ({"marginLeft": "-" + scroll + "px"});


            vb.setNumbering(n, to);

            vb.current = n;

            if (vb.current > vb.seen) {
              var preload_from = vb.seen + vb.per_page + 1;
              var preload_to = preload_from + vb.per_page;

              
              vb.seen += vb.per_page;
            }
          }
        };

        $('button:first',obj).click
        (function(){
           var n = vb.current - vb.per_page;
           if (n < 1) n = 1;
           vb.scrollTo(n);
         });

         $('button:first,button:last',obj).hover
         (function(){
            if (!$(this).hasClass('disabled')) {
              $(this).addClass('hover');
            }
          },
          function(){
            $(this).removeClass('hover');
          }
         );
         

        $('button:last',obj).click
        (function(){
           var n = vb.current + vb.per_page;
           if (n > vb.total) n = vb.total - (vb.per_page - 1); 
           vb.scrollTo(n);
         });


        if (vb.total <= vb.per_page) {
          $('button:first', obj).addClass('lf-disabled');
          $('button:last', obj).addClass('rt-disabled');
          vb.per_page = vb.total;
        }

        $('.title-browser-total', obj).html(vb.total);
        vb.setNumbering(1,vb.per_page);

      });
   };
})(jQuery);
$(function() {
    $('.title-browser-widget').title_browser();
  });