function form2Obj(f) {
        var elemArray = f.elements;
        var formObj = {};
        for (k = 0; k < elemArray.length; k++) {
            var input = elemArray[k];
            if (!input || !input.name || !input.value) continue;
            if (input.type === 'radio' && input.checked === true) {
                formObj[input.name] = input.value;
            } else if (input.type !== 'radio') {
                formObj[input.name] = input.value;
            }
        }
        return formObj;
    }

    (function (w, d) {
        var widgetUrl = "https://widget.trustist.com";
        var assetUrl = "https://wassets.trustist.com/assets";
        var businessKey = "kee1qzfn";
        var locationKey = "2kcyv0ov";
        var tenantKey = "";

        var template = '<div class="ts-survey" style="font-family: {{font-family}} !important; color: {{color}} !important;"><form method="post" action="' + widgetUrl + '/trustistsurvey"><!--questionsContent--><div><input type="hidden" name="businesskey" value="{{businesskey}}" /><input type="hidden" name="locationkey" value="{{locationkey}}" /><div class="ts-left"><button class="ts-submit" id="tsSubmit">{{submitText}}</button></div><div class="ts-right ts-logo"></div><div class="ts-clear"></div></div></form></div>';
        var questionTemplate = '<div class="ts-question-block"><div class="ts-question"><!--questionLabel--></div><!--questionTemplate--><hr /></div>';
        var questions = [
            "", // 0
            "<div class=\"ts-details\"><div class=\"ts-row\"><input type=\"text\" id=\"firstname\" name=\"firstname\" placeholder=\"First Name\" required value=\"{{firstName}}\"></div><div class=\"ts-row\"><input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Email Address\" required value=\"{{email}}\"></div></div>", // 1 - name and email address
            "<div class=\"ts-comments\"><textarea rows=\"3\" id=\"comments\" name=\"comments\" maxlength=\"1000\" placeholder=\"Your Thoughts And Comments\" ></textarea></div>", // 2 - comments
            "", // 3
            "", // 4
            "<fieldset class=\"ts-rating\"><legend><!--questionLabel--></legend>" +
            "<input type=\"radio\" id=\"star5\" name=\"rating\" value=\"5\" checked=\"checked\" /> <label for=\"star5\" title=\"Excellent - 5 stars\">&nbsp;</label>" +
            "<input type=\"radio\" id=\"star4\" name=\"rating\" value=\"4\" /> <label for=\"star4\" title=\"Good - 4 stars\">&nbsp;</label>" +
            "<input type=\"radio\" id=\"star3\" name=\"rating\" value=\"3\" /> <label for=\"star3\" title=\"Average - 3 stars\">&nbsp;</label>" +
            "<input type=\"radio\" id=\"star2\" name=\"rating\" value=\"2\" /> <label for=\"star2\" title=\"Poor - 2 stars\">&nbsp;</label>" +
            "<input type=\"radio\" id=\"star1\" name=\"rating\" value=\"1\" /> <label for=\"star1\" title=\"Very poor - 2 star\">&nbsp;</label>" +
            "</fieldset><div class=\"ts-clear\"></div>", // 5 - overall star rating
            "", // 6
            "", // 7
            "<div class=\"ts-details\"><div class=\"ts-row\"><input type=\"text\" id=\"firstname\" name=\"firstname\" placeholder=\"First Name\" required value=\"{{firstName}}\"></div><div class=\"ts-row\"><input type=\"text\" id=\"lastname\" name=\"lastname\" placeholder=\"Last Name\" required value=\"{{lastName}}\"></div><div class=\"ts-row\"><input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Email Address\" required value=\"{{email}}\"></div><div class=\"ts-row\"><input type=\"text\" id=\"postcode\" name=\"postcode\" placeholder=\"Postcode\" required></div></div>", // 8 - first name, last name, email, postcode
            "", // 9
            "<div class=\"ts-details\"><div class=\"ts-row\"><input type=\"text\" id=\"firstname\" name=\"firstname\" placeholder=\"First Name\" required value=\"{{firstName}}\"></div><div class=\"ts-row\"><input type=\"text\" id=\"lastname\" name=\"lastname\" placeholder=\"Last Name\" required value=\"{{lastName}}\"></div><div class=\"ts-row\"><input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Email Address\" required value=\"{{email}}\"></div><div class=\"ts-row\"><input type=\"text\" id=\"phone\" name=\"phone\" placeholder=\"Phone\" required></div></div>" // 10 - first name, last name, email, phone
        ];
        var completeTemplate = '<div class="ts-thank-you">{{thankYouText}}</div><div class="ts-right ts-logo"></div><div class="ts-clear"></div>';

        function start(f) { /in/.test(d.readyState) ? setTimeout(start, 5, f) : f(); }

        // add tags
        tsAddCssTag("https://fonts.googleapis.com/css?family=Roboto");
        tsAddCssTag(assetUrl + "/css/cleanslate.css");
        tsAddCssTag(assetUrl + "/css/survey.css");

        start(function () {
            // iterate over all widgets on the page and render
            var divs = d.querySelectorAll("[ts-reviewWidget],div.ts-reviewWidget");
            if (divs.length === 0) {
                return;
            }
            for (var i = 0; i < divs.length; i++) {
                tsDisplayWidget(divs[i], businessKey, locationKey);
            }
        });

        function tsDisplayWidget(target, businessKey, locationKey) {
            // get options before cleanslate
            var options = tsReadAttributes(target);

            target.className = "cleanslate";

            // see if the widget requested a different location
            var lkey = options.locationKey || locationKey;
            var bkey = options.businessKey || businessKey;

            // put the container on the page
            target.innerHTML = template
                .replace("{{font-family}}", options.fontFamily)
                .replace("{{color}}", options.color)
                .replace(new RegExp("{{businesskey}}", "g"), bkey)
                .replace(new RegExp("{{locationkey}}", "g"), lkey);

            // IE6 and below will not work
            // draw reviews
            var xhr = new XMLHttpRequest();
            var url = widgetUrl + "/surveydata?businessKey=" + bkey;
            if (typeof lkey !== "undefined" && lkey !== "") url += "&locationKey=" + lkey;
            xhr.open("GET", url);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    tsDrawSurvey(target, options, response);
                }
            };
            xhr.send();

            if (options.completeUrl != null) {
                // load url and replace content of completeTemplate
                var xhrComplete = new XMLHttpRequest();
                xhrComplete.open("GET", options.completeUrl);
                xhrComplete.onload = function () {
                    if (xhrComplete.status === 200) {
                        completeTemplate = xhrComplete.responseText;
                    }
                };
                xhrComplete.send();
            }
        }

        function tsDrawSurvey(target, options, response) {
            var allQuestionsTemplate = "";
            if (!response.questions) return;
            for (var i = 0; i < response.questions.length; i++) {
                var question = response.questions[i];
                var currentTemplate = questions[question.type];
                if (typeof currentTemplate !== "undefined") {
                    allQuestionsTemplate += questionTemplate.replace("<!--questionTemplate-->", currentTemplate).replace("<!--questionLabel-->", question.value);
                }
            }
            target.innerHTML = target.innerHTML
                .replace("<!--questionsContent-->", allQuestionsTemplate)
                .replace("{{submitText}}", response.submitText ?? "ADD REVIEW")
                .replace(new RegExp("{{firstName}}", "g"), options.firstName)
                .replace(new RegExp("{{lastName}}", "g"), options.lastName)
                .replace(new RegExp("{{email}}", "g"), options.email);

            // wire up the submit event
            var btnSubmit = d.getElementById("tsSubmit");
            btnSubmit.addEventListener("click", function (e) {
                e.preventDefault();
                e.stopPropagation();

                this.disabled = true;

                var inputs = this.form.querySelectorAll("[required]");
                var valid = true;

                for (var i = 0; i < inputs.length; i++) {
                    var input = inputs[i];
                    var val = input.value;

                    if (val === "") {
                        input.style.setProperty("border-color", "red", "important");
                        valid = false;
                        this.disabled = false;
                    }
                }

                if (valid) {
                    var json = form2Obj(this.form);
                    var data = { data: json };
                    var request = new XMLHttpRequest();
                    var url = widgetUrl + "/surveypost";
                    var async = true;
                    var method = "POST";
                    request.onload = function () {
                        target.innerHTML = completeTemplate
                            .replace("{{thankYouText}}", response.thankYouText ?? "Thank you for your review");
                    };
                    request.open(method, url, async);
                    request.setRequestHeader("Content-Type", "application/json");
                    request.send(JSON.stringify(data));
                }
            }, false);
        }

        function tsReadAttributes(target) {
            return {
                locationKey: target.getAttribute("ts-location"),
                businessKey: target.getAttribute("ts-business"),
                fontFamily: target.getAttribute("ts-font-family") || "Lato, Helvetica, sans-serif",
                color: target.getAttribute("ts-color") || "#5a6a74",
                firstName: target.getAttribute("ts-firstname") || "",
                lastName: target.getAttribute("ts-lastname") || "",
                email: target.getAttribute("ts-email") || "",
                completeUrl: target.getAttribute("ts-completeurl") || null,
            };
        }

        function tsCheckIfIncluded(file) {
            var links = d.getElementsByTagName("link");
            for (var i = 0; i < links.length; i++) {
                if (links[i].href.substr(-file.length) === file)
                    return true;
            }

            var scripts = d.getElementsByTagName("script");
            for (var j = 0; j < scripts.length; j++) {
                if (scripts[j].src.substr(-file.length) === file)
                    return true;
            }

            return false;
        }

        function tsAddCssTag(url) {
            var includedAlready = tsCheckIfIncluded(url);
            var head = d.getElementsByTagName("head")[0];

            if (!includedAlready) {
                var tag = d.createElement("link");
                tag.rel = "stylesheet";
                tag.type = "text/css";
                tag.href = url;
                head.appendChild(tag);
            }
        }
    })(window, document);