tag-manager-promo-for-two state-images-in-header.html

<div hidden id="tagManager-tag-manager-promo-desktop">
    <div id="tag-manager-promo-desktop-block" class="tag-manager-promo- hide-on-mobile">
        <!--  For Desktop Collapsed view -->
        <img 
            class="img-responsive tag-manager-promo-desktop-block close" 
            id="desktop-open-code"
            src=""
            alt="tag-manager-promo-">
        <!--  For Desktop Expanded view -->
        <img 
            class="img-responsive tag-manager-promo-desktop-block desktop-img open"
            id="desktop-show-code"
            src=""
            alt="tag-manager-promo-">
    </div>
    <div hidden id="mowdirect-tag-manager-promo-mobile">
        <div id="tag-manager-promo-mobile-block" class="tag-manager-promo hide-on-desktop">
            <!--  For Mobile Collapsed view -->
            <img 
                class="img-responsive tag-manager-promo-mobile-block close" 
                id="mobile-open-code"
                src=""
                alt="tag-manager-promo">
            <!--  For Mobile Expanded view -->
            <img 
                class="img-responsive tag-manager-promo-mobile-block open" 
                id="mobile-show-code"
                src=""
                alt="tag-manager-promo">
        </div>
    </div>
    <div hidden id="mowdirect-tag-manager-promo-tablet">
        <div id="tag-manager-promo-tab-block" class="tag-manager-promo hide-on-desktop">
            <!--  For Tablet Collapsed view -->
            <img 
                class="img-responsive tag-manager-promo-tab-block close" 
                id="tab-open-code"
                src=""
                alt="tag-manager-promo">
            <!--  For Tablet Expanded view -->
            <img 
                class="img-responsive tag-manager-promo-tab-block open" 
                id="tab-show-code"
                src=""
                alt="tag-manager-promo">
        </div>
    </div>
</div>
<style>
    .tag-manager-promo{
        background: rgb(0,0,0);
        background: linear-gradient(90deg, #002892 0%, #213070 100%);
        padding: 5px!important;
        position: relative;
    }
    .tag-manager-promo img{
        margin: 0 auto;
        display: block;
    }
    #tag-manager-promo-desktop-block + #header-nav{
        margin-top: 0;
    }
    #tag-manager-promo-desktop-block{
        max-width: 1260px;
        margin: 0 auto;
    }
    #tag-manager-promo-desktop-block,
    #tag-manager-promo-mobile-block,
    #tag-manager-promo-tab-block{
        display: none;
    }
    @media screen and (min-width: 1081px){
        #tag-manager-promo-desktop-block{
            display: block;
        }
        #tag-manager-promo-desktop-block a img{
            width: 90%;
        }
    }
    @media screen and (max-width: 1080px){
        #tag-manager-promo-tab-block{
            display: block;
        }
    }
    @media screen and (max-width: 650px){
        #tag-manager-promo-tab-block{
            display: none;
        }
        #tag-manager-promo-mobile-block{
            display: block;
        }
        #tag-manager-promo-mobile-block a img{
            margin: 20px 10px;
        }
    }
</style>
<script>
    var tagManager = tagManager || {};

    tagManager.promo = function () {
        var self = {
            init: function () {
                jQuery(document).ready(self.ready);
            },

            ready: function () {
                if (jQuery("#tagManager-tag-manager-promo-mobile #tag-manager-promo-mobile-block").length > 0 && jQuery("#tagManager-tag-manager-promo-tablet #tag-manager-promo-tab-block").length > 0) {
                    self.newYear();
                } else {
                    setTimeout(self.ready, 100);
                }

            },

            newYear: function () {
                console.log("New Year2019:", "Init");

                var mobileBFClone = jQuery("#tagManager-tag-manager-promo-mobile #tag-manager-promo-mobile-block")[0].outerHTML;
                var tabBFClone = jQuery("#tagManager-tag-manager-promo-tablet #tag-manager-promo-tab-block")[0].outerHTML;
                var desktopBFClone = jQuery("#tagManager-tag-manager-promo-desktop #tag-manager-promo-desktop-block")[0].outerHTML;
                jQuery("body").prepend(mobileBFClone);
                jQuery("body").prepend(tabBFClone);
                jQuery("body").prepend(desktopBFClone);
                //jQuery(desktopBFClone).insertBefore('#header-nav');


                jQuery(document).on("click", ".tag-manager-promo-  img.close", self.open);
                jQuery(document).on("click", ".tag-manager-promo-  img.open", self.close);

                if (typeof self.getCookie("tag-manager-promo-state") === "undefined") {
                    self.open();
                    console.log("New Year2019:", "Banner Minimized");
                } else {
                    self.close();
                    console.log("New Year2019:", "Banner Expanded");
                }
            },

            open: function () {
                jQuery(".tag-manager-promo-  img.open").show();
                jQuery(".tag-manager-promo-  img.close").hide();
                if (typeof self.getCookie("tag-manager-promo-state") !== "undefined") {
                    /** Expire the cookie by setting to hour before now */
                    self.createCookie("tag-manager-promo-state", "true", -1);
                }
            },

            close: function () {
                jQuery(".tag-manager-promo- img.open").hide();
                jQuery(".tag-manager-promo- img.close").show();
                /** Set cookie for one hour so that bar will re appear after one hour since last visit */
                self.createCookie("tag-manager-promo-state", "true", 1);
            },

            createCookie: function (name, value, hours)
            {
                if (hours) {
                    var date = new Date();
                    date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
                    var expires = "; expires=" + date.toGMTString();
                } else {
                    var expires = "";
                }
                document.cookie = name + "=" + value + expires + "; path=/";
            },

            getCookie: function (name) {
                var value = "; " + document.cookie;
                var parts = value.split("; " + name + "=");
                if (parts.length == 2)
                    return parts.pop().split(";").shift();
            }

        };
        return self;
    }();
    tagManager.promo.init();

</script>