/**
 * Application scripts
 */

$(document).ready(function() {
  /**
   * The slideshow codes
   */
  $('#panes').before('<div id="pane-nav"></div>')
  .cycle({
    cleartype: 1,
    fx:     'fade', 
    speed:   700, 
    timeout: 10000,
    pager:  '#pane-nav', 
    pagerAnchorBuilder: paginator,
    pause:   1
  });
  
  /**
   * If I could ever figure out a way to use these
   * the pager navigation would be very slick. :) &#8226;
   */
  var dingbats = [
    '&#x278a;',/* ➊ */
    '&#x278b;',/* ➋ */
    '&#x278c;',/* ➌ */
    '&#x278d;',/* ➍ */
    '&#x278e;',/* ➎ */
    '&#x278f;',/* ➏ */
    '&#x2790;',/* ➐ */
    '&#x2791;',/* ➑ */
    '&#x2792;',/* ➒ */
    '&#x2793;' /* ➓ */
  ];
  
  // callback function to generate custom pager anchors
  function paginator(idx, elem) {
    return '<a href="#'+ idx +'">&#8226;</a>';
  }
  
  $('#pane-nav').wrap('<div id="pane-nav-wrap"></div>');
  $('#pane-nav').append('<a href="#pause" id="pause" title="pause/play"><img alt="pause/play" src="../media/bg-controls-blank.gif" width="12" height="14" /></a>'); // append our pause/play button
  $('#pane-nav a:first-child').addClass('first'); // add the .first class to the first pager link
  $('#pane-nav a:nth-child(3)').addClass('last'); // add the .last class to the last pager link 
  
  /**
   * The pause/play toggle button
   */
  $('#pause').click(function(e) {
    e.preventDefault();
    if($(this).hasClass('play')) {
      $(this).removeClass('play')
    } else {
      $(this).addClass('play')
    }
    $('#panes').cycle('toggle');
  });

});