/**

*/
(function($) {
  // Cache
  var $content = $('#content');
  
  /**
  .widthCalc()
  ============
  @description  A jQuery plugin that calculates the width of it's container elements and then sets
                the target element to that width.
  */
  $.fn.widthCalc = function() {
    // Set up
    var $this = $(this),
        totalWidth = 0;
    
    return this.each(function() {
      var $articles = $this.find('article');
      
      // If the there is only 1 article element and it has a class of "project" and all children
      // image lengths are counted
      if ($articles.length === 1 && $articles.first().hasClass('project')) {
        var $imgs = $this.find('article').children('img');
        if ($imgs.length) {
          $imgs.each(function(i, e) {
            totalWidth += $(this).outerWidth(true);
          });
        }
      // For article lists the first element is used as a template to calculate all the inner children
      } else {
        var $articles = $this.find('article');
        totalWidth = ($articles.length * $articles.first().outerWidth(true));
      }
      
      // Set the target element's width
      $this.width(totalWidth);
      
      // After the width has been set, roll jScrollPane in
      $content.jScrollPane({
        autoReinitialise: true
      });
    });
  };
})(jQuery);