$(document).ready(function () {

	var horizontal = true;		// scroll horizontal or vertical
	var duration = 400;			// duration of the sliding effect
	var cycleTime = 6000;		// duration of each item is showed before transition

	var $panels = $('#slider .scrollContainer > div');
	var $container = $('#slider .scrollContainer');

	if ($panels[0] != undefined) {
		var offset = parseInt((horizontal ? 
			$container.css('paddingTop') : 
			$container.css('paddingLeft')) 
			|| 0) * -1;

		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);
		}

		var $scroll = $('#slider .scroll').css('overflow', 'hidden');
		if (horizontal) {
			$scroll
				.before('<img title="voriges Element anzeigen" class="scrollButtons left" src="fileadmin/Inhaltsdateien/Teilorganisationen/JVP/styles/images/scroll_left.gif" />')
				.after('<img title="n&auml;chstes Element anzeigen" class="scrollButtons right" src="fileadmin/Inhaltsdateien/Teilorganisationen/JVP/styles/images/scroll_right.gif" />');
		} else {
			$scroll
				.before('<img class="scrollButtons left" src="fileadmin/Inhaltsdateien/Teilorganisationen/JVP/styles/images/scroll_up.gif" />')
				.after('<img class="scrollButtons right" src="fileadmin/Inhaltsdateien/Teilorganisationen/JVP/styles/images/scroll_down.gif" />');
		}
		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 scrollOptions = {
			target: $scroll,
			items: $panels,
			navigation: '.navigation a',
			prev: 'img.left', 
			next: 'img.right',
			axis: 'xy',
			onAfter: trigger,
			offset: offset,
			duration: duration,
			// http://gsgd.co.uk/sandbox/jquery/easing/
			easing: 'swing'
		};
		$('#slider').serialScroll(scrollOptions);
		$.localScroll(scrollOptions);
	
		// first hide the navigation buttons
		var $buttons = $('img.right').add('img.left').hide();
		// show buttons from start
		$buttons.show();

		// start to automatically cycle the tabs
		var cycleTimer = setInterval(function () {
			$scroll.trigger('next');
		}, cycleTime);
		// select some trigger elements to stop the auto-cycle
		var $stopTriggers = $('#slider .navigation').find('a') // tab headers
			.add('.scroll') // panel itself
			.add('.scrollButtons') // scroll buttons
			.add("a[href^='#']"); // links to a tab
		function stopCycle() {
			$stopTriggers.unbind('click.cycle'); // remove the no longer needed stop triggers
			clearInterval(cycleTimer); // stop the auto-cycle itself
			$buttons.show(); // show the navigation buttons
		}
		// bind stop cycle function to the click event using namespaces
		$stopTriggers.bind('click.cycle', stopCycle);
	}
});