/*
 * Javascript Behavior for Sara Anderson:
 * http://saranderson.com/
 *
 * Copyright (c) 2008 Sara Anderson
 * @author Charles Stuart [cs@enure.net]
 * $Date: 2008-04-18
 *
 */

/*
 * Check if Mac IE 5 (not supported by jquery)
 */
var isMacIE = ( navigator.userAgent.indexOf('MSIE 5.2') != -1 && navigator.userAgent.indexOf('Mac') != -1 );

/*
 * Loads behavior on document ready, if the browser is not Mac IE 5.
 */
if (!isMacIE) { load(); }

function load() {
  $(document).ready(function() {
    /* Load Bricks on Home Page via append. Why? They don't matter to non-graphical clients. */
    if (($('#page_home').size() > 0)) { $('<div id="bricks"><a href="#" id="brick_kids">Kids</a><a href="#" id="brick_bath">Bath</a><a href="#" id="brick_bed">Bed</a>  <a href="#" id="brick_picnic">Picnic</a><a href="#" id="brick_pool">Pool</a><a href="#" id="brick_patio">Patio</a><a href="#" id="brick_access">Access</a><a href="#" id="brick_garden">Garden</a><a href="#" id="brick_beach">Beach</a></div>').appendTo($('body')); }

    /* Currently this condition is always met. */
    if (($('#pre_nav').size() > 0)) { viewer(); }
    if (($('#page_buy').size() > 0)) { buyer(); }
  });
}

/*
 * Behavior for Previews and Slides
 * - Creates HTML for Slide Navigation and Slide Images based on Preview Navigation
 * - Loads Slides as requested
 * - Requires images follow naming convention: id_cover.jpg, id_slide0x.jpg
 * - Requires that images have the same id as is used in the HTML
 * - Slides have to be of all the same file type, but Slides and Previews do not
 */
function viewer() {
  var previewSlides = $('div#pre img');
  var previewLinks = $('ul#pre_nav li a');
  var previewSlideToShowOnLoad = $('div#pre > img:first');
  var isIllPage = !!($('body#page_ill').length > 0);

  previewSlides.hide();
  previewSlideToShowOnLoad.show();

  /* Category Link Hovered, Show Previews */
  $(previewLinks).hover(function() {
    var isNotActive = !(previewLinks.hasClass('active'));

    /* Check if a link has been clicked, if not continue showing previews on hover */
    if (isNotActive) {
      var hoverEl = '#pre_' + $(this).attr('id');

      previewSlides.hide();
      $(hoverEl).show();
    }

  },function() {
    /* This has to be checked each time */
    var isNotActive = !(previewLinks.hasClass('active'));

    /* Check if a link has been clicked, if not continue showing previews on hover */
    if (isNotActive) {
      previewSlides.hide();
      previewSlideToShowOnLoad.show();
  }
  });

  /* Category Link Clicked, Show Slides */
  $(previewLinks).click(function() {
    /* Get attributes from clicked link and build HTML for Slide HTML and Slide Image */
    var productId = $(this).attr('id');
    var fileExtension = $(this).attr('ext');
    var numberOfNav = parseInt($(this).attr('nn'));
    var slideId = 'slides_' + productId;
    var coverImgSrc = '/_img/slides/' + productId + '_slide01' + fileExtension;

    /* Iterate based on numberOfNav to make required <li>s */
    function makeNumberNav(numberOfNav) {
      var numberNavHTML = [];
      if (numberOfNav > 1) {
        for (var i=1; i <= numberOfNav; i++) {
          numberNavHTML.push('<li id="n'+i+'" class="n"><a href="#'+productId+'_'+i+'" file="' + productId + '_slide0' + i + '">' + i + '</a></li>');
        }
      }
      if (!isIllPage) { numberNavHTML.push('<li class="back"><a title="go back" href="#">&#x2190;</a></li>'); }
      return numberNavHTML.join('');
    };
    var numberNavHTML = makeNumberNav(numberOfNav);
    var slideHTML = '<div class="slides" id="' + slideId + '"><img id="' + productId + '_slide" class="' + productId + '_slide01" src="' + coverImgSrc + '"></div><ul id="numbers_nav">' + numberNavHTML +'</ul>';

    /* If it exists, remove created HTML and start over */
    $('div.slides').remove();
    $('ul#numbers_nav').remove();

    /* Change modes to Slide viewing instead of preview viewing */
    previewSlides.hide();
    $(previewLinks).removeClass('active');
    $(this).addClass('active');
    $(slideHTML).appendTo($('div#content'));
    $('ul#numbers_nav li:first').addClass('active');

    /* Number Nav clicked: change the <img> src, change the active nav item */
    $('ul#numbers_nav li.n a').click(function() {
      var file = $(this).attr('file');
      var src = '/_img/slides/' + file + fileExtension;
      var imgId = file.slice(0,(file.length - 2));

      $('div.slides img').remove();
      $('<img id="'+imgId+'" class="'+file+'" src="'+src+'"/>').appendTo($('div.slides'));
      $('ul#numbers_nav li').removeClass('active');
      $(this).parent().addClass('active');
    });
    /* Number Nav back clicked: revert to page load state */
    $('ul#numbers_nav li.back a').click(function() {
      $('ul#pre_nav li a').removeClass('active');
      $('div.slides').remove();
      $('ul#numbers_nav').remove();
      $('div#pre > img:first').show();
    });
  });

  /* Illustration page does not have categories. Click a hidden link to attach event behavior */
  if (isIllPage) { $(previewLinks).click(); }

  /* bookmarkable */
  if (!!document.location.hash) {
    var product = document.location.hash.split('_')[0];
    var slide = document.location.hash.split('_')[1];

    $(product).click(); /* a _ is added to the end of all hash links. we take this off when clicking. without this the document scrolls onload or when clicking links. for whatever reason event.preventDefault() does not work.*/
    if (!!slide.length > 0) $('ul#numbers_nav li#n'+slide+' a').click();
  }
}