/*------------------------------------------------------------------------*/
/*  Rodesk image slider functions
/*------------------------------------------------------------------------*/

var rodeskLazyLoad = (function($) {

    var settings, $lazyLoads;

    var defaults = {
        lazyLoad: ".js-lazy-load",
        lazyLoadLiquid: ".js-lazy-load-liquid",
        treshold: 300,

        classes: {
            loading: 'is-lazy-loading',
            loaded:  'is-lazy-loaded',
            liquid:  'js-img-liquid',
        },

        dataAttr: {
            aspect: 'data-aspect'
        }
    };

    /**
     * Calculate and define image ratio
     *
     * @param  {jQuery object} jQuery object with lazy load element
     */
    var _getImageRatio = function( $element ) {

        // Check if an image is defined
        if( $element.length > 0 ) {

            var width   = $element.width(),
                aspect  = $element.attr( settings.dataAttr.aspect ),
                height  = width * aspect;

            // If padding is defined return it
            if( height > 0 ) {
                // Round the padding
                return Math.round( height );
            }

            return false;

        }

    };

    /**
     * Reset image settings
     *
     * @param  {jQuery object} jQuery object with lazy load element
     */
    var _resetImage = function( $element ) {

        if( $element.length > 0 ) {

            // Remove the style attribute to reset the padding
            $element.removeAttr('style');

            // Remove loading class
            $element.removeClass( settings.classes.loading );

            // Add loaded class
            $element.addClass( settings.classes.loaded );
        }

    };

    /**
     * Set image settings
     *
     * @param  {jQuery object} jQuery object with lazy load element
     */
    var _setImage = function( $element ) {

        if( $element.length > 0 && !_isLoaded( $element ) ) {

            var imageHeight = _getImageRatio( $element ); // Get the height for this image

            // Set loading class
            $element.addClass( settings.classes.loading );

            // Add padding for ratio
            $element.css({ height : imageHeight + 'px' });

        }
    };

    /**
     * Loop all images for lazy loading and set there preferences
     *
     */
    var _setImages = function() {

        $lazyLoads.each( function() {

            // Set image preferences
            _setImage( $(this) );

        });
    };

    /**
     * Lazy load images
     * This function uses the jQuery unveil plugin
     *
     */
    var _lazyLoad = function() {

        // Lazy load images with unveil plugin
        $lazyLoads.unveil( settings.treshold , function() {

            $(this).load(function() {

                // Reset the image and remove all added styles
                _resetImage( $(this) );

                // Check if image needs image liquid
                if( $(this).hasClass( settings.lazyLoadLiquid.replace('.','') ) ) {

                    // Define image liquid parent
                    var liquidParent = $(this).parent();

                    // Add image liquid class to parent
                    liquidParent.addClass( settings.classes.liquid );

                    // Init imgLiquid for this image
                    rodeskDefaults.imgLiquidCustom( liquidParent );

                }

            });

        });
    };

    /**
     * Check if image is loaded
     *
     * @param  {jQuery object} jQuery object with lazy load element
     */
    var _isLoaded = function( $element ) {

        if( $element.length > 0 ) {

            // Check if element has loaded class
            if( $element.hasClass( settings.classes.loaded ) ) {
                return true;
            }
        }

        return false;

    };

   /**
     * Bind events to the Wallop slider
     */
    var _bindEvents = function() {

        $(window).on("resize", $.debounce(100, _setImages ));

    };

    /**
     * Setup the lazy load module
     */
    var _setup = function() {

        // Check if jQuery plugin is installed
        if( jQuery().unveil ) {

            // Load lazy loads elements
            $lazyLoads = $( settings.lazyLoad );

            // Bind events
            _bindEvents();

            // Set images
            _setImages();

            // Lazy load the images
            _lazyLoad();

        } else {
            throw new Error('jQuery plugin is needed for this module');
        }

    };

    /**
     * Init the lazy load module
     *
     * @param  {object} options Object of passed options
     */
    var init = function(options) {

        // Setup settings.
        options = options || {};
        settings = $.extend({}, defaults, options);

        // Setup.
        _setup();

    };

    return {
        init: init
    };

})(jQuery);