<mef:set title="List of Online Members" container="two-col" css="country.css" js="graph" />

<style type="text/css">
<![CDATA[
span.country { margin: 0 4px; }
]]>
</style>

<script type="text/javascript">
<![CDATA[
Event.observe(window, 'load', function() {
  var stats = eval("(" + $("stats").value + ")");
  var data = [];
  for (var i in stats.country) {
    data.push({ label: i, value: parseInt(stats.country[i]) });
  }

  function insertChart(id, data) 
  {
    var chart = new pieChart(150, 150);
    if (!chart.render) return;
    chart.data = data;
    chart.render();
    $(id).appendChild(chart.getCanvas());
    var legend = chart.getLegend();
    legend.style.position = "absolute";
    legend.style.top = "0";
    legend.style.left = "160px";
    $(id).appendChild(legend);
  }

  insertChart('top-countries', data);

  data = [];
  for (var i in stats.os) {
    if (i != "-")
      data.push({ label: i, value: parseInt(stats.os[i]) });
  }
  insertChart('operating-systems', data);

  data = [];
  for (var i in stats.browser) {
    if (i != "-")
      data.push({ label: i, value: parseInt(stats.browser[i]) });
  }
  insertChart('browsers', data);
});
]]>
</script>

<div style="margin: 1em;">

<p><strong>Currently Online</strong>: {stats.human_count} Humans vs {stats.bot_count} Bots</p>

<div style="float: left; width: 320px;">
<p><strong>Browsers</strong>:</p>
<div id="browsers" style="position: relative;"></div>
</div>

<input id="stats" type="hidden" value="{stats|json|encode}" />

<div style="float: left; width: 320px;">
<p><strong>Operating Systems</strong>:</p>
<div id="operating-systems" style="position: relative;"></div>
</div>

<div style="float: left; width: 320px;">
<p><strong>Top Countries</strong>:</p>
<div id="top-countries" style="position: relative;"></div>
</div>

<h2 style="clear: left;">Online Users</h2>

<p align="right"><a href="/members/online-map">View on a Map</a></p>

<table class="sort-table" border="0" cellpadding="2" cellspacing="0" width="100%">
	<thead>
		<tr>
			<td>User</td>
			<td>Current Page</td>
			<td align="center">Last Seen</td>
			<td align="center">Browser</td>
			<td align="center">Operating System</td>
		</tr>
	</thead>
	<tbody>
		<tr id="m" mef:loop="members" mef:classes="even,odd">
			<td><span mef:if="m.country" title="{m.country}" class="country {m.country|lowercase}"></span><mef:if expr="m.pkMember"><mef:true><a href="/members/id/{m.pkMember}">{m.DisplayName}</a></mef:true><mef:false>{m.DisplayName}</mef:false></mef:if></td>
			<td mef:if="m.PageURL"><a href="http://www.allegro.cc{m.PageURL|htmlspecialchars}">{m.PageTitle}</a></td>
			<td mef:if="!m.PageURL">{m.PageTitle}</td>
			<td align="center">{m.LastPageAccess|nice_date}</td>
			<td align="center">{m.browser}</td>
			<td align="center">{m.os}</td>
		</tr>
	</tbody>
</table>

</div>