$(document).ready(function() {

	var scroll_nav = $("div.slider");
	var scroll     = $("div.slider div.scroll");
	var container  = $("div.slider div.scroll div.scrollContainer");
	var panels     = $("div.slider div.scroll div.scrollContainer div.content");

	var buttons = "";


	panels.each(function(i) {i
		$(this).attr('id', 'slide' + i);
		var link = i+1;
		//buttons += "<a href='#slide" + i + "'>" + link + "</a>";
		buttons += "<a href='#slide" + i + "'> &#160; </a>";
	});
	$("<div class='buttons'>" + buttons + "</div><div class='float_breaker'></div>").appendTo(scroll_nav);

	scroll.css('overflow', 'hidden');
	container.css('width', (scroll.width() * panels.length));
	panels.css({
		'float'  : 'left',
		'width'  : scroll.width(),
		'height' : scroll.height()
	});

	// Button markieren
	function selectNav() {
		$(this).parent().find('a').removeClass('active').end().end().addClass('active');
	}

	$(scroll_nav).find("a").click(selectNav);

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

	// Beim Reload wieder mit dem ersten Layer öffnen
	if (window.location.hash) {
		trigger({ id : window.location.hash.substr(1) });
	} else {
		$('div.slider div.buttons a:first').click();
	}

	var scrollOptions = {
		target: scroll,
		items: panels,
		axis: 'xy',
		onAfter: trigger,
		duration: 500
	};

	$(scroll_nav).localScroll(scrollOptions);

	scrollOptions.duration = 1;
	$.localScroll.hash(scrollOptions);
});