{% extends multiplefilesimportmixin_super_template %}

{% load adminmedia admin_list i18n verbatim %}
{% load i18n admin_modify adminmedia %}
{% load url from future %}

{% block extrastyle %}
 	{{ block.super }}
 	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" id="theme">
	<link rel="stylesheet" href="{{ STATIC_URL }}utilities/multiuploader/css/jquery.fileupload-ui.css">
{% endblock %}

{% block extrahead %}
	{{ block.super }}
	<script type="text/javascript">
		filesChanged = false;
		$(document).ready(function() {
			{% if change %}
		    	$(".fileupload-link").colorbox({inline:true, href:"#fileupload-box",opacity: 0.7, scrolling: true, height: 500, width:600, 
		    		
		    		onClosed: function () {
		    			if (filesChanged) window.location.replace(window.location.href.split("?")[0]);
		    			$('button.cancel').click();
		        	}
		    	});	
		    {% else %}
			    $(".save-fileupload-link").click(function () {		    	
			    	$('#content form .submit-row').append('<input type="text" value="{% trans 'Safe before upload files' %}" name="_continue_before_upload"  />');
			    	$('#content form .submit-row').parents('form').submit();
			    	return false;
		    	});	
	    	{% endif %}

	    	{% if upload %}
				$.colorbox({inline:true, href:"#fileupload-box",opacity: 0.7, scrolling: true, height: 500, width:600, 
	    		
	    		onClosed: function () {
	    			if (filesChanged) window.location.replace(window.location.href.split("?")[0]);
	    			$('button.cancel').click();
	        	}
	    	});
	    	{% endif %}
	    });  
	</script>
{% endblock extrahead %}

{% block content %}
	{{ block.super }}
	{% if change %}{% if not is_popup %}
		<div style="display: none;">
			<div class="fileupload-box" id="fileupload-box">
				<div id="fileupload">
					<form action="{{ form_url }}fileupload/" method="POST" enctype="multipart/form-data" class="fileupload-form">{% csrf_token %}
						<div class="fileupload-buttonbar">
				            <label class="fileinput-button">
				                <span>{% trans 'Add files...' %}</span>
				                <input type="file" name="files[]" multiple>
				            </label>
				            <button type="submit" class="start">{% trans 'Start upload' %}</button>
				            <button type="reset" class="cancel">{% trans 'Cancel upload' %}</button>
				            <button type="button" class="delete">{% trans 'Delete files' %}</button>
				        </div>
			        </form>
				    <div class="fileupload-content">
				        <div class="fileupload-progressbar"></div>
				        <table class="files"></table>
				    </div>
				</div>
				<script id="template-upload" type="text/x-jquery-tmpl">
   					<tr class="template-upload{% verbatim %}{{if error}} ui-state-error{{/if}}{% endverbatim %}">
   						<td class="name"{% verbatim %}>${$('td').length } ${name}{% endverbatim %}</td>
   						<td class="size">${sizef}</td>
   						{% verbatim %}{{if error}}{% endverbatim %}
            				<td class="error" colspan="2">{% trans 'Error:' %}
                				{% verbatim %}{{if error === 'maxFileSize'}}{% endverbatim %}{% trans 'File is too big' %}
                				{% verbatim %}{{else error === 'minFileSize'}}{% endverbatim %}{% trans 'File is too small' %}
                				{% verbatim %}{{else error === 'acceptFileTypes'}}{% endverbatim %}{% trans 'Filetype not allowed' %}
                				{% verbatim %}{{else error === 'maxNumberOfFiles'}}{% endverbatim %}{% trans 'Max number of files exceeded' %}
                				{% verbatim %}{{else}}${error}{% endverbatim %}
                				{% verbatim %}{{/if}}{% endverbatim %}
            				</td>
        				{% verbatim %}{{else}}{% endverbatim %}
            				<td class="progress"><div></div></td>
            				<td class="start"><button>{% trans 'Start' %}</button></td>
        				{% verbatim %}{{/if}}{% endverbatim %}
        				<td class="cancel"><button>{% trans 'Cancel' %}</button></td>
    				</tr>
				</script>
				<script id="template-download" type="text/x-jquery-tmpl">
    				<tr class="template-download{% verbatim %}{{if error}} ui-state-error{{/if}}{% endverbatim %}">
        				{% verbatim %}{{if error}}{% endverbatim %}
            				<td class="name" colspan="2">{% verbatim %}${name}{% endverbatim %}</td>
            				<td class="size">{% verbatim %}${sizef}{% endverbatim %}</td>
            				<td class="error">{% trans 'Error:' %}
                				{% verbatim %}{{if error === 1}}{% endverbatim %}{% trans 'File exceeds upload_max_filesize (php.ini directive)' %}
                				{% verbatim %}{{else error === 2}}{% endverbatim %}{% trans 'File exceeds MAX_FILE_SIZE (HTML form directive)' %}
                				{% verbatim %}{{else error === 3}}{% endverbatim %}{% trans 'File was only partially uploaded' %}
      		          			{% verbatim %}{{else error === 4}}{% endverbatim %}{% trans 'No File was uploaded' %}
            	    			{% verbatim %}{{else error === 5}}{% endverbatim %}{% trans 'Missing a temporary folder' %}
                				{% verbatim %}{{else error === 6}}{% endverbatim %}{% trans 'Failed to write file to disk' %}
                				{% verbatim %}{{else error === 7}}{% endverbatim %}{% trans 'File upload stopped by extension' %}
                				{% verbatim %}{{else error === 'maxFileSize'}}{% endverbatim %}{% trans 'File is too big' %}
                				{% verbatim %}{{else error === 'minFileSize'}}{% endverbatim %}{% trans 'File is too small' %}
                				{% verbatim %}{{else error === 'acceptFileTypes'}}{% endverbatim %}{% trans 'Filetype not allowed' %}
        	        			{% verbatim %}{{else error === 'maxNumberOfFiles'}}{% endverbatim %}{% trans 'Max number of files exceeded' %}
            	    			{% verbatim %}{{else error === 'uploadedBytes'}}{% endverbatim %}{% trans 'Uploaded bytes exceed file size' %}
               					{% verbatim %}{{else error === 'emptyResult'}}{% endverbatim %}{% trans 'Empty file upload result' %}
                				{% verbatim %}{{else}}${error}{% endverbatim %}
                				{% verbatim %}{{/if}}{% endverbatim %}
            				</td>
       					{% verbatim %}{{else}}{% endverbatim %}
            				<td class="name" colspan="3">{% verbatim %}${name}{% endverbatim %}</td>
            				<td class="size">{% verbatim %}${sizef}{% endverbatim %}</td>
        				{% verbatim %}{{/if}}{% endverbatim %}
        				<td class="delete">
            				<button data-type="{% verbatim %}${delete_type}{% endverbatim %}" data-url="{% verbatim %}${delete_url}{% endverbatim %}">{% trans 'Delete' %}</button>
        				</td>
    				</tr>
				</script>
				<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
				<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
				<script src="{{ STATIC_URL }}utilities/multiuploader/js/jquery.iframe-transport.js" type="text/javascript"></script>
				<script src="{{ STATIC_URL }}utilities/multiuploader/js/jquery.fileupload.js" type="text/javascript"></script>
				<script src="{{ STATIC_URL }}utilities/multiuploader/js/jquery.fileupload-ui.js" type="text/javascript"></script>
				<script type="text/javascript">
					$(function () {
					    'use strict';
					    // Initialize the jQuery File Upload widget:
					    $('#fileupload').fileupload({
					            maxFileSize: {{ max_file_size }},
					            {% if accept_file_types %}acceptFileTypes: /(\.|\/)({{ accept_file_types }})$/i,{% endif %}
					    		{% if max_number_of_files %}maxNumberOfFiles: {{ max_number_of_files }},{% endif %}
					    });
					    
					    
					    $('#fileupload')
					    .bind('fileuploadstart', function (e) {
					    	filesChanged=true;
					    	$('#cboxClose').hide();
					    	$(".fileupload-link").colorbox({overlayClose:false,escKey:false,})
					    	$.fn.colorbox.load();
					    })
					    .bind('fileuploadstop', function (e) {
					    	$('#cboxClose').show();
					    	$(".fileupload-link").colorbox({overlayClose:true,escKey:true,})
					    	$.fn.colorbox.load();
					    })
					    .bind('fileuploaddrop', function (e, data) {
					    	$(".fileupload-link").click()
					    });
					});
		
				</script>
			</div>
		</div>
	{% endif %}{% endif %}
{% endblock %}


{% block object-tools %}
	{{block.super}}
	{% if not change %}{% if not is_popup %}
		<ul class="object-tools">
	    {% block object-tools-add-items %}
	    	<li><a href="" class="save-fileupload-link">{% trans 'Save and upload files' %}</a></li>
	    {% endblock %}
	  </ul>
	{% endif %}{% endif %}
{% endblock %}


{% block object-tools-items %}
    <li><a href="" class="fileupload-link">{% trans 'Upload files' %}</a></li>
    {{block.super}}
{% endblock %}