<form action="%(action)s" method="post" id="upload"><input
	type="hidden" name="op" value="%(op)s" /> %(id)s

<h2>Add Multiple Documents</h2>
        <h5>Drag and drop files from your desktop to upload many files at once to BC.</h5>
        <h5>You can Upload NNN MB of files at a time.</h5>

    <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />

     <input type="hidden" id="fileselect" name="fileselect[]" multiple="multiple" />

<div id="holder"><span style="display: inline;"> %(drag_drop_icon)s</span><span> <h3>Drop Files Here </h3></span></div>
<section id="wrapper"></section>

<style>
#holder { border: 3px dashed #ccc; width: 45em; min-height: 10em; style="display: block;"}
#holder.hover { border: 6px dashed #0c0; }
#holder img { display: block; margin: 10px auto; }
#holder p { margin: 6px; font-size: 14px; }
#messages{padding: 0 10px;margin: 1em 0;border: 1px solid #999;}
#filedrag{display: none;font-weight: bold;text-align: center;padding: 1em 0;margin: 1em 0;color: #555;border: 2px dashed #555;border-radius: 7px;cursor: default;}
#filedrag.hover{color: #f00;border-color: #f00;border-style: solid;box-shadow: inset 0 3px 4px #888;}
</style>



<output id="list">
    <div style="width: 44em; background-color: #BDBDBD; height: auto; max-height: 15em; overflow-y: scroll; padding: 10px;">
        No files selected
    </div>
    <br/>
</output>
<input type="hidden" id="hidden_old_files" />
<script src="filedrag.js"></script>

 <script type="text/javascript">

  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    output.push('<div style="width: 44em; background-color: #BDBDBD; height: auto; max-height: 15em; overflow-y: scroll; padding: 10px;">');
    var after_upload_count_size = [];
    var i = 0;
    file_size = 0;
    for (i = 0, f; f = files[i]; i++) {
      file_size +=f.size;
    }
    output.push( i, ' files selected, ', Math.round((file_size/1048576)*Math.pow(10,2))/Math.pow(10,2),'MB total size','<br /> Documents:<br />');
    after_upload_count_size.push( i, ' files selected, ', Math.round((file_size/1048576)*Math.pow(10,2))/Math.pow(10,2),'MB total size');
    for (var i = 0, f; f = files[i]; i++) {
      output.push('This is a ', escape(f.name),' (',Math.round((f.size/1048576)*Math.pow(10,2))/Math.pow(10,2), ' MB)','<br />');
    }
    output.push('</div>');
    if(file_size > 300000){
        alert('Upload too large.');
        return false;
    }
    document.getElementById('list').innerHTML = '' + output.join('') + '';
    document.getElementById('size_of_files').innerHTML = after_upload_count_size.join('');
    document.getElementById('hidden_old_files').innerHTML = files;
    if(i > 0){
        document.getElementById('upload_disable').disabled = false;
    }
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById('holder');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>



<div id="hello">
	<p>
		<after_upload_count_size id="size_of_files"></after_upload_count_size>
	</p>
	<p>What would you like to do after the upload complete?</p>
	<div id="process">
		%(after_upload)s
	</div>
	<button class="create_label_submit" value="ok" name="submit">Ok</button>
	<button class="cancel" value="cancel" name="submit">Cancel</button>
</div>
<script type="text/javascript">

$(document).ready(function() {
	$("#hello" ).dialog({
		autoOpen: false,
		show: "scale",
		hide: "scale",
		title: "What would you like to do next?",
	});

$( ".click_upload" ).click(function() {
		var process = $("#process div").size();
		if(process > 1){
			$("#hello").dialog({ modal: true });
			$("#hello").dialog("open", "modal", true);
			return false;
		}
		else{
			$('#upload').submit();
		}
	});

$( ".create_label_submit" ).click(function() {
		$("#hello").dialog('close');
		$(document.forms[0]).submit();
	});
$( ".cancel" ).click(function() {
	$("#hello").dialog('close');
	$(document.forms[0]).submit();
});
});

</script>
<button class="click_upload" value="upload" name="submit" id="upload_disable" disabled="disabled">Upload</button>
<button class="cancel" value="cancel" name="submit">Cancel</button>
</form>