/*
 js loader: 1
 file: notice.js
*/

var AdvSnow = {
    paused: false,
    pause: function () {
        this.paused = true;
    },
    start: function () {
        this.paused = false;
    }
};

function isTouchDevice() {
    const prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
    const mq = function(query) {
        return window.matchMedia(query).matches;
    };

    if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
        return true;
    }

    // include the 'heartz' as a way to have a non matching MQ to help terminate the join
    // https://git.io/vznFH
    var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
    return mq(query);
}

(function ($, AdvSnow) {

    'use strict';

    $(function () {

        var $script = $('script[data-adv-widget]');
        var id = $script.data('adv-widget');
        var path = $script[0].src.split('?')[0];
        var softwareBaseUrl = path.split('/').slice(0, -2).join('/') + '/../../';

        var secret = $.urlParam('secret');
        $.getJSON(softwareBaseUrl + 'widget/' + id + (secret ? '?secret=' + secret : ''), function (response) {
            if (response) {
                if (response.calendar_id) {
                    if (response.padding_top > 0) {
                        $('body').css('transition', 'all .3s ease');
                        $('body').css('padding-top', response.padding_top + 'px');
                    }
                    var notice = new Notice(softwareBaseUrl, response);
                    notice.show();

                    if (window.location.hash.indexOf('day') > -1 || window.location.hash.indexOf('adventskalender') > -1) {
                        notice.openCalendar();
                    }
                }
                // if (response.snowFallEnabled && $(document).width() > 1023) {
                if (response.snowFallEnabled) {
                    $.snowFall(softwareBaseUrl);
                }
                // }
            }
        });
    });

    function Notice(softwareBaseUrl, options) {
        var vm = this;

        this.assetBasePath = softwareBaseUrl + 'assets/';
        this.$overlayWrapper = null;
        this.calendarLoaded = false;
        this.open = false;
        this.triggerTimeout = undefined;

        this.show = function () {

            var adventCalendarCss = this.assetBasePath + 'css/widget/overlay/default.css';

            var cssLink = $('<link rel="stylesheet" type="text/css" />').attr('href', adventCalendarCss);
            $('head').append(cssLink);

            this.$overlayWrapper = $('<div class="adv-widget-overlay"><div class="adv-widget-notice"><div class="adv-widget-notice-title"><div class="adv-stars-left"></div><div class="adv-title-inner">' + options.title + '</div><div class="adv-stars-right"></div></div><div class="adv-widget-notice-teaser">' + options.teaser + '</div><div class="adv-trigger"></div><div class="adv-close"></div><div class="adv-open"></div></div></div>');

            /*
            var dStartL = new $.Deferred();
            var dStartR = new $.Deferred();
             */
            var dCSS = new $.Deferred();

            cssLink.on('load', function () {
                dCSS.resolve()
            });
            /*
            this.$overlayWrapper.find('.adv-stars-left').load(this.assetBasePath + 'img/notice/stars_left.svg', function () {
                dStartL.resolve()
            });
            this.$overlayWrapper.find('.adv-stars-right').load(this.assetBasePath + 'img/notice/stars_right.svg', function () {
                dStartR.resolve()
            });
             */

            if(isTouchDevice()){
                this.$overlayWrapper.addClass('adv-touch-device');
            }

            //wait for requests
            $.when(/*dStartL, dStartR, */dCSS).then(function () {
                $('body').prepend(this.$overlayWrapper);

                if (!this.open) {
                    this.setColors(false);
                    this.forceFadeIn();
                } else {
                    this.setColors(true);
                }

                this.$overlayWrapper.find('.adv-open').on('click', function () {
                    this.openCalendar();
                }.bind(this));

                this.$overlayWrapper.find('.adv-trigger').on('click', function () {
                    this.openCalendar();
                }.bind(this));

                this.$overlayWrapper.find('.adv-close').on('click', function () {
                    this.closeCalendar();
                }.bind(this));

                $(window).scroll(function() {
                    vm.removeClassDelayed(vm.$overlayWrapper.find('.adv-widget-notice'), 'open', 0);
                });
            }.bind(this));
        };

        this.closeCalendar = function () {
            if(this.open){
                $('body').css('overflow', 'visible');
                this.open = false;
                this.setColors(false);
                this.$overlayWrapper.removeClass('open');
                this.triggerTimeout = setTimeout(function () {
                    $('body').removeClass('adv-blur-page');
                    if (AdvSnow) AdvSnow.start();
                }, 1000);
            }else{
                vm.addClassDelayed(vm.$overlayWrapper, 'closed', 0);
                vm.removeClassDelayed(vm.$overlayWrapper, 'closed', 1000);
                vm.removeClassDelayed(vm.$overlayWrapper.find('.adv-widget-notice'), 'open', 0);
            }
        };

        this.openCalendar = function () {
            if (AdvSnow) AdvSnow.pause();

            $('body').css('overflow', 'hidden');

            this.$overlayWrapper.find('.adv-widget-notice').unbind("click");
            this.open = true;

            this.setColors(true);
            if (!this.calendarLoaded) {
                this.calendarLoaded = true;
                var $calendarWrapper = $('<div></div>', {
                    class: 'adv-widget-wrapper'
                });
                this.$overlayWrapper.append($calendarWrapper);

                //load Template + Angular
                $.getScript(this.assetBasePath + 'bundle/adventCalendar/client', function () {
                    var secret = $.urlParam('secret');
                    $calendarWrapper.load(this.assetBasePath + '../calendar/' + options.calendar_id + '/widget/notice' + (secret ? '?secret=' + secret : ''), function () {
                        angular.bootstrap($calendarWrapper.find('> div'), ['adventCalendar']);
                    });
                }.bind(this));
            }

            $('body').addClass('adv-blur-page');
            clearTimeout(this.triggerTimeout);
            this.triggerTimeout = setTimeout(function () {
                this.$overlayWrapper.addClass('open');
            }.bind(this), 1000);
        };

        this.setColors = function (invert) {
            var notice = this.$overlayWrapper.find('.adv-widget-notice');
            var trigger = notice.find('> .adv-trigger');
            var title = notice.find('.adv-widget-notice-title');
            var stars = this.$overlayWrapper.find('.adv-stars-left, .adv-stars-right');

            var defaultColor = '#fff';

            if (!invert) {
                notice.css('background-color', options.color);
                trigger.css('background-color', options.color);
                title.css('color', defaultColor);
                stars.find('.fill-primary').css('fill', defaultColor);
            } else {
                notice.css('background-color', defaultColor);
                trigger.css('background-color', defaultColor);
                title.css('color', options.color);
                stars.find('.fill-primary').css('fill', options.color);
            }
        };

        this.addClassDelayed = function (e, c, d) {
            setTimeout(function () {
                e.addClass(c);
            }, d);
        };

        this.removeClassDelayed = function (e, c, d) {
            setTimeout(function () {
                e.removeClass(c);
            }, d);
        };

        this.forceFadeIn = function () {
            var ua = window.navigator.userAgent;
            if (ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1 || ua.indexOf("Edge/") > -1) {
                $(".adventCalendarButton a").addClass('cursorPointer');
            }

            this.addClassDelayed(this.$overlayWrapper.find('.adv-widget-notice'), 'open', 100);
            this.removeClassDelayed(this.$overlayWrapper.find('.adv-widget-notice'), 'open', 6000);

            this.$overlayWrapper.find('.adv-widget-notice').on('mouseout', function () {
                this.removeClassDelayed(this.$overlayWrapper.find('.adv-widget-notice'), 'open', 0);
            }.bind(this))
        }
    }


    $.snowFall = function (softwareBaseUrl) {
        var assetBasePath = softwareBaseUrl + 'assets/';
        $.getScript(assetBasePath + 'js/snow/snow.js');
    };

    $.urlParam = function (name) {
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if (results == null) {
            return null;
        }
        else {
            return decodeURI(results[1]) || 0;
        }
    }

})(jQuery, AdvSnow);