function post(opts) {
    var x;

    try {
        x = new (this.XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0');
        x.open(opts.data ? 'POST' : 'GET', opts.url, 1);
        x.setRequestHeader('Content-type', 'application/json; charset=utf-16;');
        x.onreadystatechange = function () {
            x.readyState == 4 && opts.success && opts.success(x.responseText, x);
        };
        x.onerror = function () {
            opts.error && opts.error();
        };
        x.onloadend = function () {
            opts.end && opts.end();
        };
        x.send(opts.data);
    } catch (e) {
        window.console && console.log(e);
    }
};

function onSubmit(e) {
    e.preventDefault();
    var form = document.forms[0];
    var protocol = form.protocol.value;
    var host = form.host.value;
    var submitBtn = document.getElementById('submit');

    var obj = {
        name: form.fullName.value,
        email: form.email.value,
        phone: form.phone.value,
        createAccount: Number(form.createAccount.checked),
        subscribeMailings: Number(form.subscribeMailings.checked),

        product: form.product.value,
        site: form.site.value,
        referrer: form.referrer.value,
        page: form.page.value,
        utmSource: form.utmSource.value,
        utmMedium: form.utmMedium.value,
        utmTerm: form.utmTerm.value,
        utmContent: form.utmContent.value,
        utmCampaign: form.utmCampaign.value,

        birthDate: form.birthDate.value,
        countryCode: form.countryCode.value,
        countryName: form.countryName.value,
        cityName: form.cityName.value,

        pollName: form.pollName.value,
        pollOption: form.pollOption.value,
        pollValue: form.pollValue.value,

        ipAddress: form.ipAddress.value,

        cookie: form.cookie.value,
        groupName: form.groupName.value,
        //language: form.language.value,
        //serviceId: Number(form.serviceId.value),
        iid: "unica",
        pwd: "harun2016"

    };

    submitBtn.disabled = true;
    showLoading();

    var data = JSON.stringify(obj);
debugger;
    showRequest(data);
    document.getElementById('response').innerHTML = '';

    var url;

    if (host.length && host != '213.128.71.110:10443') {
        var serverURL = new URL(protocol + '://' + host.trim());
        url = '/json/ClientApplication?server=' + encodeURIComponent(serverURL.origin);
    } else {
        url = "http://" + "213.128.71.110:10443" + '/json/ClientApplication';
    }

    post({
        url: url,
        data: data,
        success: showResponse,
        end: function () {
            submitBtn.disabled = false;
            hideLoading();
        }
    });
}

function showRequest(str) {
    document.getElementById('request').innerHTML = pretty(str);
}

function showResponse(str) {
    document.getElementById('response').innerHTML = pretty(str);
}

function onClearClick(e) {
    var form = document.forms[0];

    form.product.value = '';
    form.fullName.value = '';
    form.email.value = '';
    form.phone.value = '';

    form.createAccount.checked = true;
    form.subscribeMailings.checked = true;

    form.birthDate.value = '';
    form.countryCode.value = '';
    form.countryName.value = '';
    form.cityName.value = '';
    form.referrer.value = '';
    form.page.value = '';
    form.pollName.value = '';
    form.pollOption.value = '';
    form.pollValue.value = '';

    form.utmSource.value = 'direct';
    form.utmMedium.value = 'direct';
    form.utmTerm.value = 'direct';
    form.utmContent.value = 'direct';
    form.utmCampaign.value = 'direct';

    form.ipAddress.value = '127.0.0.1';

    form.cookie = '';
    form.groupName = '';
    form.language = '';
    form.serviceId = '';

    document.getElementById('request').innerHTML = '';
    document.getElementById('response').innerHTML = '';

}
function onPreviewClick(e)
{
    e.preventDefault();
    var form = document.forms[0];
    var protocol = form.protocol.value;
    var host = form.host.value;
    var submitBtn = document.getElementById('submit');

    var obj = {
        name: form.fullName.value,
        email: form.email.value,
        phone: form.phone.value,
        createAccount: Number(form.createAccount.checked),
        subscribeMailings: Number(form.subscribeMailings.checked),

        product: form.product.value,
        site: form.site.value,
        referrer: form.referrer.value,
        page: form.page.value,
        utmSource: form.utmSource.value,
        utmMedium: form.utmMedium.value,
        utmTerm: form.utmTerm.value,
        utmContent: form.utmContent.value,
        utmCampaign: form.utmCampaign.value,

        birthDate: form.birthDate.value,
        countryCode: form.countryCode.value,
        countryName: form.countryName.value,
        cityName: form.cityName.value,

        pollName: form.pollName.value,
        pollOption: form.pollOption.value,
        pollValue: form.pollValue.value,

        ipAddress: form.ipAddress.value,

        cookie: form.cookie.value,
        groupName: form.groupName.value,
        language: form.language.value,
        serviceId: Number(form.serviceId.value)

    };

    var data = JSON.stringify(obj);
    showRequest(data);
}
function pretty(json) {
    json = JSON.stringify(JSON.parse(json), null, 2);
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }

        return '<span class="' + cls + '">' + match + '</span>';
    });
}

function onCBOPClick(e) {
    if (e.target.checked) {
        document.getElementById('optionalParameters').style.maxHeight = '550px';
    } else {
        document.getElementById('optionalParameters').style.maxHeight = '0';
    }
}

function showLoading() {
    document.getElementById('loading-main').style.display = 'flex';
}

function hideLoading() {
    document.getElementById('loading-main').style.display = 'none';
}