(function($){

    $(window).scroll(function(){

        $('*[data-on-screen]').each(function () {
            if (isElementInViewport($(this))) {
                // console.log('hoi');
                if (!$(this).hasClass('on-screen')) $(this).addClass('on-screen');
            }else{
                // if ($elem.hasClass('on-screen')) $elem.removeClass('on-screen');
            }


        });

        // Quick feature add: user has scrolled...
        // if (isElementInViewport($elem)) {
        //     if (!$elem.hasClass('on-screen')) $elem.addClass('on-screen');
        // }else{
        //     // if ($elem.hasClass('on-screen')) $elem.removeClass('on-screen');
        // }
    });



    function isElementInViewport(el) {
        if(el.length > 0) {
            //special bonus for those using jQuery
            if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];

            var rect = el.getBoundingClientRect();
            // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
            var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
            var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

            var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
            var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);

            return (vertInView && horInView);
        }
    }


    // function isElementInViewport(elem) {
    //     var $elem = $(elem);
    //
    //     // Get the scroll position of the page.
    //     var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    //     var viewportTop = $(scrollElem).scrollTop();
    //     var viewportBottom = viewportTop + $(window).height();
    //
    //     // Get the position of the element on the page.
    //     var elemTop = Math.round( $elem.offset().top );
    //     var elemBottom = elemTop + $elem.height();
    //
    //     return (elemTop < viewportBottom);
    //     //return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
    // }

    // var JOnScreen = function(element, options){
    //     var $elem = $(element);
    //     var obj = $(this);
    //
    //     $(window).scroll(function(){
    //
    //         // Quick feature add: user has scrolled...
    //         if (isElementInViewport($elem)) {
    //             if (!$elem.hasClass('on-screen')) $elem.addClass('on-screen');
    //         }else{
    //             // if ($elem.hasClass('on-screen')) $elem.removeClass('on-screen');
    //         }
    //     });
    // };
    //
    // $.fn.jOnScreen = function(options){
    //
    //     return this.each(function(options){
    //         var element = $(this);
    //         if (element.data('jOnScreen')) return;
    //         var jOnScreen = new JOnScreen(this, options);
    //         element.data('jOnScreen', jOnScreen);
    //     });
    //
    // };
    //
    // $(function(){
    //     $('[data-on-screen]').jOnScreen();
    // });

}(jQuery));