/**
 * @overview This file holds site-wide JQuery
 * @author A Marsden
 * @version 0.1
 */

/**
 * @namespace
 * @description Global namespace.
 */

var Fatbike = Fatbike || {};

/**
 * @memberOf Fatbike#
 * @description Calls member functions.
 * Initializes the fadeIn for the content area.
 * Adds a target attribute and value to all external links.
 * Initializes jquery scrollable.
 */

Fatbike.init = function() {
  "use strict";
  $("#main").fadeIn(1400,function() {
    // technical page
    if($('body').attr('id') === 'page4') {
      Fatbike.sliders();
    }
  });
  Fatbike.techSubNav();
  Fatbike.profileOverlay();
  Fatbike.portfolioCollapsible();
  Fatbike.formatExternalLinks();
  

  $("div.scrollable").scrollable({ 
    size: 3, 
    items: '#thumbs',   
    hoverClass: 'hover'
  });

};

Fatbike.formatExternalLinks = function() {
  $("a[href^='http://']").each(function() {
    $(this).attr({ target: "_blank" });
    if($(this).attr("title") === "Home") {
      $(this).removeAttr("target");
    }
  });
};

Fatbike.sliders = function() {
  
  if(navigator.appVersion.indexOf("MSIE") !== -1) {
    // when ie loads it shows each slider as full for a brief moment, this kills that!
    $('.slideBar').css({'width':0});
  }
  
  $('.slideBar').addClass('default-colour');
  // width formula: 100% = 229, 10% = 22.9, e.g. 70% = 22.9*7 = 160 
  
  /* tech */
  $('#w3c').slider({'width':160, 'level':7});
  $('#css').slider({'width':183, 'level':8});
  $('#htmlXhtml').slider({'width':183, 'level':8});
  $('#css3').slider({'width':160, 'level':7});
  $('#html5').slider({'width':137, 'level':6});
  
  $('#xml').slider({'width':115, 'level':5});
  $('#javascript').slider({'width':137, 'level':6});
  $('#jquery').slider({'width':160, 'level':7});
  $('#ajax').slider({'width':91, 'level':4});
  $('#php').slider({'width':137, 'level':6});
  
  $('#sql').slider({'width':115, 'level':5});
  $('#swf').slider({'width':160, 'level':7});
  $('#xsl').slider({'width':115, 'level':5});
  
  /* IDEs */
  $('#codeEditor').slider({'width':183, 'level':8});
  $('#svn').slider({'width':160, 'level':7});
  $('#imageEditor').slider({'width':160, 'level':7});
  $('#flash').slider({'width':91, 'level':4});
  $('#ftp').slider({'width':183, 'level':8});
  
  /* cms */
  $('#drupal').slider({'width':160, 'level':7});
  $('#joomla').slider({'width':137, 'level':6});
  $('#cakephp').slider({'width':91, 'level':4});
  $('#wordpress').slider({'width':115, 'level':5});
  $('#umbraco').slider({'width':115, 'level':5});
  $('#ibm').slider({'width':137, 'level':6});
  $('#scene7').slider({'width':160, 'level':7});
  $('#fck').slider({'width':183, 'level':8});
  
};

/**
 * @memberOf Fatbike#
 * @description
 * Get default content onload.
 * Adds a click event to the elements in the set.
 * Detects for IE and kills slider visibility immediately on click.
 * Makes a reference to the current element and its class name.
 * Fades out the view panel and slide bars.
 * Formats the sub links to show the current, active state.
 * Tests the class name for a given string and gets the content in the file path.
 * Fades in the view panel and sliders.
 */

Fatbike.techSubNav = function() {
  Fatbike.getData('includes/table-two.html');
  
  $("#ul-sub-nav li a").click(function(e) {
    if(navigator.appVersion.indexOf("MSIE") !== -1) {
      // kills lingering sliders on fadeout
      $('.slideBar').css({'display':'none'});
    }
    
    var activeLink = $(this);
    var className = activeLink.attr("class");
    
    $("#div-right-wrapper").fadeOut('normal',function() {
      
      $('.slideBar').fadeOut('fast');
      
      $("#ul-sub-nav li a").removeClass("subnavactive");
      activeLink.addClass("subnavactive");
      
      if(className === "technologies") {
        Fatbike.getData('includes/table-two.html');
      }
      if(className === "software") {
        Fatbike.getData('includes/table-one.html');
      }
      if(className === "cms") {
        Fatbike.getData('includes/table-three.html');
      }
    }).fadeIn('slow',function() {
        Fatbike.sliders();
        $('.slideBar').fadeIn('fast');  
      });
    e.preventDefault();
  }); 
};

/**
 * @memberOf Fatbike#
 * @param {String} filePath The url of the content.
 * @description Gets the data from the file in the file path
 * and populates the element in the set.
 */

Fatbike.getData = function(filePath) { 
  $.get(filePath,function(data) {
    $('#div-right-wrapper').html(data);
  });  
};

/**
 * @memberOf Fatbike#
 * @description Animates div overlays when hovering image thumbs.
 * Attaches an event to the matched set of elements.
 */

Fatbike.profileOverlay = function() {
  /* profile page only */
  $(".img-profile-overlay").css({
    opacity : 0,
    bottom : -30
  });
  $(".img-profile").hover(function() {
    $(this).children(".img-profile-overlay").stop()
      .animate({
        bottom: 0,
        opacity: 0.7
      },
      {
        duration: 'slow',
        easing: 'easeOutBounce'
      });
      },
      function() {
        $(this).children(".img-profile-overlay").stop()
        .animate({
          opacity: 0,
          bottom: -30
        },
        {
          duration: 'slow',
          easing: 'easeInCirc'
        });	
      }
  );    
};

/**
 * @memberOf Fatbike#
 * @description Handles the show/hide functionality.
 * Handles the css by attaching an event to the elements in the set.
 * Initializes the collapsible options for the elements in the set.
 */

Fatbike.portfolioCollapsible = function() {
    $('.collapsible').hover(function() {
        $(this).addClass("hover");    
    },
    function() {
        $(this).removeClass("hover");
    });

    $('.collapsible').collapsible({
        defaultOpen: 'section1',
        speed: 'slow',
        cssClose: 'collapse-close',
        cssOpen: 'collapse-open',
        animateOpen: function (elem, opts) { 
            elem.next().slideUp(opts.speed);
        },
        animateClose: function (elem, opts) {
            elem.next().slideDown(opts.speed);
        }
    });
    /**#@+
     * @memberOf Fatbike#
     * @description Responsible for opening/closing collapsible divs.
     */
    function openAll() {
        $('.collapsible').collapsible('open');
        $(".collapsible").children(".year").fadeIn('slow').addClass("visible");
    }
    function closeAll() {
        $('.collapsible').collapsible('close');
        $(".collapsible").children(".year").fadeOut('slow').removeClass("visible");
        
    }
    /**#@-*/
    
    //listen for close/open all
    $('#closeAll').click(function(e) {
        e.preventDefault();
        closeAll();
    });
    $('#openAll').click(function(e) {
        e.preventDefault();
        openAll();
    });

    $("h2.collapsible").click(function() {
        if($(this).hasClass("collapse-open")) {
            $(this).children(".year").fadeIn('slow').addClass("visible");
        } else {
            $(this).children(".year").fadeOut('slow').removeClass("visible");
        }
    });   
};

$(document).ready(function() {
    Fatbike.init();
});