 <%@ page import="zall.bean.*, java.util.List" %>

    <script type="text/javascript"> 
    jQuery().ready(function() {
		// Validate register form
		jQuery("#AjaxFileUpload").validate({
			rules: {
				folder: {
					required: function(element) {
						var opt = jQuery("#folder_selector option:selected");
				        return opt != "" || opt != "new";
				    }
				},
				file: {
					required: true
				}
			},
			messages: {
				folder: "<lable to='folder'><img src='img/error.png' title='Please select a valid folder' /></lable>",
				file: "<lable to='file'><img src='img/error.png' title='Please select at least one file' /></lable>"
			}
		});
	});
	</script> 
 
    <div id="main">    
        <div id="container">
            <div id="content">
                <DIV id="comments" style="margin-top: 0px">   
                   <DIV id="comments-list" class="comments">
                   		<H3>Upload Queue</H3>			
                        <UL id="UploadQueue"> 
                            
                        </UL>  
                        <DIV id="comments-nav-below" class="comment-navigation"> 
                             <DIV class="paginated-comments-links"></DIV> 
                        </DIV>                        
                    </DIV><!-- #comments-list .comments -->                    
                </div><!-- .comments -->            
            </div><!-- #content -->
        </div><!-- #container -->
        
	
        <div class="aside main-aside">
            <ul class="xoxo">
                <li class="widgetcontainer">
                    <h3 class="widgettitle"><label>Upload</label></h3>
                    
                    <form id="AjaxFileUpload" method="get" action="#">
                        <div>
                            <select id="folder_selector" name="folder" tabindex="1" style="width: 230px">
                            	<option value="">Choose a Folder</option>
                            	<% for(Folder folder : (List<Folder>)request.getAttribute("folders")){ %>
                                <option value="<%=folder.getId() %>"><%=folder.getPath() %></option>
                                <% } %>                                
                                <option value="new">New Folder</option>
                            </select>
                            <input name="file" type="file" value="Select file to upload" multiple tabindex="2" style="width: 230px; margin-top: 10px; margin-bottom: 10px;">
                            <input name="submit" type="submit" value="Upload" tabindex="3">
                        </div>
                    </form>
                </li>
            </ul>
        </div>  <!--#primary .aside -->

		
        <SCRIPT type="text/javascript">

        jQuery("#folder_selector").change(function(){
        	var opt = jQuery("#folder_selector option:selected");
        	if(opt.val() == "new"){
        		var select = jQuery('#folder_selector');
        		select.val(jQuery('option:first', select).val());
        		//jQuery('#folder_dialog').dialog('open');
        		var dir = window.prompt("Please write the name and path of the new folder.","");
        		if( dir ) 
        			mkdir( dir );
        	}
        });
		
		function mkdir(name){
			$.ajax({
				url: 'ajax?action=mkdir&dir='+name,
				dataType: 'json',
				success: function(data) {
					if( data.id != null ){
						jQuery("#folder_selector").append("<option value='"+data.id+"'>"+data.name+"</option>");
					}
					else
						alert( data.error );
				}
			});
		}
		</SCRIPT>

    </div><!-- #main -->
