<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Test dojox.form.FileUploader - Form</title>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/dijit.css";
		@import "../../../dijit/themes/tundra/form/Button.css";
		@import "../../../dijit/themes/tundra/ProgressBar.css";
		@import "../../../dijit/tests/css/dijitTests.css";
		@import "../resources/FileUploader.css";
	</style>
	<script>
        djConfig = {
            isDebug: true,
			popup:true,
            parseOnLoad: true
        }
    </script>
    <script src="../../../dojo/dojo.js"></script>
    <script>
		dojo.require("dojo.parser");
        dojo.require("dojox.form.FileUploader");
        dojo.require("dijit.form.Button");
		dojo.require("dijit.ProgressBar");

		addThumb = function(d, id){
			console.log("THUMB:", d);
			var fileRoot = dojo.moduleUrl("dojox.form", "tests").toString();
			var img = '<img src='+fileRoot+"/"+escape(d.file)+
			(d.width>d.height ?
			' width="50"/>' :
			' height="50"/>');
			console.log("IMG:", img)
			var str = '<div id="file_'+d.name+'" class="thumb"><div class="thumbPic">'+img+'</div>';
			str += '<div class="thumbText">';
			if(d.fGroup || d.hGroup){
				str += 'Group: '+(d.fGroup || d.hGroup)+'<br/>';
			}
			str += 'Title: '+d.name+'<br/>';
			if(d.author){
				str += 'Author: '+ d.author+'<br/>';
			}
			if(d.date){
				str += d.date+' ';
			}
			str += Math.ceil(d.size*.001)+'kb</div></div>';
			dojo.byId(id).innerHTML += str;
		}
        dojo.addOnLoad(function(){

			var props = {
				isDebug:true,
				devmode:true,
				hoverClass:"uploadHover",
				activeClass:"uploadPress",
				disabledClass:"uploadDisabled",
				uploadUrl:dojo.moduleUrl("dojox.form", "tests/UploadFile.php"),
				fileMask:[
					["Jpeg File", 	"*.jpg;*.jpeg"],
					["GIF File", 	"*.gif"],
					["PNG File", 	"*.png"],
					["All Images", 	"*.jpg;*.jpeg;*.gif;*.png"]
				]
			}

			if(dojo.byId("btnF")){
				dojo.byId("fFiles").value = "";
				var f = new dojox.form.FileUploader(dojo.mixin({
					progressWidgetId:"progressBar",
					showProgress:true,
					fileListId:"fFiles",
					tabIndex:5,
					selectMultipleFiles:true,
					//uploadOnChange:true,
					deferredUploading:false
				},props), "btnF");
				f.set("disabled", dojo.byId("fGroup").value=="");
				dojo.connect(dojo.byId("fGroup"), "keyup", function(){
					f.set("disabled", dojo.byId("fGroup").value=="");
				});
				dojo.connect(dijit.byId("fSubmit"), "onClick", function(){
					f.submit(dojo.byId("formF"));
				});
				dojo.connect(f, "onChange", function(dataArray){
					console.log("onChange.data:", dataArray);
				});
				dojo.connect(f, "onComplete", function(dataArray){
					console.log("onComplete Data:", dataArray)
					dojo.forEach(dataArray, function(d){
						addThumb(d, "fThumbs");
					});
				});
			}


			if(dojo.byId("btnH")){
				dojo.byId("hFiles").value = "";
				var h = new dojox.form.FileUploader(dojo.mixin({
					force:"html",
					showProgress:true,
					progressWidgetId:"progressBarHtml",
					selectMultipleFiles:true,
					//uploadOnChange:true,
					fileListId:"hFiles",
					tabIndex:11,
					devMode:true
				}, props), "btnH");

				h.set("disabled", dojo.byId("hGroup").value=="");
				dojo.connect(dojo.byId("hGroup"), "keyup", function(){
					h.set("disabled", dojo.byId("hGroup").value=="");
				});
				dojo.connect(dijit.byId("hSubmit"), "onClick", function(evt){
					h.submit(dojo.byId("formH"));
					dojo.stopEvent(evt);
				});
				dojo.connect(h, "onComplete", function(dataArray){
					console.warn("html onComplete", dataArray)
					dojo.forEach(dataArray, function(d){
						addThumb(d, "hThumbs");
					});
				});
				dojo.connect(h, "onError", function(err){
					console.error("html error", err)
				});
			}
			if(dijit.byId("btnD")){
				var d = new FlashHTML.widget(dojo.mixin({button:dijit.byId("btnD")}, props));
				d.set("disabled", dojo.byId("dTitle").value=="");
				dojo.connect(dojo.byId("dTitle"), "keyup", function(){
					d.set("disabled", dojo.byId("dTitle").value=="");
				});
				dojo.connect(dijit.byId("fSubmit"), "onClick", function(evt){
					f.submit(dojo.byId("formF"));
					dojo.stopEvent(evt);
				});
			}


		});


    </script>
    <style>
       html, body{
		font-family:sans-serif;
		font-size:12px;
	   }
		.uploadBtn{
			border:1px solid #333333;
			background:url(../../../dijit/themes/soria/images/buttonEnabled.png) #d0d0d0 repeat-x scroll 0px top;
			font-size:14px;
			font-family:Arial;
			width:201px;
			height:30px;
			line-height:50px;
			vertical-align:middle; /* emulates a <button> */
			text-align:center;
		}
		.uploadHover{
			background-image:url(../../../dijit/themes/soria/images/buttonHover.png);
			cursor:pointer;
			font-weight:bold;
			font-style:italic;
			font-family:serif;
		}
		.uploadPress{
			background-image:url(../../../dijit/themes/soria/images/buttonActive.png);
		}
		.uploadDisabled{
			background-image:none;
			background-color:#666;
			color:#999;
			border:1px solid #999;
			font-family:serif;
			font-style:italic;
		}
		.progBar{
			width:294px;
			display:none;
		}
		.form{
			width:300px;
			border:1px solid #ccc;
			margin:5px;
			padding:3px;
			position:relative;
		}
		.form, .thumbList{
			float:left;
		}
		.thumbList{
			width:300px;
			border:1px solid #ccc;
			min-height:100px;
			margin:5px;
			padding:3px;
		}
		#fFiles, #hFiles{
			width:200px;
			height:75px;
			overflow-x:hidden;
			overflow-y:auto;
			border:1px solid #ccc;
		}
		.form .field{
			width:197px;
		}
		.tbl{
			width:100%;
		}
		.tbl td{
			width:50%;
			vertical-align:top;
		}
		.form label{
			position:absolute;
			width:80px;
			text-align:right;
			left:0px;
		}
		.form .field, .form .btn{
			margin-left:85px;
			margin-bottom:5px;
		}
		h3{
			width:600px;
			font-weight:normal;
			font-size:14px;
		}
		ul{
			font-size:12px;
			width:600px;
		}
    </style>
</head>
<body class="tundra">
  <h1>FileUploader Widget Form Test</h1>
	<p style="font-size:14px; width:480px; border:2px solid #ff0000; padding:3px;">
		<strong>NOTE:</strong> This test does upload,
		but the server scripts are renamed to <em>tests/UploadFile.php.<strong>disabled</strong></em> and
		<em>tests/cLOG.php.<strong>disabled</strong></em> to prevent security attacks on hosted servers.
		You should rename these files (removing <em>.disabled</em>) in your local copy to conduct tests.
	</p>
	<h3>Both forms on this page are the same except one is for testing the Flash Uploader and one
	is for the HTML Uploader. The following features are being tested:</h3>
	<ul>
		<li>Disabled: The Uploaders are disabled unless the Group field is populated.</li>
		<li>Submit: The Submit buttons actually submit to the uploaders, and they post the data.</li>
		<li>Post Data: Post data is tested. The field data should be in the thumbnails.</li>
		<li>Selected List: If passing the ID of a container, the Uploaders will populate it with
		the selected files.</li>
		<li>Deleting Files: You can now delete pending files.</li>
		<li>Progress Built in: showProgress:true will change the button to a progress bar on upload.</li>
		<li>Progress Attach: Passing progressWidgetId will tell the Uploader of a progress widget.
		If the Progress widget is initially hidden, it will change to visible and then restored after
		upload.</li>
		<li>A11Y: The Flash button can be accessed with the TAB key. (The HTML cannot due to browser
		limtations)</li>
	</ul>
	<table class="tbl">
		<tr>
			<td>
			<form id="formF" class="form">
				<label>Group Name:</label>
				<input class="field" tabIndex="1" type="text" value="" id="fGroup" name='fGroup' /><br/>
				<label>Date:</label>
				<input class="field" tabIndex="2" type="text" value="" id="fDate" name='date' /><br/>
				<label>Author:</label>
				<input class="field" tabIndex="3" type="text" value="" id="fAuthor" name='author' /><br/>
				<label>Files:</label>
				<div id="fFiles" class="field"></div>
				<div tabIndex="5" id="btnF" class="uploadBtn btn">Flash Select Files</div>
				<button tabIndex="6" id="fSubmit" class="btn" dojoType="dijit.form.Button" onclick="return false;">Submit</button>
				<div indeterminate="false" id="progressBar" class="progBar" dojoType="dijit.ProgressBar"></div>
			</form>
			<div id="fThumbs" class="thumbList"></div>
		</td>
		<td>
			<form id="formH" class="form">
				<label>Group Name:</label>
				<input class="field" tabIndex="7" type="text" value="" id="hGroup" name='hGroup' /><br/>
				<label>Date:</label>
				<input class="field" tabIndex="8" type="text" value="" id="hDate" name='date' /><br/>
				<label>Author:</label>
				<input class="field" tabIndex="9" type="text" value="" id="hAuthor" name='author' /><br/>
				<label>Files:</label>
				<div  class="field" id="hFiles"></div>
				<div tabIndex="11"  id="btnH" class="uploadBtn btn">HTML Select Files</div>
				<button tabIndex="12"  class="btn" id="hSubmit" class="" onclick="return false;" dojoType="dijit.form.Button">Submit</button>
				<div indeterminate="false" id="progressBarHtml" class="progBar" dojoType="dijit.ProgressBar"></div>
			</form>
			<div id="hThumbs" class="thumbList"></div>
		</td>
		</tr>
	</table>
</body>
</html>
