<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/default.css">
<script src="{{ MEDIA_URL }}/js/jquery-1.3.2.min.js"></script>
{% block head %}
{% endblock %}
<title>{% block title %}pyLoad Webinterface{% endblock %}</title>
<script type="text/javascript">
sprintfWrapper = {
 
	init : function () {
 
		if (typeof arguments == "undefined") { return null; }
		if (arguments.length < 1) { return null; }
		if (typeof arguments[0] != "string") { return null; }
		if (typeof RegExp == "undefined") { return null; }
 
		var string = arguments[0];
		var exp = new RegExp(/(%([%]|(\-)?(\+|\x20)?(0)?(\d+)?(\.(\d)?)?([bcdfosxX])))/g);
		var matches = new Array();
		var strings = new Array();
		var convCount = 0;
		var stringPosStart = 0;
		var stringPosEnd = 0;
		var matchPosEnd = 0;
		var newString = '';
		var match = null;
 
		while (match = exp.exec(string)) {
			if (match[9]) { convCount += 1; }
 
			stringPosStart = matchPosEnd;
			stringPosEnd = exp.lastIndex - match[0].length;
			strings[strings.length] = string.substring(stringPosStart, stringPosEnd);
 
			matchPosEnd = exp.lastIndex;
			matches[matches.length] = {
				match: match[0],
				left: match[3] ? true : false,
				sign: match[4] || '',
				pad: match[5] || ' ',
				min: match[6] || 0,
				precision: match[8],
				code: match[9] || '%',
				negative: parseInt(arguments[convCount]) < 0 ? true : false,
				argument: String(arguments[convCount])
			};
		}
		strings[strings.length] = string.substring(matchPosEnd);
 
		if (matches.length == 0) { return string; }
		if ((arguments.length - 1) < convCount) { return null; }
 
		var code = null;
		var match = null;
		var i = null;
 
		for (i=0; i<matches.length; i++) {
 
			if (matches[i].code == '%') { substitution = '%' }
			else if (matches[i].code == 'b') {
				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(2));
				substitution = sprintfWrapper.convert(matches[i], true);
			}
			else if (matches[i].code == 'c') {
				matches[i].argument = String(String.fromCharCode(parseInt(Math.abs(parseInt(matches[i].argument)))));
				substitution = sprintfWrapper.convert(matches[i], true);
			}
			else if (matches[i].code == 'd') {
				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)));
				substitution = sprintfWrapper.convert(matches[i]);
			}
			else if (matches[i].code == 'f') {
				matches[i].argument = String(Math.abs(parseFloat(matches[i].argument)).toFixed(matches[i].precision ? matches[i].precision : 6));
				substitution = sprintfWrapper.convert(matches[i]);
			}
			else if (matches[i].code == 'o') {
				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(8));
				substitution = sprintfWrapper.convert(matches[i]);
			}
			else if (matches[i].code == 's') {
				matches[i].argument = matches[i].argument.substring(0, matches[i].precision ? matches[i].precision : matches[i].argument.length)
				substitution = sprintfWrapper.convert(matches[i], true);
			}
			else if (matches[i].code == 'x') {
				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(16));
				substitution = sprintfWrapper.convert(matches[i]);
			}
			else if (matches[i].code == 'X') {
				matches[i].argument = String(Math.abs(parseInt(matches[i].argument)).toString(16));
				substitution = sprintfWrapper.convert(matches[i]).toUpperCase();
			}
			else {
				substitution = matches[i].match;
			}
 
			newString += strings[i];
			newString += substitution;
 
		}
		newString += strings[i];
 
		return newString;
 
	},
 
	convert : function(match, nosign){
		if (nosign) {
			match.sign = '';
		} else {
			match.sign = match.negative ? '-' : match.sign;
		}
		var l = match.min - match.argument.length + 1 - match.sign.length;
		var pad = new Array(l < 0 ? 0 : l).join(match.pad);
		if (!match.left) {
			if (match.pad == "0" || nosign) {
				return match.sign + pad + match.argument;
			} else {
				return pad + match.sign + match.argument;
			}
		} else {
			if (match.pad == "0" || nosign) {
				return match.sign + match.argument + pad.replace(/0/g, ' ');
			} else {
				return match.sign + match.argument + pad;
			}
		}
	}
}
sprintf = sprintfWrapper.init;

//var SetInver = new Array();

function HumanFileSize(size)
{
	var filesizename = new Array("KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
	var loga = Math.log(size)/Math.log(1024);
	var i = Math.floor(loga);
	var a = Math.pow(1024, i);
	return Math.round( size / a , 2) + " " + filesizename[i];
}

/*function UpdateLinks( SetInver, index )
{
	$("#aktiv_percent").text(parseInt($("#aktiv_percent").text)+1)
	setTimeout( UpdateLinks( SetInver, index+1 ), SetInver[index]*1000);
}*/

function LoadJsonToContent(data)
{
	JSONDATA = data;
	$("#speed").text(Math.round(data.speed*100)/100);
	$("#aktiv").text(data.queue);
	$("#queue").text(data.total);
	
	/*if( data.pause == false )
	{
		$("#action_play").hide();
		$("#action_pause").show();
	}
	else
	{
		$("#action_play").show();
		$("#action_pause").hide();
	}*/
	setTimeout(function()
   {
    $.getJSON('/json/status', LoadJsonToContent );
   }, 2000);
}
function LinksToContent(data)
{
	$("#LinksAktiv").text('');
	$.each(data, function(i,item)
	{
		$("#LinksAktiv").append('<tr id="link_'+item.id+'"><td>'+item.name+'</td><td>'+item.status+'</td><td>'+SecToRightTime(item.eta)+' @ '+Math.round(item.speed*100)/100+' kb/s</td><td>'+HumanFileSize(item.size)+'</td><td><font id="aktiv_percent">'+item.percent+'</font>% / '+HumanFileSize(item.size-item.kbleft)+'</td></tr>');
		//SetInver[i] = (item.size / 100 ) / item.speed ;
		//window.setInterval( $("#aktiv_percent").text(parseInt($("#aktiv_percent").text)+1), ((item.size / 100 ) / item.speed)*100);
		$("#LinksAktiv").append('<tr><td colspan="5"><div class="progress_bar" style="width: '+(100/item.size)*(item.size-item.kbleft)+'%;">&nbsp;</div></td></tr>');
		$(".progress_bar").animate({ width: "100%"}, (item.size / item.speed)*1000, "linear" );
	});
	//UpdateLinks(SetInver, 0);
	setTimeout(function()
   {
    $.getJSON('/json/links', LinksToContent );
   }, 4000);
	
}
function SecToRightTime(sek)
{
	vreturn = sek > 86400 ? sprintf('%d Tag%s ', sek / 86400, Math.floor(sek / 86400) != 1 ? 'e':'') : '';
	vreturn += sprintf('%02d:%02d:%02d', sek / 3600 % 24, sek / 60 % 60, sek % 60 );
	return vreturn;
}

$(document).ready(function(){
	//$('#action_pause').hide();
	
	
	/*$("#play").hover( 
	 function()
	 {  // mouseover 
		  $(this).attr("id", "highlight");
	 }, 
	 function()
	 {  // mouseout 
		  $(this).attr("id", "");
	 });*/
	$.getJSON('/json/links', LinksToContent );
	$.getJSON('/json/status', LoadJsonToContent );
});
</script>
</head>

<a class="anchor" name="top" id="top"></a>

<div id="head-panel">

<div id="head-search-and-login">

{% if user.is_authenticated %}
<img src="{{ MEDIA_URL }}img/head-login.png" alt="User:" style="vertical-align:middle; margin:2px" /><span style="padding-right: 2px;">{{user.username}}</span>
	<ul id="user-actions">
		<li><a href="/logout"  class="action logout" rel="nofollow">Logout</a></li>
		{% if user.is_staff %}
		<li><a href="/admin" class="action profile" rel="nofollow">Administrate</a></li>
		{% endif %}
		<li></li>
		<li></li>
	</ul>
{% else %}
    <span style="padding-right: 2px;">Please Login!</span>
{% endif %}

	</div>

	<a href="/"><img id="head-logo" src="{{ MEDIA_URL }}img/pyload-logo-edited3.5-new-font-small.png" alt="pyLoad" /></a>

	<div id="head-menu">
		<ul>
			
		{% block menu %}
		<li class="selected">
		    <a href="/" title=""><img src="{{ MEDIA_URL }}img/head-menu-home.png" alt="" /> Home</a>
		</li>
		<li>
		    <a href="/queue/" title=""><img src="{{ MEDIA_URL }}img/head-menu-download.png" alt="" /> Queue</a></li>
		<li>
		    <a href="/downloads/" title=""><img src="{{ MEDIA_URL }}img/head-menu-development.png" alt="" /> Downloads</a></li>
		<li class="right">
		    <a href="/logs/"  class="action index" accesskey="x" rel="nofollow"><img src="{{ MEDIA_URL }}img/head-menu-index.png" alt="" />Logs</a>
		</li>
		{% endblock %}
		
		</ul>
	</div>

	<div style="clear:both;"></div>
</div>

{% if perms.pyload.can_change_status %}
<ul id="page-actions2">
	<li id="action_play"><a href="/json/unpause"  class="action play" accesskey="o" rel="nofollow">Play</a></li>
    <li id="action_stop"><a href=""  class="action cancel" accesskey="o" rel="nofollow">Cancel</a></li>
    <li id="action_stop"><a href="/json/pause"  class="action stop" accesskey="o" rel="nofollow">Stop</a></li>
</ul>
{% endif %}

{% if perms.pyload.can_see_dl %}
<ul id="page-actions">
	<li><a class="action backlink">Speed: <b id="speed">{{ status.speed }}</b> kb/s</a></li>
    <li><a class="action cog">Active: <b id="aktiv">{{ status.activ }}</b> / <b id="aktiv_from">{{ status.queue }}</b></a></li>
    <li><a href=""  class="action revisions" accesskey="o" rel="nofollow">Reload page</a></li>
</ul><br />
{% endif %}

<div id="body-wrapper" class="dokuwiki">

<div id="content" lang="en" dir="ltr">

<h1>{% block subtitle %}pyLoad - Webinterface{% endblock %}</h1>

{% block statusbar %}
{% endblock %}


<br>

<div class="level1" style="clear:both">
</div>

{% for message in messages %}
	<b><p>{{message}}</p></b>
{% endfor %}

{% block content %}
{% endblock content %}

	<hr style="clear: both;" />

<div id="foot">© 2008-2010 the pyLoad Team

	<a href="#top" class="action top" accesskey="x"><span>Back to top</span></a><br />
	<!--<div class="breadcrumbs"></div>-->


</div>
</div>
</head>
<body>