{% extends "base.html" %}

{% block main %}
<form id="upload_form" action="{% url upload %}" method="post" enctype="multipart/form-data" accept-charset="utf-8" class="steps">
    <h3>Upload a new file</h3>
    <p><span class="step">1:</span>{{form.file}}</p>
    {% if form.file.errors %}<p>{{form.file.errors}}</p>{% endif %}
    <p><span class="step">2:</span>{{form.notes}}<span class="instruction"> Add a note...</span></p>
    {% if form.file.errors %}<p>{{form.notes.errors}}</p>{% endif %}
    <p><span class="step">3:</span><input type="submit" value="Upload" id="submit" /></p>
</form>
<div id="progress_container">
    <div id="progress_filename">Please Choose a File...</div>
    <div id="put-bar-here"></div>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript" src="{{MEDIA_URL|default:"/media/"}}js/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="{{MEDIA_URL|default:"/media/"}}js/mootools-1.2.4.1-more.js"></script>
<script type="text/javascript" src="{{MEDIA_URL|default:"/media/"}}js/dwProgressBar.js"></script>
<script type="text/javascript" charset="utf-8">
    var uuid = ""
    pb2 = new dwProgressBar({
        container: $('put-bar-here'),
        startPercentage: 0,
        speed:1000,
        boxID: 'box2',
        percentageID: 'perc2',
        displayID: 'text',
        displayText: false
    });

    for (i = 0; i < 32; i++) {
        uuid += Math.floor(Math.random() * 16).toString(16);
    }

    var req = new Request({
        method: 'get',
        headers: {'X-Progress-ID': uuid},
        url: '/upload/progress/',
        initialDelay: 500,
        delay: 1000,
        limit: 10000,
        onSuccess: function(reply) {
            test = JSON.decode(reply);
            switch(test.state) {
                    case "uploading": 
                        percent = 0.00 + parseFloat(Math.floor((test.received / test.size)*1000)/10);
                        $('progress_filename').set('html','Uploading ' + filename + ' ...' + percent + '%');
                        pb2.set(percent); 
                        break;
                    case "starting":
                        $('progress_filename').set('html','Starting Upload... '); 
                        break;
                    case "error":
                        $('progress_filename').set('html','Upload Error... ' + test.status);
                        break;
                    case "done":
                        $('progress_filename').set('html','Upload Finished...');
                        req.stopTimer();
                        break;
                    default:
                        console.debug("Oooops!");
			break;  
            }
        },
    })
    
    $('submit').addEvent( 'click', function(evt){
        filename = $("id_file").get('value').split(/[\/\\]/).pop();
        $("progress_filename").set('html','Uploading ' + filename + ' ...');
        $("upload_form").set('action', "{% url upload %}?X-Progress-ID=" + uuid);
        req.startTimer('X-Progress-ID=' + uuid);
	} );

</script>
{% endblock %}