<html>
<head>
    <style>
        body {
            border-width: 0;
            padding: 0;
            margin: 0;
        }

        table.grid {
            border-collapse: collapse;
            font-family: 'Segoe UI', Verdana, Helvetica, Sans-Serif;
            font-size: 12px;
            background-color: White;
            color: #333333;
            width:100%;
        }

            table.grid td {
                border-width: 1px;
                padding: 2px 5px 2px 5px;
                border: 1px solid #cdcdcd;
            }

            table.grid tr:first-child td {
                border-top: 0;
            }

            table.grid tr td:first-child {
                border-left: 0;
            }

            table.grid tr:last-child td {
                border-bottom: 0;
            }

            table.grid tr td:last-child {
                border-right: 0;
            }

            table.grid img {
                cursor: pointer;
                margin-left: 2px;
                margin-right: 3px;
                margin-bottom: -1px;
            }
    </style>
</head>
<body>
    <table id="thetable" class="grid">
		<tbody>
			<tr>
				<td style="width:100px"><span>@CS_COLUMN_NAME</span>:</td>
				<td><span id='DisplayName'></span></td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_EMAIL</span>:</td>
				<td><span id='Email'></span></td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_QUESTION</span>:</td>
				<td><span id='Question'></span></td>
			</tr>
			<tr>
				<td>
					<span>@CS_COLUMN_SUBJECT</span>:
				</td>
				<td style="word-break: break-all;">
					<span id='PageTitle'></span>
				</td>
			</tr>
			<tr>
				<td><span>IP</span>:</td>
				<td><span id='IPAddress'></span></td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_LOCATION</span>:</td>
				<td>
					<span id='City'></span>&nbsp;
					<span id='RegionName'></span>&nbsp;
					<span id='CountryName'></span>
				</td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_DEPARTMENT</span>:</td>
				<td colspan="5">
					<span id='Department'></span>
				</td>
			</tr>
			<tr id='ProductRow' style="display: none">
				<td>
					<span>@CS_COLUMN_PRODUCT</span>:
				</td>
				<td>
					<span id='ProductName'></span>
				</td>
			</tr>
			<tr id='CustomDataRow' style="display: none">
				<td>
					<span>@CS_COLUMN_CUSTOMDATA</span>:
				</td>
				<td>
					<span id='CustomData'></span>
				</td>
			</tr>
			<tr id='ContextDataRow' style="display: none">
				<td>
					<span>@CS_COLUMN_CONTEXTDATA</span>:
				</td>
				<td>
					<span id='ContextData'></span>
				</td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_DURATION</span>:</td>
				<td><span id='BeginTime'></span></td>
			</tr>
			<tr>
				<td>DNS:</td>
				<td><span id='IPHostname'></span></td>
			</tr>
			<tr>
				<td>URL:</td>
				<td style="word-break: break-all;">
					<span id='Url'></span>
				</td>
			</tr>
			<tr>
				<td>
					<span>@CS_COLUMN_REFERRER</span>:
				</td>
				<td style="word-break: break-all;">
					<span id='Referrer'></span>
				</td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_RESOLUTION</span>:</td>
				<td><span id='ScreenSize'></span></td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_PLATFORM</span>:</td>
				<td>
					<span id='Browser'></span>/
					<span id='Platform'></span>/
					<span id='Culture'></span>
				</td>
			</tr>
			<tr>
				<td>
					<span>@CS_COLUMN_BROWSER</span>:
				</td>
				<td>
					<span id='UserAgent'></span>
				</td>
			</tr>
		</tbody>
    </table>
</body>

<script type="text/javascript">

    window.open = function (url) { window.external.OpenOuterBrowser(url) }

    function GetString(str) {
        return window.external.GetString(str);
    }
    var alltd = document.getElementsByTagName("SPAN");
    for (var i = 0; i < alltd.length; i++) {
        var td = alltd.item(i);
        var text = td.innerText.replace(/(^\s*)|(\s*$)/g, "");
        if (!text || text.charAt(0) != "@") continue;
        td.innerText = GetString(text.substring(1));
    }

    var props = {};

    function InsertLink(elementname, url) {
        if (!url) return;
        var e = document.getElementById(elementname);
        if (e == null) return;
        if (!e.innerHTML) return;

        var img = document.createElement("IMG");
        img.border = "0";
        img.src = props["Mainsite"] + "images/link.png";
        e.parentNode.insertBefore(img, e);
        img.style.cursor = "pointer";
        img.style.margin = "2px 3px -1px 0";
        img.onclick = function () {
            window.open(url);
        }
    }

	document.body.style.overflowX = "hidden";
	document.body.style.overflowY = "auto";
	var outdiv=null;
	function SetZoom() {
		if (!document.body.style.zoom) return;
		if(!outdiv)
		{
			outdiv=document.body.appendChild(document.createElement("div"));
			outdiv.appendChild(thetable);
			outdiv.style.zoom = document.body.style.zoom;
		}
		document.body.style.zoom = "";
		document.body.style.width = "";
	}


    function _set_property(name, value) {
        props[name] = value;

        var e = document.getElementById(name);
        if (e != null)
            e.innerText = value;

        if (name != "Done") return;

        SetZoom();

        InsertLink("Url", props["Url"]);
        InsertLink("Referrer", props["Referrer"]);
        //InsertLink("IPAddress",props["MapUrl"]);
        //InsertLink("IPHostname",props["MapUrl"]);
        //InsertLink("CountryName",props["MapUrl"]);
        if (props["MapUrl"]) {
            InsertLink("City", props["MapUrl"]);
        }

        var thetable = document.getElementById("thetable");

        for (var i = 10; i >= 0; i--) {
            var url = props["Url" + i];
            if (url) {
                var row = thetable.insertRow(-1);
                row.insertCell(-1).innerText = "URL #" + (i + 1) + ":";
                var td = row.insertCell(-1);
                td.colSpan = 3;
                td.style.cssText = "word-break: break-all;";
                var span = td.appendChild(document.createElement("SPAN"));
                span.id = "Url" + i;
                span.innerText = url;
                InsertLink("Url" + i, url);
            }
        }

        uformat = props["UserKeyInfoPageFormat"];
        pformat = props["ProductKeyPageFormat"];

        if (props["UserId"]) {

            //if(uformat)
            //	InsertLink("DisplayName",uformat.split("{0}").join(props["UserId"]));
            //else
            //	InsertLink("DisplayName","http://www.mylivechat.com/redirect.aspx?to=UserKeyInfoPageFormat");
        }

        if (props["ProductKey"]) {
            if (pformat)
                InsertLink("ProductName", pformat.split("{0}").join(props["ProductKey"]));
            //else
            //	InsertLink("ProductName","http://www.mylivechat.com/redirect.aspx?to=ProductKeyPageFormat");
        }

        if (props["ProductName"]) {
            var r = document.getElementById("ProductRow")
            if (r) r.style.display = "";
        }
        if (props["ContextData"]) {
            var r = document.getElementById("ContextDataRow")
            if (r) r.style.display = "";
        }
        if (props["CustomData"]) {
            var r = document.getElementById("CustomDataRow");
            var cdarr = DecodeJson(props["CustomData"]);
            if (cdarr) {
                for (var i = 0; i < cdarr.length; i++) {
                    var cd = cdarr[i];
                    var row = thetable.insertRow(r.rowIndex);
                    var td1 = row.insertCell(-1);
                    var td2 = row.insertCell(-1);
                    td1.innerText = cd.text;
                    td2.innerText = cd.value || "";
                    td2.style.cssText = "word-break: break-all;";
                }
            }
            else {
                r.style.display = "";
            }
        }


    }


    function DecodeJson(code) {
        var __date = Date;
        for (var p in window)
            eval("var " + p + ";");
        eval("var window;");
        eval("var Date=__date");
        try {
            return eval(code);
        }
        catch (x) {
        }
    }

    function GetCustomDataRowsHTML(cust, formatter) {
        if (!cust.CustomData)
            return "";
        if (cust.CustomData.charAt(0) == "[") {
            var jsonarr = DecodeJson(cust.CustomData);
            if (jsonarr) {
                var sb = [];
                for (var i = 0; i < jsonarr.length; i++) {
                    sb.push(formatter(jsonarr[i].text || "", jsonarr[i].value || ""));
                }
                return sb.join("");
            }
        }
        return formatter(GetString("CS_COLUMN_CUSTOMDATA"), cust.CustomData);
    }



    var debufshow = false;

    document.ondblclick = function (event) {
        event = window.event || event;
        if (!event.ctrlKey) return;
        if (debufshow) return;
        debufshow = true;
        ShowDebugInfo()
    }

    function ShowDebugInfo() {

        var thetable = document.getElementById("thetable");
        var row = thetable.insertRow(-1);
        var c1 = row.insertCell(-1);
        c1.colSpan = 2;
        c1.innerText = "Debug Values:";
        row.style.cssText = "background-color:gray;color:white;";

        for (var p in props) {
            var row = thetable.insertRow(-1);
            var c1 = row.insertCell(-1);
            var c2 = row.insertCell(-1);
            c1.innerText = p;
            c2.innerText = props[p];
        }
    }
</script>

</html>
