{% extends 'default/base.html' %}

{% block head %}

<script type="text/javascript">

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

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)+'%;">&nbsp;</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>

{% endblock %}

{% block subtitle %}
Active Downloads
{% endblock %}

{% block content %}
<table width="100%" class="queue">
  <tr class="header">
    <th>Name</th>
    <th>Status</th>
    <th>Infos</th>
    <th>Size</th>
    <th>Progress</th>
  </tr>
  <tbody id="LinksAktiv">
  
  {% for link in content %}
  <tr id="link_{{ link.id }}">
    <td id="link_{{ link.id }}_name">{{ link.name }}</td>
    <td id="link_{{ link.id }}_status">{{ link.status }}</td>
    <td id="link_{{ link.id }}_info">{{ link.info }}</td>
    <td id="link_{{ link.id }}_kbleft">{{ link.size }}</td>
    <td id="link_{{ link.id }}_percent"><font id="link_{{ link.id }}_aktiv_percent">{{ link.percent }}</font>% / <font id="link_{{ link.id }}_aktiv_percent">{{ link.kbleft }}</font><a href="#" onclick="javascript:$('#pb1').progressBar(50);">load</a></td>
  </tr>
  <tr>
    <td colspan="5">
        <span id="link_{{ link.id }}_pgb" class="progressBar" style="width: {{ link.percent }}%;"></span>
    </td>
  </tr>
  {% endfor %}
  
  <tbody>
</table>
{% endblock %}