<?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">
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/jquery-ui-1.7.2.custom.css">
<script src="{{ MEDIA_URL }}js/jquery-1.3.2.min.js"></script>
<!--<script src="{{ MEDIA_URL }}js/jquery-ui-1.7.2.custom.min.js"></script>-->
<script src="{{ MEDIA_URL }}js/sprintf.js"></script>
<script src="{{ MEDIA_URL }}js/funktions.js"></script>
<script src="{{ MEDIA_URL }}js/jquery.progressbar.js"></script>
{% block head %}
{% endblock %}
<title>{% block title %}pyLoad Webinterface{% endblock %}</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('/json/links', LinksToContent );
$.getJSON('/json/status', LoadJsonToContent );
});
/*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);
setTimeout(function()
{
$.getJSON('/json/status', LoadJsonToContent );
}, 2000);
}
function LinksToContent(data)
{
$.each(data, function(i,item)
{
//$("#LinksAktiv").append('<tr id="link_'+item.id+'"><td id="link_'+item.id+'_name">'+item.name+'</td><td id="link_'+item.id+'_status">'+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)+'%;"> </div></td></tr>');
//$(".progress_bar").animate({ width: "100%"}, (item.size / item.speed)*1000, "linear" );
//var width = (100/item.size)*(item.size-item.kbleft);
//alert(width);
//$(".link_"+item.id+"_pgb").animate({ width: +"%"}, /*(item.size / item.speed)*1000*/1500, "linear" );
//$("#link_"+item.id+"_pgb").fadeIn();
/*$("#link_"+item.id+"_pgb").progressBar();
$("#link_"+item.id+"_pgb").progressBar('option' , 'width' , '100%');
$("#link_"+item.id+"_pgb").progressBar('option' , 'showText' , true);
$("#link_"+item.id+"_pgb").progressBar('option' , 'textFormat' , 'percentage');*/
$("#link_"+item.id+"_pgb").progressBar((100/item.size)*(item.size-item.kbleft));
});
//UpdateLinks(SetInver, 0);
setTimeout(function()
{
$.getJSON('/json/links', LinksToContent );
}, 1000);
}
</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="/add/" title=""><img src="{{ MEDIA_URL }}img/head-menu-development.png" alt="" />Add</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.queue }}</b> / <b id="aktiv_from">{{ status.total }}</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>