GZ/nwyj/WebContent/admin/scripts/dojo/dojox/image/SlideShow.js

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)
	// @license Licensed under the Academic Free License 3.0
	// http://www.opensource.org/licenses/afl-3.0.php
	//
	// TODO: more cleanups
	//
	dojo.require("dojo.fx");
	dojo.require("dijit._Widget");
	dojo.require("dijit._Templated");

	dojo.declare("dojox.image.SlideShow", [dijit._Widget, dijit._Templated], {
		// 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 tags 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,

		// 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("dojox.image",
				"resources/images/1pixel.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("postCreate", 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) {
							}
						});
				dojo.connect(this.outerNode, "onmouseout", function(evt) {
							try {
								_this._hideNav(evt);
							} catch (e) {
							}
						});
			}

			this.outerNode.style.width = this.imageWidth + "px";

			img.setAttribute("src", this._tempImgPath);
			var _this = this;

			this.largeNode.appendChild(img);
			this._tmpImage = img;
			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) ? request.start : 0),
				count : ((request.count) ? request.count : this.pageSize),
				onBegin : function(count, request) {
					_this.maxPhotos = count;
				}
			};
			if (request.query) {
				dojo.mixin(this._request.query, request.query);
			}
			if (paramNames && paramNames.imageLargeAttr) {
				this.imageLargeAttr = paramNames.imageLargeAttr;
			}

			var _this = this;
			var _complete = function(items) {
				_this.showImage(0);
				_this._request.onComplete = null;
			};

			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);
			}
			var img;
			for (var pos = 0; pos < this.images.length; pos++) {
				img = this.images[pos];
				if (img && img.parentNode) {
					img.parentNode.removeChild(img);
				}
			}
			this.images = [];
			this.isInitialized = false;
			this._imageCounter = 0;
		},

		isImageLoaded : function(idx) {
			// summary: Returns true if image at the specified index is loaded,
			// false otherwise.
			// idx:
			// The number index in the data store to check if it is loaded.
			return this.images && this.images.length > index
					&& this.images[idx];
		},

		moveImageLoadingPointer : function(idx) {
			// summary: If 'autoload' is true, this tells the widget to start
			// loading
			// images from the specified pointer.
			// idx:
			// The number index in the data store to start loading images from.
			this._imageCounter = idx;
		},

		destroy : function() {
			// summary: Cleans up the widget when it is being destroyed
			if (this._slideId) {
				this._stop();
			}
			this.inherited("destroy", 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.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(idx, /* Function? */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.

			if (!callback && this._slideId) {
				this.toggleSlideShow();
			}
			var _this = this;
			var current = this.largeNode.getElementsByTagName("div");
			this.imageIndex = idx;

			var showOrLoadIt = function() {
				// If the image is already loaded, then show it.
				if (_this.images[idx]) {
					while (_this.largeNode.firstChild) {
						_this.largeNode.removeChild(_this.largeNode.firstChild);
					}
					_this.images[idx].style.opacity = 0;
					_this.largeNode.appendChild(_this.images[idx]);
					_this._currentImage = _this.images[idx]._img;
					_this._fitSize();

					var onEnd = function(a, b, c) {
						var img = _this.images[idx].firstChild;
						if (img.tagName.toLowerCase() != "img") {
							img = img.firstChild;
						}
						title = img.getAttribute("title");

						if (_this._navShowing) {
							_this._showNav(true);
						}
						dojo.publish(_this.getShowTopicName(), [{
											index : idx,
											title : title,
											url : img.getAttribute("src")
										}]);
						if (callback) {
							callback(a, b, c);
						}
						_this._setTitle(title);
					};

					dojo.fadeIn({
								node : _this.images[idx],
								duration : 300,
								onEnd : onEnd
							}).play();
				} else {
					// If the image is not loaded yet, load it first, then show
					// it.
					_this._loadImage(idx, function() {
								dojo.publish(_this.getLoadTopicName(), [idx]);
								_this.showImage(idx, 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(idx, callbackFn) {
			// summary: Load image at specified index
			// description:
			// This function loads the image at position 'idx' into the
			// internal cache of images. This does not cause the image to be
			// displayed.
			// idx:
			// 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[idx] || !this._request) {
				return;
			}

			var pageStart = idx - (idx % this.pageSize);

			this._request.start = pageStart;

			this._request.onComplete = function(items) {
				var diff = idx - 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" + idx);
				dojo.connect(img, "onload", function() {
							_this._fitImage(img);
							div.setAttribute("width", _this.imageWidth);
							div.setAttribute("height", _this.imageHeight);

							dojo.publish(_this.getLoadTopicName(), [idx]);
							_this._loadNextImage();
							if (callbackFn) {
								callbackFn();
							}
						});
				_this.hiddenNode.appendChild(div);

				var titleDiv = document.createElement("div");
				dojo.addClass(titleDiv, "slideShowTitle");
				div.appendChild(titleDiv);

				_this.images[idx] = 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
			this._slideId = setTimeout("dijit.byId('" + this.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, "left", "-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, "left", "");
		},

		_setTitle : function(title) {
			// summary: Sets the title of the image to be displayed
			// title: String
			// The String title of the image
			this.titleNode.innerHTML = this.titleTemplate.replace('@title',
					title).replace('@current',
					String(Number(this.imageIndex) + 1)).replace('@total',
					String(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
		}
	});

}