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

var resizePanelSpeed =   400;
var defaultPanelHeight = 850;
var photosPanelHeight = 890;
var photosTab = "#Pictures";
var bufferPanelHeight =  25; // just to make sure we display it with room to spare
var toolbarDefaultFirst = '#Overview';

    function getMyHeight(div) {
      var myheight = 0;
      //$(div).children().map(function() {
      //    var child = $(this);
      //    myheight = myheight + child.outerHeight();
      //});
      myheight = $(div).outerHeight();
      return myheight;
    }

var $panels = $('#tabslider .scrollContainer > div.panel');
var $container = $('#tabslider .scrollContainer');

// if false, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });
  
  // 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 = $('#tabslider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
$scroll
  .before('<div id="arrows">' +
  '<div class="arrow forward">&gt;</div>' +
  '<div class="arrow back">&lt;</div>' +
  '<div id="tabslider-shadow-side-left-top" class="tabslider-shadow-sides-top"></div>' +
  '<div id="tabslider-shadow-side-left" class="tabslider-shadow-sides"></div>' +
  '<div id="tabslider-shadow-side-right-top" class="tabslider-shadow-sides-top"></div>' +
  '<div id="tabslider-shadow-side-right" class="tabslider-shadow-sides"></div>' +
  '</div>')
  .after('<div id="tabslider-shadow-bottom"></div>');
  //.before('<img class="scrollButtons tabsliderleft" src="/images/tabslider/button-left.gif" />')
  //.after('<img class="scrollButtons tabsliderright" src="/images/tabslider/button-right.gif" />');

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

$('#tabslider .tabnavigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#tabslider .tabnavigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
  if ('#' + data.id === photosTab) {
    $('.scroll').animate({'height' : photosPanelHeight}, resizePanelSpeed);
    $('div.tabslider-shadow-sides').animate({'height' : photosPanelHeight}, resizePanelSpeed);
  } else if (getMyHeight($('#' + data.id)) > defaultPanelHeight) {
    $('.scroll').animate({'height' : getMyHeight($('#' + data.id)) + bufferPanelHeight}, resizePanelSpeed);
    $('div.tabslider-shadow-sides').animate({'height' : getMyHeight($('#' + data.id)) + bufferPanelHeight}, resizePanelSpeed);
  } else if (getMyHeight($('#' + data.id)) === defaultPanelHeight) {
        //do nothing;
  } else {
    $('.scroll').animate({'height' : defaultPanelHeight}, resizePanelSpeed);
    $('div.tabslider-shadow-sides').animate({'height' : defaultPanelHeight}, resizePanelSpeed);
  }
}

// PARSING URL for Get Request stuff
//return window.location.href.slice(window.location.href.indexOf('?')).split(/[&?]{1}[\w\d]+=/);

//checks hash for a possible match in the toolbar
//function getHashBool(hash) {
//      $('ul.tabnavigation').children().map(function() {
//          if ( $('ul.tabnavigation').children(0).find('a').attr('href').indexOf(hash) ) {
//			return true;
//		  } 			
//      });
//      return false;
//    }

if ( window.location.hash.indexOf(toolbarDefaultFirst) ) {
  trigger({ id : $('ul.tabnavigation a:first').attr('href').substr(1) });
} else {
  trigger({ id : window.location.hash.substr(1) });
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow
  
  // can be a selector which will be relative to the target
  items: $panels,
  
  tabnavigation: '.tabnavigation li',
  
  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'div.back', 
  next: 'div.forward',
  
  // allow the scroll effect to run both directions
  axis: 'x',
  
  onAfter: trigger, // our final callback
  
  offset: offset,
  
  // duration of the sliding effect
  duration: 300,
  
  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing',
  
  // keep the hash in the url
  hash: true
};

// 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.
$('#tabslider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
//scrollOptions.hash = true;
$.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);

});