$(function() {

	var totalPanels			= $(".scrollContainer").children().size();

	var regImgWidth			= $(".panel").outerWidth();

	var movingabstand	    = parseInt(regImgWidth) +22;

  

    var viewable_image = 3; //Gesamtbildanzahl (Sichtbar) - 1
	var $panels				= $('#slider .scrollContainer > div');
	var $container			= $('#slider .scrollContainer');

   
	$panels.css({'float' : 'left','position' : 'relative'});

	$("#slider").data("currentlyMoving", false);

	$container
		.css('width', ($panels[0].offsetWidth * $panels.length) +100)
		.css('left', "0px");

	var scroll = $('#slider .scroll').css('overflow', 'hidden');
    
    //direction true = right, false = left
	function change(direction) {
         
     var maxbei =  $(".scrollContainer").children().size();
     var pruefen  = maxbei -viewable_image;
         
	    //if not at the first or last panel
		if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }

        //if not currently moving
        if (($("#slider").data("currentlyMoving") == false)) {

			$("#slider").data("currentlyMoving", true);

			var next         = direction ? curPanel + 1 : curPanel - 1;
			var leftValue    = parseInt($(".scrollContainer").css("left"));
			
          
			var movement	 = direction ? leftValue - movingabstand : leftValue + movingabstand;

            
			$(".scrollContainer")
				.stop()
				.animate({
					"left": movement
				}, function() {
					$("#slider").data("currentlyMoving", false);
				});
            
        


			curPanel = next;
            if(curPanel!=pruefen){
			//remove all previous bound functions
			$("#panel_"+(curPanel+1)).unbind();

		
            //remove all previous bound functions
			$("#panel_"+(curPanel-1)).unbind();

		
			//remove all previous bound functions
			$("#panel_"+curPanel).unbind();
			
		  }     
        
        
	
          if(curPanel==pruefen){
            document.getElementById("right_arrow").style.display= "none";
          }else{
            document.getElementById("right_arrow").style.display= "block";   
          }
          
           if(curPanel==1){
            document.getElementById("left_arrow").style.display= "none";
          }else{
            document.getElementById("left_arrow").style.display= "block";
          }
          
       }
    
    }
	
	

	// Set up "Current" panel and next and prev

	var curPanel = 1;

	

	//when the left/right arrows are clicked
	$(".right").click(function(){ change(true); });
    
	$(".left").click(function(){ change(false); });

	
	

});