﻿(function($)
{
  $.fn.tabsNavigation = function(options)
  {
    if (options == "Refresh")
    {
      return this.each(function()
      {
        this.tabNavigator.Refresh();
      });
    }
    else
    {
      var defaults =
      {
        tabWidthPadding: 24
      };

      var options = $.extend(defaults, options);

      return this.each(function()
      {
        var n =
        {
          tabs: this,

          Length: function()
          {
            return $("li", n.tabs).length;
          },

          SelectedIndex: function()
          {
            var result = null;

            var index = 0;

            $("li", n.tabs).each(function()
            {
              if ($(this).hasClass("ui-tabs-selected")) result = index;
              index++;
            });

            return result;
          },

          IsRefreshing: false,
          Refresh: function()
          {
            if(!n.IsRefreshing)
            {
              n.IsRefreshing = true;
            
              var length = n.Length();
              var tabsWidth = $(".ui-tabs-nav", n.tabs).width() - $(".ui-tabs-navigation", n.tabs).width();

              var tabInfo = new Array();

              var selectedIndex = 0;
              var index = 0;

              $("li", n.tabs).each(function()
              {
                if ($(this).hasClass("ui-tabs-selected")) selectedIndex = index;

                tabInfo[index] =
                {
                  Width: $(this).width() + options.tabWidthPadding,
                  IsHidden: ($(this).css("display") == "none")
                };
                index++;
              });

              tabInfo[selectedIndex].IsHidden = false;

              var usedWidth = tabInfo[selectedIndex].Width;
              var reverseIndex = selectedIndex - 1;
              var forwardIndex = selectedIndex + 1;

              while ((reverseIndex >= 0) || (forwardIndex < length))
              {
                if (reverseIndex >= 0)
                {
                  if (usedWidth + tabInfo[reverseIndex].Width > tabsWidth)
                  {
                    tabInfo[reverseIndex].IsHidden = true;
                    tabsWidth = 0;
                  }
                  else
                  {
                    tabInfo[reverseIndex].IsHidden = false;
                    usedWidth += tabInfo[reverseIndex].Width;
                  }
                  reverseIndex--;
                }

                if (forwardIndex < length)
                {
                  if (usedWidth + tabInfo[forwardIndex].Width > tabsWidth)
                  {
                    tabInfo[forwardIndex].IsHidden = true;
                    tabsWidth = 0;
                  }
                  else
                  {
                    tabInfo[forwardIndex].IsHidden = false;
                    usedWidth += tabInfo[forwardIndex].Width;
                  }
                  forwardIndex++;
                }
              }

              index = 0;
              $("li", n.tabs).each(function()
              {
                if (tabInfo[index].IsHidden)
                  $(this).css("display", "none");
                else
                  $(this).css("display", "block");

                index++;
              });
            
              n.IsRefreshing = false;
            }
          },

          Navigate: function(direction)
          {
            var selectedIndex = n.SelectedIndex();
            var length = n.Length();

            if (direction == "First") selectedIndex = 0;
            if (direction == "Prev") selectedIndex--;
            if (direction == "Next") selectedIndex++;
            if (direction == "Last") selectedIndex = length - 1;

            if (selectedIndex < 0) selectedIndex = 0;
            if (selectedIndex >= length) selectedIndex = length - 1;

            $(n.tabs).tabs("select", selectedIndex);
          }
        }

        var navigation = $("<div class=\"flexigrid ui-tabs-navigation\" style=\"float: right;\"><div class=\"pDiv\"><div class=\"pFirst pButton\"><span/></div><div class=\"pPrev pButton\"><span/></div><div class=\"pNext pButton\"><span/></div><div class=\"pLast pButton\"><span/></div></div></div>");

        var tabs = this;

        $(".ui-tabs-nav", tabs).append(navigation);

        $(".pFirst.pButton", navigation).bind("click", function() { n.Navigate("First"); });
        $(".pPrev.pButton", navigation).bind("click", function() { n.Navigate("Prev"); });
        $(".pNext.pButton", navigation).bind("click", function() { n.Navigate("Next"); });
        $(".pLast.pButton", navigation).bind("click", function() { n.Navigate("Last"); });
        $(tabs).bind("tabsshow", function(event, ui) { n.Refresh(); });
        $(tabs).bind("tabsremove", function(event, ui) { n.Refresh(); });
        $(window).bind("resize", function() { n.Refresh(); });

        n.Refresh();
        
        tabs.tabNavigator = n;
      });
    }
  };
})(jQuery);
