$(document).ready(function(){

    $(function() {
        $('a[href^=http]').click( function() {
            window.open(this.href);
            return false;
        });
    });
    
    function CheckArrows(){
        if($(".roll").css("left") == "0px"){
            $(".haak-left").addClass("no-arrow");
        }else{
            $(".haak-left").removeClass("no-arrow");
        }
        if($(".roll").css("left") == "-2298px"){
            $(".haak-right").addClass("no-arrow");
        }else{
            $(".haak-right").removeClass("no-arrow");
        }
    }

    function getPage(){
        url = window.location;
        url = url + "";
        url = url.split("#");
        hash = url[1];
        return hash;
    }

    gotoPage(getPage(), true); 

    function gotoPage(page, start){
        first = "home";
        second = "about";
        third = "work";
        fourth = "contact"
        if(page==second){
            prevPage="#"+first
            nextPage="#"+third
            position=766;
            menuPosition=87;
        }
        else if(page==third){
            prevPage="#"+second
            nextPage="#"+fourth
            position=1532;
            menuPosition=157;
        }else if(page==fourth){
            prevPage="#"+third
            nextPage="#"+fourth
            position=2298;
            menuPosition=227;
        }else{
            prevPage="#"+first
            nextPage="#"+second
            position=0;
            menuPosition=17;
        }
        if(start==true){
            $(".roll").css("left",-position);
            CheckArrows();
            $(".to-left").attr("href",prevPage);
            $(".to-right").attr("href",nextPage);
            $("#menu ul").css('background-position',menuPosition+'px 13px');
        }else{
            $(".roll").animate({
                left: -position
                }, 2000, function() {
                    CheckArrows();
                    $(".to-left").attr("href",prevPage);
                    $(".to-right").attr("href",nextPage);
            });
            $("#menu ul").animate({
                'background-position' : menuPosition+'px 13px'
            }, 2000);
        }
    }

    CheckArrows();

    $(".to-left").click(function(){
        gotoPage($(this).attr("href").replace("#",""));
    });
    $(".to-right").click(function(){
        gotoPage($(this).attr("href").replace("#",""));
    });

    $("#menu ul li").click(function(){
       gotoPage($(this).children("a").attr("href").replace("#",""));
    });
    
    $("#logo").click(function(){
       gotoPage($(this).parent().attr("href").replace("#",""));
    });

    //afhandeling formulier
    $("input").each(function(){
        $(this).val($(this).attr("title"));
    });
    $("input, textarea").focus(function(){
        if($(this).hasClass("grey")){
            $(this).removeClass("grey");
            $(this).val("");
        }else{
            $(this).select();
        }
    });
    $("input, textarea").blur(function(){
        checkEmpty($(this));
    });

    $("button").click(function(){
        stop = false;
        $(this).parent().children("input, textarea").each(function(){
            if(checkEmpty($(this))==false){
                stop = true;
            }
        });
        if(stop == true){
            return false;
        }else{
            return true;
        }
    });
    $(".error .cross").live('click', function() {
        $(this).parent().animate({
                height: "toggle"
                }, 500, function(){
                    $(this).parent().remove();
            });
    });

    $("textarea").val("Bericht:");
    function checkEmpty(elm){
        if(elm.val()==0 || elm.hasClass("grey")){
            elm.val(elm.attr("title"));
            elm.addClass("grey");
            inputError(elm, "Er is geen tekst ingevuld");
            return false;
        }else{
            elm.prev(".error").children().animate({
                height: "toggle"
                }, 500, function(){
                    elm.prev(".error").remove();
            });
            return true;
        }
    }

    function inputError(elm, error){
        if(!elm.prev().hasClass("error")){
            elm.before('<div class="error"><div class="error-tekst"><span class="error-tekst">'+error+'</span><div class="cross">x</div></div></div>');
            elmLeft = Number(elm.css("margin-left").replace("px","")) + 23;
            elmBottom = Number(elm.css("margin-top").replace("px",""));
            elm.prev().children().css({"left":elmLeft,"bottom":elmBottom * -1})
            elm.prev().children().animate({
                height: "toggle"
            },500);
        }
    }

    berekenWindow();
    $(window).resize(function(){
        berekenWindow();
        positionOverlay();
    });

    function berekenWindow(){
        margintop = $(window).height() - $("#header").height() - $("#header").css("padding-top").replace("px","") -  $("#page").height() - $("#page").css("margin-top").replace("px","") - $("#subpage").height() - $("#subpage").css("margin-top").replace("px","") - $("#footer").height();
        if(margintop < 45){margintop=45;}
        $("#footer").css("margin-top", margintop)
    }

    

    /* overlay */
    $(".third .kolom-2 .button").click(function(){
       loadOverlay("vak-1");
    });
    $(".third .kolom-2 #thumbnails img").click(function(){
       loadOverlay($(this).attr("class"));
    });
    $(".close-overlay, #overlay-shadow").live('click', function() {
        closeOverlay();
    });

    $(".vak-footer .right .arrow").live("click", function(){
        scrollToNumber = Number($(this).attr("id").replace("scrollto-",""));
        scrollRollerTo("vak-"+scrollToNumber);
    });
    $(".vak-footer .left .arrow").live("click", function(){
        scrollToNumber = Number($(this).attr("id").replace("scrollto-",""));
        scrollRollerTo("vak-"+scrollToNumber);
    });

    function scrollRollerTo(className){
        classNumber = Number(className.replace("vak-",""));
        $("#overlay .content .roller").animate({
            left: ((classNumber-1) * -708) - 19
        },1000, function(){
            checkArrows(className);
        });
    }
    function checkArrows(className){
        classNumber = Number(className.replace("vak-",""));
        if(classNumber>1){
            $(".vak-footer .left").fadeIn(500);
            $(".vak-footer .left .arrow-label").text($("."+className).prev().children().children().children("h2").text());
            $(".vak-footer .left .arrow").attr("id","scrollto-"+(classNumber-1));
            $(".vak-footer .left").show();
        }else{
            $(".vak-footer .left").fadeOut(500);
        }
        if($("."+className).next().length > 0){
            $(".vak-footer .right").fadeIn(500);
            $(".vak-footer .right .arrow-label").text($("."+className).next().children().children().children("h2").text());
            $(".vak-footer .right .arrow").attr("id","scrollto-"+(classNumber+1));
            $(".vak-footer .right").show();
        }else{
            $(".vak-footer .right").fadeOut(500);
        }
    }

    function loadOverlay(className){
       classNumber = Number(className.replace("vak-",""));
       $("body").append('<div id="overlay-wrapper"></div>');
       $("#overlay-wrapper").fadeIn(500);
       $("#overlay-wrapper").load('includes/overlay.php?pre=true', function(){
            positionOverlay();
            $("#overlay").load('includes/overlay.php', function(){
                $("#overlay .roller").css("width",$("#overlay .roller").children().length * 708);
                $("#overlay .loading").fadeOut(500);
                $("#overlay .content .roller").css("left", ((classNumber-1) * -708) - 19);
                $("#overlay .content").fadeIn(500, function(){
                    
                    checkArrows(className);

                    $(".scroll-wrapper").each(function(){
                        //alert($(".scrollable").outerHeight() + "&" + $(this).outerHeight());
                        if($(this).children(".scrollable").outerHeight() > $(this).outerHeight()){
                            $(this).append('<div class="scrollbalk"><div class="scrollbutton"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div></div>');
                            $(this).children(".scrollbalk").fadeIn(500);
                            scrollbuttonHeight = $(this).children(".scrollbalk").outerHeight() - ($(this).children(".scrollable").outerHeight() - $(this).outerHeight());
                            if(scrollbuttonHeight < 31){scrollbuttonHeight = 31;}
                            $(this).children().children(".scrollbutton").css("height",scrollbuttonHeight);
                            $(this).children().children(".scrollbutton").children(".middle").css("height",scrollbuttonHeight-26);

                            //scrollbutton draggable maken
                            $(this).children().children(".scrollbutton").draggable({ axis: "y", containment: ".scrollbalk", scroll: false });

                            $(this).children().children(".scrollbutton").draggable({
                               drag: function(event, ui) {
                                    schuifWaarde = getSchuifWaarde($(this).parent().parent(".scroll-wrapper"));
                                    topWaarde = (($(this).css("top").replace("px",""))*(schuifWaarde*-1));
                                    $(this).parent().prev(".scrollable").css("top",topWaarde);
                               }
                            });

                            $(this).mousewheel(function(event, delta){
                                   if( ($(this).children().children(".scrollbutton").css("top").replace("px","")>=0) && ($(this).children().children(".scrollbutton").css("top").replace("px","") <= $(this).children(".scrollbalk").height()-$(this).children().children(".scrollbutton").height()) ){
                                       schuifWaarde = getSchuifWaarde($(this));
                                       scrollbuttonTop = $(this).children().children(".scrollbutton").css("top").replace("px","");
                                       scrollbuttonTop = Number(scrollbuttonTop);
                                       delta = Number(delta);
                                       scrollbuttonTop += (delta * -10);

                                       if(scrollbuttonTop < 0){scrollbuttonTop = 0;}
                                       if(scrollbuttonTop > $(this).children(".scrollbalk").height()-$(this).children().children(".scrollbutton").height()){scrollbuttonTop = $(this).children(".scrollbalk").height()-$(this).children().children(".scrollbutton").height();}
                                       $(this).children().children(".scrollbutton").css("top", scrollbuttonTop);
                                       topWaarde = (($(this).children().children(".scrollbutton").css("top").replace("px",""))*(schuifWaarde*-1));
                                       $(this).children(".scrollable").css("top",topWaarde);
                                   }
                                   return false;
                            });
                        }
                    });
                });
            });
       });
    }
    function getSchuifWaarde(wrapper){
        //alert(wrapper.children(".scrollable").outerHeight());
        schuifWaarde = (wrapper.children(".scrollable").outerHeight() - wrapper.outerHeight() + wrapper.children().children(".scrollbutton").outerHeight()) / wrapper.children(".scrollbalk").outerHeight();
        schuifWaarde = Number(schuifWaarde.toFixed(2));
        schuifWaarde = (schuifWaarde * 1.1).toFixed(2);
        return schuifWaarde;
    }

    function positionOverlay(){
       $("#overlay").css("left", ($(window).width() - $("#overlay").width()) / 2);
       topDistanc = ($(window).height() - $("#overlay").height()) / 2;
       if(topDistanc<20){topDistanc=20;}
       $("#overlay").css("top", topDistanc);
    }
    function closeOverlay(){
        $("#overlay-wrapper").fadeOut(500, function(){
           $(this).remove();
        });
        
    }
});