<!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 Demos &mdash; Photo Order Demo</title>
	<link href="../common.css" type="text/css" rel="stylesheet" />

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

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

	<style type="text/css">
		.ScreenStyle
		{
			background-color: #ffffff;
			font-family: verdana;
			font-size: 11px;
			padding: 10px;
			text-align: center;
		}
		
		#InputAmount1, #InputAmount2, #InputAmount3 {width: 45px;}
		#SelectPaper1, #SelectPaper2, #SelectPaper3 {width: 67px;}
		#SelectFormat1, #SelectFormat2, #SelectFormat3 {width: 65px;}
		
		.Ab-b table td { padding-bottom: 3px; }
	</style>

	<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 ImageUploader1_FullPageLoad() {
			imageUploader1 = getImageUploader('ImageUploader1');

			document.getElementById("ImageUploader1").style.width = "100%";
			document.getElementById("ImageUploader1").parentNode.style.width = "100%";
			//Installation Progress for Java version of IU add 2 parent controls around ImageUploader object
			if (iu.getControlType() == "Java")
				document.getElementById("ImageUploader1").parentNode.parentNode.style.width = "100%";
		}

		//In this SelectionChange event handler we display information about the order for selected
		//items if available (print format, amount, paper type).
		function ImageUploader1_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.
		//If 'applyToAll' parameter is true, then ordered format information applies to all images in upload pane.
		function itemChange(applyToAll) {
			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 (applyToAll === true || imageUploader1.getUploadFileSelected(i)) {
						imageUploader1.setUploadFileDescription(i, description);
					}
				}
			}
		}

		//This function is called when the user clicks prev or next links.
		//It moves selection to the previous or next image in upload pane.
		function changeThumbnail(offset) {
			var thumbnail1 = getImageUploader("Thumbnail1"), uploader = getImageUploader("ImageUploader1");
			var selectedIndex = null, newSelectedIndex;
			var fileCount = uploader.getUploadFileCount();

			//find current file in thumbnail control
			var guid = "" + thumbnail1.getGuid();
			if (guid) {
				for (var i = 1; i <= fileCount; i++) {
					if (("" + uploader.getUploadFileGuid(i)) == guid) {
						selectedIndex = i;
						break;
					}
				}
			}

			if (selectedIndex) {
				// move selection
				newSelectedIndex = selectedIndex + offset;

				if (newSelectedIndex > 0 && newSelectedIndex <= fileCount) {
					uploader.setUploadFileSelected(selectedIndex, false);
					uploader.setUploadFileSelected(newSelectedIndex, true);
				}
			} else if (fileCount > 0) {
				// if there isn't selected files
				if (offset < 0) {
					// if click 'prev' then select last file
					newSelectedIndex = fileCount;
					uploader.setUploadFileSelected(newSelectedIndex, true);
				} else {
					// if click 'next' then select first file
					newSelectedIndex = 1;
					uploader.setUploadFileSelected(newSelectedIndex, true);
				}

			}
		}

		//]]>
	</script>

</head>
<body>
	<form>
	<h1>
		<a href="../index.cfm">Aurigma Image Uploader Demos</a> &rarr; Photo Order Demo</h1>
	<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>
	<div class="note">
		<h4>
			Note</h4>
		<p>
			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.
		</p>
	</div>
	<div class="Ab">
		<div class="Ab-b">
			<table align="center" style="margin: 0 auto;">
				<tr>
					<td colspan="5">
						<h2>
							Order&nbsp;Details</h2>
					</td>
				</tr>
				<tr>
					<td colspan="5">

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

							//For ActiveX control full path to CAB file (including file name) should be specified.
							t.activeXControlCodeBase = "../Scripts/ImageUploader6.cab";
							t.activeXControlVersion = "6,5,38,0";
							t.activeXControlEnabled = true;

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

						<br />
					</td>
				</tr>
				<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>
				<tr>
					<td colspan="5" style="text-align: right; padding-top: 3px;">
						<a class="btn" href="#" onclick="itemChange(true);return false;">Apply to all</a>
					</td>
				</tr>
				<tr>
					<td>
						&nbsp;
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<a class="btn" href="#" onclick="changeThumbnail(-1);return false;">&lt;&nbsp;prev</a>
					</td>
					<td>
						&nbsp;
					</td>
					<td colspan="2" style="text-align: right;">
						<a class="btn" href="#" onclick="changeThumbnail(1);return false;">next&nbsp;&gt;</a>
					</td>
				</tr>
			</table>
		</div>
		<div class="Ab-A">
			<ul class="Toolbar">
				<li><a class="selectAll" href="#" onclick="imageUploader1.SelectAll();return false;">
					Select All</a></li>
				<li><a class="selectNone" href="#" onclick="imageUploader1.DeselectAll();return false;">
					Deselect All</a></li>
				<li><a class="send" href="#" onclick="imageUploader1.Send();return false;">Upload</a></li>
				<li><a class="refresh" href="#" onclick="imageUploader1.Refresh();return false;">Refresh</a></li>
			</ul>

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

				//For ActiveX control full path to CAB file (including file name) should be specified.
				iu.activeXControlCodeBase = t.activeXControlCodeBase;
				iu.activeXControlVersion = t.activeXControlVersion;
				iu.activeXControlEnabled = t.activeXControlEnabled;

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

				iu.showNonemptyResponse = "off";

				//Configure License Keys
				iu.addParam("LicenseKey", "XXXXX-XXXXX-XXXXX-XXXXX-XXXXX;XXXXX-XXXXX-XXXXX-XXXXX-XXXXX");

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

				//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", "ImageUploader1_SelectionChange");
				iu.addEventListener("FullPageLoad", "ImageUploader1_FullPageLoad");

				//Create installation progress.
				var ip = new InstallationProgressExtender(iu);
				ip.setProgressImageUrl("../Scripts/InstallationProgress.gif");
				ip.setProgressCssClass("ScreenStyle");
				ip.setInstructionsCssClass("ScreenStyle");

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

		</div>
	</div>
	</form>
</body>
</html>
<!--END-->