$(document).ready(function () {
var $panels = $('#slider .scrollerContainer > div');
var $container = $('#slider .scrollerContainer');

var horizontal = true;

if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative' 
});


$container.css('width', $panels[0].offsetWidth * $panels.length);
}
var $scroll = $('#slider .scroller').css('overflow', 'hidden');

 
$scroll
.before('<img class="Buttons left" src="img/left_slider_button.png" />')
.after('<img class="Buttons right" src="img/right_slider_button.png" />');

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

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

 
function trigger(data) {
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}

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

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


var scrollOptions = {
target: $scroll, 
items: $panels,
navigation: '.navigation a',
prev: 'img.left', 
next: 'img.right',
axis: 'xy',
onAfter: trigger, 
offset: offset,
duration: 400,
easing: 'swing'
};
 
$('#slider').serialScroll(scrollOptions);
$.localScroll(scrollOptions);
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
});
//End Slider script