$(function () {
  /* Add JS dependant elements
   */
  var introPreviousButtonHTML = '<a id="introPreviousButton" class="previousDisabled"></a>';
  var introNextButtonHTML = '<a id="introNextButton" class="next"></a>';
  $('div#intro ul')
    .before (introPreviousButtonHTML)
    .after (introNextButtonHTML);
    
  /* INTRO SLIDE SHOW
   */
  var introPreviousButton = $('a.previousDisabled', 'div#intro');
  var introNextButton     = $('a.next', 'div#intro');
  var introSlides         = $('div#intro ul li');
  var introSlideSpeed     = 100;
  
  $.fn.switchClass = function (currentClass, newClass) {
    $(this)
      .removeClass (currentClass)
      .addClass (newClass);
  }
  
  function introSlide (direction) {
    var currentSlide       = $('div#intro ul li.active');
    var currentSlideIndex  = introSlides.index (currentSlide);
    var nextSlideIndex     = currentSlideIndex + 1;
    var previousSlideIndex = currentSlideIndex - 1;
    
    if (nextSlideIndex == introSlides.length - 1) {
      introNextButton.switchClass ('next', 'nextDisabled');
    }
    if (previousSlideIndex === 0) {
      introPreviousButton.switchClass ('previous', 'previousDisabled');
    }
    
    switch (direction) {
      case 'next':
        if (introPreviousButton.hasClass ('previousDisabled')) {
          introPreviousButton.switchClass ('previousDisabled', 'previous');
        }
        var nextSlide = $(introSlides[nextSlideIndex]);
        currentSlide.fadeOut (
          introSlideSpeed,
          function () {
            currentSlide.removeClass ('active');
            nextSlide
              .css ({display: 'none'})
              .addClass ('active')
              .fadeIn (introSlideSpeed);
          }
        );
        break;
      case 'previous':
        if (introNextButton.hasClass ('nextDisabled')) {
          introNextButton.switchClass ('nextDisabled', 'next');
        }
        var previousSlide = $(introSlides[previousSlideIndex]);
        currentSlide.fadeOut (
          introSlideSpeed,
          function () {
            currentSlide.removeClass ('active');
            previousSlide
              .css ({display: 'none'})
              .addClass ('active')
              .fadeIn (introSlideSpeed);
          }
        );
        break;
      default:
        break;
    }
  }
  
  /* Attach click event to intro buttons
  */
  introPreviousButton.click (
    function () {
      if (introSlides.index($('div#intro li.active')) > 0) {
        introSlide ('previous');
      }
    }
  );
  
  introNextButton.click (
    function () {
      if (introSlides.index($('div#intro li.active')) < introSlides.length - 1) {
        introSlide ('next');
      }
    }
  );
  
  /* ALBUM HOVER
   */
  var albumBaloonHTML = '<div id="albumBaloon"><h3></h3><span></span></div>';
  var albumFadeSpeed = 300;
  
  /* Show album function
   */
  function showAlbumBaloon () {
    // Create the baloon
    var currentAlbum = $(this);
    currentAlbum
      .prepend (albumBaloonHTML)
      .switchClass ('standard', 'large');
    var albumBaloon = $('div#albumBaloon', currentAlbum);
    var albumBaloonHeading = $('h3', albumBaloon);
    var albumBaloonOwner = $('span', albumBaloon);
    // Insert text into the baloon
    albumBaloonHeading.text ($('h3', currentAlbum).text());
    albumBaloonOwner.text ($('span', currentAlbum).text());
    // Set element width
    var albumHeadingWidth = albumBaloonHeading.outerWidth ();
    var albumOwnerWidth = albumBaloonOwner.outerWidth ();
    var baloonWidth = albumHeadingWidth;
    if (baloonWidth < albumOwnerWidth) {
      baloonWidth = albumOwnerWidth;
    }
    if (baloonWidth == 0) { baloonWidth = 150; }
    albumBaloon.css ({'width': baloonWidth, 'marginLeft': '-'+ (baloonWidth / 2) +'px'});
    albumBaloonHeading.css ({'width': (baloonWidth - 10) +'px', 'backgroundPosition': (baloonWidth / 2 - 11) +'px 0px'});
    albumBaloonOwner.css ({'width': (baloonWidth - 10) +'px'});
    // Set baloon position
    var startTop = currentAlbum.height() + 10;
    var startLeft = currentAlbum.outerWidth() / 2;
    albumBaloon.css ({top: startTop, left: startLeft});
    // Show album
    albumBaloon.show ();
  }
  
  /* Show album function
   */
  function hideAlbumBaloon () {
    // Hide album
    var albumBaloon = $('div#albumBaloon', $(this));
    $(this).switchClass ('large', 'standard');
    albumBaloon.remove ();
  }
  
  /* Hover config
   */
  var baloonConfig = {    
     sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)    
     interval: 50, // number = milliseconds for onMouseOver polling interval    
     over: showAlbumBaloon, // function = onMouseOver callback (REQUIRED)    
     timeout: 50, // number = milliseconds delay before onMouseOut    
     out: hideAlbumBaloon // function = onMouseOut callback (REQUIRED)    
  };
  
  /* Configure albums
   */
  var albums = $('ul#publicAlbums li');
  albums
    .addClass ('standard')
    .hoverIntent (baloonConfig);
  
});