jQizzle fo shizzle (I'm not cool)

jQizzle

$(function() {


    // Traverse DOM and create variables
    var html				=	$('html'),
        viewport            =   $(window),
        viewportWidth       =   viewport.width(),
        header              =   $('.js-header'),
        panelBG             =   $('.js-panel-bg'),
        panelBox            =   $('.js-panel'),
        distance            =   header.offset().top,
    	navigationToggler	=	$('.js-nav-toggle'),
    	nav					=	$('.js-nav');

    var scrollEventFired    =   false,
        resizeEventFired    =   false,
        throttleFrequency   =   1000;



    // Add js enabled hook
    html.removeClass('no-js').addClass('js');



    /*
     * Check the window size, load video for wide devices (assuming these are
     * on a quicker network speed). Otherwise load the default image.
     *
     * Depends on jQuery.
     */
    if(viewportWidth > 1025) {

        console.log("video time!" + viewportWidth);

        var video   = "home",
            path    = "/assets/video",
            bannerVideo = "<video preload autoplay loop class='panel-video js-panel-video' poster='" + path + "/" + video + ".jpg'><source src='" + path + "/" + video + ".webm' type='video/webm'><source src='" + path + "/" + video + ".ogv' type='video/ogg'><source src='" + path + "/" + video + ".mp4'></video>";

        // bannerLink.addClass('banner-w-video');
        panelBG.empty().append(bannerVideo);
    }
    else {

        console.log("picture time" + viewportWidth);

        // bannerLink.addClass('banner-w-image');
    }



    if(viewportWidth < 570) {

        // console.log(html.css('fontSize'));

        // var test = ;
        // var kakka = "url(" + panelBox.data("panel-bg") + ")";
        // panelBox.css('background-image', kakka);
        panelBox.each(function(index){
            $(this).css('background-image', "url(" + $(this).data("panel-bg") + ")");
        });      

    }
    else {

        panelBox.hover(function() {

            var test = "url(" + $(this).data("panel-bg") + ")";

            panelBG.css('background-image', test);
            panelBG.toggleClass('video-is-hidden');

            },function(){

                panelBG.css('background-image', '');
                panelBG.toggleClass('video-is-hidden');

        });

    }



    // Toggle class names on click event
    navigationToggler.click(function(e) {

        navigationToggler.toggleClass('is-active');
        header.toggleClass('is-active');
        nav.toggleClass('is-active');
    
        //Don't "return false" as it stops event propagation
        e.preventDefault();

    });



    viewport.scroll(function() {
        scrollEventFired = true;
    });


    viewport.resize(function() {
        resizeEventFired = true;
    });


    // Allow scroll event to run its course every 250ms
    setInterval(function() {

        if (scrollEventFired) {

            scrollEventFired = false;

            console.log('Scroll event fired');

        }

        if (resizeEventFired) {

            resizeEventFired = false;

            console.log('Resize event fired');

        }

    }, throttleFrequency);


});