{% extends "intern/base_site.html" %}
{% block extrahead %}
    <link type="text/css" rel="stylesheet" href="http://s.hdimg.net/jquery/themes/default/default.css" />
    <style type="text/css">
body {
    background-color: #ffffff;
    font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif; 
    color: #333333;
	font-size:12 px;
    text-align:left;
}

DIV.tagMatches {
    margin-left: 10px;
    width: 200px;
}
DIV.tagMatches SPAN {
    padding: 2px;
    margin-right: 4px;
    background-color: #0000AB;
    color: #fff;
    cursor: pointer;
}
</style>
{% endblock %}
{% block breadcrumbs %}<div class="breadcrumbs"><a href="/">Homepage</a>
&rsaquo; <a href="/i/">HUDORA Bilderarchiv</a>
&rsaquo; {{ title }}</div>{% endblock %}
{% block content %}

<script type="text/javascript" src="http://s.hdimg.net/libs/swfupload/swfupload.js"></script>
<script type="text/javascript" src="http://s.hdimg.net/libs/jquery.swfupload.js"></script>
<script type="text/javascript" src="http://s.hdimg.net/libs/swfupload/swfupload.cookies.js"></script>


<script type="text/javascript">
var swfu;

    function fileQueued(file){
			var listitem='<li id="'+file.id+'" >'+
				'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
				'<div class="progressbar" ><div class="progress" ></div></div>'+
				'<p class="status" >Pending</p>'+
				'<span class="cancel" >&nbsp;</span>'+
				'</li>';
			$('#log').append(listitem);
			$('li#'+file.id+' .cancel').bind('click', function(){
				var swfu = $.swfupload.getInstance('#swfupload-control');
				swfu.cancelUpload(file.id);
				$('li#'+file.id).slideUp('fast');
			});
			// start the upload since it's queued
			this.startUpload();
		};

		function fileQueueError(file, errorCode, message){
			alert('Size of the file '+file.name+' is greater than limit');
		};

function fileDialogComplete(numFilesSelected, numFilesQueued){
			this.removePostParam('tags');
			this.addPostParam('tags', $('input#id_tags').val());
			this.removePostParam('title');
			this.addPostParam('title', $('input#id_title').val());
			$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
		};
		
function uploadStart(file){
			$('#log li#'+file.id).find('p.status').text('Uploading...');
			$('#log li#'+file.id).find('span.progressvalue').text('0%');
			$('#log li#'+file.id).find('span.cancel').hide();
		};
		
function uploadProgress(file, bytesLoaded){
			//Show Progress
			var percentage=Math.round((bytesLoaded/file.size)*100);
			$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
			$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
		};
		
function uploadSuccess(file, serverData){
			var item=$('#log li#'+file.id);
			item.find('div.progress').css('width', '100%');
			item.find('span.progressvalue').text('100%');
			var pathtofile='<a href="../image/'+serverData+'/" target="_blank" >view &raquo;</a>';
			item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
		};
		

function uploadComplete(file){
			// upload has completed, try the next one in the queue
			this.startUpload();
		};
		
$(function(){
    swfu = new SWFUpload({
		upload_url: "api/",
		flash_url : "swfupload.swf",
		file_post_name: 'uploadfile',
		file_size_limit : "20 MB",
		file_types : "*.jpg;*.jpeg",
		file_types_description : "Image files",
		//file_upload_limit : 2,
        assume_success_timeout: 29,
        use_query_string: true,
        post_params: {'clienttrack': "{{ clienttrack }}"},
		button_image_url : "http://s.hdimg.net/libs/swfupload/wdp_buttons_upload_114x29.png",
		button_width : 114,
		button_height : 29,
		button_placeholder : $('#swfupload-control #button')[0],
		debug: false,

		file_queued_handler : fileQueued,
		file_queue_error_handler : fileQueueError,
		file_dialog_complete_handler : fileDialogComplete,
		upload_start_handler : uploadStart,
		upload_progress_handler : uploadProgress,
		// upload_error_handler : uploadError,
		upload_success_handler : uploadSuccess,
		upload_complete_handler : uploadComplete,
		//queue_complete_handler : queueComplete	// Queue plugin event
	});
});	

</script>
<style type="text/css" >
#swfupload-control p{ margin:10px 5px; font-size:0.9em; }
#log{ margin:0; padding:0; width:500px;}
#log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px; 
	font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}
#log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }
#log li .progress{ background:#999; width:0%; height:5px; }
#log li p{ margin:0; line-height:18px; }
#log li.success{ border:1px solid #339933; background:#ccf9b9; }
#log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px; 
	background:url('http://s.hdimg.net/libs/swfupload/cancel.png') no-repeat; cursor:pointer; }
</style>


    <form enctype="multipart/form-data" method="post" action=".">
        <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" id="id_title" /></td></tr>
<tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" id="id_tags" /></td></tr>
        </table>
        <br/>
        <br/>
        <div style="float: left">
            <label for="id_image">Image:</label><input type="file" name="image" id="id_image" /><br/>
            <input type="submit" value="Einzelne Datei hochladen"/>
        </div>
        <div id="swfupload-control" style="float: right">
        	<p>Mehrere Dateien (jpg), hochladen:</p>
        	<input type="button" id="button" />
        	<p id="queuestatus" ></p>
        	<ol id="log"></ol>
        </div>
        <div> - oder - </div>
    </form>    

</body>

{% endblock content %}
