/**

* ModalWindow wrapper.
*
* @author Htmlstream
* @version 1.0
* @requires appear.js (v1.0.3), custombox.js (v4.0.1)
*
*/

;(function($){

'use strict';

$.HSCore.components.HSModalWindow = {

        /**
         *
         *
         * @var Object _baseConfig
         */
        _baseConfig : {
                bounds: 100,
                debounce: 50,
                overlayOpacity: .48,
                overlayColor: '#000000',
                speed: 400,
                type: 'onscroll', // onscroll, beforeunload, hashlink, ontarget, aftersometime
                effect: 'fadein',
                onOpen: function() {},
                onClose: function() {},
                onComplete: function() {},
        },

        /**
         *
         *
         * @var jQuery _pageCollection
         */
        _pageCollection : $(),

        /**
         * Initialization of ModalWindow wrapper.
         *
         * @param String selector (optional)
         * @param Object config (optional)
         *
         * @return jQuery - collection of initialized items.
         */
        init: function(selector, config) {

                var collection = $(selector);
                if(!collection.length) return;

                config = config && $.isPlainObject(config) ? $.extend({}, this._baseConfig, config) : this._baseConfig;
                config.selector = selector;

                this._pageCollection = this._pageCollection.add( collection.not(this._pageCollection) );

                if(config.autonomous) {

                        return this.initAutonomousModalWindows(collection, config);

                }

                return this.initBaseModalWindows(collection, config);

        },

        /**
         * Initialization of each Autonomous Modal Window of the page.
         *
         * @param jQuery collection
         * @param Object config
         *
         * @return jQuery collection
         */
        initBaseModalWindows: function(collection, config){

                return collection.on('click', function(e){

                        if(!('Custombox' in window)) return;

      var $this = $(this),
          target = $this.data('modal-target'),
          effect = $this.data('modal-effect') || config['effect'];

      if(!target || !$(target).length) return;

      new Custombox.modal(
        {
                                        content: {
                                                target: target,
                                                effect: effect,
                                                onOpen: function() {
                                                        config['onOpen'].call($(target));
                                                },
                                                onClose: function() {
                                                        config['onClose'].call($(target));
                                                },
                                                onComplete: function() {
                                                        config['onComplete'].call($(target));
                                                }
                                        },
                                        overlay: {
                                                color: $this.data('overlay-color') || config['overlayColor'],
                                                opacity: $this.data('overlay-opacity') || config['overlayOpacity'],
                                                speedIn: $this.data('speed') || config['speed'],
                                                speedOut: $this.data('speed') || config['speed']
                                        }
                                }
      ).open();

      e.preventDefault();

                });

        },

        /**
         * Initialization of each Autonomous Modal Window of the page.
         *
         * @param jQuery collection
         * @param Object config
         *
         * @return jQuery collection
         */
        initAutonomousModalWindows: function(collection, config) {

                var self = this;

                return collection.each(function(i, el) {

                        var $this = $(el),
                                        type = $this.data('modal-type');

                        switch(type) {

                                case 'hashlink' :

                                        self.initHashLinkPopup($this, config);

                                break;

                                case 'onscroll' :

                                        self.initOnScrollPopup($this, config);

                                break;

                                case 'beforeunload' :

                                        self.initBeforeUnloadPopup($this, config);

                                break;

                                case 'ontarget' :

                                        self.initOnTargetPopup($this, config);

                                break;

                                case 'aftersometime' :

                                        self.initAfterSomeTimePopup($this, config);

                                break;

                        }

                });

        },

        /**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initHashLinkPopup: function(popup, config) {

                var self = this,
                                hashItem = $(window.location.hash),
                                target = $('#' + popup.attr('id'));

                if(hashItem.length && hashItem.attr('id') ==  popup.attr('id')){

                        new Custombox.modal(
                                {
                                        content: {
                                                target: '#' + popup.attr('id'),
                                                effect: popup.data('effect') || config['effect'],
                                                onOpen: function() {
                                                        config['onOpen'].call($(target));
                                                },
                                                onClose: function() {
                                                        config['onClose'].call($(target));
                                                },
                                                onComplete: function() {
                                                        config['onComplete'].call($(target));
                                                }
                                        },
                                        overlay: {
                                                color: popup.data('overlay-color') || config['overlayColor'],
                                                opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
                                                speedIn: popup.data('speed') || config['speed'],
                                                speedOut: popup.data('speed') || config['speed']
                                        }
                                }
                        ).open();

                }

        },

        /**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initOnScrollPopup: function(popup, config) {

                var self = this,
                                $window = $(window),
                                breakpoint = popup.data('breakpoint') ? popup.data('breakpoint') : 0,
                                target = $('#' + popup.attr('id'));

                $window.on('scroll.popup', function() {

                        var scrolled = $window.scrollTop() + $window.height();

                        if(scrolled >= breakpoint) {

                                new Custombox.modal(
                                        {
                                                content: {
                                                        target: '#' + popup.attr('id'),
                                                        effect: popup.data('effect') || config['effect'],
                                                        onOpen: function() {
                                                                config['onOpen'].call($(target));
                                                        },
                                                        onClose: function() {
                                                                config['onClose'].call($(target));
                                                        },
                                                        onComplete: function() {
                                                                config['onComplete'].call($(target));
                                                        }
                                                },
                                                overlay: {
                                                        color: popup.data('overlay-color') || config['overlayColor'],
                                                        opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
                                                        speedIn: popup.data('speed') || config['speed'],
                                                        speedOut: popup.data('speed') || config['speed']
                                                }
                                        }
                                ).open();

                                $window.off('scroll.popup');

                        }

                });

                $window.trigger('scroll.popup');

        },

        /**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initBeforeUnloadPopup: function(popup, config) {

                var self = this,
                                count = 0,
                                target = $('#' + popup.attr('id')),
                                timeoutId;

                window.addEventListener('mousemove', function(e) {

                        if(timeoutId) clearTimeout(timeoutId);

            timeoutId = setTimeout(function() {

                if (e.clientY < 10 && !count) {

                            count++;

                            new Custombox.modal(
                                                {
                                                        content: {
                                                                target: '#' + popup.attr('id'),
                                                                effect: popup.data('effect') || config['effect'],
                                                                onOpen: function() {
                                                                        config['onOpen'].call($(target));
                                                                },
                                                                onClose: function() {
                                                                        config['onClose'].call($(target));
                                                                },
                                                                onComplete: function() {
                                                                        config['onComplete'].call($(target));
                                                                }
                                                        },
                                                        overlay: {
                                                                color: popup.data('overlay-color') || config['overlayColor'],
                                                                opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
                                                                speedIn: popup.data('speed') || config['speed'],
                                                                speedOut: popup.data('speed') || config['speed']
                                                        }
                                                }
                                        ).open();

                        }

                }, 10);

                });

        },

        /**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initOnTargetPopup: function(popup, config) {

                var self = this,
                                target = popup.data('target');

                if(!target || !$(target).length) return;

                appear({
                        bounds: config['bounds'],
                        debounce: config['debounce'],
                        elements: function() {
                                return document.querySelectorAll(target);
                        },
                        appear: function(element) {

                                new Custombox.modal(
                                        {
                                                content: {
                                                        target: '#' + popup.attr('id'),
                                                        effect: popup.data('effect') || config['effect'],
                                                        onOpen: function() {
                                                                config['onOpen'].call($(target));
                                                        },
                                                        onClose: function() {
                                                                config['onClose'].call($(target));
                                                        },
                                                        onComplete: function() {
                                                                config['onComplete'].call($(target));
                                                        }
                                                },
                                                overlay: {
                                                        color: popup.data('overlay-color') || config['overlayColor'],
                                                        opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
                                                        speedIn: popup.data('speed') || config['speed'],
                                                        speedOut: popup.data('speed') || config['speed']
                                                }
                                        }
                                ).open();

                        }
                });

        },

        /**
         *
         *
         * @param jQuery popup
         *
         * @return undefined
         */
        initAfterSomeTimePopup: function(popup, config) {

                var self = this,
                        target = $('#' + popup.attr('id'));

                setTimeout(function() {

                        new Custombox.modal(
                                {
                                        content: {
                                                target: '#' + popup.attr('id'),
                                                effect: popup.data('effect') || config['effect'],
                                                onOpen: function() {
                                                        config['onOpen'].call($(target));
                                                },
                                                onClose: function() {
                                                        config['onClose'].call($(target));
                                                },
                                                onComplete: function() {
                                                        config['onComplete'].call($(target));
                                                }
                                        },
                                        overlay: {
                                                color: popup.data('overlay-color') || config['overlayColor'],
                                                opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
                                                speedIn: popup.data('speed') || config['speed'],
                                                speedOut: popup.data('speed') || config['speed']
                                        }
                                }
                        ).open();

                }, popup.data('delay') ? popup.data('delay') : 10)

        }

};

})(jQuery);