<?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">-->
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/window.css">
<!--<script src="{{ MEDIA_URL }}js/jquery-1.3.2.min.js"></script>-->
<script src="{{ MEDIA_URL }}js/sprintf.js"></script>
<script src="{{ MEDIA_URL }}js/funktions.js"></script>
<script src="{{ MEDIA_URL }}js/mootools-1.2.4-core.js"></script>
<script src="{{ MEDIA_URL }}js/mootools-1.2.4.2-more.js"></script>

<!--<script src="{{ MEDIA_URL }}js/jquery.progressbar.js"></script>-->
<!--<script src="{{ MEDIA_URL }}js/jquery.form.js"></script>-->

<title>{% block title %}pyLoad Webinterface{% endblock %}</title>

<script type="text/javascript">
var add_bg,add_box
document.addEvent("domready", function(){

	add_bg = new Fx.Tween($('add_bg'));
	add_box = new Fx.Tween($('add_box'));
	
	$('add_form').onsubmit=function() {
		$('add_form').target = 'upload_target'; //'upload_target' is the name of the iframe
		out();
	}

	$('add_reset').addEvent('click', function(){
		out();
	});
	
	var jsonStatus = new Request.JSON({
		url: "json/status",
		onSuccess: LoadJsonToContent,
		secure: false,
                async: true,
		initialDelay: 0,
		delay: 4000,
		limit: 30000
	})
	
	$('action_play').addEvent('click', function(){
		new Request({method: 'get', url: 'json/unpause'}).send();	
	});
	
	
	$('action_cancel').addEvent('click', function(){
		new Request({method: 'get', url: 'json/cancel'}).send();	
	});
	
	
	$('action_stop').addEvent('click', function(){
		new Request({method: 'get', url: 'json/pause'}).send();	
	});
	
	jsonStatus.startTimer();
	
});

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

function LoadJsonToContent(data)
{
	$("speed").set('text', Math.round(data.speed*100)/100);
	$("aktiv").set('text', data.activ);
	$("aktiv_from").set('text', data.queue);
}
function show(){
	add_bg.set('opacity', 0);
	$("add_bg").setStyle('display', 'block');
	add_bg.start('opacity',0.8);
	
	add_box.set('opacity', 0)
	$("add_box").setStyle('display', 'block');
	add_box.start('opacity',1)
}

function out(){
	add_bg.start('opacity',0).chain(function(){
		$('add_bg').setStyle('display', 'none');
	});
	
	add_box.start('opacity',0).chain(function(){
		$('add_box').setStyle('display', 'none');
	});
}

function AddBox()
{
	if ($("add_box").getStyle("display") == "hidden" || $("add_box").getStyle("display") == "none" || $("add_box").getStyle("opacity" == 0))
	{
		show();
	}
	else
	{
		out();
	}
}

</script>

{% block head %}
{% endblock %}
</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="#"  class="action play" accesskey="o" rel="nofollow">Play</a></li>
    <li id="action_cancel"><a href="#"  class="action cancel" accesskey="o" rel="nofollow">Cancel</a></li>
    <li id="action_stop"><a href="#"  class="action stop" accesskey="o" rel="nofollow">Stop</a></li>
    <li id="action_add"><a href="javascript:AddBox();"  class="action stop" accesskey="o" rel="nofollow" >Add</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>

{% include "default/window.html" %}
<body>