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

    // get brandData with widgetType, brandType, style, size, htid, langId
    var brandData = {
        widgetType: "reviewCount",
        brandType: "Expedia",
        style: "Light",
        sizeType: "Square",
        brandLink: "https://www.expedia.com",
        hotelLink: "https://www.expedia.com/Puerto-Ayora-Hotels-Lava-House-Hostal.h17516766.Hotel-Information#section-reviews",
        hotelName: "Lava House Hostal",
        htid: "17516766",
        widgetName: "reviewCount",
        clickDomain: "https://apps.expediapartnercentral.com/lodging/content/award/static",
        score: {
            reviewScore: "8",
            reviewCount: "",
            grade: "Reviewcount"
        },
        language: "English (United States)"
    };

    //get brandConfig with widgetType, brandType, style ,size
    var config = {"widgetElement":"<div class='reviewWidgetContainer' style='width:152px;height:152px;font-family:ExpediaSansBold;'>{{imgElement}}{{scoreElement}}{{linkElement}}<\/div>","imgElement":"<img src='{{data}}' width='152'>","scoreElement":"<span class='widgetScore' style='top: 34px;width: 152px;text-align: center;font-size:9px;font-weight:bold;color:#002480;'><span style='font-size:30px;'>{{data}}<\/span><p style='font-size: 8px;font-family:ExpediaSansLight;margin: 0'>Verified Expedia Guest Review<\/p><\/span>","linkElement":"<span class='widgetLink' style='top:90px;height:30px;line-height:11px;width:138px;margin:0 7px;font-size:9px;color:#002480;'><span style='display:table-cell;vertical-align:middle;'><a class='hotelName mcard-ignore' title='{{data}}' style='font-weight:bold;font-family:ExpediaSansBold;color:#002480;text-decoration:none;'>{{data}}<\/a><\/span><\/span>","fontElement":["<style>@font-face {font-family: 'ExpediaSansBold';src: url('clickDomain\/font\/Expedia_Sans_Bold.ttf');}<\/style>","<style>@font-face {font-family: 'ExpediaSansLight';src: url('clickDomain\/font\/Expedia_Sans_Light.ttf');}<\/style>"]};

    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);
}