<div id="showoff" style="position:absolute;top:350px;left:15px;cursor:pointer;" onclick="showoff()">
	<input id="checkoff" type="checkbox" {% if data.all.showoff == 'true' %}checked="true"{% endif %}>
	<label for="checkoff"> Show Offline</label>
</div>

<div id="listusers">
{% for k, d in data %}
{% if k != 'all' %}
	<div style="border-bottom:1px dotted gray{% if d.state.showed == 'false' %}display:none;{% endif %}">
		<div id="listname" onclick="expand('{{k}}');">
		<img class="img-{{k}}" style="vertical-align:middle;{% if d.state.opened == 'close' %}transform:rotate(-90deg);{%endif%}" src="{% nav public %}img/arrowl.png" />
		<font class="{{k}}" size="2"><b>{{k}} ({{d.state.total}})</b></font><br/>
		</div>
		<div id="list" class="list-{{k}} list" roll="{{d.state.opened}}" {% if d.state.opened == 'close' %}style="display:none;"{%endif%}>
		{% for row in d %}
		{% if row.username != '' %}
			{% if row.ol == 1 %}
			<div id="online" class="online">
				<img title="online" style="vertical-align:middle;height:16px;width:16px;" src="{% nav public %}img/online.jpg" />
				<b><span id="friend-{{row.id}}" user="{{row.id}}" class="username online">{{row.username}}</span></b>
				<img class="msg-{{row.id}}" style="display:none;" src="{% nav public %}img/envelope.gif" />
				<sup class="num-{{row.id}}"></sup><br/>
				{% if k == 'store' %}<div style="font-size:10px;margin-left:25px;">{{row.nama}}</div>{% endif %}
			</div>
			{% else %}
			<div id="offline" class="offline" {% if data.all.showoff == 'false' %}style="display:none;"{%endif%}>
				<img title="offline" style="vertical-align:middle;height:16px;width:16px;" src="{% nav public %}img/offline.jpg" />
				<b><span id="friend-{{row.id}}" user="{{row.id}}" class="username offline">{{row.username}}</span></b>
				<img class="msg-{{row.id}}" style="display:none;" src="{% nav public %}img/envelope.gif" />
				<sup class="num-{{row.id}}"></sup><br/>
			</div>
			{% endif %}
		{% endif %}
		{% endfor %}
		</div>
	</div>
{% endif %}
{% endfor %}
</div>

<script type="text/javascript">
	$(document).ready(function() {
		$('#jmlonline').text('{{data.all.total}}');
		$('.username').click(function() {
			showviewchat($(this).attr('user'));
		});
	startrefresh();
	});
</script>