var renderAwardWidget = function () {
    "use strict";

    // get brandData with widgetType, brandType, style, size, htid, langId
    var brandData = {
        awardId : "d8a84f0a-2374-40b8-acbb-ff2af522273f",
        brandType: "Hotels",
        style: "Light",
        sizeType: "Square",
        brandLink: "https://www.hotels.com",
        hotelLink: "https://www.hotels.com/hotel/details.html?pos=HCOM_US&locale=en_US&eds=false&hotel-id=477867#section-reviews",
        awardLink:"",
        hotelName: "BCA Furnished Apartments",
        htid: "7439992",
        widgetName: "Loved by Guests 2021 Hotels.com award",
        clickDomain: "https://apps.expediapartnercentral.com/lodging/content/award/static",
        language: "English",
        theme: "_LGBTQ+"
    };

    //get ${config} with widgetType, brandType, style ,size
    var config = {
        elementConfig:{"widgetElement":"<div class='awardWidgetContainer' style='width:152px;height:152px'>{{bgImgElement}}{{awImgElement}}{{linkElement}}<\/div>","bgImgElement":"<img src='{{data}}' width='152' style='position:absolute;width:inherit'>","awImgElement":"<img src='{{data}}' width='138' height='78' style='top:7px;left:7px;'>","linkElement":"<span class='widgetLink' style='top:91px;left:7px;width:138px;height:32px;line-height:15px;font-size:11px;'><span style='display:table-cell;vertical-align:middle;'>Awarded to <a class='hotelName mcard-ignore' title='{{data}}' style='text-decoration: underline;'>{{data}}<\/a><\/span><\/span>"},
        colorConfig:{"textColor":"color:#fff;","linkColor":"color:#fff;"}
    };

    var bgImgSrc = "https://apps.expediapartnercentral.com/lodging/content/award/static/images/bg7/" + brandData.brandType +
        "/" + "award_" + brandData.style + "_" + brandData.sizeType + ".png?"+ Math.random();

    var awImgSrc= "https://apps.expediapartnercentral.com/lodging/content/award/static/aw/"+brandData.sizeType+"/"+
        brandData.brandType+"/"+brandData.style+"_"+brandData.awardId+brandData.theme+".png?"+ Math.random();

    var widget = {
        defaultStyleConfig:{
        widgetElementStyle: "position:relative;top:0;right:0;bottom:0;left:0;display:inline-block;margin:auto;font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,&quot;Lucida Grande&quot;,sans-serif;",
        imgElementStyle: "position:absolute;",
        awImgElementStyle: "position:absolute;",
        linkElementStyle: "position:absolute;display:table;text-align:center;font-family:Helvetica;"
        },
        init: function () {
            this.widgetContainerBox = document.getElementById("widgetContainerBox");
            if (this.widgetContainerBox === null) {
                throw new Error("widget requires a container <div id='widgetContainerBox'></div>");
                return false;
            }
            this.isAddNofollow = this.widgetContainerBox.getAttribute("data-isaddnofollow");

            this.widgetElement = config.elementConfig.widgetElement;
            this.createWidgetElement();
            this.createBgImgElement();
            this.createAwImageElement();
            this.createLinkElement();
            this.renderWidget();
        },
        generateElementWithDefaultStyle: function(element, defaultStyle) {
            var preStyle, newStyle;
            var styleObj = element.match(/style='[\s\S]*?'/);
            if(styleObj){
                preStyle = styleObj[0];
                newStyle = preStyle.substring(0, 7) + defaultStyle + preStyle.substring(7);
                element = element.replace(/style='[\s\S]*?'/, newStyle);
            }
            return element;
        },
        createWidgetElement: function () {
            var defaultStyle = this.defaultStyleConfig.widgetElementStyle;
            this.widgetElement = this.generateElementWithDefaultStyle(this.widgetElement, defaultStyle);
        },
        createBgImgElement: function () {
            var bgImgElement = config.elementConfig.bgImgElement;
            bgImgElement = bgImgElement.replace(/\{\{data\}\}/, bgImgSrc);
            this.widgetElement = this.widgetElement.replace(/\{\{bgImgElement\}\}/, bgImgElement);
        },
        createAwImageElement: function () {
            var awImgElement = config.elementConfig.awImgElement;
            var defaultStyle = this.defaultStyleConfig.awImgElementStyle;
            awImgElement = this.generateElementWithDefaultStyle(awImgElement, defaultStyle);
            awImgElement = awImgElement.replace(/\{\{data\}\}/, awImgSrc);
            this.widgetElement = this.widgetElement.replace(/\{\{awImgElement\}\}/, awImgElement);
        },
        createLinkElement: function () {
            var linkElement = config.elementConfig.linkElement;
            var nameStyle, nameNewStyle;
            var defaultStyle = this.defaultStyleConfig.linkElementStyle + config.colorConfig.textColor;
            linkElement = this.generateElementWithDefaultStyle(linkElement, defaultStyle);

            if (this.isAddNofollow === "true") {
            linkElement = linkElement.replace(/<a /, "<a rel='nofollow' ");
            }
            linkElement = linkElement.replace(/\{\{data\}\}/g, brandData.hotelName);

            nameStyle = linkElement.match(/<a[\s\S]*?style='[\s\S]*?'/g)[0];
            nameNewStyle = nameStyle.substring(0,nameStyle.length-1) +  config.colorConfig.linkColor + nameStyle.substring(nameStyle.length-1);
            linkElement = linkElement.replace(/<a[\s\S]*?style='[\s\S]*?'/, nameNewStyle);
            this.widgetElement = this.widgetElement.replace(/\{\{linkElement\}\}/, linkElement);
        },
        renderWidget: function () {
            var that = widget;
            var div = document.createElement("div");
            div.innerHTML = that.widgetElement;
            div.style.display = "inline-block";
            div.style.margin = "0 2px";
            that.widgetElementNode = div.firstChild;
            that.widgetContainerBox.appendChild(div);

            that.displayThreeDotsForLongerText();
            that.addLinks();
        },
        addLinks: function () {
            var that = this;
            var imgLink = document.createElement("a");
            imgLink.href = brandData.hotelLink;
            imgLink.target = "_blank";
            imgLink.onclick = function() {that.sendLog("hotelLink", that);};
            imgLink.setAttribute("style", "position:absolute;width:inherit;height:inherit;z-index:900;");
            if (this.isAddNofollow === "true") {
                imgLink.setAttribute("rel", "nofollow");
            }
            this.widgetElementNode.insertBefore(imgLink, this.widgetElementNode.firstChild);

            var hotelLink = this.widgetElementNode.querySelector(".hotelName");
            hotelLink.href = "javascript:void(0)";
        },
        displayThreeDotsForLongerText: function () {
            var widgetLinkElement = this.widgetElementNode.querySelector(".widgetLink"),
                maxHeight = parseInt(widgetLinkElement.style.height);
            var hotelLinkElement = this.widgetElementNode.querySelector(".hotelName");

            while (hotelLinkElement.offsetHeight > maxHeight) {
                var replaceTextWithDots = function (text) {
                    return text.replace(/\s(\S)*$/, "...");
                };
                hotelLinkElement.innerHTML = replaceTextWithDots(hotelLinkElement.innerHTML);
            }
        },
        sendLog: function (clickType, that) {
            var img = new Image();
            img.src = brandData.clickDomain + "/statistics/click/"
                    + brandData.htid + "/"
                    + brandData.brandType + "/"
                    + brandData.awardId + ".gif"
                    + "?widgetName=" + brandData.widgetName
                    + "&clickType=" + clickType
                    + "&hotelName=" + brandData.hotelName
                    + "&language=" + brandData.language
                    + "&style=" + brandData.style
                    + "&size=" + brandData.sizeType
                    + "&noFollow=" + that.isAddNofollow
        }
    };

    widget.init();
    return widget;
};

if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
    renderAwardWidget();
} else {
    document.addEventListener("DOMContentLoaded", renderAwardWidget);
}