// JavaScript Document

var marginTopWaarde;
var readMoreText = "+ lees meer";

var scrolled = 0;
var mobileActive = false;
var mobileContactActive = false;

function scrollFunction(){
    var innerHeight = $(window).innerHeight();

    var $columnLabel = $('#columnLabel');
    var $hoofdmenu = $('#hoofdmenu');
    var $columnContent = $('#mainframeRight .columnContent');
    var $footer = $('#footer');

    var offsetLabel = $("#mainframeMiddle .columnFooter").offset();
    var posLabel = offsetLabel.top;

    var beginLabel = posLabel - innerHeight;

    var offsetFooter = $footer.offset();
    var posFooter = offsetFooter.top;

    var beginFooter = posFooter - innerHeight;

    var hoogteHoofdmenu = $hoofdmenu.height() + 50;
    var hoogteMarginWaarde =  posFooter - $hoofdmenu.height() - 210;

    var scrollPos;
    var waardeNieuweTop = 0;

    $(window).scroll(function() {
        scrollPos = $(window).scrollTop();

        if(scrollPos - 20 > beginLabel){
            var waarde = -140 + ((scrollPos - 50 - beginLabel) / 1.6);
            if(waarde > 20){ waarde = 20; }

            $columnLabel.css('top',waarde+"px");
        }

        waardeNieuweTop = marginTopWaarde - (scrollPos / 8);

        // do not compensate on mobile
        if($hoofdmenu.is(":visible")) {
            $columnContent.css('margin-top', waardeNieuweTop + "px");
        }

        if(scrollPos > 280){
            if((innerHeight - (scrollPos - beginFooter) - hoogteHoofdmenu - 80 ) < 0 ){
                $hoofdmenu.removeClass("fixed");
                $hoofdmenu.css('margin-top',hoogteMarginWaarde+'px');
            }else{
                $hoofdmenu.css('margin-top','0');
                $hoofdmenu.addClass("fixed");
            }
        }else{
            $hoofdmenu.removeClass("fixed");
            $hoofdmenu.css('margin-top','210px');
        }
    });
}

function backgroundImageSize(){
    var windowWidth = $(document).width();
    var mainframeHeight = $('#mainframe').height() - 150;
    var windowWidthRatio =  windowWidth / 4;
    var mainframeHeightRatio =  mainframeHeight / 3;

    $('#backgroundPhotos').css('height', mainframeHeight+'px');
    if(windowWidthRatio < mainframeHeightRatio){
        $('#backgroundPhotos img').css({'height': mainframeHeight+'px', 'width': 'auto'})
    }else{
        $('#backgroundPhotos img').css({'width': windowWidth+'px', 'height': 'auto'})
    }
}

function resizeMobile() {

    $('.mobile-navigation nav>ul>li>ul').css('height', 'auto');

    $('.mobile-navigation nav>ul>li>ul').each(function () {
        $(this).removeClass('hide').addClass('noTrans');
        var listHeight = $(this).height();

        $(this).css('height', listHeight);

        if($(this).hasClass('active')) $(this).removeClass('noTrans');
        else $(this).addClass('hide').removeClass('noTrans');

        // $(this).addClass('hide').removeClass('noTrans');
    });

}

function enableMobileMenu() {
    scrolled = $(window).scrollTop();
    $('html').animate({scrollTop:0}, 0, 'swing', function() {


        $('.mobile-navigation').addClass('active');
        $('.mobile-navigation').addClass('shader-active');
        mobileActive = true;
        console.log(scrolled);

    });
}

function disableMobileMenu() {

    //$('html').animate({scrollTop:scrolled}, 0, 'swing', function() {

    $('.mobile-navigation').removeClass('active');
    $('.mobile-navigation').removeClass('shader-active');
    $('body').removeClass('preventScroll');
    mobileActive = false;

    //});

    $(window).scrollTop(scrolled);
}

function enableMobileContact() {
    mobileContactActive = true;
    $('.mobile-navigation .mobile-contact').addClass('active');
    $('.mobile-navigation').addClass('shader-active');
}

function disableMobileContact() {
    mobileContactActive = false;
    $('.mobile-navigation .mobile-contact').removeClass('active');
    $('.mobile-navigation').removeClass('shader-active');
}

$(document).ready(function(){

    marginTopWaarde = $('#mainframeRight .columnContent').css("margin-top").replace("px", "");

    $('#hoofdmenu li.notActive').click(function(){
        window.location.href = $('a',this).attr('href');
    });
    $('#submenu li').click(function(){
        window.location.href = $('a',this).attr('href');
    });
    $('#strooiselProducten .columnBlock').click(function(){
        window.location.href = $('a',this).attr('href');
    });
    $('.productenLijst li').click(function(){
        window.location.href = $('a',this).attr('href');
    });

    $('#hoofdmenu li.notActive').hover(function(){
        $("> a span", this).stop().animate({width: "12px"}, "fast");
        $("> a", this).stop().animate({left: "22px"}, "fast");
    },function(){
        $("> a span", this).stop().animate({width: "0px"}, "fast");
        $("> a", this).stop().animate({left: "0px"}, "fast");
    });

    $('#hoofdmenu #submenu li.notActive2').hover(function(){
        $("> a span", this).stop().animate({width: "12px"}, "fast");
        $("> a", this).stop().animate({left: "22px"}, "fast");
    },function(){
        $("> a span", this).stop().animate({width: "0px"}, "fast");
        $("> a", this).stop().animate({left: "0px"}, "fast");
    });

    $('#fotogalerie').hover(function(){
        $("> .vergrootIcon", this).stop().animate({opacity: "1"}, "fast");
    },function(){
        $("> .vergrootIcon", this).stop().animate({opacity: "0"}, "fast");
    });

    $('#talen li a').hover(function(){
        $("> .up", this).stop().animate({opacity: "0"}, "fast");
        $("> .hover", this).stop().animate({opacity: "1"}, "fast");
        $("> .ballon", this).stop().animate({"opacity": "1", "bottom":"-35px"}, "medium");
    },function(){
        $("> .up", this).stop().animate({opacity: "1"}, "fast");
        $("> .hover", this).stop().animate({opacity: "0"}, "fast");
        $("> .ballon", this).stop().animate({"opacity": "0", "bottom":"-30px"}, "medium");
    });

    $('#textCTA').hover(function(){
        $(this).stop().animate({color: "#D3113B"}, "fast");
    },function(){
        $(this).stop().animate({color: "#AC9F8E"}, "fast");
    });

    $('#footer .menubalk li.notActive').hover(function(){
        $("> a", this).stop().animate({color: "#D3113B"}, "fast");
    },function(){
        $("> a", this).stop().animate({color: "#AC9F8E"}, "fast");
    });
    $('#sideMenu li.notActive').hover(function(){
        $("> a", this).stop().animate({color: "#D3113B"}, "fast");
    },function(){
        $("> a", this).stop().animate({color: "#AC9F8E"}, "fast");
    });

    $('#mainframeRight .gmp').hover(function(){
        $("> .hover", this).stop().animate({"opacity": "1"}, "fast");
        $("> .up", this).stop().animate({"opacity": "0"}, "fast");
    },function(){
        $("> .hover", this).stop().animate({"opacity": "0"}, "fast");
        $("> .up", this).stop().animate({"opacity": "1"}, "fast");
    });

    var inhoud;
    if(!$('.mobile-navigation .bar .toggle-menu').is(":visible")) {
        $('.productenLijst li').hover(function () {
            inhoud = $("> a", this).text();
            $("> a", this).text(readMoreText);
            $("> a", this).stop().animate({color: "#D84848"}, "fast");
        }, function () {
            $("> a", this).text(inhoud);
            $("> a", this).stop().animate({color: "#AC9F8E"}, "fast");
        });

        $('#fourageProducten .columnBlock').hover(function () {
            $("> .productImage", this).stop().animate({"width": "300px"}, "slow");
        }, function () {
            $("> .productImage", this).stop().animate({"width": "110px"}, "slow");
        });
        $('#strooiselProducten .columnBlock').hover(function () {
            $("> .productImage", this).stop().animate({"width": "210px"}, "medium");
        }, function () {
            $("> .productImage", this).stop().animate({"width": "300px"}, "medium");
        });

        if ($('#niwo').length) {
            $('#niwo').hover(function () {
                $("> .hover", this).stop().animate({"opacity": "1"}, "fast");
                $("> .up", this).stop().animate({"opacity": "0"}, "fast");
            }, function () {
                $("> .hover", this).stop().animate({"opacity": "0"}, "fast");
                $("> .up", this).stop().animate({"opacity": "1"}, "fast");
            });
            $('#evo').hover(function () {
                $("> .hover", this).stop().animate({"opacity": "1"}, "fast");
                $("> .up", this).stop().animate({"opacity": "0"}, "fast");
            }, function () {
                $("> .hover", this).stop().animate({"opacity": "0"}, "fast");
                $("> .up", this).stop().animate({"opacity": "1"}, "fast");
            });
        }
    }

    if($('#fotogalerie').length){
        var activeFoto = 0;
        var totalFotos = $("#fotogalerie li").length;
        var galleryPlay = true;
        $("#fotogalerie li").eq(0).css({'display':'block'});

        function fotoRotateGallery(){
            if(galleryPlay){
                $.doTimeout( 4000, function(){
                    if(galleryPlay){
                        $("#fotogalerie li").eq(activeFoto).fadeOut('slow');
                        activeFoto = activeFoto + 1;
                        if(activeFoto == totalFotos){ activeFoto = 0; }
                        $("#fotogalerie li").eq(activeFoto).fadeIn('slow');
                        fotoRotateGallery();
                    }
                });
            }
        }
        fotoRotateGallery();
    }

    $(".colorbox").colorbox({rel:'colorbox', slideshow:true});

    scrollFunction();


    resizeMobile();

    $(window).resize(
        $.debounce( 200, resizeMobile )
    );

    $('.mobile-navigation .shader').click(function () {
        disableMobileMenu();
        disableMobileContact();
    });

    $('.mobile-navigation nav>ul>li>span').click(function () {
        $('.mobile-navigation nav>ul>li>ul').addClass('hide');
        $(this).parent().find('ul').removeClass('hide');
    });

    $('.mobile-navigation .bar .contact-button').click(function(){
        if( ! mobileContactActive){
            enableMobileContact();
        }
        else{
            disableMobileContact();
        }
    });

    $('.mobile-navigation .bar .toggle-menu, header .link-content').click(function(){
        if( ! mobileActive){
            enableMobileMenu();
        }
        else{
            disableMobileMenu();
        }
    });

});
$(window).load(function(){
    backgroundImageSize();
    $('#backgroundPhotos').fadeIn('fast');
});
$(window).resize(function() {
    scrollFunction();
    backgroundImageSize();
});