//VERSION: 	1.0
//DATE:		OCTOBER 2, 2011

//PURPOSE: Allow overflow elements to be selected/navigated (SEE: panic.com/coda)

$(document).ready(function() {

//Collect variables
var $panels = $('#content_slider .scrollContainer > div');
var $container = $('#content_slider .scrollContainer');

var horizontal = true; // false == float panels left

if(horizontal){
	$panels.css({
		'float' : 'left',
		'position' : 'relative'
	});
	
	// Calculate width of container if horizontal
	$container.css('width', $panels[0].offsetWidth * $panels.length);
}

// Collect scroll object while hiding overflow to remove scrollbars	
var $scroll = $('#content_slider .scroll').css('overflow', 'hidden');

// Add-in nav left/right
//$scroll
//	.before('<img class = "scrollButtons right" src = "images/scroll_left.png" />')
//	.after('<img class = "scrollButtons right" src = "images/scroll_right.png" />');

function selectNav() {
// This function finds: 	
	$(this)
		.parents('ul:first') 				// the first 'ul' parent, then
			.find ('a')						// finds all 'a' elements, then
				.removeClass('selected')	// removes the class 'selected', then
			.end()							// goes back to all 'a' elements, then
		.end()								// goes back to the calling element ('this'), then
		.addClass('selected');				// applies the css class 'selected' to the calling element
}

$('#content_slider .navigation').find('a').click(selectNav);


function trigger(data) {
//Used to update the currently 'selected' panel.
//within the .navigation element, find the 'a' element
//whose href ends with 'id' ('$=' means ends with)
var el = $('.navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el); // Using 'selectNav', select the nav that matches 'data'
}

if (window.location.hash){
//	 Pass the value after the hash ('#') to the trigger method
	trigger({ id : window.location.hash.substr(1) });
} else {
//	 If there is no hash, select 'eng_des'
	$('ul.navigation li a:first').click();
}

var offset = parseInt((horizontal ?
	$container.css('paddingTop') :
	$container.css('paddingLeft'))
	|| 0) * -1;

// Scroll options
var scrollOptions = {
	target: $scroll, // overflow element
	items: $panels,
	navigation: 'navigation a',
	prev: 'img.left',
	next: 'img.right',
	axis: 'xy',
	onAfter: trigger,
	offset: 0,
	duration: 500,
	easing: 'swing'
};

$('#content_slider').serialScroll(scrollOptions);

$.localScroll(scrollOptions);

//Set scroll location on first page load
scrollOptions.duration = 1;

$.localScroll.hash(scrollOptions);

});