$(document).ready(function() {
	
	$('#prev').animate({'opacity' : 0}, 0);
	$('#next').animate({'opacity' : 0}, 0);
						
	descriptions = new Array(	"Princes Royal Island - British Columbia/Canada",
								"Spider Monkey - Costa Rica",
								"Hafencity - Hamburg/Germany",
								"Obertauern - Austria",
								"Fredi - Beauty Shoot")
	var act_image = 0;
						
						
	
	//Vor Zurück Buttons einblenden
	$('#slider').hover(
		function () {$('#prev').stop().animate({'opacity' : 1}, 400);$('#next').stop().animate({'opacity' : 1}, 400); clearInterval(image_slider);}, 
		function () {$('#prev').stop().animate({'opacity' : 0}, 300);$('#next').stop().animate({'opacity' : 0}, 300); image_slider = setInterval ( rotate_timed, 5000 );}
	);
	
	// Vor/Zurück Buttons 	
	$('#prev').click(function() {
	
	if (act_image==0){
	rotate(4)
	}else{
	rotate(act_image-1)
	}});
	
	$('#next').click(function() {
	
	if (act_image==4){
	rotate(0)
	}else{
	rotate(act_image+1)
	}});
	
	
	function rotate_timed()
	{
		if (act_image == 4){
			rotate(0)
		}
		else{
			rotate(act_image+1)
		}
	}
		
	function rotate(new_image)
	{
		if (act_image != new_image){
			$('#image_viewer').stop().animate({'top' : (-300*new_image)}, 600);
			$('#title').stop().animate({opacity : 0}, 0)
			$('#title').html("<p>"+descriptions[new_image]+"</p>")
			$('#title').stop().animate({opacity : 1}, 500)
			$("#navi_list img").attr("src","media/dot_inactive.png");
			$("#navi_list #dt_"+new_image).attr("src","media/dot_active.png");
			act_image = new_image;
		}
	}
	
	//First Run Operationen
	image_slider = setInterval ( rotate_timed, 5000 );
	
	
	
	
	
	
	/*
	//Alle Elemente der Animation ausrichten bzw. ausblenden
	$('#jl').css('height' , '150px').animate({opacity:0}, 0);
	$("#tog_design h2").animate({opacity:0},0);
	$('#logo').css('top' , (window.outerHeight/2)-200);
	$('.entry').animate({opacity:0.4},0);
	$('#nav').css('top', '-50px');
		
	//"Janik Lipke" einblenden
	function view_init()
	{
		$("#jl").animate({opacity:1}, 1200);
	}
	
	//Maske des Logos einblenden und Subtitle einblenden
	function sub_init()
	{
		$('#jl').animate({'height' : "90px"}, 600, function(){$("#tog_design h2").animate({opacity:1},700);menu_bounce();});		
	}
	
	function menu_bounce()
	{
		$('#nav').animate({'top' : 0},400);
	}
	//Countdown(s) für gesteuerte Animation
	$(window).load(function() 
	{
		setTimeout(view_init, 300);
		setTimeout(sub_init, 1800);
	});
	
	//Hover Effekt für die Navigation
	$('.entry').hover(	function (){$(this).stop().css('background-position-y', '0').animate({opacity:1},300)}, 			//Hover in
						function (){$(this).stop().css('background-position-y', '-35px').animate({opacity:0.4},300)});		//Hover out
	
	//Fenster permanent vertikal zentrieren
	$(window).resize(function() {
  		$('#logo').css('top' , (window.outerHeight/2)-200);
	});
	*/
	
});
