(function(window, angular) { 'use strict';

var lazySrc = angular.module('lazySrc', []);

var lazyLoader;

lazySrc.directive(
    "bnLazyScroll",
    function( $window, $document ) {
        lazyLoader = (function () {
            var images = [];
            var renderTimer = null;
            var renderDelay = 100;
            var win = $($window);
            var doc = $document;
            var documentHeight = doc.height();
            var documentTimer = null;
            var documentDelay = 2000;
            var scrollElement = null;
            var isWatchingWindow = false;

            function addImage(image) {
                images.push(image);
                if (!renderTimer) {
                    startRenderTimer();
                }
                if (!isWatchingWindow) {
                    startWatchingWindow();
                }
            }

            function removeImage(image) {
                for (var i = 0; i < images.length; i++) {
                    if (images[i] === image) {
                        images.splice(i, 1);
                        break;
                    }
                }
                if (!images.length) {
                    clearRenderTimer();
                    stopWatchingWindow();
                }
            }

            function setScroll(elem) {
                if (scrollElement != null) scrollElement.off("scroll.bnLazySrc", windowChanged);
                scrollElement = elem;
                if (!isWatchingWindow) {
                    startWatchingWindow();
                }
            }

            function checkDocumentHeight() {
                if (renderTimer) {
                    return;
                }
                var currentDocumentHeight = doc.height();
                if (currentDocumentHeight === documentHeight) {
                    return;
                }
                documentHeight = currentDocumentHeight;
                startRenderTimer();
            }

            function checkImages() {
                //console.log("Checking for visible images...");
                var visible = [];
                var hidden = [];
                // Determine the window dimensions.
                var windowHeight = win.height();
                var scrollTop = scrollElement != null ? scrollElement.scrollTop() : win.scrollTop();
                // Calculate the viewport offsets.
                var topFoldOffset = scrollElement != null ? -scrollTop : scrollTop;
                var bottomFoldOffset = scrollElement != null ? ( - topFoldOffset + windowHeight ) : ( topFoldOffset + windowHeight );
                // Query the DOM for layout and seperate the
                // images into two different categories: those
                // that are now in the viewport and those that
                // still remain hidden.
                for (var i = 0; i < images.length; i++) {
                    var image = images[i];
                    var v = image.isVisible(topFoldOffset, bottomFoldOffset);
                    if (v) {
                        visible.push(image);
                    } else {
                        hidden.push(image);
                    }
                }
                // Update the DOM with new image source values.
                for (var i = 0; i < visible.length; i++) {
                    visible[i].render();
                }
                // Keep the still-hidden images as the new
                // image queue to be monitored.
                images = hidden;
                // Clear the render timer so that it can be set
                // again in response to window changes.
                clearRenderTimer();
                // If we've rendered all the images, then stop
                // monitoring the window for changes.
                if (!images.length) {
                    stopWatchingWindow();
                }
            }

            // I clear the render timer so that we can easily
            // check to see if the timer is running.
            function clearRenderTimer() {
                clearTimeout(renderTimer);
                renderTimer = null;
            }

            // I start the render time, allowing more images to
            // be added to the images queue before the render
            // action is executed.
            function startRenderTimer() {
                renderTimer = setTimeout(checkImages, renderDelay);
            }

            // I start watching the window for changes in dimension.
            function startWatchingWindow() {
                isWatchingWindow = true;
                // Listen for window changes.
                win.on("resize.bnLazySrc", windowChanged);
                win.on("scroll.bnLazySrc", windowChanged);
                if (scrollElement != null) scrollElement.on("scroll.bnLazySrc", windowChanged);
                // Set up a timer to watch for document-height changes.
                documentTimer = setInterval(checkDocumentHeight, documentDelay);
            }

            // I stop watching the window for changes in dimension.
            function stopWatchingWindow() {
                isWatchingWindow = false;
                // Stop watching for window changes.
                win.off("resize.bnLazySrc");
                win.off("scroll.bnLazySrc");
                // Stop watching for document changes.
                clearInterval(documentTimer);
            }

            // I start the render time if the window changes.
            function windowChanged() {
                if (!renderTimer) {
                    startRenderTimer();
                }
            }

            // Return the public API.
            return ({
                addImage: addImage,
                removeImage: removeImage,
                setScroll: setScroll,
                update: windowChanged
            });
        })();

        return {
            restrict:"A",
            compile: function($element, attr) {
                lazyLoader.setScroll($element);
                return function(scope, element, attr) {
                    scope.$watch(function(){ return scope.recheckImages }, function(newVal, oldVal){
                        lazyLoader.update();
                    })
                };
            },
            scope: {
                recheckImages: "=recheckImages"
            }
        }
    }
);
lazySrc.directive(
    "bnLazySrc",
    function( $window, $document ) {
        // ------------------------------------------ //
        // ------------------------------------------ //
        // I represent a single lazy-load image.
        function LazyImage( element ) {
            // I am the interpolated LAZY SRC attribute of
            // the image as reported by AngularJS.
            var source = null;
            // I determine if the image has already been
            // rendered (ie, that it has been exposed to the
            // viewport and the source had been loaded).
            var isRendered = false;
            // I am the cached height of the element. We are
            // going to assume that the image doesn't change
            // height over time.
            var height = null;
            // ---
            // PUBLIC METHODS.
            // ---
            // I determine if the element is above the given
            // fold of the page.
            function isVisible( topFoldOffset, bottomFoldOffset ) {
                // If the element is not visible because it
                // is hidden, don't bother testing it.
                var pa = element.closest(".sc");
                if ( ! pa.is( ":visible" ) ) {
                    return( false );
                }
                // If the height has not yet been calculated,
                // the cache it for the duration of the page.
                if ( height === null ) {
                    height = element.height();
                }
                // Update the dimensions of the element.
                var top = element.offset().top;
                var bottom = ( top + height );
                // Return true if the element is:
                // 1. The top offset is in view.
                // 2. The bottom offset is in view.
                // 3. The element is overlapping the viewport.
                return(
                    (
                        ( top <= bottomFoldOffset ) &&
                        ( top >= topFoldOffset )
                    )
                    ||
                    (
                        ( bottom <= bottomFoldOffset ) &&
                        ( bottom >= topFoldOffset )
                    )
                    ||
                    (
                        ( top <= topFoldOffset ) &&
                        ( bottom >= bottomFoldOffset )
                    )
                );

            }
            // I move the cached source into the live source.
            function render() {
                if(isRendered) return;
                isRendered = true;
                renderSource();
            }
            // I set the interpolated source value reported
            // by the directive / AngularJS.
            function setSource( newSource ) {
                source = newSource;
                if ( isRendered ) {
                    renderSource();
                }
            }
            // ---
            // PRIVATE METHODS.
            // ---
            // I load the lazy source value into the actual
            // source value of the image element.
            function renderSource() {
                element[ 0 ].src = source;
            }
            // Return the public API.
            return({
                isVisible: isVisible,
                render: render,
                setSource: setSource
            });
        }
        // ------------------------------------------ //
        // ------------------------------------------ //
        // I bind the UI events to the scope.
        function link( $scope, element, attributes ) {
            var lazyImage = new LazyImage( element );
            // Start watching the image for changes in its
            // visibility.
            lazyLoader.addImage( lazyImage );
            // Since the lazy-src will likely need some sort
            // of string interpolation, we don't want to
            attributes.$observe(
                "bnLazySrc",
                function( newSource ) {
                    lazyImage.setSource( newSource );
                }
            );
            // When the scope is destroyed, we need to remove
            // the image from the render queue.
            $scope.$on(
                "$destroy",
                function() {
                    lazyLoader.removeImage( lazyImage );
                }
            );
        }
        // Return the directive configuration.
        return({
            link: link,
            restrict: "A"
        });
    }
);

})(window, window.angular);