$(document).ready(function () {

//1. crate scroll effect
//2. handle the slection of the navigation
//3. prev + next buttons
//4. support vertical and horizontal

var horizontal = true;

var $panels = $('#slider .panel');
var $container= $('#slider .scrollContainer');
var $scroll = $('#slider .scroll').css('overflow', 'hidden');


$scroll
	.before('<img src="/wordpress/wp-content/themes/gipsy/img/gallery/scroll_left.png" class="scrollButtons left"/>')
	.after('<img src="/wordpress/wp-content/themes/gipsy/img/gallery/scroll_right.png" class="scrollButtons right"/>');
	
if(horizontal) {
	$panels.css({
	'float': 'left',
	'position': 'relative'
	});
	
	$container.css('width', $panels[0].offsetWidth * $panels.length);
}	
	
	
$('#slider .navigation a').click(selectNav);

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

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

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 {
	$('#slider .navigation a:first').click();
}

$('#slider').serialScroll(scrollOptions);
$.localScroll(scrollOptions);


});