<!--BEGIN-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Aurigma Image Uploader</title>
	<meta http-equiv="MSThemeCompatible" content="yes" />
	<link href="style.css" type="text/css" rel="stylesheet" />

	<script src="../iuembed.js" type="text/javascript"></script>

	<script type="text/javascript">
//<![CDATA[
//Separator for ordered formats in description field of an item.
var separator = "...\n\r";

var maxFormatCount = 3;

var imageUploader1 = null;

//This class represents an information about ordered print format.
function Format(name, paper, amount){
	this.name = name; //Print format name
	this.paper = paper; //Paper type.
	this.amount = amount; //Number of copies of this format.
}

//This function parses a string displayed as a description of Image Uploader item
//and returns an array of ordered formats.
function parseDescription(description){
	var formats=new Array();
	if (description!=""){
		var arrDescription = description.split(separator);

		for (var z = 0; z < arrDescription.length; z++){
			arrFormat = arrDescription[z].split(" ");
			formats.push(new Format(arrFormat[0], arrFormat[1], arrFormat[3]));
		}
	}
	return formats;
}

function fullPageLoad(){
	imageUploader1=getImageUploader("ImageUploader1");
}

//In this SelectionChange event handler we display information about the order for selected
//items if available (print format, amount, paper type).
function ImageUploader_SelectionChange() {
	if (imageUploader1) {
		var selectedFileIndex = null;

		//This array stores all ordered formats for selected items.
		var formats = new Array();

		for (var i = 0; i < maxFormatCount; i++){
			formats.push(new Format("", "", ""));
		}

		//Iterate all upload list items and get common format information for all of them (i.e.
		//format information which equals for all items).
		for (var i = 1; i <= imageUploader1.getUploadFileCount(); i++){
			if (imageUploader1.getUploadFileSelected(i)){
				var currentFormats = parseDescription(new String(imageUploader1.getUploadFileDescription(i)));

				//For the first selected item just copy the current format...
				if (selectedFileIndex == null){
					selectedFileIndex = i;
					for (var j = 0; j < currentFormats.length; j++){
						formats[j] = currentFormats[j];
					}
				}
				//...and for all further selected items verify whether the current format is the same as 
				//for previous items. If yes, use it, otherwise the empty string is used.
				else{
					selectedFileIndex = "multiple"
					for (var j = 0; j < currentFormats.length; j++){
						if (currentFormats[j].name != formats[j].name){
							formats[j].name = "";
						}
						if (currentFormats[j].paper != formats[j].paper){
							formats[j].paper = "";
						}
						if (currentFormats[j].amount != formats[j].amount){
							formats[j].amount = "";
						}
					}

					for (var j = currentFormats.length; j < maxFormatCount; j++){
						formats[j].name = "";
						formats[j].paper = "";
						formats[j].amount = "";
					}
				}
			}
		}

		//If none files selected (i.e. selectedFileIndex is null), disable HTML form fields 
		//which edit print formats.
		var disabled = selectedFileIndex == null;

		var aSelectFormat = new Array();
		var aSelectPaper = new Array();
		var aInputAmount = new Array();

		for (var i = 1; i <= maxFormatCount; i++){
			aSelectFormat[i] = document.getElementById("SelectFormat" + i);
			aSelectFormat[i].disabled = disabled;
			aSelectPaper[i] = document.getElementById("SelectPaper" + i);
			aSelectPaper[i].disabled = disabled;
			aInputAmount[i] = document.getElementById("InputAmount" + i);
			aInputAmount[i].disabled = disabled;
		}

		var thumbnail1 = getImageUploader("Thumbnail1");


		if (selectedFileIndex){

			//Display format data in those fields which edit the same format settings.
			for (var i = 1; i <= maxFormatCount; i++){
				for (var j = 0; j < aSelectFormat[i].options.length; j++){
					if (aSelectFormat[i].options[j].value == formats[i- 1].name){
						aSelectFormat[i].selectedIndex = j;
					}
				}

				for (var j = 0; j < aSelectPaper[i].options.length; j++){
					if (aSelectPaper[i].options[j].value == formats[i - 1].paper){
						aSelectPaper[i].selectedIndex = j;
					}
				}

				aInputAmount[i].value = formats[i - 1].amount;
			}
			
			//Display selected image preview using <img> tag when only one item is selected. For multiple items blank area is displayed.
			if (typeof(selectedFileIndex) == "number")
			{
				thumbnail1.setGuid(imageUploader1.getUploadFileGuid(selectedFileIndex));
			}
			else{
				thumbnail1.setGuid("");
			}
		}
		else{
			thumbnail1.setGuid("");
		}
	}
}

//This function is called when the user changes some order settings (like format name, paper type, or amount of items).
//Ordered format information is stored in the description field of Image Uploader items.
function itemChange(){
	if (imageUploader1) {

		//Compile the string with ordered formats.
		var description = "";
		for (var i = 1; i <= maxFormatCount; i++){
			var SelectFormatN = document.getElementById("SelectFormat" + i);
			var SelectPaperN = document.getElementById("SelectPaper" + i);
			var InputAmountN = document.getElementById("InputAmount" + i);

			var amount = parseInt(InputAmountN.value);

			if (SelectFormatN.selectedIndex != 0 && SelectPaperN.selectedIndex != 0 && InputAmountN.value != "" && amount){
				var format = SelectFormatN.options[SelectFormatN.selectedIndex].value;
				var paper = SelectPaperN.options[SelectPaperN.selectedIndex].value;

				if (description != ""){
					description = description + separator;
				}

				description = description + format + " " + paper + " x " + amount;
			}
		}

		//Update desriptions of selected items and write ordered formats information into it.
		for (var i = 1; i <= imageUploader1.getUploadFileCount(); i++){
			if (imageUploader1.getUploadFileSelected(i)){
				imageUploader1.setUploadFileDescription(i, description);
			}
		}
	}
}
//]]>
	</script>

</head>
<body>
	<p>
		This demo is a photo print ordering application which allows users to select photos,
		choose print format, paper type, and a number of copies, and upload these photos
		with order information to the server. In this demo you will see how to:
	</p>
	<ul>
		<li>Upload source file without thumbnails to the server.</li>
		<li>Send information about order using description fields.</li>
		<li>Use quality meter.</li>
		<li>Create custom HTML buttons for Image Uploader.</li>
		<li>Filter files by extension and size.</li>
		<li>Work with upload list items through JavaScript.</li>
	</ul>
	<fieldset>
		<legend>Note</legend>This demo application <strong>deletes all previously uploaded files</strong>.
		Keep in mind that it is a feature of this demo, not of Image Uploader itself. If
		you <strong>do not want to delete uploaded files</strong>, you should modify the
		upload processing page specified by the <strong>Action</strong> parameter.
	</fieldset>
	<table cellpadding="0" cellspacing="0" border="0" width="760">
		<tr>
			<td colspan="2">
				<table cellpadding="0" cellspacing="0" border="0" class="Toolbar">
					<tr>
						<td class="Left">
						</td>
						<td class="Panel">
							<table cellspacing="0" border="0">
								<tr>
									<td>
										<a href="#" onclick="imageUploader1.SelectAll();return false;">
											<img class="Icon" src="Images/SelectAllSmall.gif" alt="Select All" />&nbsp;Select&nbsp;All
										</a>
									</td>
									<td>
										<a href="#" onclick="imageUploader1.DeselectAll();return false;">
											<img class="Icon" src="Images/DeselectAllSmall.gif" alt="Deselect All" />&nbsp;Deselect&nbsp;All
										</a>
									</td>
									<td>
										<a href="#" onclick="imageUploader1.Send();return false;">
											<img class="Icon" src="Images/SendSmall.gif" alt="Upload" />&nbsp;Upload </a>
									</td>
									<td>
										<img class="Separator" src="Images/ToolbarSeparator.gif" alt="" />
									</td>
									<td>
										<a href="#" onclick="imageUploader1.Refresh();return false;">
											<img class="Icon" src="Images/RefreshSmall.gif" alt="Refresh" />&nbsp;Refresh </a>
									</td>
								</tr>
							</table>
						</td>
						<td class="Right">
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td class="MainPanel">

				<script type="text/javascript">
//<![CDATA[
//Create JavaScript object that will embed Image Uploader to the page.
var iu = new ImageUploaderWriter("ImageUploader1", 630, 500);

//For ActiveX control full path to CAB file (including file name) should be specified.
iu.activeXControlCodeBase = "../ImageUploader5.cab";
iu.activeXControlVersion = "5,0,41,0";

//For Java applet only path to directory with JAR files should be specified (without file name).
iu.javaAppletJarFileName = "ImageUploader5.jar";
iu.javaAppletCodeBase = "../";
iu.javaAppletCached = true;
iu.javaAppletVersion = "5.0.41.0";

iu.showNonemptyResponse = "off";

//Configure License Keys
iu.addParam("LicenseKey", "71050-49A8A-00000-08302-413E7;72050-49A8A-00000-076AD-199A9");

//Configure appearance and behavior.
iu.addParam("PaneLayout", "ThreePanes");
iu.addParam("FolderView", "Thumbnails");
iu.addParam("TreePaneWidth", "220");
iu.addParam("FolderPaneShowDescriptions", "false");
iu.addParam("DescriptionsReadOnly", "true");
iu.addParam("ShowButtons", "false");
iu.addParam("ShowDebugWindow", "true");
iu.addParam("AllowRotate", "false");
iu.addParam("AllowMultipleRemove", "true");

//Configure file mask to upload JPEG images only.
iu.addParam("FileMask", "*.jpeg;*.jpg;*.jpe");

//Disallow to upload too small images. 
iu.addParam("MinImageWidth", "800");
iu.addParam("MinImageHeight", "800");

//Configure quality meter.
iu.addParam("QualityMeterFormats", "4 x 6,1800,1200,1.5;5 x 7,2100,1500,1.5;8 x 10,3000,2400,1.5;16 x 20,4000,3200,2;30 x 20,6000,4000,2");

//Configure thumbnail settings.
iu.addParam("UploadThumbnail1FitMode", "Fit");
iu.addParam("UploadThumbnail1Width", "120");
iu.addParam("UploadThumbnail1Height", "120");
iu.addParam("UploadThumbnail1JpegQuality", "60");

//Configure upload settings.
iu.addParam("FilesPerOnePackageCount", "1");
iu.addParam("AutoRecoverMaxTriesCount", "3");
iu.addParam("AutoRecoverTimeOut", "1");
iu.addParam("Action", "upload.cfm");

//Configure URL where to redirect after upload.
iu.addParam("RedirectUrl", "gallery.cfm");

//Add event handlers.
iu.addEventListener("SelectionChange", "ImageUploader_SelectionChange");
iu.fullPageLoadListenerName = "fullPageLoad";

//Tell Image Uploader writer object to generate all necessary HTML code to embed 
//Image Uploader to the page.
iu.writeHtml();
//]]>
				</script>

			</td>
			<td valign="top" class="DetailsPanel">
				<table cellpadding="0" cellspacing="0" border="0" width="100%" class="Toolbar">
					<tr>
						<td class="Left">
						</td>
						<td class="Panel">
							<span class="Header">Order&nbsp;Details</span>
						</td>
						<td class="Right">
						</td>
					</tr>
				</table>
				<div class="Info">

					<script type="text/javascript">
//<![CDATA[
//Create JavaScript object that will embed Image Uploader to the page.
var t = new ThumbnailWriter("Thumbnail1", 230, 230);

//For ActiveX control full path to CAB file (including file name) should be specified.
t.activeXControlCodeBase = "../ImageUploader5.cab";
t.activeXControlVersion = "5,0,41,0";

//For Java applet only path to directory with JAR files should be specified (without file name).
t.javaAppletCodeBase = "../";
t.javaAppletCached = true;
t.javaAppletVersion = "5.0.41.0";
t.addParam("ParentControlName", "ImageUploader1");
t.writeHtml();
					</script>

					<br />
					<table align="center">
						<tr>
							<td>
								Format:
							</td>
							<td>
							</td>
							<td>
								Paper:
							</td>
							<td>
							</td>
							<td>
								Amount:
							</td>
						</tr>
						<tr>
							<td>
								<select id="SelectFormat1" onchange="itemChange()" disabled="disabled">
									<option value="" selected="selected"></option>
									<option value="4x6&quot;">4x6&quot;</option>
									<option value="5x7&quot;">5x7&quot;</option>
									<option value="8x10&quot;">8x10&quot;</option>
									<option value="16x20&quot;">16x20&quot;</option>
									<option value="20x30&quot;">20x30&quot;</option>
								</select>
							</td>
							<td>
								&nbsp;
							</td>
							<td>
								<select id="SelectPaper1" onchange="itemChange()" disabled="disabled">
									<option value="" selected="selected"></option>
									<option value="G">Glossy</option>
									<option value="M">Matt</option>
								</select>
							</td>
							<td>
								x
							</td>
							<td>
								<input id="InputAmount1" type="text" size="3" value="1" onchange="itemChange()" onkeyup="itemChange()"
									disabled="disabled" />
							</td>
						</tr>
						<tr>
							<td>
								<select id="SelectFormat2" onchange="itemChange()" disabled="disabled">
									<option value="" selected="selected"></option>
									<option value="4x6&quot;">4x6&quot;</option>
									<option value="5x7&quot;">5x7&quot;</option>
									<option value="8x10&quot;">8x10&quot;</option>
									<option value="16x20&quot;">16x20&quot;</option>
									<option value="20x30&quot;">20x30&quot;</option>
								</select>
							</td>
							<td>
								&nbsp;
							</td>
							<td>
								<select id="SelectPaper2" onchange="itemChange()" disabled="disabled">
									<option value="" selected="selected"></option>
									<option value="G">Glossy</option>
									<option value="M">Matt</option>
								</select>
							</td>
							<td>
								x
							</td>
							<td>
								<input id="InputAmount2" type="text" size="3" value="1" onchange="itemChange()" onkeyup="itemChange()"
									disabled="disabled" />
							</td>
						</tr>
						<tr>
							<td>
								<select id="SelectFormat3" onchange="itemChange()" disabled="disabled">
									<option value="" selected="selected"></option>
									<option value="4x6&quot;">4x6&quot;</option>
									<option value="5x7&quot;">5x7&quot;</option>
									<option value="8x10&quot;">8x10&quot;</option>
									<option value="16x20&quot;">16x20&quot;</option>
									<option value="20x30&quot;">20x30&quot;</option>
								</select>
							</td>
							<td>
								&nbsp;
							</td>
							<td>
								<select id="SelectPaper3" onchange="itemChange()" disabled="disabled">
									<option value="" selected="selected"></option>
									<option value="G">Glossy</option>
									<option value="M">Matt</option>
								</select>
							</td>
							<td>
								x
							</td>
							<td>
								<input id="InputAmount3" type="text" size="3" value="1" onchange="itemChange()" onkeyup="itemChange()"
									disabled="disabled" />
							</td>
						</tr>
					</table>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>
<!--END-->