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

    // get brandData with widgetType, brandType, style, size, htid, langId
    var brandData = {
        widgetType: "rating",
        brandType: "Hotels",
        style: "Dark",
        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=461304#section-reviews",
        hotelName: "Princessa Vera Hotel Apartments",
        htid: "8356177",
        widgetName: "rating",
        clickDomain: "https://apps.expediapartnercentral.com/lodging/content/award/static",
        score: {
            reviewScore: "8.6",
            reviewCount: "170",
            grade: "Fabulous"
        },
        language: "English"
    };

    //get brandConfig with widgetType, brandType, style ,size
    var config = {"widgetElement":"<div class='reviewWidgetContainer' style='width:152px;height:152px'>{{imgElement}}{{gradeElement}}{{scoreElement}}{{countElement}}{{linkElement}}<\/div>","imgElement":"<img src='{{data}}' width='152'>","gradeElement":"<span class='widgetGrade' style='top:60px;width:130px;margin:0 11px;font-size:19px;color:#cb2c30;font-weight:normal;'>{{data}}<\/span>","scoreElement":"<span class='widgetScore' style='top:27px;left:0;width:100px;margin:0 26px;text-align:center;line-height:19px;font-size:19px;color:#cb2c30;'><strong style='font-size:49px;'>{{data}}<\/strong><\/span>","countElement":"<span class='widgetCount'><\/span>","linkElement":"<span class='widgetLink' style='top:88px;height:30px;line-height:15px;width:138px;margin:0 7px;font-size:11px;color:#cb2c30;'><span style='display:table-cell;vertical-align:middle;'><a class='hotelName mcard-ignore' title='{{data}}' style='color:#cb2c30;text-decoration:underline;text-decoration-color:#cb2c30;'>{{data}}<\/a><\/span><\/span>"};

    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;border:1px solid #333;",
            gradeElementStyle: "position:absolute;text-align:center;font-family:Helvetica;font-weight:bold;",
            scoreElementStyle: "position:absolute;",
            countElementStyle: "position:absolute;text-align:center;",
            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.widgetElement;
            this.createWidgetElement();
            this.createImageElement();
            if (brandData.widgetType === "rating") {
                this.createGradeElement();
                this.createCountElement();
            }
            this.createScoreElement();
            this.createLinkElement();

            this.img.onload = this.renderWidget;
            this.img.src = this.getImgSrc();;
        },
        getImgSrc: function () {
            var s3AwardImgUrl = "https://apps.expediapartnercentral.com/lodging/content/award/static/images/bg7/",
                bgImgSrc;
            if (brandData.widgetType === "rating") {
                bgImgSrc = s3AwardImgUrl + brandData.brandType + "/" + "review_" + brandData.style +
                "_" + brandData.sizeType + ".png?"+ Math.random();
            } else if (brandData.widgetType === "recommendation") {
                bgImgSrc = s3AwardImgUrl + brandData.brandType + "/" + "review_" + brandData.style +
                "_" + brandData.sizeType + "_" + brandData.score.grade + ".png?"+ Math.random();
            } else if (brandData.widgetType === "reviewCount") {
                bgImgSrc = s3AwardImgUrl + brandData.brandType + "/" + "review_" + brandData.style +
                "_" + brandData.sizeType + "_" + brandData.score.grade + ".png?"+ Math.random();
            }
            return bgImgSrc;
        },
        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;
        },
        createImageElement: function() {
            var img = new Image();
            img.setAttribute("style", "position:absolute;width:inherit;height:inherit;");
            this.img = img;

            this.widgetElement = this.widgetElement.replace(/\{\{imgElement\}\}/, "");
        },
        createWidgetElement: function() {
            var defaultStyle = this.defaultStyleConfig.widgetElementStyle;
            this.widgetElement = this.generateElementWithDefaultStyle(this.widgetElement, defaultStyle);
        },
        createGradeElement: function() {
            var gradeElement = config.gradeElement;
            var defaultStyle = this.defaultStyleConfig.gradeElementStyle;
            gradeElement = this.generateElementWithDefaultStyle(gradeElement, defaultStyle);
            gradeElement = gradeElement.replace(/\{\{data\}\}/, brandData.score.grade);
            this.widgetElement = this.widgetElement.replace(/\{\{gradeElement\}\}/, gradeElement);
            if (config.fontElement) {
                this.addFontStyle();
            }
        },
        createScoreElement: function() {
            var scoreElement = config.scoreElement;
            var defaultStyle = this.defaultStyleConfig.scoreElementStyle;
            scoreElement = this.generateElementWithDefaultStyle(scoreElement, defaultStyle);
            scoreElement = scoreElement.replace(/\{\{data\}\}/, brandData.score.reviewScore);
            this.widgetElement = this.widgetElement.replace(/\{\{scoreElement\}\}/, scoreElement);
        },
        createCountElement: function() {
            var countElement = config.countElement;
            var defaultStyle = this.defaultStyleConfig.countElementStyle;
            countElement = this.generateElementWithDefaultStyle(countElement, defaultStyle);
            countElement = countElement.replace(/\{\{data\}\}/, brandData.score.reviewCount);
            this.widgetElement = this.widgetElement.replace(/\{\{countElement\}\}/, countElement);
        },
        createLinkElement: function() {
            var linkElement = config.linkElement;
            var defaultStyle = this.defaultStyleConfig.linkElementStyle;
            linkElement = this.generateElementWithDefaultStyle(linkElement, defaultStyle);
            if (this.isAddNofollow === "true") {
                linkElement = linkElement.replace(/<a /, "<a rel='nofollow' ");
            }
            linkElement = linkElement.replace(/\{\{data\}\}/g, brandData.hotelName);
            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.widgetElementNode.insertBefore(that.img, that.widgetElementNode.firstChild);

            that.displayThreeDotsForLongerText();
            that.addLinks();
            /*var textElement = widgetContainer.querySelector(".widgetHotelLink span");
            this.displayThreeDotsForLongerText(textElement, parseInt(height));*/
        },
        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.parentNode.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.widgetType + ".gif"
                    + "?widgetName=" + brandData.widgetName
                    + "&clickType=" + clickType
                    + "&hotelName=" + brandData.hotelName
                    + "&language=" + brandData.language
                    + "&style=" + brandData.style
                    + "&size=" + brandData.sizeType
                    + "&noFollow=" + that.isAddNofollow
        },
        addFontStyle() {
            var node = document.createElement('div'),
            parent = document.getElementsByTagName('head')[0];
            config.fontElement.forEach(function (oneFont) {
                var newfont = oneFont.replace(/clickDomain/g, brandData.clickDomain);
                node.innerHTML = newfont;
                parent.insertBefore(node.lastChild, parent.firstChild);
            });
        }
    };

    widget.init();
    return widget;
};

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