(function ($) {

var methods = {
  init : function(options) {
    var defaults = {
      onShow: null
    };
    options = $.extend(defaults, options);

    return this.each(function() {

    // For each set of tabs, we want to keep track of
    // which tab is active and its associated content
    var $this = $(this),
        window_width = $(window).width();

    var $active, $content, $links = $this.find('li.tab a'),
        $tabs_width = $this.width(),
        $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
        $index = 0;

    // Finds right attribute for indicator based on active tab.
    // el: jQuery Object
    var calcRightPos = function(el) {
      return $tabs_width - el.position().left - el.outerWidth() - $this.scrollLeft();
    };

    // Finds left attribute for indicator based on active tab.
    // el: jQuery Object
    var calcLeftPos = function(el) {
      return el.position().left + $this.scrollLeft();
    };

    // If the location.hash matches one of the links, use that as the active tab.
    $active = $($links.filter('[href="'+location.hash+'"]'));

    // If no match is found, use the first link or any with class 'active' as the initial active tab.
    if ($active.length === 0) {
      $active = $(this).find('li.tab a.active').first();
    }
    if ($active.length === 0) {
      $active = $(this).find('li.tab a').first();
    }

    $active.addClass('active');
    $index = $links.index($active);
    if ($index < 0) {
      $index = 0;
    }

    if ($active[0] !== undefined) {
      $content = $($active[0].hash);
    }

    // append indicator then set indicator width to tab width
    $this.append('<div class="indicator"></div>');
    var $indicator = $this.find('.indicator');
    if ($this.is(":visible")) {
      // $indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
      // $indicator.css({"left": $index * $tab_width});
      setTimeout(function() {
        $indicator.css({"right": calcRightPos($active) });
        $indicator.css({"left": calcLeftPos($active) });
      }, 0);
    }
    $(window).resize(function () {
      $tabs_width = $this.width();
      $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
      if ($index < 0) {
        $index = 0;
      }
      if ($tab_width !== 0 && $tabs_width !== 0) {
        $indicator.css({"right": calcRightPos($active) });
        $indicator.css({"left": calcLeftPos($active) });
      }
    });

    // Hide the remaining content
    $links.not($active).each(function () {
      $(Materialize.escapeHash(this.hash)).hide();
    });

    // Bind the click event handler
    $this.on('click', 'a', function(e) {
      if ($(this).parent().hasClass('disabled')) {
        e.preventDefault();
        return;
      }

      // Act as regular link if target attribute is specified.
      if (!!$(this).attr("target")) {
        return;
      }

      $tabs_width = $this.width();
      $tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;

      // Make the old tab inactive.
      $active.removeClass('active');
      if ($content !== undefined) {
        $content.hide();
      }

      // Update the variables with the new link and content
      $active = $(this);
      $content = $(Materialize.escapeHash(this.hash));
      $links = $this.find('li.tab a');
      var activeRect = $active.position();

      // Make the tab active.
      $active.addClass('active');
      var $prev_index = $index;
      $index = $links.index($(this));
      if ($index < 0) {
        $index = 0;
      }
      // Change url to current tab
      // window.location.hash = $active.attr('href');

      if ($content !== undefined) {
        $content.show();
        if (typeof(options.onShow) === "function") {
          options.onShow.call(this, $content);
        }
      }

      // Update indicator

      if (($index - $prev_index) >= 0) {
        $indicator.velocity({"right": calcRightPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
        $indicator.velocity({"left": calcLeftPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});

      } else {
        $indicator.velocity({"left": calcLeftPos($active) }, { duration: 300, queue: false, easing: 'easeOutQuad'});
        $indicator.velocity({"right": calcRightPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
      }

      // Prevent the anchor's default click action
      e.preventDefault();
    });
  });

  },
  select_tab : function( id ) {
    this.find('a[href="#' + id + '"]').trigger('click');
  }
};

$.fn.tabs = function(methodOrOptions) {
  if ( methods[methodOrOptions] ) {
    return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
  } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
    // Default to "init"
    return methods.init.apply( this, arguments );
  } else {
    $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tabs' );
  }
};

$(document).ready(function(){
  $('ul.tabs').tabs();
});

}( jQuery ));