New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f

37 files changed, 3310 insertions, 0 deletions

diff --git a/includes/js/dojox/image/Gallery.js b/includes/js/dojox/image/Gallery.js
new file mode 100644
index 0000000..d29ae22
--- /dev/null
+++ b/includes/js/dojox/image/Gallery.js
@@ -0,0 +1,182 @@
+if(!dojo._hasResource["dojox.image.Gallery"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Gallery"] = true;
+dojo.provide("dojox.image.Gallery");
+dojo.experimental("dojox.image.Gallery");
+//
+// dojox.image.Gallery courtesy Shane O Sullivan, licensed under a Dojo CLA 
+// @author  Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
+//
+// For a sample usage, see http://www.skynet.ie/~sos/photos.php
+//
+//	TODO: Make public, document params and privitize non-API conformant methods.
+//	document topics.
+
+dojo.require("dojo.fx");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dojox.image.ThumbnailPicker");
+dojo.require("dojox.image.SlideShow");
+
+dojo.declare("dojox.image.Gallery",
+	[dijit._Widget, dijit._Templated],
+	{
+	// summary:
+	//	Gallery widget that wraps a dojox.image.ThumbnailPicker and dojox.image.SlideShow widget
+	//
+	// imageHeight: Number
+	//	Maximum height of an image in the SlideShow widget
+	imageHeight: 375,
+	
+	// imageWidth: Number
+	//	Maximum width of an image in the SlideShow widget
+	imageWidth: 500,
+		
+	// pageSize: Number
+	//	The number of records to retrieve from the data store per request.
+	pageSize: dojox.image.SlideShow.prototype.pageSize,
+	
+	// autoLoad: Boolean
+	//	If true, images are loaded before the user views them. If false, an
+	//	image is loaded when the user displays it.
+	autoLoad: true,
+	
+	// linkAttr: String
+	//	Defines the name of the attribute to request from the store to retrieve the
+	//	URL to link to from an image, if any.
+	linkAttr: "link",
+	
+	// imageThumbAttr: String
+	//	Defines the name of the attribute to request from the store to retrieve the
+	//	URL to the thumbnail image.
+	imageThumbAttr: "imageUrlThumb",
+	
+	// imageLargeAttr: String
+	//	Defines the name of the attribute to request from the store to retrieve the
+	//	URL to the image.
+	imageLargeAttr: "imageUrl",
+	
+	// titleAttr: String
+	//	Defines the name of the attribute to request from the store to retrieve the
+	//	title of the picture, if any.
+	titleAttr: "title",
+ 
+	// slideshowInterval: Integer
+	//	time in seconds, between image changes in the slide show.
+	slideshowInterval: 3,
+	
+	templateString:"<div dojoAttachPoint=\"outerNode\" class=\"imageGalleryWrapper\">\n\t<div dojoAttachPoint=\"thumbPickerNode\"></div>\n\t<div dojoAttachPoint=\"slideShowNode\"></div>\n</div>\n", 
+
+	postCreate: function(){
+		// summary: Initializes the widget, creates the ThumbnailPicker and SlideShow widgets
+		this.widgetid = this.id;
+		this.inherited(arguments)
+		
+		this.thumbPicker = new dojox.image.ThumbnailPicker({
+			linkAttr: this.linkAttr,
+			imageLargeAttr: this.imageLargeAttr,
+			titleAttr: this.titleAttr,
+			useLoadNotifier: true,
+			size: this.imageWidth
+		}, this.thumbPickerNode);
+		
+		
+		this.slideShow = new dojox.image.SlideShow({
+			imageHeight: this.imageHeight, 
+			imageWidth: this.imageWidth,
+			autoLoad: this.autoLoad,
+			linkAttr: this.linkAttr,
+			imageLargeAttr: this.imageLargeAttr,
+			titleAttr: this.titleAttr,
+			slideshowInterval: this.slideshowInterval,
+			pageSize: this.pageSize 
+		}, this.slideShowNode);
+		
+		var _this = this;
+		//When an image is shown in the Slideshow, make sure it is visible
+		//in the ThumbnailPicker
+		dojo.subscribe(this.slideShow.getShowTopicName(), function(packet){
+			//if(packet.index < _this.thumbPicker._thumbIndex
+			//   || packet.index > _this.thumbPicker._thumbIndex + _this.thumbPicker.numberThumbs -1){
+			//if(!_this.thumbPicker.isVisible(packet.index)){
+				//var index = packet.index - (packet.index % _this.thumbPicker.numberThumbs);
+				_this.thumbPicker._showThumbs(packet.index);
+			//}
+		});	
+		//When the user clicks a thumbnail, show that image
+		dojo.subscribe(this.thumbPicker.getClickTopicName(), function(evt){
+			_this.slideShow.showImage(evt.index);
+		});
+		//When the ThumbnailPicker moves to show a new set of pictures,
+		//make the Slideshow start loading those pictures first.
+		dojo.subscribe(this.thumbPicker.getShowTopicName(), function(evt){
+			_this.slideShow.moveImageLoadingPointer(evt.index);
+		});
+		//When an image finished loading in the slideshow, update the loading
+		//notification in the ThumbnailPicker
+		dojo.subscribe(this.slideShow.getLoadTopicName(), function(index){
+			_this.thumbPicker.markImageLoaded(index);
+		});
+		this._centerChildren();
+	},
+	  
+  	setDataStore: function(dataStore, request, /*optional*/paramNames){
+		// summary: Sets the data store and request objects to read data from.
+		// dataStore:
+		//	An implementation of the dojo.data.api.Read API. This accesses the image
+		//	data.
+		// request:
+		//	An implementation of the dojo.data.api.Request API. This specifies the
+		//	query and paging information to be used by the data store
+		// paramNames:
+		//	An object defining the names of the item attributes to fetch from the
+		//	data store.  The four attributes allowed are 'linkAttr', 'imageLargeAttr',
+		//	'imageThumbAttr' and 'titleAttr'
+		this.thumbPicker.setDataStore(dataStore, request, paramNames);
+		this.slideShow.setDataStore(dataStore, request, paramNames);
+  	},
+  
+  	reset: function(){
+		// summary: Resets the widget to its initial state
+		this.slideShow.reset();
+		this.thumbPicker.reset();
+  	},
+  
+	showNextImage: function(inTimer){
+		// summary: Changes the image being displayed in the SlideShow to the next
+		//	image in the data store
+		// inTimer: Boolean
+		//	If true, a slideshow is active, otherwise the slideshow is inactive.
+		this.slideShow.showNextImage();
+	},
+
+	toggleSlideshow: function(){
+		// summary: Switches the slideshow mode on and off.
+		this.slideShow.toggleSlideshow();
+	},
+
+	showImage: function(index, /*optional*/callback){
+		// summary: Shows the image at index 'idx'.
+		// idx: Number
+		//	The position of the image in the data store to display
+		// callback: Function
+		//	Optional callback function to call when the image has finished displaying.
+		this.slideShow.showImage(index, callback);
+	},
+	
+	_centerChildren: function() {
+		// summary: Ensures that the ThumbnailPicker and the SlideShow widgets
+		//	are centered.
+		var thumbSize = dojo.marginBox(this.thumbPicker.outerNode);
+		var slideSize = dojo.marginBox(this.slideShow.outerNode);
+		
+		var diff = (thumbSize.w - slideSize.w) / 2;
+		
+		if(diff > 0) {
+			dojo.style(this.slideShow.outerNode, "marginLeft", diff + "px");
+		} else if(diff < 0) {
+			dojo.style(this.thumbPicker.outerNode, "marginLeft", (diff * -1) + "px");
+		}
+	}
+});
+
+}
diff --git a/includes/js/dojox/image/Lightbox.js b/includes/js/dojox/image/Lightbox.js
new file mode 100644
index 0000000..79056d3
--- /dev/null
+++ b/includes/js/dojox/image/Lightbox.js
@@ -0,0 +1,451 @@
+if(!dojo._hasResource["dojox.image.Lightbox"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Lightbox"] = true;
+dojo.provide("dojox.image.Lightbox");
+dojo.experimental("dojox.image.Lightbox");
+
+dojo.require("dijit.Dialog"); 
+dojo.require("dojox.fx._base");
+
+dojo.declare("dojox.image.Lightbox",
+	dijit._Widget,{
+	// summary:
+	//	A dojo-based Lightbox implementation. 
+	//
+	// description:
+	//	An Elegant, keyboard accessible, markup and store capable Lightbox widget to show images
+	//	in a modal dialog-esque format. Can show individual images as Modal dialog, or can group
+	//	images with multiple entry points, all using a single "master" Dialog for visualization
+	//
+	//	key controls:
+	//		ESC - close
+	//		Down Arrow / Rt Arrow / N - Next Image
+	//		Up Arrow / Lf Arrow / P - Previous Image
+	// 
+	// example:
+	// |	<a href="image1.jpg" dojoType="dojox.image.Lightbox">show lightbox</a>
+	//
+	// example: 
+	// |	<a href="image2.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a>
+	// |	<a href="image3.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a>
+	//
+	// example:	 
+	// |	not implemented fully yet, though works with basic datastore access. need to manually call
+	// |	widget._attachedDialog.addImage(item,"fromStore") for each item in a store result set.
+	// |	<div dojoType="dojox.image.Lightbox" group="fromStore" store="storeName"></div>
+	//
+	// group: String
+	//		Grouping images in a page with similar tags will provide a 'slideshow' like grouping of images
+	group: "",
+
+	// title: String 
+	//		A string of text to be shown in the Lightbox beneath the image (empty if using a store)
+	title: "",
+
+	// href; String
+	//		Link to image to use for this Lightbox node (empty if using a store).
+	href: "",
+
+	// duration: Integer
+	//		Generic time in MS to adjust the feel of widget. could possibly add various 
+	//		durations for the various actions (dialog fadein, sizeing, img fadein ...) 
+	duration: 500,
+
+	// _allowPassthru: Boolean
+	//		Privately set this to disable/enable natural link of anchor tags
+	_allowPassthru: false,
+	
+	// _attachedDialg: dojox.image._LightboxDialog
+	//		The pointer to the global lightbox dialog for this widget
+	_attachedDialog: null, // try to share a single underlay per page?
+
+	startup: function(){
+		this.inherited(arguments);
+		// setup an attachment to the masterDialog (or create the masterDialog)
+		var tmp = dijit.byId('dojoxLightboxDialog');
+		if(tmp){
+			this._attachedDialog = tmp;
+		}else{
+			// this is the first instance to start, so we make the masterDialog
+			this._attachedDialog = new dojox.image._LightboxDialog({ id: "dojoxLightboxDialog" });
+			this._attachedDialog.startup();
+		}
+		if(!this.store){
+			// FIXME: full store support lacking, have to manually call this._attachedDialog.addImage(imgage,group) as it stands
+			this._addSelf();
+			this.connect(this.domNode, "onclick", "_handleClick");
+		}
+	},
+
+	_addSelf: function(){
+		// summary: Add this instance to the master LightBoxDialog
+		this._attachedDialog.addImage({
+			href: this.href,
+			title: this.title
+		},this.group||null);
+	},
+
+	_handleClick: function(/* Event */e){
+		// summary: Handle the click on the link 
+		if(!this._allowPassthru){ e.preventDefault(); }
+		else{ return; }
+		this.show();
+	},
+
+	show: function(){
+		// summary: Show the Lightbox with this instance as the starting point
+		this._attachedDialog.show(this);
+	},
+
+	disable: function(){
+		// summary: Disables event clobbering and dialog, and follows natural link
+		this._allowPassthru = true;
+	},
+
+	enable: function(){
+		// summary: Enables the dialog (prevents default link)
+		this._allowPassthru = false; 
+	}
+
+});
+
+dojo.declare("dojox.image._LightboxDialog",
+	dijit.Dialog,{
+	// summary:
+	//		The "dialog" shared  between any Lightbox instances on the page
+	//
+	// description:
+	//	
+	//		A widget that intercepts anchor links (typically around images) 	
+	//		and displays a modal Dialog. this is the actual Dialog, which you can
+	//		create and populate manually, though should use simple Lightbox's
+	//		unless you need to direct access.
+	//
+	//		There should only be one of these on a page, so all dojox.image.Lightbox's will us it
+	//		(the first instance of a Lightbox to be show()'n will create me If i do not exist)
+	// 
+	// title: String
+	// 		The current title, read from object passed to show() 
+	title: "",
+
+	// FIXME: implement titleTemplate
+
+	// inGroup: Array
+	//		Array of objects. this is populated by from the JSON object _groups, and
+	//		should not be populate manually. it is a placeholder for the currently 
+	//		showing group of images in this master dialog
+	inGroup: null,
+
+	// imgUrl: String
+	//		The src="" attribute of our imageNode (can be null at statup)
+	imgUrl: "",
+		
+	// errorMessage: String
+	// 		The text to display when an unreachable image is linked
+	errorMessage: "Image not found.",
+
+	// adjust: Boolean
+	//		If true, ensure the image always stays within the viewport
+	//		more difficult than necessary to disable, but enabled by default
+	//		seems sane in most use cases.
+	adjust: true,
+
+	// an object of arrays, each array (of objects) being a unique 'group'
+	_groups: { XnoGroupX: [] },
+
+	// errorImg: Url
+	//		Path to the image used when a 404 is encountered
+	errorImg: dojo.moduleUrl("dojox.image","resources/images/warning.png"),		
+
+	// privates:
+	_imageReady: false,
+	_blankImg: dojo.moduleUrl("dojo","resources/blank.gif"),
+	_clone: null, // the "untained" image
+	_wasStyled: null, // indicating taint on the imgNode
+
+	// animation holders:
+	_loadingAnim:null, 
+	_showImageAnim: null,
+	_showNavAnim: null,
+	_animConnects: [],
+	
+	templateString:"<div class=\"dojoxLightbox\" dojoAttachPoint=\"containerNode\">\n\t<div style=\"position:relative\">\n\t\t<div dojoAttachPoint=\"imageContainer\" class=\"dojoxLightboxContainer\">\n\t\t\t<img dojoAttachPoint=\"imgNode\" src=\"${imgUrl}\" class=\"dojoxLightboxImage\" alt=\"${title}\">\n\t\t\t<div class=\"dojoxLightboxFooter\" dojoAttachPoint=\"titleNode\">\n\t\t\t\t<div class=\"dijitInline LightboxClose\" dojoAttachPoint=\"closeNode\"></div>\n\t\t\t\t<div class=\"dijitInline LightboxNext\" dojoAttachPoint=\"nextNode\"></div>\t\n\t\t\t\t<div class=\"dijitInline LightboxPrev\" dojoAttachPoint=\"prevNode\"></div>\n\n\t\t\t\t<div class=\"dojoxLightboxText\"><span dojoAttachPoint=\"textNode\">${title}</span><span dojoAttachPoint=\"groupCount\" class=\"dojoxLightboxGroupText\"></span></div>\n\t\t\t</div>\n\t\t</div>\t\n\t\t\n\t</div>\n</div>\n",
+
+	startup: function(){
+		// summary: Add some extra event handlers, and startup our superclass.
+
+		this.inherited(arguments);
+		this._clone = dojo.clone(this.imgNode);
+		this.connect(document.documentElement,"onkeypress","_handleKey");
+		this.connect(window,"onresize","_position"); 
+		this.connect(this.nextNode, "onclick", "_nextImage");
+		this.connect(this.prevNode, "onclick", "_prevImage");
+		this.connect(this.closeNode, "onclick", "hide");
+		this._makeAnims();
+		this._vp = dijit.getViewport();
+		
+	},
+
+	show: function(/* Object */groupData){
+		// summary: Show the Master Dialog. Starts the chain of events to show
+		//		an image in the dialog, including showing the dialog if it is
+		//		not already visible
+		//
+		// groupData: Object
+		//		needs href and title attributes. the values for this image.
+		
+		var _t = this; // size
+
+		// we only need to call dijit.Dialog.show() if we're not already open.
+		if(!_t.open){ _t.inherited(arguments); }
+
+		if(this._wasStyled){
+			// ugly fix for IE being stupid:
+			dojo._destroyElement(_t.imgNode);
+			_t.imgNode = dojo.clone(_t._clone);
+			dojo.place(_t.imgNode,_t.imageContainer,"first");
+			_t._makeAnims();
+			_t._wasStyled = false;
+		}
+		
+		dojo.style(_t.imgNode,"opacity","0"); 
+		dojo.style(_t.titleNode,"opacity","0");
+		
+		_t._imageReady = false; 
+		_t.imgNode.src = groupData.href;
+		
+		if((groupData.group && groupData !== "XnoGroupX") || _t.inGroup){ 
+			if(!_t.inGroup){ 
+				_t.inGroup = _t._groups[(groupData.group)];
+				// determine where we were or are in the show 
+				dojo.forEach(_t.inGroup,function(g,i){
+					if(g.href == groupData.href){
+						_t._positionIndex = i;
+					}
+				},_t);
+			}
+			if(!_t._positionIndex){
+				_t._positionIndex=0;
+				_t.imgNode.src = _t.inGroup[_t._positionIndex].href;
+			}
+			// FIXME: implement titleTemplate
+			_t.groupCount.innerHTML = " (" +(_t._positionIndex+1) +" of "+_t.inGroup.length+")";
+			_t.prevNode.style.visibility = "visible";
+			_t.nextNode.style.visibility = "visible";
+		}else{
+			// single images don't have buttons, or counters:
+			_t.groupCount.innerHTML = "";
+			_t.prevNode.style.visibility = "hidden";
+			_t.nextNode.style.visibility = "hidden";
+		}
+		_t.textNode.innerHTML = groupData.title;
+		
+		if(!_t._imageReady || _t.imgNode.complete === true){
+			// connect to the onload of the image
+			_t._imgConnect = dojo.connect(_t.imgNode, "onload", _t, function(){
+				_t._imageReady = true;
+				_t.resizeTo({
+					w: _t.imgNode.width,
+					h: _t.imgNode.height,
+					duration:_t.duration
+				});
+				// cleanup
+				dojo.disconnect(_t._imgConnect);
+				if(_t._imgError){ dojo.disconnect(_t._imgError); }
+			});
+			
+			// listen for 404's:
+			_t._imgError = dojo.connect(_t.imgNode, "onerror", _t, function(){
+				dojo.disconnect(_t._imgError);
+				// trigger the above onload with a new src:
+				_t.imgNode.src = _t.errorImg;
+				_t._imageReady = true;
+				_t.textNode.innerHTML = _t.errorMessage;
+			});
+
+			// onload doesn't fire in IE if you connect before you set the src. 
+			// hack to re-set the src after onload connection made:
+			if(dojo.isIE){ _t.imgNode.src = _t.imgNode.src; }
+
+		}else{
+			// do it quickly. kind of a hack, but image is ready now
+			_t.resizeTo({ w: _t.imgNode.width, h: _t.imgNode.height, duration: 1 });
+		}
+
+	},
+
+	_nextImage: function(){
+		// summary: Load next image in group
+		if(!this.inGroup){ return; }
+		if(this._positionIndex+1<this.inGroup.length){
+			this._positionIndex++;
+		}else{
+			this._positionIndex = 0;
+		}
+		this._loadImage();
+	},
+
+	_prevImage: function(){
+		// summary: Load previous image in group
+
+		if(this.inGroup){ 
+			if(this._positionIndex == 0){
+				this._positionIndex = this.inGroup.length - 1;
+			}else{
+				this._positionIndex--;
+			}
+			this._loadImage();
+		}
+	},
+
+	_loadImage: function(){
+		// summary: Do the prep work before we can show another image 
+		this._loadingAnim.play(1);
+	},
+
+	_prepNodes: function(){
+		// summary: A localized hook to accompany _loadImage
+		this._imageReady = false; 
+		this.show({
+			href: this.inGroup[this._positionIndex].href,
+			title: this.inGroup[this._positionIndex].title
+		});
+	},
+
+	resizeTo: function(/* Object */size){
+		// summary: Resize our dialog container, and fire _showImage
+		
+		if(this.adjust && (size.h + 80 > this._vp.h || size.w + 50 > this._vp.w)){
+			size = this._scaleToFit(size);
+		}
+		
+		var _sizeAnim = dojox.fx.sizeTo({ 
+			node: this.containerNode,
+			duration: size.duration||this.duration,
+			width: size.w, 
+			height: size.h + 30
+		});
+		this.connect(_sizeAnim,"onEnd","_showImage");
+		_sizeAnim.play(15);
+	},
+
+	_showImage: function(){
+		// summary: Fade in the image, and fire showNav
+		this._showImageAnim.play(1);
+	},
+
+	_showNav: function(){
+		// summary: Fade in the footer, and setup our connections.
+		this._showNavAnim.play(1);
+	},
+
+	hide: function(){
+		// summary: Hide the Master Lightbox
+		dojo.fadeOut({node:this.titleNode, duration:200,
+			onEnd: dojo.hitch(this,function(){
+				// refs #5112 - if you _don't_ change the .src, safari will _never_ fire onload for this image
+				this.imgNode.src = this._blankImg; 
+			}) 
+		}).play(5); 
+		this.inherited(arguments);
+		this.inGroup = null;
+		this._positionIndex = null;
+	},
+
+	addImage: function(child, group){
+		// summary: Add an image to this Master Lightbox
+		//
+		// child: Object
+		//		The image information to add.
+		//		href: String - link to image (required)
+		// 		title: String - title to display
+		//
+		// group: String?
+		//		attach to group of similar tag or null for individual image instance
+		var g = group;
+		if(!child.href){ return; }
+		if(g){ 	
+			if(!this._groups[g]){
+				this._groups[g] = [];				
+			}
+			this._groups[g].push(child); 
+		}else{ this._groups["XnoGroupX"].push(child); }
+	},
+
+	_handleKey: function(/* Event */e){
+		// summary: Handle keyboard navigation internally
+		if(!this.open){ return; }
+
+		var dk = dojo.keys;
+		var key = (e.charCode == dk.SPACE ? dk.SPACE : e.keyCode);
+		switch(key){
+			
+			case dk.ESCAPE: this.hide(); break;
+
+			case dk.DOWN_ARROW:
+			case dk.RIGHT_ARROW:
+			case 78: // key "n"
+				this._nextImage(); break;
+
+			case dk.UP_ARROW:
+			case dk.LEFT_ARROW:
+			case 80: // key "p" 
+				this._prevImage(); break;
+		}
+	},
+	
+	_scaleToFit: function(/* Object */size){
+		// summary: resize an image to fit within the bounds of the viewport
+		// size: Object
+		//		The 'size' object passed around for this image
+		var ns = {};
+
+		// one of the dimensions is too big, go with the smaller viewport edge:
+		if(this._vp.h > this._vp.w){
+			// don't actually touch the edges:
+			ns.w = this._vp.w - 70;
+			ns.h = ns.w * (size.h / size.w);
+		}else{
+			// give a little room for the titlenode, too:
+			ns.h = this._vp.h - 80;
+			ns.w = ns.h * (size.w / size.h);
+		}
+
+		// trigger the nasty width="auto" workaround in show()
+		this._wasStyled = true;
+
+		// we actually have to style this image, it's too big
+		var s = this.imgNode.style;
+		s.height = ns.h + "px";	
+		s.width = ns.w + "px";
+
+		ns.duration = size.duration;
+		return ns; // Object
+
+	},
+	
+	_position: function(/* Event */e){
+		// summary: we want to know the viewport size any time it changes
+		this.inherited(arguments);
+		this._vp = dijit.getViewport();
+	},
+	
+	_makeAnims: function(){
+		// summary: make and cleanup animation and animation connections
+		
+		dojo.forEach(this._animConnects,dojo.disconnect);
+		this._animConnects = [];
+		this._showImageAnim = dojo.fadeIn({
+				node: this.imgNode,
+				duration: this.duration
+			});
+		this._animConnects.push(dojo.connect(this._showImageAnim, "onEnd", this, "_showNav"));
+		this._loadingAnim = dojo.fx.combine([
+				dojo.fadeOut({ node:this.imgNode, duration:175 }),
+				dojo.fadeOut({ node:this.titleNode, duration:175 })
+			]);
+		this._animConnects.push(dojo.connect(this._loadingAnim, "onEnd", this, "_prepNodes"));
+		this._showNavAnim = dojo.fadeIn({ node: this.titleNode, duration:225 });
+	}
+});
+
+}
diff --git a/includes/js/dojox/image/Magnifier.js b/includes/js/dojox/image/Magnifier.js
new file mode 100644
index 0000000..b6a3923
--- /dev/null
+++ b/includes/js/dojox/image/Magnifier.js
@@ -0,0 +1,75 @@
+if(!dojo._hasResource["dojox.image.Magnifier"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Magnifier"] = true;
+dojo.provide("dojox.image.Magnifier");
+
+dojo.require("dojox.gfx");
+dojo.require("dojox.image.MagnifierLite");
+
+dojo.declare("dojox.image.Magnifier",
+	[dojox.image.MagnifierLite],{
+	// summary:	Adds magnification on a portion of an image element, using dojox.gfx
+	//
+	// description: An unobtrusive way to add an unstyled overlay
+	// 		above the srcNode image element. The overlay/glass is a 
+	//		scaled version of the src image (so larger images sized down
+	//		are clearer).
+	//
+	//		over-ride the _createGlass method to create your custom surface,
+	//		being sure to create an img node on that surface.
+
+	_createGlass: function(){
+		// summary: create the glassNode, and an img on a dojox.gfx surface
+
+		// images are hard to make into workable templates, so just add outer overlay
+		// and skip using dijit._Templated
+		this.glassNode = dojo.doc.createElement('div');
+		this.surfaceNode = this.glassNode.appendChild(dojo.doc.createElement('div'));
+
+		dojo.addClass(this.glassNode,"glassNode");
+		dojo.body().appendChild(this.glassNode);
+
+		with(this.glassNode.style){
+			height = this.glassSize + "px";
+			width = this.glassSize + "px";
+		}
+		
+		this.surface = dojox.gfx.createSurface(this.surfaceNode, this.glassSize, this.glassSize);
+		this.img = this.surface.createImage({
+		   src:this.domNode.src,
+		   width:this._zoomSize.w,
+		   height:this._zoomSize.h
+		});
+
+	},
+
+	_placeGlass: function(e){
+		// summary: position the overlay centered under the cursor
+		var x = e.pageX - 2;
+		var y = e.pageY - 2 ;
+		var xMax = this.offset.x + this.offset.w + 2;
+		var yMax = this.offset.y + this.offset.h + 2;
+		
+		// with svg, our mouseout connection to the image surface doesn't
+		// fire, so we'r have to manually calculate offsets	
+		if(x<this.offset.x || y<this.offset.y || x>xMax || y>yMax){
+			this._hideGlass();
+		}else{
+			this.inherited(arguments);
+		}
+	},
+
+	_setImage: function(e){
+		// summary: set the image's offset in the clipping window relative to the mouse position
+
+		var xOff = (e.pageX - this.offset.l) / this.offset.w;
+		var yOff = (e.pageY - this.offset.t) / this.offset.h;
+		var x = (this._zoomSize.w * xOff * -1)+(this.glassSize*xOff);
+		var y = (this._zoomSize.h * yOff * -1)+(this.glassSize*yOff);
+		// set the image offset
+		this.img.setShape({ x: x, y:y });	
+
+	}
+
+});
+
+}
diff --git a/includes/js/dojox/image/MagnifierLite.js b/includes/js/dojox/image/MagnifierLite.js
new file mode 100644
index 0000000..2e37340
--- /dev/null
+++ b/includes/js/dojox/image/MagnifierLite.js
@@ -0,0 +1,126 @@
+if(!dojo._hasResource["dojox.image.MagnifierLite"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.MagnifierLite"] = true;
+dojo.provide("dojox.image.MagnifierLite");
+dojo.experimental("dojox.image.MagnifierLite");
+
+dojo.require("dijit._Widget");
+
+dojo.declare("dojox.image.MagnifierLite",
+	[dijit._Widget],{
+	// summary:	Adds magnification on a portion of an image element
+	//
+	// description: An unobtrusive way to add an unstyled overlay
+	// 		above the srcNode image element. The overlay/glass is a 
+	//		scaled version of the src image (so larger images sized down
+	//		are clearer).
+	//
+	//		The logic behind requiring the src image to be large is
+	//		"it's going to be downloaded, anyway" so this method avoids
+	//		having to make thumbnails and 2 http requests among other things.
+	//
+	// glassSize: Int
+	// 		the width and height of the bounding box
+	glassSize: 125,
+
+	// scale: Decimal
+	// 		the multiplier of the Mangification. 
+	scale: 6,
+
+	postCreate: function(){
+		this.inherited(arguments);
+		
+		// images are hard to make into workable templates, so just add outer overlay
+		// and skip using dijit._Templated		
+		this._adjustScale();
+		this._createGlass();
+		
+		this.connect(this.domNode,"onmouseenter","_showGlass");
+		this.connect(this.glassNode,"onmousemove","_placeGlass");
+		this.connect(this.img,"onmouseout","_hideGlass");
+
+		// when position of domNode changes, _adjustScale needs to run.
+		// window.resize isn't it always, FIXME:
+		this.connect(window,"onresize","_adjustScale");
+		
+	},
+
+	_createGlass: function(){
+		// summary: make img and glassNode elements as children of the body
+
+		this.glassNode = dojo.doc.createElement('div');
+		this.surfaceNode = this.glassNode.appendChild(dojo.doc.createElement('div'));
+		dojo.addClass(this.glassNode,"glassNode");
+		dojo.body().appendChild(this.glassNode);
+		with(this.glassNode.style){
+			height = this.glassSize + "px";
+			width = this.glassSize + "px";
+		}
+		
+		this.img = dojo.doc.createElement('img');
+		this.glassNode.appendChild(this.img);
+		this.img.src = this.domNode.src;
+		// float the image around inside the .glassNode 
+		with(this.img.style){
+			position = "relative";
+			top = 0; left = 0;
+			width = this._zoomSize.w+"px";
+			height = this._zoomSize.h+"px";
+		}
+
+	},
+	
+	_adjustScale: function(){
+		// summary: update the calculations should this.scale change
+
+		this.offset = dojo.coords(this.domNode,true);
+		this._imageSize = { w: this.offset.w, h:this.offset.h };
+		this._zoomSize = {
+			w: this._imageSize.w * this.scale,
+			h: this._imageSize.h * this.scale
+		};
+	},
+	
+	_showGlass: function(e){
+		// summary: show the overlay
+		this._placeGlass(e);		
+		with(this.glassNode.style){
+			visibility = "visible";
+			display = "";
+		}			
+		
+	},
+	
+	_hideGlass: function(e){
+		// summary: hide the overlay
+		this.glassNode.style.visibility = "hidden";
+		this.glassNode.style.display = "none";
+	},
+	
+	_placeGlass: function(e){
+		// summary: position the overlay centered under the cursor
+
+		this._setImage(e);
+		var t = Math.floor(e.pageY - (this.glassSize/2));
+		var l = Math.floor(e.pageX - (this.glassSize/2));
+		dojo.style(this.glassNode,"top",t);
+		dojo.style(this.glassNode,"left",l);
+
+	},
+
+	_setImage: function(e){
+		// summary: set the image's offset in the clipping window relative to the mouse position
+
+		var xOff = (e.pageX - this.offset.l) / this.offset.w;
+		var yOff = (e.pageY - this.offset.t) / this.offset.h;
+		var x = (this._zoomSize.w * xOff * -1)+(this.glassSize*xOff);
+		var y = (this._zoomSize.h * yOff * -1)+(this.glassSize*yOff);
+		with(this.img.style){
+			top = y+"px";
+			left = x+"px";
+		}
+
+	}
+
+});
+
+}
diff --git a/includes/js/dojox/image/README b/includes/js/dojox/image/README
new file mode 100644
index 0000000..38e9c3d
--- /dev/null
+++ b/includes/js/dojox/image/README
@@ -0,0 +1,66 @@
+-------------------------------------------------------------------------------
+dojox.image
+-------------------------------------------------------------------------------
+Version 1.0
+Release date: 10/31/07
+-------------------------------------------------------------------------------
+Project state:
+prototype | experimental
+-------------------------------------------------------------------------------
+Credits
+	Peter Higgins (dante)
+	Shane O'Sullivan (shaneosullivan1@gmail.com)
+-------------------------------------------------------------------------------
+Project description 
+
+	A class to provide a common API for images, and home for image
+	related Widgets.
+ 
+-------------------------------------------------------------------------------
+Dependencies:
+
+	LightBox: dojo core, dojox.fx and optionally dojox.data. uses
+	either tundra or soria theme, no standalone icons.
+
+	SlideShow: dojo core, dojo.fx, and dojo.data (optional 
+	dojox.data store implementations apply)
+
+	ThumbNailPicker: dojo core, dojo.fx and dojo.data. Combined
+	with a SlideShow, creates a sample Gallery app.
+
+	Gallery: core, dojox.image.SlideShow, dojox.image.ThumbNailPicker
+
+	Magnifier: dojo core, dijit._Widget, dojox.gfx
+
+-------------------------------------------------------------------------------
+Documentation
+
+-------------------------------------------------------------------------------
+Installation instructions
+
+Grab the following from the Dojo SVN Repository:
+http://svn.dojotoolkit.org/dojo/dojox/trunk/image/*
+
+Install into the following directory structure:
+/dojox/image/
+
+...which should be at the same level as your Dojo checkout.
+-------------------------------------------------------------------------------
+Additional Notes
+
+	LightBox: currently works as individual items, and grouped items,
+	but usage of dojo.data is broken (atm). the API is subject to 
+ 	change, and is marked accordingly.
+
+	Hoping to implement: Carossel, and Reflect using
+	a common API provided by dojox.image.Pane (?) 
+
+	SlideShow: Shows an image, one by one, from a datastore. Acts
+	as standing ImagePane implementation, 
+
+	Gallery: A combination Thumbnail view and SlideShow, using
+	a datastore, and providing navigation, and common API. 
+
+	Magnifier: Unobtrusive way to attach a hovering window window
+	when moving the mouse over an image. The window shows a a zoomed
+	version of the original source. (experimental)
diff --git a/includes/js/dojox/image/SlideShow.js b/includes/js/dojox/image/SlideShow.js
new file mode 100644
index 0000000..4767cf1
--- /dev/null
+++ b/includes/js/dojox/image/SlideShow.js
@@ -0,0 +1,598 @@
+if(!dojo._hasResource["dojox.image.SlideShow"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.SlideShow"] = true;
+dojo.provide("dojox.image.SlideShow");
+//
+// dojox.image.SlideShow courtesy Shane O Sullivan, licensed under a Dojo CLA 
+// For a sample usage, see http://www.skynet.ie/~sos/photos.php
+//
+// @author  Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
+//
+//	TODO: more cleanups
+//
+dojo.require("dojo.string");
+dojo.require("dojo.fx");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dojox.image.SlideShow",
+	[dijit._Widget, dijit._Templated],
+	{
+	// summary: A Slideshow Widget
+
+	// imageHeight: Number
+	//	The maximum height of an image
+	imageHeight: 375,
+	
+	// imageWidth: Number
+	//	The maximum width of an image.
+	imageWidth: 500,
+
+	// title: String
+	//	the initial title of the SlideShow 
+	title: "",
+
+	// titleTemplate: String
+	//	a way to customize the wording in the title. supported parameters to be populated are:
+	//		${title} = the passed title of the image
+	//		${current} = the current index of the image
+	//		${total} = the total number of images in the SlideShow
+	//
+	//	should add more?
+	titleTemplate: '${title} <span class="slideShowCounterText">(${current} of ${total})</span>',
+
+	// noLink: Boolean
+	//	Prevents the slideshow from putting an anchor link around the displayed image
+	//	enables if true, though still will not link in absence of a url to link to
+	noLink: false,
+
+	// loop: Boolean
+	//	true/false - make the slideshow loop
+	loop: true,
+
+	// hasNav: Boolean
+	//	toggle to enable/disable the visual navigation controls
+	hasNav: true,
+
+	// images: Array
+	// Contains the DOM nodes that individual images are stored in when loaded or loading.
+	images: [],
+	
+	// pageSize: Number
+	//	The number of images to request each time.
+	pageSize: 20,
+		
+	// autoLoad: Boolean
+	//	If true, then images are preloaded, before the user navigates to view them.
+	//	If false, an image is not loaded until the user views it.
+	autoLoad: true,
+
+	// autoStart: Boolean
+	//	If true, the SlideShow begins playing immediately
+	autoStart: false,
+	
+	// fixedHeight: Boolean
+	// If true, the widget does not resize itself to fix the displayed image.
+	fixedHeight: false,
+
+	// imageStore: Object
+	//	Implementation of the dojo.data.api.Read API, which provides data on the images
+	//	to be displayed.
+	imageStore: null,
+		
+	// linkAttr: String
+	//	Defines the name of the attribute to request from the store to retrieve the
+	//	URL to link to from an image, if any.
+	linkAttr: "link",
+	
+	// imageLargeAttr: String
+	//	Defines the name of the attribute to request from the store to retrieve the
+	//	URL to the image.
+	imageLargeAttr: "imageUrl",
+	
+	// titleAttr: String
+	//	Defines the name of the attribute to request from the store to retrieve the
+	//	title of the picture, if any.
+	titleAttr: "title",
+
+	// slideshowInterval: Number
+	// Time, in seconds, between image transitions during a slideshow.
+	slideshowInterval: 3,
+	
+	templateString:"<div dojoAttachPoint=\"outerNode\" class=\"slideShowWrapper\">\n\t<div style=\"position:relative;\" dojoAttachPoint=\"innerWrapper\">\n\t\t<div class=\"slideShowNav\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<div class=\"dijitInline slideShowTitle\" dojoAttachPoint=\"titleNode\">${title}</div>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"navNode\" class=\"slideShowCtrl\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<span dojoAttachPoint=\"navPrev\" class=\"slideShowCtrlPrev\"></span>\n\t\t\t<span dojoAttachPoint=\"navPlay\" class=\"slideShowCtrlPlay\"></span>\n\t\t\t<span dojoAttachPoint=\"navNext\" class=\"slideShowCtrlNext\"></span>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"largeNode\" class=\"slideShowImageWrapper\"></div>\t\t\n\t\t<div dojoAttachPoint=\"hiddenNode\" class=\"slideShowHidden\"></div>\n\t</div>\n</div>\n",
+	
+	// _tempImgPath: URL
+	//	URL to the image to display when an image is not yet fully loaded.
+	_tempImgPath: dojo.moduleUrl("dojo", "resources/blank.gif"),
+
+	// _imageCounter: Number
+	//	A counter to keep track of which index image is to be loaded next
+	_imageCounter: 0,
+	
+	// _tmpImage: DomNode
+	//	The temporary image to show when a picture is loading.
+	_tmpImage: null,
+	
+	// _request: Object
+	//	Implementation of the dojo.data.api.Request API, which defines the query 
+	//	parameters for accessing the store.
+	_request: null,
+
+	postCreate: function(){
+		// summary: Initilizes the widget, sets up listeners and shows the first image
+		this.inherited(arguments);
+		var img = document.createElement("img");
+
+		// FIXME: should API be to normalize an image to fit in the specified height/width?
+		img.setAttribute("width", this.imageWidth);
+		img.setAttribute("height", this.imageHeight);
+
+		if(this.hasNav){
+			dojo.connect(this.outerNode, "onmouseover", function(evt){
+				try{_this._showNav();}
+				catch(e){} //TODO: remove try/catch
+			});		
+			dojo.connect(this.outerNode, "onmouseout", function(evt){
+				try{_this._hideNav(evt);}
+				catch(e){} //TODO: remove try/catch
+			});
+		}
+		
+		this.outerNode.style.width = this.imageWidth + "px";
+
+		img.setAttribute("src", this._tempImgPath);
+		var _this = this;
+		
+		this.largeNode.appendChild(img);
+		this._tmpImage = this._currentImage = img;
+		this._fitSize(true);
+		
+		this._loadImage(0, function(){
+		     _this.showImage(0);
+		});
+		this._calcNavDimensions();
+	},
+
+	setDataStore: function(dataStore, request, /*optional*/paramNames){
+		// summary: Sets the data store and request objects to read data from.
+		// dataStore:
+		//	An implementation of the dojo.data.api.Read API. This accesses the image
+		//	data.
+		// request:
+		//	An implementation of the dojo.data.api.Request API. This specifies the
+		//	query and paging information to be used by the data store
+		// paramNames:
+		//	An object defining the names of the item attributes to fetch from the
+		//	data store.  The three attributes allowed are 'linkAttr', 'imageLargeAttr' and 'titleAttr'
+		this.reset();
+		var _this = this;
+		
+		this._request = {
+			query: {},
+			start: request.start || 0,
+			count: request.count || this.pageSize,
+			onBegin: function(count, request){
+				_this.maxPhotos = count;
+			}
+		};
+		if(request.query){ dojo.mixin(this._request.query, request.query); }
+		if(paramNames){
+			dojo.forEach(["imageLargeAttr", "linkAttr", "titleAttr"], function(attrName){
+				if(paramNames[attrName]){ this[attrName] = paramNames[attrName]; }	
+			}, this);
+		}
+	
+		var _complete = function(items){
+			_this.showImage(0); 
+			_this._request.onComplete = null;
+			if(_this.autoStart){
+				_this.toggleSlideShow(); 
+			}
+		};
+		
+		this.imageStore = dataStore;
+		this._request.onComplete = _complete;
+		this._request.start = 0;
+		this.imageStore.fetch(this._request);
+	},
+
+	reset: function(){
+		// summary: Resets the widget to its initial state
+		// description: Removes all previously loaded images, and clears all caches.
+		while(this.largeNode.firstChild){
+			this.largeNode.removeChild(this.largeNode.firstChild);
+		}
+		this.largeNode.appendChild(this._tmpImage);
+		while(this.hiddenNode.firstChild){
+			this.hiddenNode.removeChild(this.hiddenNode.firstChild);
+		}
+		dojo.forEach(this.images, function(img){
+			if(img && img.parentNode){ img.parentNode.removeChild(img); }
+		});
+		this.images = [];
+		this.isInitialized = false;
+		this._imageCounter = 0;
+	},
+
+	isImageLoaded: function(index){
+		// summary: Returns true if image at the specified index is loaded, false otherwise.
+		// index:
+		//	The number index in the data store to check if it is loaded.
+		return this.images && this.images.length > index && this.images[index];
+	},
+
+	moveImageLoadingPointer: function(index){
+		// summary: If 'autoload' is true, this tells the widget to start loading
+		//	images from the specified pointer.
+		// index:
+		//	The number index in the data store to start loading images from.
+		this._imageCounter = index;
+	},
+	
+	destroy: function(){
+		// summary: Cleans up the widget when it is being destroyed
+		if(this._slideId) { this._stop(); }
+		this.inherited(arguments);
+	},
+
+	showNextImage: function(inTimer, forceLoop){
+		// summary: Changes the image being displayed to the next image in the data store
+		// inTimer: Boolean
+		//	If true, a slideshow is active, otherwise the slideshow is inactive.
+		if(inTimer && this._timerCancelled){return false;}
+		
+		if(this.imageIndex + 1 >= this.maxPhotos){
+			if(inTimer && (this.loop || forceLoop)){ this.imageIndex = -1; }
+			else{
+				if(this._slideId){ this._stop(); }
+				return false;
+			}
+		}
+		var _this = this;
+		this.showImage(this.imageIndex + 1, function(){
+			if(inTimer){ _this._startTimer(); }
+		});
+		return true;
+	},
+
+	toggleSlideShow: function(){
+		// summary: Switches the slideshow mode on and off.
+		if(this._slideId){
+			this._stop();
+		}else{
+			dojo.toggleClass(this.domNode,"slideShowPaused");			
+			this._timerCancelled = false;
+			var success = this.showNextImage(true, true);
+			if(!success){
+				this._stop();
+			}
+		}
+	},
+
+	getShowTopicName: function(){
+		// summary: Returns the topic id published to when an image is shown
+		// description:
+		//	The information published is: index, title and url
+		return (this.widgetId || this.id) + "/imageShow";
+	},
+
+	getLoadTopicName: function(){
+		// summary: Returns the topic id published to when an image finishes loading.
+		// description:
+		//	The information published is the index position of the image loaded.
+		return (this.widgetId ? this.widgetId : this.id) + "/imageLoad";
+	},
+
+	showImage: function(index, /* Function? */callback){
+		// summary: Shows the image at index 'index'.
+		// index: Number
+		//	The position of the image in the data store to display
+		// callback: Function
+		//	Optional callback function to call when the image has finished displaying.
+		
+		if(!callback && this._slideId){ this.toggleSlideShow(); }
+		var _this = this;
+		var current = this.largeNode.getElementsByTagName("div");
+		this.imageIndex = index;
+
+		var showOrLoadIt = function() {
+			//If the image is already loaded, then show it. 
+			if(_this.images[index]){
+				while(_this.largeNode.firstChild){
+					_this.largeNode.removeChild(_this.largeNode.firstChild);
+				}
+				_this.images[index].style.opacity = 0;
+				_this.largeNode.appendChild(_this.images[index]);
+				_this._currentImage = _this.images[index]._img;
+				_this._fitSize();
+								
+			    var onEnd = function(a,b,c) {
+					var img = _this.images[index].firstChild;
+					if(img.tagName.toLowerCase() != "img"){img = img.firstChild;}
+					title = img.getAttribute("title");
+					
+					if(_this._navShowing){
+						_this._showNav(true);
+					}
+					dojo.publish(_this.getShowTopicName(), [{
+						index: index,	
+						title: title,
+						url: img.getAttribute("src")
+					}]);
+        			if(callback) { callback(a,b,c); }
+					_this._setTitle(title);
+        		};
+				
+				dojo.fadeIn({
+					node: _this.images[index],
+					duration: 300,
+					onEnd: onEnd
+				}).play();
+			}else{
+				//If the image is not loaded yet, load it first, then show it.
+				_this._loadImage(index, function(){
+					dojo.publish(_this.getLoadTopicName(), [index]);
+					_this.showImage(index, callback);	
+				});
+			}
+		};
+
+		//If an image is currently showing, fade it out, then show
+		//the new image. Otherwise, just show the new image. 	
+		if(current && current.length > 0){
+			dojo.fadeOut({
+				node: current[0],
+				duration: 300,
+				onEnd: function(){
+					_this.hiddenNode.appendChild(current[0]);
+					showOrLoadIt();
+			}
+			}).play();
+		}else{
+			showOrLoadIt();
+		}
+	},
+	
+	_fitSize: function(force){
+		// summary: Fits the widget size to the size of the image being shown,
+		//	or centers the image, depending on the value of 'fixedHeight'
+		// force: Boolean
+		//	If true, the widget is always resized, regardless of the value of 'fixedHeight'
+		if(!this.fixedHeight || force){
+			var height = (this._currentImage.height + (this.hasNav ? 20:0));
+			dojo.style(this.innerWrapper, "height", height + "px");
+			return;
+		}
+		dojo.style(this.largeNode, "paddingTop", this._getTopPadding() + "px");
+	},
+	
+	_getTopPadding: function(){
+		if(!this.fixedHeight){return 0;}
+		// summary: Returns the padding to place at the top of the image to center it vertically.
+		return (this.imageHeight - this._currentImage.height)/2;
+	},
+	
+	_loadNextImage: function(){
+		//summary: Load the next unloaded image.
+		if(!this.autoLoad){ return; }
+		while(this.images.length >= this._imageCounter && this.images[this._imageCounter]){
+			this._imageCounter++;
+		}
+		this._loadImage(this._imageCounter);
+	},
+	
+	_loadImage: function(index, callbackFn){
+		// summary: Load image at specified index
+		// description:
+		//	This function loads the image at position 'index' into the
+		//	internal cache of images.  This does not cause the image to be displayed.
+		// index:
+		//	The position in the data store to load an image from.
+		// callbackFn:
+		//	An optional function to execute when the image has finished loading.	
+		if(this.images[index] || !this._request) { return; }
+		
+		var pageStart = index - (index % this.pageSize);
+
+		this._request.start = pageStart;		
+
+		this._request.onComplete = function(items){
+			var diff = index - pageStart;
+			if(items && items.length > diff){
+				loadIt(items[diff]);
+			}else{ /* Squelch - console.log("Got an empty set of items"); */ }
+		}
+
+		var _this = this;	
+		var loadIt = function(item){			
+			var url = _this.imageStore.getValue(item, _this.imageLargeAttr);
+			var img = document.createElement("img");
+			var div = document.createElement("div");
+			div._img = img;
+
+			var link = _this.imageStore.getValue(item,_this.linkAttr);
+			if(!link || _this.noLink){ div.appendChild(img); 
+			}else{
+				var a = document.createElement("a");
+				a.setAttribute("href", link);
+				a.setAttribute("target","_blank");
+				div.appendChild(a);
+				a.appendChild(img);
+			}
+
+			div.setAttribute("id",_this.id + "_imageDiv" + index);
+			dojo.connect(img, "onload", function(){
+				_this._fitImage(img);
+				div.setAttribute("width",_this.imageWidth);
+				div.setAttribute("height",_this.imageHeight);				
+				
+				dojo.publish(_this.getLoadTopicName(), [index]);
+				_this._loadNextImage();
+				if(callbackFn){ callbackFn(); }
+			});
+			_this.hiddenNode.appendChild(div);
+
+			var titleDiv = document.createElement("div");
+			dojo.addClass(titleDiv, "slideShowTitle");
+			div.appendChild(titleDiv);
+		
+			_this.images[index] = div;
+			img.setAttribute("src", url);
+			
+			var title = _this.imageStore.getValue(item,_this.titleAttr);
+			if(title){ img.setAttribute("title",title); } 
+		}
+		this.imageStore.fetch(this._request);
+	},
+
+	_stop: function(){
+		// summary: Stops a running slide show.
+		if(this._slideId){ clearTimeout(this._slideId); }
+		this._slideId = null;
+		this._timerCancelled = true;
+		dojo.removeClass(this.domNode,"slideShowPaused");
+	},
+
+	_prev: function(){
+		// summary: Show the previous image.
+		// FIXME: either pull code from showNext/prev, or call it here
+		if(this.imageIndex < 1){ return; }
+		this.showImage(this.imageIndex - 1);
+	},
+
+	_next: function(){
+		// summary: Show the next image
+		this.showNextImage();
+	},
+
+	_startTimer: function(){
+		// summary: Starts a timeout to show the next image when a slide show is active
+		var id = this.id;
+		this._slideId = setTimeout(function(){dijit.byId(id).showNextImage(true);}, this.slideshowInterval * 1000);
+	},
+	
+	_calcNavDimensions: function() {
+		// summary:
+		//	Calculates the dimensions of the navigation controls
+		dojo.style(this.navNode, "position", "absolute");
+		
+		//Place the navigation controls far off screen
+		dojo.style(this.navNode, "top", "-10000px");
+		
+		//Make the navigation controls visible
+		dojo._setOpacity(this.navNode, 99);
+		
+		this.navPlay._size = dojo.marginBox(this.navPlay);
+		this.navPrev._size = dojo.marginBox(this.navPrev);
+		this.navNext._size = dojo.marginBox(this.navNext);
+		
+		dojo._setOpacity(this.navNode, 0);
+		dojo.style(this.navNode, "position", "");
+		dojo.style(this.navNode, "top", "");		
+	},
+
+	_setTitle: function(title){
+		// summary: Sets the title of the image to be displayed
+		// title: String
+		//	The String title of the image
+		this.titleNode.innerHTML = dojo.string.substitute(this.titleTemplate,
+			{ title: title, current: 1 + this.imageIndex, total: this.maxPhotos});
+	},
+	
+	_fitImage: function(img) {
+		// summary: Ensures that the image width and height do not exceed the maximum.
+		// img: Node
+		//	The image DOM node to optionally resize
+		var width = img.width;
+		var height = img.height;
+		
+		if(width > this.imageWidth){
+			height = Math.floor(height * (this.imageWidth / width));
+			img.setAttribute("height", height + "px");
+			img.setAttribute("width", this.imageWidth + "px");			
+		}
+		if(height > this.imageHeight){
+			width = Math.floor(width * (this.imageHeight / height));
+			img.setAttribute("height", this.imageHeight + "px");
+			img.setAttribute("width", width + "px");
+		}
+	},
+	
+	_handleClick: function(/* Event */e){
+		// summary: Performs navigation on the images based on users mouse clicks
+		// e:
+		//	An Event object
+		switch(e.target){
+			case this.navNext:this._next(); break;
+			case this.navPrev:this._prev(); break;
+			case this.navPlay:this.toggleSlideShow(); break;
+		}
+	},
+	
+	_showNav: function(force){
+		// summary:
+		//	Shows the navigation controls
+		// force: Boolean
+		//	If true, the navigation controls are repositioned even if they are
+		//	currently visible.
+		if(this._navShowing && !force){return;}
+		dojo.style(this.navNode, "marginTop", "0px");
+		dojo.style(this.navPlay, "marginLeft", "0px");
+		var wrapperSize = dojo.marginBox(this.outerNode);
+		
+		var margin = this._currentImage.height - this.navPlay._size.h - 10 + this._getTopPadding();
+		
+		if(margin > this._currentImage.height){margin += 10;}
+		dojo[this.imageIndex < 1 ? "addClass":"removeClass"](this.navPrev, "slideShowCtrlHide");
+		dojo[this.imageIndex + 1 >= this.maxPhotos ? "addClass":"removeClass"](this.navNext, "slideShowCtrlHide");
+	
+		var _this = this;
+		if(this._navAnim) {
+			this._navAnim.stop();
+		}
+		if(this._navShowing){return;}
+		this._navAnim = dojo.fadeIn({node: this.navNode, duration: 300,
+							onEnd: function(){_this._navAnim=null;}});
+		
+		this._navAnim.play();
+		this._navShowing = true;
+	},
+	
+	_hideNav: function(/* Event */e){
+		// summary:	Hides the navigation controls
+		// e: Event
+		//	The DOM Event that triggered this function
+		if(!e || !this._overElement(this.outerNode, e)) {
+			var _this = this;
+			if(this._navAnim) {
+				this._navAnim.stop();
+			}
+			this._navAnim = dojo.fadeOut({node: this.navNode,duration:300,
+						 onEnd: function(){_this._navAnim=null;}});
+			this._navAnim.play();
+			this._navShowing = false;
+		}
+	},
+	
+	_overElement: function(/*DomNode*/element, /*Event*/e){
+		// summary:
+		//	Returns whether the mouse is over the passed element.
+		//	Element must be display:block (ie, not a <span>)
+		
+		//When the page is unloading, if this method runs it will throw an
+		//exception.
+		if(typeof(dojo)=="undefined"){return false;}
+		element = dojo.byId(element);
+		var m = {x: e.pageX, y: e.pageY};
+		var bb = dojo._getBorderBox(element);
+		var absl = dojo.coords(element, true);
+		var left = absl.x;
+
+		return (m.x >= left
+			&& m.x <= (left + bb.w)
+			&& m.y >= absl.y
+			&& m.y <= (top + bb.h)
+		);	//	boolean
+	}
+});
+
+}
diff --git a/includes/js/dojox/image/ThumbnailPicker.js b/includes/js/dojox/image/ThumbnailPicker.js
new file mode 100644
index 0000000..42f9862
--- /dev/null
+++ b/includes/js/dojox/image/ThumbnailPicker.js
@@ -0,0 +1,535 @@
+if(!dojo._hasResource["dojox.image.ThumbnailPicker"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.ThumbnailPicker"] = true;
+dojo.provide("dojox.image.ThumbnailPicker");
+dojo.experimental("dojox.image.ThumbnailPicker");
+//
+// dojox.image.ThumbnailPicker courtesy Shane O Sullivan, licensed under a Dojo CLA 
+// @author  Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
+//
+// For a sample usage, see http://www.skynet.ie/~sos/photos.php
+//
+//	document topics.
+
+dojo.require("dojo.fx");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dojox.image.ThumbnailPicker",
+	[dijit._Widget, dijit._Templated],
+	{
+	// summary: A scrolling Thumbnail Picker widget 
+	//
+	// imageStore: Object
+	// A data store that implements the dojo.data Read API.
+	imageStore: null,
+
+	// request: Object
+	// A dojo.data Read API Request object.
+	request: null,
+
+	// size: Number
+	// Width or height in pixels, depending if horizontal or vertical.
+	size: 500, //FIXME: use CSS?
+
+	// thumbHeight: Number
+	// Default height of a thumbnail image
+	thumbHeight: 75, // FIXME: use CSS?
+
+	// thumbWidth: Number
+	// Default width of an image
+	thumbWidth: 100, // FIXME: use CSS?
+
+	// useLoadNotifier: Boolean
+	// Setting useLoadNotifier to true makes a colored DIV appear under each
+	// thumbnail image, which is used to display the loading status of each
+	// image in the data store.
+	useLoadNotifier: false,
+
+	// useHyperlink: boolean
+	// Setting useHyperlink to true causes a click on a thumbnail to open a link.
+	useHyperlink: false,
+
+	// hyperlinkTarget: String
+	// If hyperlinkTarget is set to "new", clicking on a thumb will open a new window
+	// If it is set to anything else, clicking a thumbnail will open the url in the
+	// current window.
+	hyperlinkTarget: "new",
+
+	// isClickable: Boolean
+	// When set to true, the cursor over a thumbnail changes.
+	isClickable: true,
+
+	// isScrollable: Boolean
+	// When true, uses smoothScroll to move between pages
+	isScrollable: true,
+
+	// isHorizontal: Boolean
+	// If true, the thumbnails are displayed horizontally. Otherwise they are displayed
+	// vertically
+	isHorizontal: true,
+
+	//autoLoad: Boolean
+	autoLoad: true,
+
+	// linkAttr: String
+	// The attribute name for accessing the url from the data store
+	linkAttr: "link",
+	
+	// imageThumbAttr: String
+	// The attribute name for accessing the thumbnail image url from the data store
+	imageThumbAttr: "imageUrlThumb",	
+	
+	// imageLargeAttr: String
+	// The attribute name for accessing the large image url from the data store
+	imageLargeAttr: "imageUrl",
+	
+	// pageSize: Number
+	//	The number of images to request each time.
+	pageSize: 20,
+	
+	// titleAttr: String
+	// The attribute name for accessing the title from the data store
+	titleAttr: "title",
+	
+	templateString:"<div dojoAttachPoint=\"outerNode\" class=\"thumbOuter\">\n\t<div dojoAttachPoint=\"navPrev\" class=\"thumbNav thumbClickable\">\n\t  <img src=\"\" dojoAttachPoint=\"navPrevImg\"/>    \n\t</div>\n\t<div dojoAttachPoint=\"thumbScroller\" class=\"thumbScroller\">\n\t  <div dojoAttachPoint=\"thumbsNode\" class=\"thumbWrapper\"></div>\n\t</div>\n\t<div dojoAttachPoint=\"navNext\" class=\"thumbNav thumbClickable\">\n\t  <img src=\"\" dojoAttachPoint=\"navNextImg\"/>  \n\t</div>\n</div>\n", 
+	tempImgPath: dojo.moduleUrl("dojo", "resources/blank.gif"),
+	
+	// thumbs: Array
+	// Stores the image nodes for the thumbnails.
+	_thumbs: [],
+	
+	// _thumbIndex: Number
+	// The index of the first thumbnail shown
+	_thumbIndex: 0,
+	
+	// _maxPhotos: Number
+	// The total number of photos in the image store
+	_maxPhotos: 0,
+	
+	// _loadedImages: Object
+	// Stores the indices of images that have been marked as loaded using the
+	// markImageLoaded function.
+	_loadedImages: {},
+
+	postCreate: function(){
+		// summary: Initializes styles and listeners		
+		this.widgetid = this.id;
+		this.inherited(arguments);
+		this.pageSize = Number(this.pageSize);
+
+		this._scrollerSize = this.size - (51 * 2);
+		
+		var sizeProp = this._sizeProperty = this.isHorizontal ? "width" : "height";
+	
+		// FIXME: do this via css? calculate the correct width for the widget
+		dojo.style(this.outerNode, "textAlign","center");
+		dojo.style(this.outerNode, sizeProp, this.size+"px");
+	
+		dojo.style(this.thumbScroller, sizeProp, this._scrollerSize + "px");
+	
+		//If useHyperlink is true, then listen for a click on a thumbnail, and
+		//open the link
+		if(this.useHyperlink){
+			dojo.subscribe(this.getClickTopicName(), this, function(packet){
+				var index = packet.index;
+				var url = this.imageStore.getValue(packet.data,this.linkAttr);
+				
+				//If the data item doesn't contain a URL, do nothing
+				if(!url){return;}
+				
+				if(this.hyperlinkTarget == "new"){
+					window.open(url);
+				}else{
+					window.location = url;
+				}
+			});
+		}
+	
+		if(this.isScrollable) {
+			// FIXME: does this break builds or anything? 
+			dojo.require("dojox.fx.scroll");
+			dojo.require("dojox.fx.easing"); 
+		}
+		if(this.isClickable){
+			dojo.addClass(this.thumbsNode, "thumbClickable");
+		}
+		this._totalSize = 0;
+		this.init();
+	},
+	
+	init: function(){
+		// summary: Creates DOM nodes for thumbnail images and initializes their listeners 
+		if(this.isInitialized) {return false;}
+	
+		var classExt = this.isHorizontal ? "Horiz" : "Vert";
+	
+		// FIXME: can we setup a listener around the whole element and determine based on e.target?	  
+		dojo.addClass(this.navPrev, "prev" + classExt);
+		dojo.addClass(this.navNext, "next" + classExt);
+		dojo.addClass(this.thumbsNode, "thumb"+classExt);
+		dojo.addClass(this.outerNode, "thumb"+classExt);
+	
+		this.navNextImg.setAttribute("src", this.tempImgPath);
+		this.navPrevImg.setAttribute("src", this.tempImgPath);
+		
+		this.connect(this.navPrev, "onclick", "_prev");
+		this.connect(this.navNext, "onclick", "_next");
+		this.isInitialized = true;
+		
+		if(this.isHorizontal){
+			this._offsetAttr = "offsetLeft";
+			this._sizeAttr = "offsetWidth";
+			this._scrollAttr = "scrollLeft";
+		}else{
+			this._offsetAttr = "offsetTop";
+			this._sizeAttr = "offsetHeight";
+			this._scrollAttr = "scrollTop";
+		}
+	
+		this._updateNavControls();
+		if(this.imageStore && this.request){this._loadNextPage();}
+		return true;
+	},
+
+	getClickTopicName: function(){
+		// summary: Returns the name of the dojo topic that can be
+		//   subscribed to in order to receive notifications on
+		//   which thumbnail was selected.
+		return (this.widgetId || this.id) + "/select"; // String
+	},
+
+	getShowTopicName: function(){
+		// summary: Returns the name of the dojo topic that can be
+		//   subscribed to in order to receive notifications on
+		//   which thumbnail is now visible
+		return (this.widgetId || this.id) + "/show"; // String
+	},
+
+	setDataStore: function(dataStore, request, /*optional*/paramNames){
+		// summary: Sets the data store and request objects to read data from.
+		// dataStore:
+		//	An implementation of the dojo.data.api.Read API. This accesses the image
+		//	data.
+		// request:
+		//	An implementation of the dojo.data.api.Request API. This specifies the
+		//	query and paging information to be used by the data store
+		// paramNames:
+		//	An object defining the names of the item attributes to fetch from the
+		//	data store.  The four attributes allowed are 'linkAttr', 'imageLargeAttr',
+		//	'imageThumbAttr' and 'titleAttr'
+		this.reset();
+	
+		this.request = {
+			query: {},
+			start: request.start || 0,
+			count: request.count || 10,
+			onBegin: dojo.hitch(this, function(total){
+				this._maxPhotos = total;
+			})
+		};
+	
+		if(request.query){ dojo.mixin(this.request.query, request.query);}
+	
+		if(paramNames){
+			dojo.forEach(["imageThumbAttr", "imageLargeAttr", "linkAttr", "titleAttr"], function(attrName){
+				if(paramNames[attrName]){ this[attrName] = paramNames[attrName]; }	
+			}, this);
+		}
+		
+		this.request.start = 0;
+		this.request.count = this.pageSize;
+		this.imageStore = dataStore;
+	
+		if(!this.init()){this._loadNextPage();}
+	},
+
+	reset: function(){
+		// summary: Resets the widget back to its original state.
+		this._loadedImages = {};
+		dojo.forEach(this._thumbs, function(img){
+			if(img){
+				//	dojo.event.browser.clean(img);
+				if(img.parentNode){
+					img.parentNode.removeChild(img);	
+				}
+			}
+		});
+	
+		this._thumbs = [];
+		this.isInitialized = false;
+		this._noImages = true;
+	},
+	
+	isVisible: function(index) {
+		// summary: Returns true if the image at the specified index is currently visible. False otherwise.
+		var img = this._thumbs[index];
+		if(!img){return false;}
+		var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
+		var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+		var scrollAttr = this.isHorizontal ? "scrollLeft" : "scrollTop";
+		var offset = img[pos] - this.thumbsNode[pos];
+		return (offset >= this.thumbScroller[scrollAttr]
+			&& offset + img[size] <= this.thumbScroller[scrollAttr] + this._scrollerSize);	
+	},
+	
+	_next: function() {
+		// summary: Displays the next page of images
+		var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
+		var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+		var baseOffset = this.thumbsNode[pos];
+		var firstThumb = this._thumbs[this._thumbIndex];
+		var origOffset = firstThumb[pos] - baseOffset;
+	
+		var index = -1, img;
+	
+		for(var i = this._thumbIndex + 1; i < this._thumbs.length; i++){
+			img = this._thumbs[i];
+			if(img[pos] - baseOffset + img[size] - origOffset > this._scrollerSize){
+				this._showThumbs(i);
+				return;
+			}
+		}
+	},
+
+	_prev: function(){
+		// summary: Displays the next page of images
+		if(this.thumbScroller[this.isHorizontal ? "scrollLeft" : "scrollTop"] == 0){return;}
+		var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
+		var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+	
+		var firstThumb = this._thumbs[this._thumbIndex];
+		var origOffset = firstThumb[pos] - this.thumbsNode[pos];
+	
+		var index = -1, img;
+	
+		for(var i = this._thumbIndex - 1; i > -1; i--) {
+			img = this._thumbs[i];
+			if(origOffset - img[pos] > this._scrollerSize){
+				this._showThumbs(i + 1);
+				return;
+			}
+		}
+		this._showThumbs(0);
+	},
+
+	_checkLoad: function(img, index){
+		dojo.publish(this.getShowTopicName(), [{index:index}]);
+		this._updateNavControls();
+		this._loadingImages = {};
+	
+		this._thumbIndex = index;
+	
+		//If we have not already requested the data from the store, do so. 
+		if(this.thumbsNode.offsetWidth - img.offsetLeft < (this._scrollerSize * 2)){
+			this._loadNextPage();
+		}
+	},
+
+	_showThumbs: function(index){
+		// summary: Displays thumbnail images, starting at position 'index'
+		// index: Number
+		//	The index of the first thumbnail
+
+//FIXME: When is this be called with an invalid index?  Do we need this check at all?
+//		if(typeof index != "number"){ index = this._thumbIndex; }
+		index = Math.min(Math.max(index, 0), this._maxPhotos);
+		
+		if(index >= this._maxPhotos){ return; }
+		
+		var img = this._thumbs[index];
+		if(!img){ return; }
+		
+		var left = img.offsetLeft - this.thumbsNode.offsetLeft;
+		var top = img.offsetTop - this.thumbsNode.offsetTop;
+		var offset = this.isHorizontal ? left : top;
+				
+		if(	(offset >= this.thumbScroller[this._scrollAttr]) &&
+			(offset + img[this._sizeAttr] <= this.thumbScroller[this._scrollAttr] + this._scrollerSize)
+		){
+			// FIXME: WTF is this checking for?
+			return;
+		}
+		
+		
+		if(this.isScrollable){
+			var target = this.isHorizontal ? {x: left, y: 0} : { x:0, y:top};
+			dojox.fx.smoothScroll({
+				target: target,
+				win: this.thumbScroller,
+				duration:300,
+				easing:dojox.fx.easing.easeOut,
+				onEnd: dojo.hitch(this, "_checkLoad", img, index)
+			}).play(10);
+		}else{
+			if(this.isHorizontal){
+				this.thumbScroller.scrollLeft = left;
+			}else{
+				this.thumbScroller.scrollTop = top;
+			}
+			this._checkLoad(img, index);
+		}	
+	},
+	
+	markImageLoaded: function(index){
+		// summary: Changes a visual cue to show the image is loaded
+		// description: If 'useLoadNotifier' is set to true, then a visual cue is
+		//	given to state whether the image is loaded or not.	Calling this function
+		//	marks an image as loaded.
+		var thumbNotifier = dojo.byId("loadingDiv_"+this.widgetid+"_"+index);
+		if(thumbNotifier){this._setThumbClass(thumbNotifier, "thumbLoaded");}
+		this._loadedImages[index] = true;
+	},
+
+	_setThumbClass: function(thumb, className){
+		// summary: Adds a CSS class to a thumbnail, only if 'autoLoad' is true
+		// thumb: DomNode
+		//	The thumbnail DOM node to set the class on
+		// className: String
+		//	The CSS class to add to the DOM node.
+		if(!this.autoLoad){ return; }
+		dojo.addClass(thumb, className);
+	},
+                                                 
+	_loadNextPage: function(){
+		// summary: Loads the next page of thumbnail images
+		if(this._loadInProgress){return;}
+		this._loadInProgress = true;
+		var start = this.request.start + (this._noImages ? 0 : this.pageSize);
+		
+		var pos = start;
+		while(pos < this._thumbs.length && this._thumbs[pos]){pos ++;}	
+			
+		//Define the function to call when the items have been 
+		//returned from the data store.
+		var complete = function(items, request){
+			if(items && items.length){
+				var itemCounter = 0;
+				var loadNext = dojo.hitch(this, function(){
+					if(itemCounter >= items.length){
+						this._loadInProgress = false;
+						return;
+					}
+					var counter = itemCounter++;
+
+					this._loadImage(items[counter], pos + counter, loadNext);
+				});
+				loadNext();
+
+				//Show or hide the navigation arrows on the thumbnails, 
+				//depending on whether or not the widget is at the start,
+				//end, or middle of the list of images. 
+				this._updateNavControls();
+			}else{
+				this._loadInProgress = false;
+			}
+		};
+	
+		//Define the function to call if the store reports an error. 
+		var error = function(){
+			this._loadInProgress = false;
+			console.debug("Error getting items");
+		};
+
+		this.request.onComplete = dojo.hitch(this, complete);
+		this.request.onError = dojo.hitch(this, error);
+	
+		//Increment the start parameter. This is the dojo.data API's
+		//version of paging. 
+		this.request.start = start;
+		this._noImages = false;
+		
+		//Execute the request for data. 
+		this.imageStore.fetch(this.request);
+	
+	},
+
+	_loadImage: function(data, index, callback){	
+		var url = this.imageStore.getValue(data,this.imageThumbAttr);
+		var img = document.createElement("img");
+		var imgContainer = document.createElement("div");
+		imgContainer.setAttribute("id","img_" + this.widgetid+"_"+index);
+		imgContainer.appendChild(img);
+		img._index = index;
+		img._data = data;
+	
+		this._thumbs[index] = imgContainer;
+		var loadingDiv;
+		if(this.useLoadNotifier){
+			loadingDiv = document.createElement("div");
+			loadingDiv.setAttribute("id","loadingDiv_" + this.widgetid+"_"+index);
+	
+			//If this widget was previously told that the main image for this
+			//thumb has been loaded, make the loading indicator transparent.
+			this._setThumbClass(loadingDiv,
+				this._loadedImages[index] ? "thumbLoaded":"thumbNotifier");
+	
+			imgContainer.appendChild(loadingDiv);
+		}
+		var size = dojo.marginBox(this.thumbsNode);
+		var defaultSize;
+		var sizeParam;
+		if(this.isHorizontal){
+			defaultSize = this.thumbWidth;
+			sizeParam = 'w';
+		} else{
+			defaultSize = this.thumbHeight;
+			sizeParam = 'h';
+		}
+		size = size[sizeParam];
+		var sl = this.thumbScroller.scrollLeft, st = this.thumbScroller.scrollTop;
+		dojo.style(this.thumbsNode, this._sizeProperty, (size + defaultSize + 20) + "px");
+		//Remember the scroll values, as changing the size can alter them
+		this.thumbScroller.scrollLeft = sl;
+		this.thumbScroller.scrollTop = st;
+		this.thumbsNode.appendChild(imgContainer);
+	
+		dojo.connect(img, "onload", this, function(){
+			var realSize = dojo.marginBox(img)[sizeParam];
+			this._totalSize += (Number(realSize) + 4);
+			dojo.style(this.thumbsNode, this._sizeProperty, this._totalSize + "px");
+	
+			if(this.useLoadNotifier){dojo.style(loadingDiv, "width", (img.width - 4) + "px"); }
+			callback();
+			return false;
+		});
+	
+		dojo.connect(img, "onclick", this, function(evt){
+			dojo.publish(this.getClickTopicName(),	[{
+				index: evt.target._index,
+				data: evt.target._data,
+				url: img.getAttribute("src"), 
+				largeUrl: this.imageStore.getValue(data,this.imageLargeAttr),
+				title: this.imageStore.getValue(data,this.titleAttr),
+				link: this.imageStore.getValue(data,this.linkAttr)
+			}]);
+			return false;
+		});
+		dojo.addClass(img, "imageGalleryThumb");
+		img.setAttribute("src", url);
+		var title = this.imageStore.getValue(data, this.titleAttr);
+		if(title){ img.setAttribute("title",title); }
+		this._updateNavControls();
+	
+	},
+
+	_updateNavControls: function(){
+		// summary: Updates the navigation controls to hide/show them when at
+		//	the first or last images.
+		var cells = [];
+		var change = function(node, add){
+			var fn = add ? "addClass" : "removeClass";
+			dojo[fn](node,"enabled");
+			dojo[fn](node,"thumbClickable");
+		};
+		
+		var pos = this.isHorizontal ? "scrollLeft" : "scrollTop";
+		var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+		change(this.navPrev, (this.thumbScroller[pos] > 0));
+		
+		var last = this._thumbs[this._thumbs.length - 1];
+		var addClass = (this.thumbScroller[pos] + this._scrollerSize < this.thumbsNode[size]);
+		change(this.navNext, addClass);
+	}
+});
+
+}
diff --git a/includes/js/dojox/image/resources/Gallery.html b/includes/js/dojox/image/resources/Gallery.html
new file mode 100644
index 0000000..571dc4f
--- /dev/null
+++ b/includes/js/dojox/image/resources/Gallery.html
@@ -0,0 +1,4 @@
+<div dojoAttachPoint="outerNode" class="imageGalleryWrapper">
+	<div dojoAttachPoint="thumbPickerNode"></div>
+	<div dojoAttachPoint="slideShowNode"></div>
+</div>
\ No newline at end of file
diff --git a/includes/js/dojox/image/resources/Lightbox.html b/includes/js/dojox/image/resources/Lightbox.html
new file mode 100644
index 0000000..1eb292f
--- /dev/null
+++ b/includes/js/dojox/image/resources/Lightbox.html
@@ -0,0 +1,15 @@
+<div class="dojoxLightbox" dojoAttachPoint="containerNode">
+	<div style="position:relative">
+		<div dojoAttachPoint="imageContainer" class="dojoxLightboxContainer">
+			<img dojoAttachPoint="imgNode" src="${imgUrl}" class="dojoxLightboxImage" alt="${title}">
+			<div class="dojoxLightboxFooter" dojoAttachPoint="titleNode">
+				<div class="dijitInline LightboxClose" dojoAttachPoint="closeNode"></div>
+				<div class="dijitInline LightboxNext" dojoAttachPoint="nextNode"></div>	
+				<div class="dijitInline LightboxPrev" dojoAttachPoint="prevNode"></div>
+
+				<div class="dojoxLightboxText"><span dojoAttachPoint="textNode">${title}</span><span dojoAttachPoint="groupCount" class="dojoxLightboxGroupText"></span></div>
+			</div>
+		</div>	
+		
+	</div>
+</div>
\ No newline at end of file
diff --git a/includes/js/dojox/image/resources/Magnifier.css b/includes/js/dojox/image/resources/Magnifier.css
new file mode 100644
index 0000000..85eba72
--- /dev/null
+++ b/includes/js/dojox/image/resources/Magnifier.css
@@ -0,0 +1,5 @@
+.glassNode {
+	overflow:hidden;
+	position:absolute;
+	visibility:hidden;
+}
diff --git a/includes/js/dojox/image/resources/Magnifier.css.commented.css b/includes/js/dojox/image/resources/Magnifier.css.commented.css
new file mode 100644
index 0000000..85eba72
--- /dev/null
+++ b/includes/js/dojox/image/resources/Magnifier.css.commented.css
@@ -0,0 +1,5 @@
+.glassNode {
+	overflow:hidden;
+	position:absolute;
+	visibility:hidden;
+}
diff --git a/includes/js/dojox/image/resources/SlideShow.html b/includes/js/dojox/image/resources/SlideShow.html
new file mode 100644
index 0000000..fa4aca6
--- /dev/null
+++ b/includes/js/dojox/image/resources/SlideShow.html
@@ -0,0 +1,14 @@
+<div dojoAttachPoint="outerNode" class="slideShowWrapper">
+	<div style="position:relative;" dojoAttachPoint="innerWrapper">
+		<div class="slideShowNav" dojoAttachEvent="onclick: _handleClick">
+			<div class="dijitInline slideShowTitle" dojoAttachPoint="titleNode">${title}</div>
+		</div>
+		<div dojoAttachPoint="navNode" class="slideShowCtrl" dojoAttachEvent="onclick: _handleClick">
+			<span dojoAttachPoint="navPrev" class="slideShowCtrlPrev"></span>
+			<span dojoAttachPoint="navPlay" class="slideShowCtrlPlay"></span>
+			<span dojoAttachPoint="navNext" class="slideShowCtrlNext"></span>
+		</div>
+		<div dojoAttachPoint="largeNode" class="slideShowImageWrapper"></div>		
+		<div dojoAttachPoint="hiddenNode" class="slideShowHidden"></div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/includes/js/dojox/image/resources/ThumbnailPicker.html b/includes/js/dojox/image/resources/ThumbnailPicker.html
new file mode 100644
index 0000000..561ce2d
--- /dev/null
+++ b/includes/js/dojox/image/resources/ThumbnailPicker.html
@@ -0,0 +1,11 @@
+<div dojoAttachPoint="outerNode" class="thumbOuter">
+	<div dojoAttachPoint="navPrev" class="thumbNav thumbClickable">
+	  <img src="" dojoAttachPoint="navPrevImg"/>    
+	</div>
+	<div dojoAttachPoint="thumbScroller" class="thumbScroller">
+	  <div dojoAttachPoint="thumbsNode" class="thumbWrapper"></div>
+	</div>
+	<div dojoAttachPoint="navNext" class="thumbNav thumbClickable">
+	  <img src="" dojoAttachPoint="navNextImg"/>  
+	</div>
+</div>
\ No newline at end of file
diff --git a/includes/js/dojox/image/resources/image.css b/includes/js/dojox/image/resources/image.css
new file mode 100644
index 0000000..e626e0f
--- /dev/null
+++ b/includes/js/dojox/image/resources/image.css
@@ -0,0 +1,283 @@
+
+.dijitDialogUnderlay {
+	background-color:#000; 
+}
+.dojoxLightbox {
+	position:absolute;
+	z-index:999;
+	overflow:hidden;
+	width:100px;
+	height:100px; 
+	border:11px solid #fff;
+	background:#fff url('images/loading.gif') no-repeat center center;
+        
+	-webkit-box-shadow: 0px 6px 10px #636363; 
+	-webkit-border-radius: 3px;
+	-moz-border-radius:4px;
+}
+.dojoxLightboxContainer {
+	position:absolute;
+	top:0; left:0; 
+}
+.dojoxLightboxFooter {
+	height:50px; 
+	position:relative;
+	bottom:0;
+	left:0;
+	margin-top:8px;
+	color:#333;
+	z-index:1000;
+	font-size:10pt;
+}
+.dojoxLightboxGroupText {
+	color:#666; 
+	font-size:8pt;
+}
+.LightboxNext,
+.LightboxPrev,
+.LightboxClose {
+	float:right;
+	width:16px;
+	height:16px;
+	cursor:pointer;
+}
+.nihilo .LightboxClose,
+.tundra .LightboxClose {
+	background:url('images/close.png') no-repeat center center;
+}
+.nihilo .LightboxNext,
+.tundra .LightboxNext {
+	background:url('images/right.png') no-repeat center center;
+}
+.nihilo .LightboxPrev,
+.tundra .LightboxPrev {
+	background:url('images/left.png') no-repeat center center;
+}
+.soria .LightboxClose,
+.soria .LightboxNext,
+.soria .LightboxPrev {
+	width:15px;
+	height:15px;
+	background:url('../../../dijit/themes/soria/images/spriteRoundedIconsSmall.png') no-repeat center center;
+	background-position:-60px;
+}
+.soria .LightboxNext {
+	background-position:-30px 0;
+}
+.soria .LightboxPrev {
+	background-position:0 0;
+}
+.slideShowWrapper { 
+	position:relative; 
+	background:#fff;
+	padding:8px; 
+	border:1px solid #333;	
+	padding-bottom:20px;
+	overflow:hidden;
+	text-align: center;
+	-moz-border-radius:3pt;
+	-webkit-border-radius:4pt;
+	-webkit-drop-shadow:#ccc 4pt; 
+}
+.slideShowNav { 
+	position:absolute;
+	bottom:-18px;	
+	left:0px;
+	padding:0px 3px 2px 0px;
+	background-color:#fff; 
+	width:100%;
+}
+.slideShowNavWrapper { float:right;  }
+.slideShowTitle {
+	float:left;
+	color:#333;
+	font-size:10pt;
+}
+.slideShowTitle .slideShowCounterText {
+	font-size:6pt; color:#666; 
+}
+.slideShowHidden {
+	position:absolute;
+	display: none;
+	height: 1px;
+	width: 1px;
+}
+.slideShowImageWrapper {
+	position:relative;
+	text-align: center;
+	margin-top: -42px;
+	float: left;
+	width: 100%;
+}
+.slideShowImageWrapper img {
+	border: 0px none;
+}
+.slideShowNotifier {
+	background-color: red;
+	width: 100px;
+	height: 5px;
+	font-size: 1%;
+}
+.slideShowSlideShow {
+	position:absolute;
+	top:30px; 
+	padding: 0 5px;
+	border: 0px;
+	text-decoration: none; 
+	color: #2e6ab1;
+}
+.slideShowLoading { background-color: #fad66a; }
+.slideShowLoaded { background-color: transparent; }
+.slideShowCtrlPrev {
+	background-position: -96px 0px; 
+	float: left;
+}
+.slideShowCtrlNext {
+	background-position: -144px 0px;
+	float: right;
+}
+.slideShowCtrlPlay {
+	background-position: -190px 0px;
+	position: absolute;
+}
+.slideShowPaused .slideShowCtrlPlay {
+	background-position: -236px 0px;
+	position: absolute;
+}
+.slideShowCtrl span.slideShowCtrlHide {
+	background-image: url("../../../dojo/resources/blank.gif");
+	cursor: auto;
+}
+.slideShowCtrl {
+	height: 50px;
+	width: 100%;
+	position: relative;
+	z-index:999;
+	float: left;
+}
+.slideShowCtrl span {
+	width: 50px;
+	height: 100%;
+	background-image: url("images/buttons.png");
+	cursor: pointer;
+}
+.dj_ie6 .slideShowCtrl span {
+	background-image: url("images/buttons.gif");
+}
+.dj_ie6 .slideShowPager li.currentpage,
+.dj_ie6 .pagination li.disablepage{
+    
+    margin-right: 5px;
+    padding-right: 0;
+}
+.thumbWrapper .thumbNav {
+	background-repeat: no-repeat;	
+	background-position: center;
+	padding-top: 1px;
+	width: 30px;
+	height: 100%;
+}
+.thumbOuter {
+	padding-bottom: 2px;
+}
+.thumbOuter.thumbHoriz {
+	width: 500px;
+	height: 85px;
+}
+.thumbOuter.thumbVert {
+	width: 100px;
+	height: 400px;
+}
+.thumbOuter .enabled {
+	background: transparent url("images/buttons.png") no-repeat center center;
+}
+.dj_ie6 .thumbOuter .enabled { background-image: url("images/buttons.gif"); }
+.thumbOuter .thumbNav img {
+	width: 48px;
+	height: 75px;
+}
+.thumbOuter .thumbClickable div {
+	cursor: pointer;
+}
+.thumbOuter .prevHoriz {
+	background-position: -96px 12px;
+	position: relative;
+	float: left;
+	height: 100%;
+}
+.thumbOuter .nextHoriz {
+	background-position: -144px 12px;
+	position: relative;
+	float: right;
+	height: 100%;
+}
+.thumbOuter .prevVert {
+	background-position: 0px 0px;
+	height: 48px;
+	width:48px;
+	margin-left:24px;
+}
+.thumbOuter .nextVert {
+	background-position: -48px 0px;
+	height: 48px;
+	width:48px;
+	margin-left:24px;
+}
+.thumbWrapper img {
+	height: 75px;
+	max-width: 100px;
+	width: expression(this.width > 100 ? 100: true);
+}
+.thumbWrapper .thumbNav .imageGalleryThumb {
+	height: 50px;
+}
+.thumbWrapper .thumbNotifier {
+	background-color: red;
+	width: 0px;
+	margin-left: 2px;
+	height: 5px;
+	font-size: 1%;
+}
+.thumbWrapper .thumbLoaded {
+	background-color: transparent;	
+}
+.thumbScroller {
+	overflow-x: hidden;
+	overflow-y: hidden;
+	white-space: nowrap;
+	text-align: center;
+}
+.thumbHoriz .thumbScroller {
+	width: 500px;
+	height: 85px;
+	float: left;
+}
+.thumbVert .thumbScroller {
+	height: 500px;
+	width: 100px;	
+}
+.thumbWrapper {
+	float: left;
+}
+.thumbVert .thumbWrapper {
+	width: 100px;
+	height: 10px;
+}
+.thumbHoriz .thumbWapper {
+	height:85px;
+	width: 10px;
+}
+.thumbWrapper.thumbHoriz div {
+	float: left;
+	padding-right: 2px;
+}
+.thumbWrapper.thumbVert {
+	width: 100px;
+}
+.thumbWrapper.thumbVert div {
+	padding-bottom: 2px;
+}
+.imageGalleryWrapper {
+	padding-bottom: 20px;
+	text-align: center;
+}
diff --git a/includes/js/dojox/image/resources/image.css.commented.css b/includes/js/dojox/image/resources/image.css.commented.css
new file mode 100644
index 0000000..3539a71
--- /dev/null
+++ b/includes/js/dojox/image/resources/image.css.commented.css
@@ -0,0 +1,345 @@
+/*
+    This is the master CSS file for the dojox.image project, and provides all
+    needed definitions for:
+    
+    dojox.image.Lightbox
+    dojox.image.Gallery [which is a combination of:]
+    dojox.image.SlideShow
+    dojox.image.ThumbNailPicker
+
+*/
+
+
+/* dojox.image.Lightbox:base */
+/* FIXME: should be be doing this? I want a black underlay, but this sets ALL dialogs to black,
+    but because it's decendant of body, i can't set this color any other way ... */
+.dijitDialogUnderlay {
+	background-color:#000; 
+}
+
+.dojoxLightbox {
+	position:absolute;
+	z-index:999;
+	overflow:hidden;
+	width:100px;
+	height:100px; 
+	border:11px solid #fff;
+	background:#fff url('images/loading.gif') no-repeat center center;
+
+        /* special safari + FF specific rounding + shadows */
+	-webkit-box-shadow: 0px 6px 10px #636363; /* #adadad; */
+	-webkit-border-radius: 3px;
+	-moz-border-radius:4px;
+}
+
+.dojoxLightboxContainer {
+	position:absolute;
+	top:0; left:0; 
+}
+
+.dojoxLightboxFooter {
+	height:50px; 
+	position:relative;
+	bottom:0;
+	left:0;
+	margin-top:8px;
+	color:#333;
+	z-index:1000;
+	font-size:10pt;
+}
+
+.dojoxLightboxGroupText {
+	color:#666; 
+	font-size:8pt;
+}
+
+.LightboxNext,
+.LightboxPrev,
+.LightboxClose {
+	float:right;
+	width:16px;
+	height:16px;
+	cursor:pointer;
+}
+
+/* dojox.image.Lightbox:tundra:nihilo */
+
+.nihilo .LightboxClose,
+.tundra .LightboxClose {
+	background:url('images/close.png') no-repeat center center;
+}
+.nihilo .LightboxNext,
+.tundra .LightboxNext {
+	background:url('images/right.png') no-repeat center center;
+}
+.nihilo .LightboxPrev,
+.tundra .LightboxPrev {
+	background:url('images/left.png') no-repeat center center;
+}
+
+/* dojox.image.Lightbox:soria */
+.soria .LightboxClose,
+.soria .LightboxNext,
+.soria .LightboxPrev {
+	width:15px;
+	height:15px;
+	background:url('../../../dijit/themes/soria/images/spriteRoundedIconsSmall.png') no-repeat center center;
+	background-position:-60px;
+}
+.soria .LightboxNext {
+	background-position:-30px 0;
+}
+.soria .LightboxPrev {
+	background-position:0 0;
+}
+
+
+
+/* dojox.image.SlideShow */
+
+.slideShowWrapper { 
+	position:relative; 
+	background:#fff;
+	padding:8px; 
+	border:1px solid #333;	
+	padding-bottom:20px;
+	overflow:hidden;
+	text-align: center;
+	-moz-border-radius:3pt;
+	-webkit-border-radius:4pt;
+	-webkit-drop-shadow:#ccc 4pt; 
+}
+.slideShowNav { 
+	position:absolute;
+	bottom:-18px;	
+	left:0px;
+	padding:0px 3px 2px 0px;
+	background-color:#fff; 
+	width:100%;
+}
+.slideShowNavWrapper { float:right;  }
+.slideShowTitle {
+	float:left;
+	color:#333;
+	font-size:10pt;
+}
+.slideShowTitle .slideShowCounterText {
+	font-size:6pt; color:#666; 
+}
+.slideShowHidden {
+	position:absolute;
+	display: none;
+	height: 1px;
+	width: 1px;
+}
+.slideShowImageWrapper {
+	position:relative;
+	text-align: center;
+	margin-top: -42px;
+	float: left;
+	width: 100%;
+}
+.slideShowImageWrapper img {
+	border: 0px none;
+}
+.slideShowNotifier {
+	background-color: red;
+	width: 100px;
+	height: 5px;
+	font-size: 1%;/*IE hack to get around the Empty-Div bug*/
+}
+.slideShowSlideShow {
+	position:absolute;
+	top:30px; 
+	padding: 0 5px;
+	border: 0px;
+	text-decoration: none; 
+	color: #2e6ab1;
+}
+.slideShowLoading { background-color: #fad66a; }
+.slideShowLoaded { background-color: transparent; }
+/*
+.sprite-arrowbottom { background-position: 0 -30px; } 
+.sprite-arrowtop { background-position: 0 -430px; } 
+*/
+.slideShowCtrlPrev {
+	background-position: -96px 0px; 
+	float: left;
+}
+.slideShowCtrlNext {
+	background-position: -144px 0px;
+	float: right;
+}
+.slideShowCtrlPlay {
+	background-position: -190px 0px;
+	position: absolute;
+}
+.slideShowPaused .slideShowCtrlPlay {
+	background-position: -236px 0px;
+	position: absolute;
+}
+.slideShowCtrl span.slideShowCtrlHide {
+	background-image: url("../../../dojo/resources/blank.gif");
+	cursor: auto;
+}
+
+.slideShowCtrl {
+	height: 50px;
+	width: 100%;
+	position: relative;
+	z-index:999;
+	float: left;
+}
+.slideShowCtrl span {
+	width: 50px;
+	height: 100%;
+	background-image: url("images/buttons.png");
+	cursor: pointer;
+}
+.dj_ie6 .slideShowCtrl span {
+	background-image: url("images/buttons.gif");
+}
+
+.dj_ie6 .slideShowPager li.currentpage,
+.dj_ie6 .pagination li.disablepage{
+    /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/
+    margin-right: 5px;
+    padding-right: 0;
+}
+
+/* dojox.image.ThumbnailPicker */
+
+.thumbWrapper .thumbNav {
+	background-repeat: no-repeat;	
+	background-position: center;
+	padding-top: 1px;
+	width: 30px;
+	height: 100%;
+}
+
+.thumbOuter {
+	padding-bottom: 2px;
+}
+
+.thumbOuter.thumbHoriz {
+	width: 500px;
+	height: 85px;
+}
+
+.thumbOuter.thumbVert {
+	width: 100px;
+	height: 400px;
+}
+
+.thumbOuter .enabled {
+	background: transparent url("images/buttons.png") no-repeat center center;
+}
+.dj_ie6 .thumbOuter .enabled { background-image: url("images/buttons.gif"); }
+
+.thumbOuter .thumbNav img {
+	width: 48px;
+	height: 75px;
+}
+.thumbOuter .thumbClickable div {
+	cursor: pointer;
+}
+.thumbOuter .prevHoriz {
+	background-position: -96px 12px;
+	position: relative;
+	float: left;
+	height: 100%;
+}
+
+.thumbOuter .nextHoriz {
+	background-position: -144px 12px;
+	position: relative;
+	float: right;
+	height: 100%;
+/*	margin-top: -85px;*/
+}
+.thumbOuter .prevVert {
+	background-position: 0px 0px;
+	height: 48px;
+	width:48px;
+	margin-left:24px;
+}
+
+.thumbOuter .nextVert {
+	background-position: -48px 0px;
+	height: 48px;
+	width:48px;
+	margin-left:24px;
+}
+
+.thumbWrapper img {
+	height: 75px;
+	max-width: 100px;
+	width: expression(this.width > 100 ? 100: true);/*IE Hack*/
+}
+
+.thumbWrapper .thumbNav .imageGalleryThumb {
+	height: 50px;
+}
+
+.thumbWrapper .thumbNotifier {
+	background-color: red;
+	width: 0px;
+	margin-left: 2px;
+	height: 5px;
+	font-size: 1%;/*IE hack to get around the Empty-Div bug*/
+}
+
+.thumbWrapper .thumbLoaded {
+	background-color: transparent;	
+}
+
+.thumbScroller {
+	overflow-x: hidden;
+	overflow-y: hidden;
+	white-space: nowrap;
+	text-align: center;
+}
+
+.thumbHoriz .thumbScroller {
+	width: 500px;
+	height: 85px;
+	float: left;
+}
+
+.thumbVert .thumbScroller {
+	height: 500px;
+	width: 100px;	
+}
+
+.thumbWrapper {
+	float: left;
+}
+
+.thumbVert .thumbWrapper {
+	width: 100px;
+	height: 10px;
+}
+.thumbHoriz .thumbWapper {
+	height:85px;
+	width: 10px;
+}
+
+.thumbWrapper.thumbHoriz div {
+	float: left;
+	padding-right: 2px;
+}
+
+.thumbWrapper.thumbVert {
+	width: 100px;
+}
+
+.thumbWrapper.thumbVert div {
+	padding-bottom: 2px;
+}
+
+/* dojox.image.Gallery */
+
+.imageGalleryWrapper {
+	padding-bottom: 20px;
+	text-align: center;
+}
diff --git a/includes/js/dojox/image/resources/images/buttons.gif b/includes/js/dojox/image/resources/images/buttons.gif
new file mode 100644
index 0000000..5f9081f
--- /dev/null
+++ b/includes/js/dojox/image/resources/images/buttons.gif
diff --git a/includes/js/dojox/image/resources/images/buttons.png b/includes/js/dojox/image/resources/images/buttons.png
new file mode 100644
index 0000000..306e2f8
--- /dev/null
+++ b/includes/js/dojox/image/resources/images/buttons.png
diff --git a/includes/js/dojox/image/resources/images/close.png b/includes/js/dojox/image/resources/images/close.png
new file mode 100644
index 0000000..1ac9d10
--- /dev/null
+++ b/includes/js/dojox/image/resources/images/close.png
diff --git a/includes/js/dojox/image/resources/images/close_dark.png b/includes/js/dojox/image/resources/images/close_dark.png
new file mode 100644
index 0000000..105fe55
--- /dev/null
+++ b/includes/js/dojox/image/resources/images/close_dark.png
diff --git a/includes/js/dojox/image/resources/images/left.png b/includes/js/dojox/image/resources/images/left.png
new file mode 100644
index 0000000..0848dba
--- /dev/null
+++ b/includes/js/dojox/image/resources/images/left.png
diff --git a/includes/js/dojox/image/resources/images/loading.gif b/includes/js/dojox/image/resources/images/loading.gif
new file mode 100644
index 0000000..e4ab783
--- /dev/null
+++ b/includes/js/dojox/image/resources/images/loading.gif
diff --git a/includes/js/dojox/image/resources/images/right.png b/includes/js/dojox/image/resources/images/right.png
new file mode 100644
index 0000000..7cab686
--- /dev/null
+++ b/includes/js/dojox/image/resources/images/right.png
diff --git a/includes/js/dojox/image/resources/images/warning.png b/includes/js/dojox/image/resources/images/warning.png
new file mode 100644
index 0000000..a52a55f
--- /dev/null
+++ b/includes/js/dojox/image/resources/images/warning.png
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>