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

		 table.grid
{
            font-family: 'Segoe UI' , Verdana, Helvetica, Sans-Serif;
font-size: 12px;
	border-style: none;
	background-color: White;
	border-color: #cdcdcd;
}
table.grid img
{
	cursor:pointer;margin-left:2px;margin-right:3px;margin-bottom:-1px;
}
table.grid a
{
	text-decoration:none;
    color:black;
}
table.grid tr td
{
	border: solid 1px #cdcdcd;
	text-align:left;
    vertical-align:top;
}
	</style>
</head>
<body>
    <table id="thetable" class="grid">
		<tbody>
			<tr>
				<td><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_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>IP</span>:</td>
				<td>
					<span id='IPAddress'></span>
				</td>
			</tr>
			<tr>
				<td>DNS:</td>
				<td>
					<span id='IPHostname'></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_PLATFORM</span>:</td>
				<td>
					<span id='Browser'></span>/<span id='Platform'></span>/<span id='Culture'></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>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_TIME</span>:</td>
				<td style="word-break: break-all;">
					<span id='BeginTime'></span>
				</td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_END</span>:</td>
				<td style="word-break: break-all;">
					<span id='ActiveTime'></span>
				</td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_DURATION</span>:</td>
				<td style="word-break: break-all;">
					<span id='Duration'></span>
				</td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_DEPARTMENT</span>:</td>
				<td style="word-break: break-all;">
					<span id='Department'></span>
				</td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_RATING</span>:</td>
				<td style="word-break: break-all;">
					<span id='AgentRatingSpan'></span>
				</td>
			</tr>
			<!--
	<tr>
		<td><span>@CS_COLUMN_RESOLUTION</span>:</td>
		<td>
			<span id='ScreenSize'></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.gif";
		e.parentNode.insertBefore(img, e);
		img.style.verticalAlign = "middle";
		img.style.cursor = "pointer";
		img.style.width = "11px";
		img.style.height = "10px";
		img.style.margin = "1px 2px -1px 1px";
		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 = 5;
				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.colSpan = 1;
					td2.style.cssText = "word-break: break-all;";
				}
			}
			else {
				r.style.display = "";
			}
		}

		if (props["AgentRatingHTML"]) {
			AgentRatingSpan.innerHTML = props["AgentRatingHTML"];
		}

	}


	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>
