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

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .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 = $('#slider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
/*
$scroll
  .before('<div class="scrollButtons left"></div>')
  .after('<div class="scrollButtons right"></div>');
*/
//var mainOffset = ($("div#main2").width() / 2) - 1000;



// Get the navigation into a variable, and at the same time adjust the css so that it doesn't stack, add the hover left and right buttons before and after the navigation
var navigation = $("#slider .slidenav").css({
	position: 'relative',
	overflow: 'auto'
/*
	width: '20000px',
	paddingLeft: '1000px'
*/
});/* .before('<div class="hover left"></div>').after('<div class="hover right"></div>'); */

// set up the navigation container css to hide the edges
$("#slide-holder").css({
	position: 'relative',
	overflow: 'hidden',
	width: '775px'
});

/*
// set up the css for the left hover
$("div.hover.left").css({
	position: 'absolute',
	left: '0',
	width: '150px',
	height: '80px',
	zIndex: '10'
}).mouseover(slideLeft).mouseout(stopSlide).click(stopSlide);

// set up the css for the right hover
$("div.hover.right").css({
	position: 'absolute',
	right: '0',
	top: '0',
	width: '150px',
	height: '80px',
	zIndex: '10'
}).mouseover(slideRight).mouseout(stopSlide).click(stopSlide);

function slideLeft ()
{
  var offsetX = mainOffset - ($("a.selected").parent("li").width() / 2);
  $("#slider .slidenav").animate({
  	left: offsetX
  }, 2500);
}

function slideRight ()
{
  var offsetX = mainOffset;
  $("#slider .slidenav li").each(function () {
  	offsetX -= $(this).width();
  });
  $("#slider .slidenav").animate({
  	left: offsetX
  }, 2500);
}

function stopSlide ()
{
  $("#slider .slidenav").stop();
}
*/

// handle nav selection
function selectNav() {
  //$("#slider .slidenav").stop();
  $('a.selected').removeClass('selected');
  $(this).addClass('selected');
  
/*
  var offsetX = mainOffset - ($("a.selected").parent("li").width() / 2);
  
  $(this).parents("li").prevAll().each(function(el){
  	offsetX -= $(this).width();
  });
  
  $(navigation).animate({
  	left: offsetX
  });
*/
  
}

function selectSubNav (e)
{
	e.preventDefault();
	
	trigger({id: this.href.substr(1) });
}

// Slider navigation sets up the click listener on the navigation
$('#slider .slidenav').find('a').click(selectNav);

//$("ul.services a").click(selectSubNav);

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

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
  //$('ul.slidenav a[href$="' + window.location.hash.substr(1) + '"]').click();
} else {
  trigger({ id : 'our-approach'});
}

var scrollOptions = {
  target: $scroll, // the element that has the overflow
  
  // can be a selector which will be relative to the target
  items: $panels,
  
  navigation: '.slidenav a',
  
  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'div.left', 
  next: 'div.right',
  
  // allow the scroll effect to run both directions
  axis: 'x',
  
  onAfter: trigger, // our final callback
  
  // allow for the border
  offset: -16,
  
  // duration of the sliding effect
  duration: 250,
  
  // 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.
$('#slider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$("ul.services").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);

});