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

<script type="text/javascript">

var em;
var operafix = (navigator.userAgent.toLowerCase().search("opera") >= 0);

document.addEvent("domready", function(){
	em = new EntryManager();
});

var EntryManager = new Class({
    initialize: function(){
        this.json = new Request.JSON({
		url: "json/links",
                secure: false,
                async: true,
		onSuccess: this.update.bind(this),
		initialDelay: 0,
		delay: 2500,
		limit: 30000
	});
	
        this.ids = [{% for link in content %}
        {% if forloop.last %}
            {{ link.id }}
        {% else %}
         {{ link.id }},
        {% endif %}
        {% endfor %}];
        
        this.entries = [];
        this.container = $('LinksAktiv');
        
        this.parseFromContent();
            
        this.json.startTimer();
    },
    parseFromContent: function(){
        this.ids.each(function(id,index){
            var entry = new LinkEntry(id);
            entry.parse();
            this.entries.push(entry)
            }, this);
    },
    update: function(data){
        
        try{
        this.ids = this.entries.map(function(item){
            return item.fid
            });
        
        this.ids.filter(function(id){
            return !this.ids.contains(id)
        },data).each(function(id){
            var index = this.ids.indexOf(id);
            this.entries[index].remove();
            this.entries = this.entries.filter(function(item){return item.fid != this},id);
            this.ids = this.ids.erase(id)
            }, this);
        
        data.links.each(function(link, i){
            if (this.ids.contains(link.fid)){
                
                var index = this.ids.indexOf(link.fid);
                this.entries[index].update(link)
            
            }else{
                var entry = new LinkEntry(link.fid);
                entry.insert(link);
                this.entries.push(entry);
                this.ids.push(link.fid);
                this.container.adopt(entry.elements.tr,entry.elements.pgbTr);
                entry.fade.start('opacity', 1);
                entry.fadeBar.start('opacity', 1);
                
            }
            }, this)
                
        }catch(e){
            //alert(e)
        }
    }
});


var LinkEntry = new Class({
        initialize: function(id){
            this.fid = id;
            this.id = id;
        },
        parse: function(){
            this.elements = {
                tr: $("link_{id}".substitute({id: this.id})),
                name: $("link_{id}_name".substitute({id: this.id})),
                status: $("link_{id}_status".substitute({id: this.id})),
                info: $("link_{id}_info".substitute({id: this.id})),
                bleft: $("link_{id}_bleft".substitute({id: this.id})),
                percent: $("link_{id}_percent".substitute({id: this.id})),
                remove: $("link_{id}_remove".substitute({id: this.id})),
                pgbTr: $("link_{id}_pgb_tr".substitute({id: this.id})),
                pgb: $("link_{id}_pgb".substitute({id: this.id}))
            };
            this.initEffects();
        },
        insert: function(item){
            try{
                    


            this.elements = {
                tr: new Element('tr', {
                'html': '',
                'styles':{
                    'opacity': 0,
                }
                }),
                status: new Element('td', {
                'html': '&nbsp;',
                }),
                statusspan: new Element('span', {
                'html': item.statusmsg,
                'class': 'label label-default',
                        'styles':{
                                
                        }
                }),
                name: new Element('td', {
                'html': item.name
                }),
                info: new Element('td', {
                'html': item.info
                }),
                bleft: new Element('td', {
                'html': humanFileSize(item.size)
                }),
                percent: new Element('span', {
                'html': item.percent+ '% / '+ humanFileSize(item.size-item.bleft)
                }),
                remove: new Element('span',{
                'html': '',
                'class': 'glyphicon glyphicon-remove',
                        'styles':{
                            'margin-left': '3px',
                        }
                }),
                pgbTr: new Element('tr', {
                'html':'',
                        'styles':{
                            'border-top-color': '#fff',
                        }
                }),
                progress: new Element('div', {
                'html':'',
                'class':'progress',
                        'styles':{
                            'margin-bottom': '0px',
                        }
                }),
                pgb: new Element('div', {
                'html':'',
                'class':'progress-bar progress-bar-striped active',
                'role':'progress',
                'styles':{
                    'width': item.percent+'%',
                    'background-color': '#ddd'
                }
                })
                
            };
            
            
            this.elements.status.adopt(this.elements.statusspan);
            this.elements.progress.adopt(this.elements.pgb);
            this.elements.tr.adopt(this.elements.status,this.elements.name,this.elements.info,this.elements.bleft,new Element('td').adopt(this.elements.percent,this.elements.remove));
            this.elements.pgbTr.adopt(new Element('td',{'colspan':5}).adopt(this.elements.progress));
            this.initEffects();
            }catch(e){
                alert(e)
            }
        },
        initEffects: function(){
            if(!operafix)
                this.bar = new Fx.Morph(this.elements.pgb, {unit: '%', duration: 5000, link: 'link', fps:30});
            this.fade = new Fx.Tween(this.elements.tr);
            this.fadeBar = new Fx.Tween(this.elements.pgbTr);
            
            this.elements.remove.addEvent('click', function(){
                new Request({method: 'get', url: '/json/abort_link/'+this.id}).send();
            }.bind(this));
            
        },
        update: function(item){
                this.elements.name.set('text', item.name);
                this.elements.statusspan.set('text', item.statusmsg);
                this.elements.info.set('text', item.info);
                this.elements.bleft.set('text', item.format_size);
                this.elements.percent.set('text', item.percent+ '% / '+ humanFileSize(item.size-item.bleft));
                if (item.statusmsg == "waiting") {
                        this.elements.statusspan.set('class', 'label label-warning')
                } else if (item.statusmsg == "starting") {
                        this.elements.statusspan.set('class', 'label label-info')
                } else if (item.statusmsg == "downloading") {
                        this.elements.statusspan.set('class', 'label label-success')
                } else if (item.stausmsg == "extracting") {
                        this.elements.statusspan.set('class', 'label label-primary')
                } else {
                        this.elements.statusspan.set('class', 'label label-default')
                }
                if(!operafix)
                {
                        
                    this.bar.start({
                        'width': item.percent,
                        'background-color': [Math.round(120/100*item.percent),80,70].hsbToRgb().rgbToHex()
                    });
                }
                else
                {
                    this.elements.pgb.set(
                        'styles', {
                            'height': '4px',
                            'width': item.percent+'%',
                            'background-color': [Math.round(50/200*item.percent),0,200].hsbToRgb().rgbToHex(),
                         });
                }
                
        },
        remove: function(){
                this.fade.start('opacity',0).chain(function(){this.elements.tr.dispose();}.bind(this));
                this.fadeBar.start('opacity',0).chain(function(){this.elements.pgbTr.dispose();}.bind(this));

        }
    });
    
    
</script>
{% endblock %}

{% block subtitle %}{{_("Active Downloads")}}{% endblock %}
{% block content %}
<table class="table" style="width:100%;">
    <thead>
  <tr class="header">
    <th>{{_("Status")}}</th>
    <th>{{_("Name")}}</th>
    <th>{{_("Information")}}</th>
    <th>{{_("Size")}}</th>
    <th>{{_("Progress")}}</th>
  </tr>
    </thead>
</br>
  <tbody id="LinksAktiv">
  
  {% for link in content %}
  <tr id="link_{{ link.id }}">
          <td id="link_{{ link.id }}_status"><span  class="label label-{% if link.status == 'downloading' %}success{% endif %}{% if link.status == 'extracting' %}primary{% endif %}{% if link.status == 'starting' %}warning{% else %}default{% endif %}">{{ link.status }}</span></td>
          <td id="link_{{ link.id }}_name">{{ link.name }}</td>
          <td id="link_{{ link.id }}_info">{{ link.info }}</td>
          <td id="link_{{ link.id }}_bleft">{{ link.format_size }}</td>
    <td>
        <span id="link_{{ link.id }}_percent">{{ link.percent }}% /{{ link.bleft }}</span>
        <img id="link_{{ link.id }}_remove" style="vertical-align: middle; margin-right: -20px; margin-left: 5px; margin-top: -2px; cursor:pointer;" src="media/default/img/control_cancel.png"/>
    </td>
  </tr>
  <tr id="link_{{ link.id }}_pgb_tr">
    <td colspan="5">
        <div id="link_{{ link.id }}_pgb" class="progressBar" style="background-color: green; height:4px; width: {{ link.percent }}%;">&nbsp;</div>
    </td>
  </tr>
  {% endfor %}
  
  </tbody>
</table>
</div>
{% endblock %}