$(document).ready(function(){
  
	var withSlider = $('#slider').css('width');
	withSlider = withSlider.substr(0, withSlider.length-2);

	//vars
	var conveyor = $(".content-conveyor", $("#sliderContent")),
	item = $(".item", $("#sliderContent"));
	
	//set length of conveyor
	conveyor.css("width", item.length * parseInt(item.css("width")));
			
	//config
	var sliderOpts = {
	  max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
	  animate: true,	
	  slide: function(e, ui) { 
		conveyor.css("left", "-" + ui.value + "px");
		var position = $('.ui-slider-handle').position();
		
		if(position.left < 199){						
			changeColor('first');
		}
		else if(position.left >= 199 && position.left < 599){				
			changeColor('second');
		}
		else if(position.left > 599){				
			changeColor('last');
		}
	  },
	  change: function(e, ui) { 		  
		var position = $('.ui-slider-handle').position();

		if(position.left < 199){			
			$('.ui-slider-handle').animate({
				left: '0%'
			}, 700, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '0px'
			}, 700, function() {
				// Animation complete.
			});		
			changeColor('first');
		}
		else if(position.left >= 199 && position.left < 599){
			$('.ui-slider-handle').animate({
				left: '50%'
			}, 700, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '-958px'
			}, 700, function() {
				// Animation complete.
			});		
			changeColor('second');
		}
		else if(position.left > 599){
			$('.ui-slider-handle').animate({
				left: '100%'
			}, 700, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '-1916px'
			}, 700, function() {
				// Animation complete.
			});		
			changeColor('last');
		}
	  }
	};

	//create slider
	$("#slider").slider(sliderOpts);
	
	$('#next').click(function(){
		var position = $('.ui-slider-handle').position();
		
		if(position.left < 199){
			$('.ui-slider-handle').animate({
				left: '50%'
			}, 700, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '-958px'
			}, 700, function() {
				// Animation complete.
			});
			changeColor('second');
		}
		else if(position.left >= 199 && position.left < 599){
			$('.ui-slider-handle').animate({
				left: '100%'
			}, 700, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '-1916px'
			}, 700, function() {
				// Animation complete.
			});
			changeColor('last');
		}
		else if(position.left > 599){
			changeColor('last');
		}
	});
	$('#prev').click(function(){
		var position = $('.ui-slider-handle').position();
		
		if(position.left < 199){	
			changeColor('first');
		}
		else if(position.left >= 199 && position.left < 599){
			$('.ui-slider-handle').animate({
				left: '0%'
			}, 700, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '0px'
			}, 700, function() {
				// Animation complete.
			});
			changeColor('first');
		}
		else if(position.left > 599){
			$('.ui-slider-handle').animate({
				left: '50%'
			}, 700, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '-958px'
			}, 700, function() {
				// Animation complete.
			});
			changeColor('second');
		}
	});
	
	function changeColor(ID){
		if(ID == 'first'){
			$(".first").addClass("aktiv");				
			$(".second").removeClass("aktiv");
			$(".last").removeClass("aktiv");
		}
		else if(ID == 'second'){
			$(".first").removeClass("aktiv");
			$(".second").addClass("aktiv");
			$(".last").removeClass("aktiv");	
		}
		else{
			$(".first").removeClass("aktiv");
			$(".second").removeClass("aktiv");
			$(".last").addClass("aktiv");			
		}
	}
	
	$('.first').click(function(){			
		changeColor('first');
		
		$('.ui-slider-handle').animate({
			left: '0%'
		}, 700, function() {
			// Animation complete.
		});
		$('.content-conveyor').animate({
			left: '0px'
		}, 700, function() {
			// Animation complete.
		});	
		
		return false;
	});
	$('.second').click(function(){
		changeColor('second');
		
		$('.ui-slider-handle').animate({
			left: '50%'
		}, 700, function() {
			// Animation complete.
		});
		$('.content-conveyor').animate({
			left: '-958px'
		}, 700, function() {
			// Animation complete.
		});		
		
		return false;
	});
	$('.last').click(function(){
		changeColor('last');	

		$('.ui-slider-handle').animate({
			left: '100%'
		}, 700, function() {
			// Animation complete.
		});
		$('.content-conveyor').animate({
			left: '-1916px'
		}, 700, function() {
			// Animation complete.
		});	
		
		return false;
	});
	
	//setInterval("autoplay()",3000);
	var play = setInterval(function() {
        autoplay();
    }, 5500);
	
	$("#sliderContent").hover(
	  function () {
		clearInterval(play);
	  }, 
	  function () {
		play = setInterval(function() {
			autoplay();
		}, 5500);
	  }
	);
	
	function autoplay(){
		var position = $('.ui-slider-handle').position();

		if(position.left == 0){
			$('.ui-slider-handle').animate({
				left: '50%'
			}, 700, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '-958px'
			}, 700, function() {
				// Animation complete.
			});
			changeColor('second');
		}
		else if(position.left == 399){
			$('.ui-slider-handle').animate({
				left: '100%'
			}, 700, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '-1916px'
			}, 700, function() {
				// Animation complete.
			});
			changeColor('last');
		}
		else if(position.left == 798){
			$('.ui-slider-handle').animate({
				left: '0%'
			}, 1000, function() {
				// Animation complete.
			});
			$('.content-conveyor').animate({
				left: '0px'
			}, 1000, function() {
				// Animation complete.
			});
			changeColor('first');
		}
	}
  });