<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 style='border: 0; width: 100%; margin-bottom: 5px;' border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td style='width: 133px;'>
				<div id="imgdiv" style='padding: 2px; border: solid 1px #cccccc; margin: 0px 7px 2px 0px; box-shadow: 2px 3px 3px rgba(0,0,0,.3); width: 128px; height: 128px;'>
				</div>
			</td>
			<td>
				<table border='0' cellspacing='0' cellpadding='3' style='float: left; margin: 1px 0px 2px 0px; height: 134px; width: 100%; border-collapse: collapse;' class='grid'>
					<tr>
						<td><span>@CS_COLUMN_NAME</span>:</td>
						<td><span id="oauthname"></span></td>
					</tr>
					<tr>
						<td><span>@CS_COLUMN_EMAIL</span>:</td>
						<td><span id="Email"></span></td>
					</tr>
					<tr>
						<td>IP:</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>DNS:</td>
						<td><span id="IPHostname"></span></td>
					</tr>
				</table>
			</td>
		</tr>

	</table>

	<table id="thetable" style="border-collapse: collapse" class="Grid" border="0" cellspacing="0"
		cellpadding="2" width="100%">
		<tbody>

			<tr>
				<td><span>@CS_COLUMN_QUESTION</span>:</td>
				<td colspan="3">
					<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 colspan="3">
					<span id='ProductName'></span>
				</td>
			</tr>
			<tr id='CustomDataRow' style="display: none">
				<td><span>@CS_COLUMN_CUSTOMDATA</span>:</td>
				<td colspan="3">
					<span id='CustomData'></span>
				</td>
			</tr>
			<tr id='ContextDataRow' style="display: none">
				<td><span>@CS_COLUMN_CONTEXTDATA</span>:</td>
				<td colspan="3">
					<span id='ContextData'></span>
				</td>
			</tr>


			<tr>
				<td><span>@CS_COLUMN_SUBJECT</span>:</td>
				<td colspan="3" style="word-break: break-all;">
					<span id='PageTitle'></span>
				</td>
			</tr>
			<tr>
				<td>URL:</td>
				<td colspan="3" style="word-break: break-all;">
					<span id='Url'></span>
				</td>
			</tr>
			<tr>
				<td><span>@CS_COLUMN_REFERRER</span>:</td>
				<td colspan="3" 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>
				<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 colspan="3">
					<span id='UserAgent'></span>
				</td>
			</tr>
		</tbody>
	</table>
</body>

<script type="text/javascript">

	function html_encode(text) {
		if (!text) return "";
		return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\x22/g, "&quot;")
			.replace(/\x27/g, "&#39;").replace(/\n/g, "<br/>").replace(/\r/g, "").replace(/\t/g, '&#32;&#32;&#32;&#32;').replace(/\s/g, "&#32;");
	}

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

	function SetAuthInfo() {
		var url = props.OAuthAvatarUrl;
		if (url.indexOf("facebook.com") != -1 && /\/picture$/i.test(url))
			url = url + "?type=large";
		if (url.indexOf("googleusercontent.com") != -1 && /\?sz=(\d+)$/i.test(url))
			url = url.replace(/\?sz=(\d+)$/i, "?sz=200");

		document.getElementById("imgdiv").innerHTML = "<img src='" + html_encode(url) + "' style='float:left;width:128px;height:128px;' />";

		var img1 = "<img src='" + props.Mainsite + "images/icon_" + props.OAuthWebsite + ".png' style='width:16px;height:16px;'/>";
		var page = "";
		if (props.OAuthHomePage) {
			page = "<img onclick='window.open(this.getAttribute(\"href\"));' href='" + html_encode(props.OAuthHomePage) + "' src='" + props.Mainsite + "images/link.png' style='margin:2px 3px -1px 5px'>";
		}
		document.getElementById("oauthname").innerHTML = img1 + html_encode(props.DisplayName) + page;
	}

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

		//DONE:
		SetAuthInfo();


		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 = 3;
					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 (!props.CustomData)
			return "";
		if (props.CustomData.charAt(0) == "[") {
			var jsonarr = DecodeJson(props.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"), props.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>
