#set( $root = "$home$apphome/components/upload/types/swfupload")
<div id="swfuploadarea">
<script type="text/javascript" src="$root/swfupload.js"></script>
<script type="text/javascript" src="$root/swfupload.queue.js"></script>
<script type="text/javascript" src="$root/plugins/swfupload.cookies.js"></script>

<script type="text/javascript" src="$root/fileprogress.js"></script>
<script type="text/javascript" src="$root/handlers.js"></script>
<script type="text/javascript">
		var swfu;
		var oktosubmit = false;
		var queuecompleted = false;
	
		
		function loadsettings() 
		{
			var settings = 
			{
				flash_url : "$root/swfupload.swf",
				upload_url: "$root/receivefile.html",
				post_params: {
					"entermedia.key" : "$entermediakey"
				},
				file_size_limit : 0,
				file_types_description : "All Files",
				file_upload_limit : 100,
				file_queue_limit : 0,
				prevent_swf_caching : true, 
				custom_settings : {
					progressTarget : "fsUploadProgress",
					cancelButtonId : "btnCancel"
				},
				debug: false,
				use_query_string : true, 

				// Button settings
				
				button_image_url: "$home$themeprefix/images/upload/swfuploadbutton.png",
				button_width: "61",
				button_height: "22",
				button_placeholder_id: "spanButtonPlaceHolder",
				//button_text: '<span class="embuttonfont" >Browse</span>',
				//button_text_style: ".embuttonfont { color: #ffffff;font-size: 14px; font-weight: bold; font-family: tahoma, Helvetica, sans-serif;}",
				//button_text_left_padding: 12,
				//button_text_top_padding: 3,
				
				file_queued_handler : fileQueued,
				upload_progress_handler : uploadProgress,
				upload_success_handler : uploadSuccess,
				queue_complete_handler : queueComplete	// Queue plugin event
				
				// The event handler functions are defined in handlers.js
				/*
				file_queue_error_handler : fileQueueError,
				file_dialog_complete_handler : fileDialogComplete,
				upload_start_handler : uploadStart,
				upload_error_handler : uploadError,
				upload_success_handler : uploadSuccess,
				upload_complete_handler : uploadComplete,
				queue_complete_handler : queueComplete*/	// Queue plugin event
			};

			swfu = new SWFUpload(settings);
	     }
	     
	     function queueComplete(numFilesUploaded) 
	     {
		    queuecompleted = true;
		    if(oktosubmit )
		    {
				jQuery("#uploadqueueform").submit();
			}
		 }
	     
	    function fileQueued(file) 
	    {
		    queuecompleted = false;
			try 
			{
				var link = "$root/uploadcell.html?id=" + file.id + "&name=" + file.name + "&size=" + file.size;
				jQuery.get(link, 
					function (data) 
					{
						jQuery("#pickedfile").html(data);
						swfu.startUpload(file.id);
						//jQuery(".enabledwithpick").css("visibility","visible");
					});	
				jQuery(".emshowuploadform").css("visibility","visible");
			}
			catch (ex) 
			{
				alert( ex);
			}
			return true;
		}
	     
	     
		function uploadProgress(file, bytesLoaded, bytesTotal) 
		{
			try 
			{
				var progress = Math.ceil((bytesLoaded / bytesTotal) * 375);
				jQuery(".emuploadprogressform").width(progress);
			} 
			catch (ex) 
			{
				alert(ex);
			}
		}
		function removeUpload(inId) 
		{
			swfu.cancelUpload(inId,false);
			jQuery("#emfilelist #row" + inId).html("");
			jQuery("#temppathholder" + inId ).append("");
			
		}	   
	   	function showProgressAndSubmit()
	    {
	     		oktosubmit = true;

	     		if(queuecompleted)
		        {
	     			if(jQuery("#uploadqueueform").valid()) {
						jQuery("#uploadqueueform").submit();
	     			}
				}	
				else
				{
					jQuery("#submitbutton").html("Uploading..."); //TODO: Replace with cancel link
				}
				     		
	     }
	     function uploadSuccess(file, serverData) 
	     {
				try {
					##append serverData as a sourcepath
					var html = '<input type="hidden" name="' + file.id + '.temppath" value="' + serverData + '"' + '/>'; 
					//html = html + '\n<input type="hidden" name="assettype.value" value="' + serverData + '"' + '/>'; 
					jQuery("#temppathholder" + file.id ).append(html);
					jQuery("#checkbox").css("visibility","visible");
					jQuery("#submitbutton").css("visibility","visible");
				} 
				catch (ex)
				{
					alert( ex);
				}			
		}
			
		jQuery(document).ready(
			function() 
			{ 
				loadsettings();
			}
		); 
	</script>

	<form id="uploadqueueform" class="ajaxform validated" targetdiv="emuploadcontainer" action="$root/finish.html" method="post">
	
		<table>
		<tr>
		<td>
			<div id="flashHolder" >	
				<table width="500">
				<tr>
				<td>
				<div id="pickedfile"><input size="40" name="null" /></div>
				</td>
				<td>
					<div id="spanButtonPlaceHolder" ></div>	
				</td>
				</tr></table>
			</div>
			
			<div class="emshowuploadform" style="float:left;">
				<div id="checkbox" style="float:right;width:14px;visibility:hidden;"><img align="center" src="$home/system/images/toolbar/check.gif" /></div>
				<div class="emuploadprogresscontainerform" id="progress">
					<div class="emuploadprogressform"></div>
				</div>
				
			</div>
			<br/>
			
			<h2>[[Caption]]</h2>
			<input type="hidden" name="field" value="caption"/>
			<input type="text" class="required" name="caption.value" style="width: 320px;" />
			<br/>

			<h2>[[Title]]</h2>
			<input type="hidden" name="field" value="title"/>
			<input type="text" class="required" name="title.value" style="width: 320px;" />
			<br/><br/>

			<h2>[[Add Tags]]</h2>
			<input type="hidden" name="field" value="keywords"/>
			<input type="text" class="required" name="keywords.value" style="width: 320px;" />
			<br/><br/>

			#set($groups = $user.getGroups())
			<h2>[[Choose team]]</h2>
			<select name="viewgroup" style="width:240px;" class="required" >
				<option value=""> </option>
				#foreach($group in $groups)
				<option value="$group.id">$group</option>
				#end
			</select>
			<br/><br/>
			
		</td>
		</tr>
		</table>
		
			
			<div id="submitbutton" style="margin: auto; width: 200px;visibility:hidden;">
				<ul class="embuttons">
					<li><a href="#" onClick="showProgressAndSubmit(); return false;"><span>Upload</span></a></li>
				</ul>
			</div>
		
		<input type="hidden" name="hitsname" value="hits" />
		<input type="hidden" name="field" value="assettitle" />
		<input type="hidden" name="field" value="assettype" />
	</form>

	</div>