$(document).ready(function(){
	// Controller-Bullets
	$('#slider').bind('slideChange',function(e,index){
		$('#sliderController li').removeClass('current');
		$($('#sliderController li')[index]).addClass('current');
	});
});


$(window).load(function(){  
	$(document).ready(function(){
		var startItem = 0;	
		
		// set all zIndex to 0, except currentActive
		// create controller list
		$('#slider .slide').each(function(index){
			var sliderItem = $('<li class="slide'+index+'">'+parseInt(index+1)+'</li>').click(function(){
				slideTo(index);
			});
			
			$('#sliderController').append(sliderItem);
			
			if(index != startItem){
				$(this).css('z-Index',0);
			}else{
				$(this).css('z-Index',1).addClass('current');
			}			
			
			$(this).click(function(){
				slideNext();
			});	
			
		});
			
		// Fire Event
		$('#slider').trigger('slideChange',startItem);	
	});
});


function slideNext(){
	var currentActive = 0;
	$('#slider .slide').each(function(index){
		if($(this).hasClass('current')){
			currentActive = index;
			return false;
		}
	});
	var totalImages = $('#slider .slide').length;
	if(currentActive == totalImages-1){
		slideTo(0);
	}else{
		slideTo(currentActive+1);
	}
}

function slidePrev(){
	var currentActive = 0;
	$('#slider .slide').each(function(index){
		if($(this).hasClass('current')){
			currentActive = index;
			return false;
		}
	});
	var totalImages = $('#slider .slide').length;
	if(currentActive == 0){
		slideTo(totalImages-1);
	}else{
		slideTo(currentActive-1);
	}
}

function slideTo(index){	
	// temp increase zindex
	var currentActive = $('#slider .slide.current');	
	$(currentActive).css('z-index',1).removeClass('current');
	
	var nextActive = $('#slider .slide')[index];
	$(nextActive).addClass('current').show();

	// Fire Event
	$('#slider').trigger('slideChange',index);	
	
	// start animation
	if(currentActive[0] != nextActive){
		
		// aktuelle active
		var currentIndex = $(currentActive).index('#slider .slide');
		
		// directionX gibt an in welche richtung (links=1, rechts=-1, nicht=0)
		// directionY gibt an in welche richtung (hoch=1, runter=-1, nicht=0)
		
		if(currentIndex < index){
			var directionX = -1;
			var directionY = 0; 
		}else{
			var directionX = 1;
			var directionY = 0; 
		}
		$(nextActive).css('left',($(nextActive).width()*-1)*directionX);
		$(nextActive).css('top',($(nextActive).height()*-1)*directionY);		
		$(nextActive).css('z-index',2);	
		
		$(nextActive).animate({
			left:0,
			top:0
		},function(){					
			$(currentActive).css('z-index',0).hide();		
		})	
	}
}