$(document).ready(function () {
	initCodaSlider('#slider');
});

function initCodaSlider(slider) {
	// 1. create scroll effect
	// 2. handle the selection of the navigation
	// 3. prev + next image button
	// 4. support vertical & horizontal

	var horizontal = true;

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

	$scroll
		.before('<div class="left scrollButtons"><span></span></div><div class="right scrollButtons"><span></span></div>');

	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: 'div.left',
			next: 'div.right',
			axis: 'xy',
			duration: 300,
			easing: 'swing',
			onAfter: trigger

			// TODO finish!
		};

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

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

		$(slider).serialScroll(scrollOptions);
}