// when the DOM is ready...
$(document).ready(function () {

  // http://jqueryfordesigners.com/demo/coda-slider.html

  var $panels = $('#exampleImages .largePhoto')
    .wrapAll('<div class="scrollContainer"></div>')
    .css('float','left');
  var $container = $('#exampleImages .scrollContainer');

  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);


  // collect the scroll object, at the same time apply the hidden overflow
  // to remove the default scrollbars that will appear
  var $scroll = $('#exampleImages .scroller').css('overflow', 'hidden');
  
  //FF1.0 doesn't like the overflow hidden
  var ua=navigator.userAgent.toLowerCase();
  if((ua.indexOf('gecko/200')!=-1) && (ua.indexOf('1.7.')!=-1)) {
    $scroll.css('overflow', 'auto');
  }

  // add the photo frame
  $scroll.after('<div class="photoFrame"></div>');

  // apply our left + right buttons
  $('#exampleImages .pagination')
      .before('<a class="scrollButtons left" href="#">previous</a>')
      .after('<a class="scrollButtons right" href="#">next</a>');

  // handle nav selection
  function selectNav() {
    $(this)
      .parents('.pagination:first')
        .find('a')
          .removeClass('selected')
        .end()
      .end()
      .addClass('selected');
  }

  $('#exampleImages .pagination').find('a').click(selectNav);

  // go find the navigation link that has this target and select the nav
  function trigger(data) {
    var el = $('#exampleImages .pagination').find('a[href$="' + data.id + '"]').get(0);
    selectNav.call(el);
  }

  if (window.location.hash) {
    trigger({ id : window.location.hash.substr(1) });
  } else {
    $('.pagination a:first').click();
  }

  var scrollOptions = {
    target: $scroll, // the element that has the overflow

    // can be a selector which will be relative to the target
    items: $panels,

    navigation: '.pagination a',

    // selectors are NOT relative to document, i.e. make sure they're unique
    prev: '.left', 
    next: '.right',
    axis: 'xy',
    onAfter: trigger,
    duration: 500,
    filter:'.noCoda',

    // easing - can be used with the easing plugin: 
    // http://gsgd.co.uk/sandbox/jquery/easing/
    easing: 'swing'
  };

  // apply serialScroll to the slider - we chose this plugin because it 
  // supports// the indexed next and previous scroll along with hooking 
  // in to our navigation.
  $('#exampleImages').serialScroll(scrollOptions);

  // now apply localScroll to hook any other arbitrary links to trigger 
  // the effect
  $.localScroll(scrollOptions);

  // finally, if the URL has a hash, move the slider in to position, 
  // setting the duration to 1 because I don't want it to scroll in the
  // very first page load.  We don't always need this, but it ensures
  // the positioning is absolutely spot on when the pages loads.
  scrollOptions.duration = 1;
  $.localScroll.hash(scrollOptions);

});