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

{% block head %}
<script type="text/javascript">

document.addEvent("domready", function(){
    $$('.package').each(function(item){
        id = item.get('id').match(/[0-9]+/)
        
        imgs = item.getElements('img');
        imgs[0].addEvent('click', function(e){
            new Request({
                method: 'get',
                url: '/json/remove_package/'+this,
                onSuccess: function(){
                    $('package_'+this).nix()
                    }.bind(this)
                }).send();
            e.stop();
        }.bind(id));
        
        imgs[1].addEvent('click', function(e){
            new Request({
                method: 'get',
                url: '/json/restart_package/'+this,
                onSuccess: function(){
                    $('package_'+this).nix()
                    }.bind(this)
                }).send();
            e.stop();
        }.bind(id));
        
         imgs[2].addEvent('click', function(e){
            new Request({
                method: 'get',
                url: '/json/push_to_queue/'+this,
                onSuccess: function(){
                    $('package_'+this).nix()
                    }.bind(this)
                }).send();
            e.stop();
        }.bind(id));
        
        item.getElement('.packagename').addEvent('click', function(){
            
            child = item.getElement('.children')
            if (child.getStyle('display') == "block"){
                child.dissolve();
            }else{
                child.reveal();
            }
        }.bind(item));
        
        
        item.getElements('.child').each(function(child){
            id = child.get('id').match(/[0-9]+/)
            imgs = child.getElements('.child_secrow img')
                    imgs[0].addEvent('click', function(e){
            new Request({
                method: 'get',
                url: '/json/remove_link/'+this,
                onSuccess: function(){
                    $('file_'+this).nix()
                    }.bind(this)
                }).send();
        }.bind(id));
        
        imgs[1].addEvent('click', function(e){
                        new Request({
                method: 'get',
                url: '/json/restart_link/'+this,
                onSuccess: function(){
                    $('file_'+this).nix()
                    }.bind(this)
                }).send();
        }.bind(id));
        });
        
    })
});
</script>
{% endblock %}

{% block title %}{% trans "Collector" %} - {{block.super}} {% endblock %}
{% block subtitle %}{% trans "Collector" %}{% endblock %}

{% block menu %}
<li>
    <a href="/" title=""><img src="{{ MEDIA_URL }}img/head-menu-home.png" alt="" /> {% trans "Home" %}</a>
</li>
<li>
    <a href="/queue/" title=""><img src="{{ MEDIA_URL }}img/head-menu-queue.png" alt="" /> {% trans "Queue" %}</a>
</li>
<li class="selected">
    <a href="/collector/" title=""><img src="{{ MEDIA_URL }}img/head-menu-collector.png" alt="" /> {% trans "Collector" %}</a>
</li>
<li>
    <a href="/downloads/" title=""><img src="{{ MEDIA_URL }}img/head-menu-development.png" alt="" /> {% trans "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="" />{% trans "Logs" %}</a>
</li>
<li class="right">
    <a href="/settings/"  class="action index" accesskey="x" rel="nofollow"><img src="{{ MEDIA_URL }}img/head-menu-config.png" alt="" />{% trans "Config" %}</a>
</li>{% endblock %}

{% block content %}
{% for id,package in content %}
<div id="package_{{id}}" class="package">
    <div class="packagename" style="cursor: pointer;">
        {{ package.name }}
        &nbsp;&nbsp;
        <img title="{% trans "Delete Package" %}" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />
        &nbsp;&nbsp;
        <img title="{% trans "Reset Package" %}" style="margin-left: -10px" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
        &nbsp;&nbsp;
        <img title="{% trans "Push Package to Queue" %}" style="margin-left: -10px" height="12px" src="{{ MEDIA_URL }}img/package_go.png" />
    </div>
    <div id="children_{{id}}" style="display: none;" class="children">
    {% for lid, child in package.links %}
    <div class="child" id="file_{{lid}}">
        <span class="child_status">
            <img src="/media/default/img/{{child.icon}}" style="width: 12px; height:12px;"/>
        </span>
        <span style="font-size: 15px">{{ child.name }}</span><br />
    <div class="child_secrow">
        <span class="child_status">{{ child.statusmsg }}</span>{{child.error}}&nbsp;
        <span class="child_status">{{ child.format_size }}</span>
        <span class="child_status">{{ child.plugin }}</span>
        <span class="child_status">{% trans "Folder:" %} {{child.folder}}</span>
        &nbsp;&nbsp;
        <img title="{% trans "Delete Link" %}" style="cursor: pointer;" width="10px" height="10px" src="{{ MEDIA_URL }}img/delete.png" />
        &nbsp;&nbsp;
        <img title="{% trans "Restart Link" %}" style="cursor: pointer;margin-left: -4px" width="10px" height="10px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
    </div>
    </div>
    {% endfor %}
    </div>
</div>
{% endfor %}
<!--table >
  <tr>
    <td colspan="3"><h1>!Paketname!</h1></td>
  </tr>
  <tr>
    <td><h2>test.png</h2></td>
    <td>loading</td>
    <td><a href="/"><img id="button" src="/img/button-delete.gif" alt="delete" /></a><a href="/"><img id="button" src="/img/button-unpause.gif" alt="unpause" /></a></td>
  </tr>
</table-->
{% endblock %}