14 files changed, 595 insertions, 0 deletions
diff --git a/includes/js/dojox/image/tests/images.json b/includes/js/dojox/image/tests/images.json
new file mode 100644
index 0000000..bd0cf96
--- /dev/null
+++ b/includes/js/dojox/image/tests/images.json
@@ -0,0 +1,32 @@
+{ items: [
+	{
+	  "thumb":"images/extraWide.jpg",
+	  "large":"images/extraWide.jpg",
+	  "title":"I'm wide, me",
+	  "link":"http://www.flickr.com/photos/44153025@N00/748348847"
+	},
+	{
+	 "thumb":"images/imageHoriz.jpg",
+	  "large":"images/imageHoriz.jpg",
+	  "title":"I'm a horizontal picture",
+	  "link":"http://www.flickr.com/photos/44153025@N00/735656038"
+	},
+	{
+	  "thumb":"images/imageHoriz2.jpg",
+	  "large":"images/imageHoriz2.jpg",
+	  "title":"I'm another horizontal picture",
+	  "link":"http://www.flickr.com/photos/44153025@N00/714540483"
+	},
+	{
+	 "thumb":"images/imageVert.jpg",
+	  "large":"images/imageVert.jpg",
+	  "title":"I'm a vertical picture",
+	  "link":"http://www.flickr.com/photos/44153025@N00/715392758"
+	},
+	{
+	 "large":"images/square.jpg",
+	 "thumb":"images/square.jpg",
+	 "link" :"images/square.jpg",
+	 "title":"1:1 aspect ratio"
+	}
+]}
+\ No newline at end of file
diff --git a/includes/js/dojox/image/tests/images/extraWide.jpg b/includes/js/dojox/image/tests/images/extraWide.jpg
new file mode 100644
index 0000000..2161825
--- /dev/null
+++ b/includes/js/dojox/image/tests/images/extraWide.jpg
diff --git a/includes/js/dojox/image/tests/images/huuuge.png b/includes/js/dojox/image/tests/images/huuuge.png
new file mode 100644
index 0000000..ee98a39
--- /dev/null
+++ b/includes/js/dojox/image/tests/images/huuuge.png
diff --git a/includes/js/dojox/image/tests/images/imageHoriz.jpg b/includes/js/dojox/image/tests/images/imageHoriz.jpg
new file mode 100644
index 0000000..3948416
--- /dev/null
+++ b/includes/js/dojox/image/tests/images/imageHoriz.jpg
diff --git a/includes/js/dojox/image/tests/images/imageHoriz2.jpg b/includes/js/dojox/image/tests/images/imageHoriz2.jpg
new file mode 100644
index 0000000..fbbf404
--- /dev/null
+++ b/includes/js/dojox/image/tests/images/imageHoriz2.jpg
diff --git a/includes/js/dojox/image/tests/images/imageVert.jpg b/includes/js/dojox/image/tests/images/imageVert.jpg
new file mode 100644
index 0000000..1652338
--- /dev/null
+++ b/includes/js/dojox/image/tests/images/imageVert.jpg
diff --git a/includes/js/dojox/image/tests/images/spanke.jpg b/includes/js/dojox/image/tests/images/spanke.jpg
new file mode 100644
index 0000000..ec95fb0
--- /dev/null
+++ b/includes/js/dojox/image/tests/images/spanke.jpg
diff --git a/includes/js/dojox/image/tests/images/square.jpg b/includes/js/dojox/image/tests/images/square.jpg
new file mode 100644
index 0000000..9094d5a
--- /dev/null
+++ b/includes/js/dojox/image/tests/images/square.jpg
diff --git a/includes/js/dojox/image/tests/test_Gallery.html b/includes/js/dojox/image/tests/test_Gallery.html
new file mode 100644
index 0000000..320c481
--- /dev/null
+++ b/includes/js/dojox/image/tests/test_Gallery.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<title>Testing the Image Gallery</title>
+
+	<style type="text/css">
+		@import "../../../dijit/tests/css/dijitTests.css";
+		@import "../resources/image.css";
+	</style>
+
+
+	<script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script>
+	<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
+	<script type="text/javascript" src="../ThumbnailPicker.js"></script>
+	<script type="text/javascript" src="../SlideShow.js"></script>
+	<script type="text/javascript" src="../Gallery.js"></script>
+	<script type="text/javascript" src="../../../dojo/data/util/simpleFetch.js"></script>
+	<script type="text/javascript" src="../../data/FlickrStore.js"></script>
+	<script type="text/javascript" src="../../data/FlickrRestStore.js"></script>
+	<script type="text/javascript" src="../../../dojo/data/ItemFileReadStore.js"></script>
+
+	<script type="text/javascript">
+		// dojo.require("dojox.image.Gallery");
+		dojo.require("dojox.data.FlickrRestStore");
+		dojo.require("dojo.parser");	// find widgets
+
+		dojo.addOnLoad(function(){
+			var flickrRestStore = new dojox.data.FlickrRestStore();
+			var req = {
+				query: {
+					userid: "44153025@N00",
+					apikey: "8c6803164dbc395fb7131c9d54843627",
+					sort: [
+						   {
+							attribute: "interestingness",
+							descending: true
+							}
+						   ],
+				//	tags: ["superhorse", "redbones", "beachvolleyball"],
+					tag_mode: "any"
+				},
+				count: 20
+			};
+			dijit.byId('gallery1').setDataStore(flickrRestStore, req);
+/*
+			dijit.byId('gallery2').setDataStore(imageItemStore,{ count:20 },{
+				imageThumbAttr: "thumb",
+				imageLargeAttr: "large"
+			});
+*/
+		});
+	</script>
+</head>
+<body>
+	<h1 class="testTitle">dojox.image.Gallery</h1>
+
+	<h2>From FlickrRestStore:</h2>
+	<div id="gallery1" dojoType="dojox.image.Gallery" imageWidth="700" imageHeight="500"></div>
+
+<!--
+	<h2>From ItemFileReadStore:</h2>
+	<div id="gallery2" dojoType="dojox.image.Gallery"></div>
+-->
+
+</body>
+</html>
diff --git a/includes/js/dojox/image/tests/test_Lightbox.html b/includes/js/dojox/image/tests/test_Lightbox.html
new file mode 100644
index 0000000..15b34c8
--- /dev/null
+++ b/includes/js/dojox/image/tests/test_Lightbox.html
@@ -0,0 +1,105 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<title>dojox.image.Lightbox Tests | The Dojo Toolkit</title>
+	
+	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
+	<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
+	<script type="text/javascript" src="../Lightbox.js"></script>
+	<script type="text/javascript">
+		// dojo.require("dojox.image.Lightbox"); // un-comment when not debugging
+		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
+		dojo.require("dojox.data.FlickrStore");
+	</script>
+
+	<style type="text/css">
+		@import "../../../dojo/resources/dojo.css";
+		@import "../../../dijit/themes/dijit.css";
+		@import "../../../dijit/tests/css/dijitTests.css"; 
+
+		/* you need this file */		
+		@import "../resources/image.css"; 
+
+		body, html { width:100%; height:100%; margin:0; padding:0; } 
+
+	</style>
+
+	<script type="text/javascript">
+		// programatic flickrstore implementation [basic]
+		function onComplete(items,request){
+			if (items.length>0){
+				dojo.forEach(items,function(item){
+					var part = {
+						title: flickrStore.getValue(item,"title"),
+						href: flickrStore.getValue(item,"imageUrl")
+					};
+					// FIXME: make addImage more accessible, or do this internally
+					// _attachedDialog is dijit.byId("dojoxLightboxDialog"), and the
+					// is only one per page.
+					dijit.byId('fromStore')._attachedDialog.addImage(part,"flickrStore");
+				});
+				dojo.byId('flickrButton').disabled = false; 
+			}
+		}
+
+		function onError(error,request){
+			console.warn(error,request);
+		}
+
+		function init(){
+			var flickrRequest = {
+				query: {},
+				onComplete: onComplete,
+				onError: onError,
+				userid: "jetstreet",
+				tags: "jetstreet",
+				count: 10
+			};
+			flickrStore.fetch(flickrRequest);
+		}
+		dojo.addOnLoad(init);
+	</script>
+
+
+</head>
+<body>
+
+<div style="padding:20px;">
+	<h1 class="testTitle">a Dojo based Lightbox implementation:</h1>
+
+	<h3>Individual</h3>
+	<p>
+		<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" title="More Guatemala...">tall</a>
+		<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" title="Antigua, Guatemala">4:3 image</a>
+		<a href="images/broken.jpg" dojoType="dojox.image.Lightbox" title="broken href example">Broken link</a>
+		<a href="images/huuuge.png" dojoType="dojox.image.Lightbox" title="a large image">large than viewport?</a>
+	</p>
+
+	<h3>Grouped:</h3>
+	<p>
+		<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Amsterdam Train Depot">wide image</a>
+		<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group1" title="1:1 aspect">square</a>
+		<a href="images/extraWide.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Greeneville, TN">wide image</a>
+		<a href="images/broken.jpg" dojoType="dojox.image.Lightbox" group="group1" title="broken href example">Broken link</a>
+	</p>	
+
+	<h3>Alternate Group:</h3>	
+	<p>
+		<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Amsterdam Train Depot">wide image</a>
+		<a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group2" title="1:1 aspect">square</a>
+		<a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Antigua, Guatemala">4:3 image</a>
+		<a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" group="group2" title="More Guatemala...">tall</a>
+	</p>
+
+	<h3>From dojox.data.FlickrStore:</h3>
+
+	<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
+	<div id="fromStore" dojoType="dojox.image.Lightbox" store="flickrStore" group="flickrStore"></div>
+
+	<input id="flickrButton" type="button" onclick="dijit.byId('fromStore').show()" value="show flickr lightbox" disabled="disabled">
+	
+</div>
+
+</body>
+</html>
diff --git a/includes/js/dojox/image/tests/test_Magnifier.html b/includes/js/dojox/image/tests/test_Magnifier.html
new file mode 100644
index 0000000..fef1ddd
--- /dev/null
+++ b/includes/js/dojox/image/tests/test_Magnifier.html
@@ -0,0 +1,98 @@
+<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
+<head>
+    <title>Testing image</title>
+    <style type="text/css">
+		@import "../../../dojo/resources/dojo.css";
+		@import "../../../dijit/tests/css/dijitTests.css";
+		@import "../../../dijit/themes/tundra/tundra.css";
+		/* needed for glass overlay: */
+		@import "../resources/Magnifier.css";
+		
+		p { padding:20px; border:1px solid #ededed; }
+		#testImage { border:2px solid #000; }
+		
+    </style>
+    <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad:true"></script>
+	<!-- for debugging -->
+	<script type="text/javascript" src="../MagnifierLite.js"></script>
+	<script type="text/javascript" src="../Magnifier.js"></script>
+
+    <script type="text/javascript">
+		dojo.require("dojox.image.Magnifier");
+		dojo.require("dijit.form.Button");		
+	</script>
+
+</head>
+<body class="tundra">
+
+    <h1 class="testTitle">dojox.image.Magnifier test page</h1>
+
+		<p>They are just images. It's entirely unobtrusive to add magnification to an image, and style it accordingly.</p>
+		<p>This widget is based on <a href="test_MagnifierLite.html">dojox.image.MagnifierLite</a>, an image-only variant on this dojox.gfx
+		based Widget. The idea was/is to include addational surfaces in some kind of _Templated GFX widget, based on _Widget.</p>
+		<p>
+		Scale= 2.34, 5.67, and 8.90: <br>
+		<img id="testImage" dojoType="dojox.image.Magnifier" src="images/spanke.jpg"
+			 style="width:200px; height:130px;" scale="2.34" />
+		<img id="testImage4" dojoType="dojox.image.Magnifier" src="images/spanke.jpg"
+			 style="width:200px; height:130px;" scale="5.67" />
+
+		<img id="testImage5" dojoType="dojox.image.Magnifier" src="images/spanke.jpg"
+			 style="width:200px; height:130px;" scale="8.90" />
+		</p>
+		
+		<p>
+		<img id="testImage2" dojoType="dojox.image.Magnifier" src="images/spanke.jpg"
+			 style="width:200px; height:130px; padding-right:20px; float:left" />
+		I Am Some inline text.<br>lorem ipsum.<br style="clear:both">
+		</p>
+		
+		<p>A Transparent .png:<br>
+
+		<img  style="width:400px; height:260px" id="test3"
+			  dojoType="dojox.image.Magnifier" glassSize="215" scale="3"
+			  src="../../../util/resources/logo/positive/dojo.logo.big.png" />
+		</p>
+
+		<p>Programatic:<br>
+		
+		<button dojoType="dijit.form.Button" id="foob">
+			Make It
+			<script type="dojo/method" event="onClick">
+				this.setAttribute("disabled",true);
+				dijit.byId("foobd").setAttribute("disabled",false);
+				new dojox.image.Magnifier({ scale:4.2, glassSize:200 },"foobar");
+			</script>
+		</button>
+
+		<button dojoType="dijit.form.Button" id="foobd" disabled="disabled">
+			Destroy It
+			<script type="dojo/method" event="onClick">
+				this.setAttribute("disabled",true);
+				dijit.byId("foobar").destroy();
+				console.log('layout changed:');
+				dijit.byId("after1")._adjustScale();
+				dijit.byId("after2")._adjustScale();
+			</script>
+		</button>
+		
+		<br /><!-- srcNodeRef : -->
+		<img id="foobar" style="width:300px; height:195px;" src="images/spanke.jpg" />
+		</p>
+
+		<p>Remote file (GTA:LCS/psp map):<br>
+		<img id='after1' style="width:167px; height:240px; border:4px solid #333;"
+			 src="http://img.qj.net/uploads/articles_module/66700/stauntonhpackages_qjpreviewth.png"
+			 scale="6" glassSize="150" dojoType="dojox.image.Magnifier"
+			/>
+
+		<br>Everybody loves Zelda, right?<br>
+		<img id='after2' style="width:585px; height:201px" scale="7" glassSize="185" dojoType="dojox.image.Magnifier" src="http://www.zelda-infinite.com/games/zelda1/overworld.png" /> 
+		</p>
+		
+		<p id="programaticContainer">
+		<!-- not yet? -->	
+		</p>
+		
+</body>
+</html>
diff --git a/includes/js/dojox/image/tests/test_MagnifierLite.html b/includes/js/dojox/image/tests/test_MagnifierLite.html
new file mode 100644
index 0000000..6e6ccd7
--- /dev/null
+++ b/includes/js/dojox/image/tests/test_MagnifierLite.html
@@ -0,0 +1,91 @@
+<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
+<head>
+    <title>Testing image</title>
+    <style type="text/css">
+		@import "../../../dojo/resources/dojo.css";
+		@import "../../../dijit/tests/css/dijitTests.css";
+		@import "../../../dijit/themes/tundra/tundra.css";
+		@import "../resources/Magnifier.css";
+		
+		p { padding:20px; border:1px solid #ededed; }
+		#testImage { border:2px solid #000; }
+		
+    </style>
+
+    <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad:true"></script>
+	<script type="text/javascript" src="../MagnifierLite.js"></script>
+    <script type="text/javascript">
+		dojo.require("dojox.image.MagnifierLite");
+		dojo.require("dijit.form.Button");		
+	</script>
+
+</head>
+<body class="tundra">
+
+    <h1 class="testTitle">dojox.image.MagnifierLite test page</h1>
+
+		<p>They are just images. It's entirely unobtrusive to add magnification to an image, and style it accordingly.</p>
+
+		<p>This is the base class for <a href="test_Magnifier.html">dojox.image.Magnifier</a>, a dojox.gfx-based extension
+		this portion does not require the dojox.gfx package, but is limited to CSS-based styling.
+		</p>
+
+		<p>
+		Scale= 2.34, 5.67, and 8.90: <br>
+		<img id="testImage" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg"
+			 style="width:200px; height:130px;" scale="2.34" />
+		<img id="testImage4" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg"
+			 style="width:200px; height:130px;" scale="5.67" />
+
+		<img id="testImage5" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg"
+			 style="width:200px; height:130px;" scale="8.90" />
+		</p>
+		
+		<p>
+		<img id="testImage2" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg"
+			 style="width:200px; height:130px; padding-right:20px; float:left" />
+		I Am Some inline text.<br>lorem ipsum.<br style="clear:both">
+		</p>
+		
+		<p>A Transparent .png: (url unavailable in release versions, need build-utils package, or svn)<br>
+
+		<img  style="width:400px; height:260px" id="test3"
+			  dojoType="dojox.image.MagnifierLite" glassSize="215" scale="3"
+			  src="../../../util/resources/logo/positive/dojo.logo.big.png" />
+		</p>
+
+		<p>Programatic: (destroy() removes this.domNode)<br>
+		
+		<button dojoType="dijit.form.Button" id="foob">
+			Make It
+			<script type="dojo/method" event="onClick">
+				this.setAttribute("disabled",true);
+				dijit.byId("foobd").setAttribute("disabled",false);
+				new dojox.image.MagnifierLite({ scale:4.2, glassSize:200 },"foobar");
+			</script>
+		</button>
+
+		<button dojoType="dijit.form.Button" id="foobd" disabled="disabled">
+			Destroy It
+			<script type="dojo/method" event="onClick">
+				this.setAttribute("disabled",true);
+				dijit.byId("foobar").destroy();
+			</script>
+		</button>
+		
+		<br /><!-- srcNodeRef : -->
+		<img id="foobar" style="width:300px; height:195px;" src="images/spanke.jpg" />
+		</p>
+
+		<p>Remote file (GTA:LCS/psp map):<br>
+		<img style="width:167px; height:240px; border:4px solid #333;"
+			 src="http://img.qj.net/uploads/articles_module/66700/stauntonhpackages_qjpreviewth.png"
+			 scale="6" glassSize="150" dojoType="dojox.image.MagnifierLite"
+			/>
+
+		<br>Everybody loves Zelda:<br>
+		<img style="width:585px; height:201px" scale="7" glassSize="185" dojoType="dojox.image.MagnifierLite" src="http://www.zelda-infinite.com/games/zelda1/overworld.png" /> 
+		</p>
+				
+</body>
+</html>
diff --git a/includes/js/dojox/image/tests/test_SlideShow.html b/includes/js/dojox/image/tests/test_SlideShow.html
new file mode 100644
index 0000000..9200c4b
--- /dev/null
+++ b/includes/js/dojox/image/tests/test_SlideShow.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<title>Testing dojox.image.SlideShow</title>
+
+	<style type="text/css">
+		@import "../../../dijit/tests/css/dijitTests.css";
+		@import "../resources/image.css";
+	</style>
+	
+	<script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:false, isDebug: true, defaultTestTheme: 'soria'"></script>
+	<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
+	<script type="text/javascript" src="../SlideShow.js"></script>
+	<script type="text/javascript" src="../../../dojo/data/ItemFileReadStore.js"></script>	
+	<script type="text/javascript" src="../../data/FlickrRestStore.js"></script>	
+
+	<script type="text/javascript">
+		// dojo.require("dojox.image.SlideShow");
+		// dojo.require("dojox.data.FlickrRestStore");
+		// dojo.require("dojo.data.ItemFileReadStore"); 
+		dojo.require("dojo.parser");	// find widgets		
+		
+		dojo.addOnLoad(function(){
+			//Initialize the first SlideShow with an ItemFileReadStore
+			dojo.parser.parse(dojo.body());
+			dijit.byId('slideshow1').setDataStore(imageItemStore,
+				{ query: {}, count:20 },
+				{
+					imageThumbAttr: "thumb",
+					imageLargeAttr: "large"
+				}
+			);
+			
+			//INitialize the second store with a FlickrRestStore
+			var flickrRestStore = new dojox.data.FlickrRestStore();
+			var req = {
+				query: {
+					userid: "44153025@N00",
+					apikey: "8c6803164dbc395fb7131c9d54843627"
+				},
+				count: 20
+			};
+			dijit.byId('slideshow2').setDataStore(flickrRestStore, req);
+		});
+			
+	</script>
+</head>
+<body>
+	<h1 class="testTitle">dojox.image.SlideShow</h1>
+
+	<h2>from dojo.data.ItemFileReadStore</h2>
+	<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div>
+
+	This SlideShow should display five photos, and loop. It should also
+	open a URL when the image is clicked.  The widget should also resize to
+	fit the image.
+	<div id="slideshow1" dojoType="dojox.image.SlideShow"></div>
+
+	<h2>from dojox.data.FlickrRestStore</h2>
+	This SlideShow should display five photos, and not loop. It should also not
+	open a URL when the image is clicked.  AutoLoading of images is also disabled.
+	The time between images in a SlideShow is 1 second.  The widget should not resize to fit the image
+	<div id="slideshow2" dojoType="dojox.image.SlideShow" noLink="true" loop="false" autoLoad="false"
+		slideshowInterval="1" fixedHeight="true"></div>
+
+</body>
+</html>
diff --git a/includes/js/dojox/image/tests/test_ThumbnailPicker.html b/includes/js/dojox/image/tests/test_ThumbnailPicker.html
new file mode 100644
index 0000000..90cdf2e
--- /dev/null
+++ b/includes/js/dojox/image/tests/test_ThumbnailPicker.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+	<title>Testing the ThumbnailPicker</title>
+
+	<style type="text/css">
+		@import "../../../dijit/tests/css/dijitTests.css";
+		@import "../resources/image.css";
+	</style>
+	
+	<script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script>
+	<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
+	<script type="text/javascript" src="../ThumbnailPicker.js"></script>
+	
+	<script type="text/javascript">
+		// dojo.require("dojox.image.Gallery");
+		dojo.require("dojox.data.FlickrRestStore"); 
+		dojo.require("dojo.data.ItemFileReadStore"); 
+		dojo.require("dojo.parser");	// find widgets
+		
+		/*
+			Initializes the ThumbnailPicker with a data store that
+			reads from the Flickr REST APIs.
+		*/
+		function initFlickrGallery() {
+			var flickrRestStore = new dojox.data.FlickrRestStore();
+			var req = {
+				query: {
+					userid: "44153025@N00",//The Flickr user id to use
+					apikey: "8c6803164dbc395fb7131c9d54843627",//An API key is required.
+					sort: [
+						   {
+							descending: true //Use descending sort order, ascending is default.
+							}
+						   ],
+					tags: ["superhorse", "redbones", "beachvolleyball","dublin","croatia"],
+					tag_mode: "any" //Match any of the tags
+				},
+				count: 20
+			};
+			
+			//Set the flickr data store on two of the dojox.image.ThumbnailPicker widgets
+			dijit.byId('thumbPicker1').setDataStore(flickrRestStore, req);
+			dijit.byId('thumbPicker3').setDataStore(flickrRestStore, req);
+		}
+		
+		/*
+			Initializes the second ThumbnailPicker widget with a data store that
+			reads information from a JSON URL.  This also tells the ThumbnailPicker
+			the name of the JSON attributes to read from each data item retrieved
+			from the JSON URL.
+		*/
+		function initItemStoreGallery(){
+			var itemRequest = {
+				query: {},
+				count: 20
+			};
+			var itemNameMap = {
+				imageThumbAttr: "thumb",
+				imageLargeAttr: "large"
+			};
+			
+			//Set the dojo.data.ItemFileReadStore on two of the dojox.image.ThumbnailPicker widgets
+			//Note the use of the 'itemNameMap', which tells the widget what attributes to
+			//read from the store.  Look in the 'images.json' file in the same folder as this
+			//file to see the data being read by the widget.
+			dijit.byId('thumbPicker2').setDataStore(imageItemStore, itemRequest, itemNameMap);
+			dijit.byId('thumbPicker4').setDataStore(imageItemStore, itemRequest, itemNameMap);
+		}
+		
+		//Subscribe to clicks on the thumbnails, and print out the information provided
+		function doSubscribe(){
+			function updateDiv(packet){
+				dojo.byId('PublishedData').innerHTML = "You selected the thumbnail:"
+						+ "<br/><b>Index:</b> " + packet.index
+						+ "<br/><b>Url:</b> " + packet.url
+						+ "<br/><b>Large Url:</b> " + packet.largeUrl
+						+ "<br/><b>Title:</b> " + packet.title
+						+ "<br/><b>Link:</b> " + packet.link
+						;
+			};
+			
+			//When an image in the ThumbnailPicker is clicked on, it publishes
+			//information on the image to a topic, whose name is found by calling
+			//the 'getTopicName' function on the widget.
+			dojo.subscribe(dijit.byId('thumbPicker1').getClickTopicName(), updateDiv);
+			dojo.subscribe(dijit.byId('thumbPicker2').getClickTopicName(), updateDiv);
+		}
+		
+		dojo.addOnLoad(initFlickrGallery);
+		dojo.addOnLoad(initItemStoreGallery);
+		dojo.addOnLoad(doSubscribe);
+	</script>
+</head>
+<body>
+	<h1 class="testTitle">dojox.image.ThumbnailPicker</h1>
+
+	<div id="PublishedData" style="background-color:light-grey">
+		When you click on a thumbnail image, it's information is placed here
+	</div>
+
+	<h2>From FlickrRestStore:</h2>
+	This ThumbnailPicker should have 8 thumbnails, with each of them linking
+	to a URL when clicked on.  The cursor should also change when over an image.
+	<div id="thumbPicker1" dojoType="dojox.image.ThumbnailPicker" size="500"
+			useHyperlink="true" ></div>
+
+    <h2>From ItemFileReadStore:</h2>
+	This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT
+	open a URL, and the cursor should not change when over an image that is not an arrow.
+	
+    <div id="thumbPicker2" dojoType="dojox.image.ThumbnailPicker" size="400"
+		isClickable="false"></div>
+	<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div>
+	
+	<h2>From FlickrRestStore:</h2>
+	This ThumbnailPicker should have 6 thumbnails, with each of them linking
+	to a URL when clicked on.  The cursor should also change when over an image.
+	Unlike the ThumbnailPicker above, when these links are clicked on, this page
+	changes, instead of a popup window.
+	
+	<div id="thumbPicker3" dojoType="dojox.image.ThumbnailPicker" size="600"
+		useHyperLink="true" hyperlinkTarget="this"></div>
+
+	<h2>From ItemFileReadStore, and vertical:</h2>
+	This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT
+	open a URL, and the cursor should not change when over an image that is not an arrow.
+	The thumbnails should also be aligned vertically.
+    <div id="thumbPicker4" dojoType="dojox.image.ThumbnailPicker" size="300"
+		isClickable="false" isHorizontal="false"></div>
+
+</body>
+</html>