$(function() {
    
    var totalPanels         = $(".scrollContainer").children().size();
        
    var regWidth            = $(".panel").css("width");
    var regImgWidth         = $(".panel img").css("width");
    var regTitleSize        = $(".panel h2").css("font-size"); /* Bestimmmung der Headline */
    var regParSize          = $(".panel p").css("font-size");  /* Bestimmmung des p-Tags */
    
    var movingDistance      =310;
    
    var curWidth            = 325;
    var curImgWidth         = 320;
    var curTitleSize        = "25px"; /* Größer der H2 */
    var curParSize          = "55px"; /* Größe des p-Tags */

    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) + 4210 )
        .css('left', "-215px");

    var scroll = $('#slider .scroll').css('overflow', 'hidden');

    function returnToNormal(element) {
        $(element)
            .animate({ width: regWidth })
            .find("img")
            .animate({ width: regImgWidth })
            .end()
            .find("h2")
            .animate({ fontSize: regTitleSize })
            .end()
            .find("p")
            .animate({ fontSize: regParSize });
    };
    
    function growBigger(element) {
        $(element)
            .animate({ width: curWidth })
            .find("img")
            .animate({ width: curImgWidth })
            .end()
            .find("h2")
            .animate({ fontSize: curTitleSize })
            .end()
            .find("p")
            .animate({ fontSize: curParSize });
    }
    
    //direction true = right, false = left
    function change(direction) {
       
        //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    = $(".scrollContainer").css("left");
            var movement     = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
        
            $(".scrollContainer")
                .stop()
                .animate({
                    "left": movement
                }, function() {
                    $("#slider").data("currentlyMoving", false);
                });
            
            returnToNormal("#panel_"+curPanel);
            growBigger("#panel_"+next);
            
            curPanel = next;
            
            //remove all previous bound functions
            $("#panel_"+(curPanel+1)).unbind(); 
            
            //go forward
            $("#panel_"+(curPanel+1)).click(function(){ change(true); });
            
            //remove all previous bound functions                                                           
            $("#panel_"+(curPanel-1)).unbind();
            
            //go back
            $("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
            
            //remove all previous bound functions
            $("#panel_"+curPanel).unbind();
        }
    }
    
    // Set up "Current" panel and next and prev
    growBigger("#panel_3"); 
    var curPanel = 3;
    
    $("#panel_"+(curPanel+1)).click(function(){ change(true); });
    $("#panel_"+(curPanel-1)).click(function(){ change(false); });
    
    //when the left/right arrows are clicked
    $(".mbright").click(function(){ change(true); }); 
    $(".mbleft").click(function(){ change(false); });
    
    $(window).keydown(function(event){
      switch (event.keyCode) {
            case 13: //enter
                $(".mbright").click();
                break;
            case 32: //space
                $(".mbright").click();
                break;
        case 37: //left arrow
                $(".mbleft").click();
                break;
            case 39: //right arrow
                $(".mbright").click();
                break;
      }
    });
    
});