<!DOCTYPE HTML>
<html>
<head>  
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    
    <!-- test iwth jquery ui dialog -->
    <link href="jquery-ui/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="jquery-ui/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>

    <link href="qunit/qunit/qunit.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="qunit/qunit/qunit.js" type="text/javascript"></script>
    
    <link href="../client/fileuploader.css" rel="stylesheet" type="text/css"> 
    <script src="../client/fileuploader.js" type="text/javascript" ></script>
    <script>

jQuery(function(){    
    $("#dialog").dialog();
        
    asyncTest("qq.FileUploader", function() {
        expect(10);
        
        var submitFileName, submitId;
               
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader'),
            action: 'action-acceptance.php',
            params: {
                one: 'value1',
                two: 'value2'
            },
            allowedExtensions: ['txt', 'val', 'webm'], 
            sizeLimit: 9 * 1024, 
            minSizeLimit: 10,
            onSubmit: function(id, fileName){
                if (fileName == '5text.txt'){
                    submitId = id;
                    submitFileName = fileName; 
                } else if (fileName == '6text.txt'){
                    uploader.setParams({'new':'newvalue'});  
                    
                    same(uploader.getInProgress(), 0, 'getFilesInProgress');                    
                    
                    setTimeout(function(){
                        same(uploader.getInProgress(), 1, 'getFilesInProgress');
                    }, 1);                                                                                                                   
                } else if (fileName == '8text.txt'){
                    
                    setTimeout(function(){
                        same(uploader.getInProgress(), 0, 'all uploads should have finished');
                        start(); // check test results    
                    }, 1000);
                    
                    return false;
                }
            },
            onComplete: function(id, fileName, responseJSON){

                if (fileName == '4text.txt'){
                    same(responseJSON, {}, 'should be empty if server returned malformed json');
                } else if (fileName == '5text.txt'){
                    same(submitId, id, "id in both callbacks match");
                    same(submitFileName, fileName, "filename in both callbacks match");    
                    ok(responseJSON.one === 'value1' && responseJSON.two === 'value2', "server received default params");
                    same(responseJSON.fileName, fileName, "filename in onComplete correct");
                } else if (fileName == '6text.txt'){                    
                    ok(responseJSON['new'] === 'newvalue' && responseJSON.one == null, "server received new params");                    
                    same(uploader.getInProgress(), 0, 'upload should have finished');                                                            
                } else if (fileName == '8text.txt'){
                    ok(false, "upload should be cancelled by returning false in onSubmit");                    
                }                                                                                
            }
        });           
    });
});
    </script>  
</head>
<body> 
    <h1 id="qunit-header">File uploader tests</h1> 
    <h2 id="qunit-banner"></h2> 
    <h2 id="qunit-userAgent"></h2> 
    <ol id="qunit-tests"></ol>

    <p>select files in sample-files dir, following order</p>
    <ol>
        <li>select 1imagelong...long.gif, invalid ext error should appear</li>        
        <li>select 2larger.txt, invalid size message should appear (in FF3.6+,Safari4+,Chrome without doing request)</li>
        <li>select 3empty.txt, invalid size message should appear (in FF3.6+,Safari4+,Chrome without doing request)</li>
        <li>select 4text.txt, uploaded file should be marked as failed (server returns jsgkdfgu4eyij)</li>             
        <li>select 5text.txt, callback argument tests</li>        
        <li>select 6text.txt, setParams, isUploading</li>
        <li>select 7small.txt, too small size message should appear (in FF3.6+,Safari4+,Chrome without doing request)</li>
        <li>select 8text.txt, returning false in onSubmit cancells upload, file should not be added to list</li>        
        <li>
            In FF,Chrome, select all files using drag-and-drop, only 1 error should appear.            
        </li>
    </ol>
    
    <div id="dialog" title="Basic dialog">
        File uploader inside a dialog
        <div id="file-uploader"></div>        
    </div>               
</body> 
</html>