GZ/nwyj/WebContent/admin/scripts/dojo/dojox/widget/FisheyeList.js

if (!dojo._hasResource["dojox.widget.FisheyeList"]) { // _hasResource checks
														// added by build. Do
														// not use _hasResource
														// directly in your
														// code.
	dojo._hasResource["dojox.widget.FisheyeList"] = true;
	dojo.provide("dojox.widget.FisheyeList");

	dojo.require("dijit._Widget");
	dojo.require("dijit._Templated");
	dojo.require("dijit._Container");

	dojo.declare("dojox.widget.FisheyeList", [dijit._Widget, dijit._Templated,
					dijit._Container], {
				// summary:
				// Menu similar to the fish eye menu on the Mac OS
				// example:
				// | <div dojoType="FisheyeList"
				// | itemWidth="40" itemHeight="40"
				// | itemMaxWidth="150" itemMaxHeight="150"
				// | orientation="horizontal"
				// | effectUnits="2"
				// | itemPadding="10"
				// | attachEdge="center"
				// | labelEdge="bottom">
				// |
				// | <div dojoType="FisheyeListItem"
				// | id="item1"
				// | onclick="alert('click on' + this.label + '(from widget id '
				// + this.widgetId + ')!');"
				// | label="Item 1"
				// | iconSrc="images/fisheye_1.png">
				// | </div>
				// | ...
				// | </div>
				//
				constructor : function() {
					//
					// TODO
					// fix really long labels in vertical mode
					//

					this.pos = {
						'x' : -1,
						'y' : -1
					}; // current cursor position, relative to the grid

					// for conservative trigger mode, when triggered, timerScale
					// is gradually increased from 0 to 1
					this.timerScale = 1.0;

				},

				EDGE : {
					CENTER : 0,
					LEFT : 1,
					RIGHT : 2,
					TOP : 3,
					BOTTOM : 4
				},

				templateString : '<div class="dojoxFisheyeListBar" dojoAttachPoint="containerNode"></div>',

				snarfChildDomOutput : true,

				// itemWidth: Integer
				// width of menu item (in pixels) in it's dormant state (when
				// the mouse is far away)
				itemWidth : 40,

				// itemHeight: Integer
				// height of menu item (in pixels) in it's dormant state (when
				// the mouse is far away)
				itemHeight : 40,

				// itemMaxWidth: Integer
				// width of menu item (in pixels) in it's fully enlarged state
				// (when the mouse is directly over it)
				itemMaxWidth : 150,

				// itemMaxHeight: Integer
				// height of menu item (in pixels) in it's fully enlarged state
				// (when the mouse is directly over it)
				itemMaxHeight : 150,

				imgNode : null,

				// orientation: String
				// orientation of the menu, either "horizontal" or "vertical"
				orientation : 'horizontal',

				// isFixed: Boolean
				// toggle to enable additional listener (window scroll) if
				// FisheyeList is in a fixed postion
				isFixed : false,

				// conservativeTrigger: Boolean
				// if true, don't start enlarging menu items until mouse is over
				// an image;
				// if false, start enlarging menu items as the mouse moves near
				// them.
				conservativeTrigger : false,

				// effectUnits: Number
				// controls how much reaction the menu makes, relative to the
				// distance of the mouse from the menu
				effectUnits : 2,

				// itemPadding: Integer
				// padding (in pixels) betweeen each menu item
				itemPadding : 10,

				// attachEdge: String
				// controls the border that the menu items don't expand past;
				// for example, if set to "top", then the menu items will drop
				// downwards as they expand.
				// values
				// "center", "left", "right", "top", "bottom".
				attachEdge : 'center',

				// labelEdge: String
				// controls were the labels show up in relation to the menu item
				// icons
				// values
				// "center", "left", "right", "top", "bottom".
				labelEdge : 'bottom',

				postCreate : function() {
					var e = this.EDGE;
					dojo.setSelectable(this.domNode, false);

					var isHorizontal = this.isHorizontal = (this.orientation == 'horizontal');
					this.selectedNode = -1;

					this.isOver = false;
					this.hitX1 = -1;
					this.hitY1 = -1;
					this.hitX2 = -1;
					this.hitY2 = -1;

					//
					// only some edges make sense...
					//
					this.anchorEdge = this._toEdge(this.attachEdge, e.CENTER);
					this.labelEdge = this._toEdge(this.labelEdge, e.TOP);

					if (this.labelEdge == e.CENTER) {
						this.labelEdge = e.TOP;
					}

					if (isHorizontal) {
						if (this.anchorEdge == e.LEFT) {
							this.anchorEdge = e.CENTER;
						}
						if (this.anchorEdge == e.RIGHT) {
							this.anchorEdge = e.CENTER;
						}
						if (this.labelEdge == e.LEFT) {
							this.labelEdge = e.TOP;
						}
						if (this.labelEdge == e.RIGHT) {
							this.labelEdge = e.TOP;
						}
					} else {
						if (this.anchorEdge == e.TOP) {
							this.anchorEdge = e.CENTER;
						}
						if (this.anchorEdge == e.BOTTOM) {
							this.anchorEdge = e.CENTER;
						}
						if (this.labelEdge == e.TOP) {
							this.labelEdge = e.LEFT;
						}
						if (this.labelEdge == e.BOTTOM) {
							this.labelEdge = e.LEFT;
						}
					}

					//
					// figure out the proximity size
					//
					var effectUnits = this.effectUnits;
					this.proximityLeft = this.itemWidth * (effectUnits - 0.5);
					this.proximityRight = this.itemWidth * (effectUnits - 0.5);
					this.proximityTop = this.itemHeight * (effectUnits - 0.5);
					this.proximityBottom = this.itemHeight
							* (effectUnits - 0.5);

					if (this.anchorEdge == e.LEFT) {
						this.proximityLeft = 0;
					}
					if (this.anchorEdge == e.RIGHT) {
						this.proximityRight = 0;
					}
					if (this.anchorEdge == e.TOP) {
						this.proximityTop = 0;
					}
					if (this.anchorEdge == e.BOTTOM) {
						this.proximityBottom = 0;
					}
					if (this.anchorEdge == e.CENTER) {
						this.proximityLeft /= 2;
						this.proximityRight /= 2;
						this.proximityTop /= 2;
						this.proximityBottom /= 2;
					}
				},

				startup : function() {
					// summary: create our connections and setup our FisheyeList
					this.children = this.getChildren();
					// original postCreate() --tk
					this._initializePositioning();

					//
					// in liberal trigger mode, activate menu whenever mouse is
					// close
					//
					if (!this.conservativeTrigger) {
						this._onMouseMoveHandle = dojo.connect(
								document.documentElement, "onmousemove", this,
								"_onMouseMove");
					}
					if (this.isFixed) {
						this._onScrollHandle = dojo.connect(document,
								"onscroll", this, "_onScroll");
					}

					// Deactivate the menu if mouse is moved off screen (doesn't
					// work for FF?)
					this._onMouseOutHandle = dojo.connect(
							document.documentElement, "onmouseout", this,
							"_onBodyOut");
					this._addChildHandle = dojo.connect(this, "addChild", this,
							"_initializePositioning");
					this._onResizeHandle = dojo.connect(window, "onresize",
							this, "_initializePositioning");
				},

				_initializePositioning : function() {
					this.itemCount = this.children.length;

					this.barWidth = (this.isHorizontal ? this.itemCount : 1)
							* this.itemWidth;
					this.barHeight = (this.isHorizontal ? 1 : this.itemCount)
							* this.itemHeight;

					this.totalWidth = this.proximityLeft + this.proximityRight
							+ this.barWidth;
					this.totalHeight = this.proximityTop + this.proximityBottom
							+ this.barHeight;

					//
					// calculate effect ranges for each item
					//

					for (var i = 0; i < this.children.length; i++) {

						this.children[i].posX = this.itemWidth
								* (this.isHorizontal ? i : 0);
						this.children[i].posY = this.itemHeight
								* (this.isHorizontal ? 0 : i);

						this.children[i].cenX = this.children[i].posX
								+ (this.itemWidth / 2);
						this.children[i].cenY = this.children[i].posY
								+ (this.itemHeight / 2);

						var isz = this.isHorizontal
								? this.itemWidth
								: this.itemHeight;
						var r = this.effectUnits * isz;
						var c = this.isHorizontal
								? this.children[i].cenX
								: this.children[i].cenY;
						var lhs = this.isHorizontal
								? this.proximityLeft
								: this.proximityTop;
						var rhs = this.isHorizontal
								? this.proximityRight
								: this.proximityBottom;
						var siz = this.isHorizontal
								? this.barWidth
								: this.barHeight;

						var range_lhs = r;
						var range_rhs = r;

						if (range_lhs > c + lhs) {
							range_lhs = c + lhs;
						}
						if (range_rhs > (siz - c + rhs)) {
							range_rhs = siz - c + rhs;
						}

						this.children[i].effectRangeLeft = range_lhs / isz;
						this.children[i].effectRangeRght = range_rhs / isz;

						// dojo.debug('effect range for '+i+' is
						// '+range_lhs+'/'+range_rhs);
					}

					//
					// create the bar
					//
					this.domNode.style.width = this.barWidth + 'px';
					this.domNode.style.height = this.barHeight + 'px';

					//
					// position the items
					//
					for (var i = 0; i < this.children.length; i++) {
						var itm = this.children[i];
						var elm = itm.domNode;
						elm.style.left = itm.posX + 'px';
						elm.style.top = itm.posY + 'px';
						elm.style.width = this.itemWidth + 'px';
						elm.style.height = this.itemHeight + 'px';

						itm.imgNode.style.left = this.itemPadding + '%';
						itm.imgNode.style.top = this.itemPadding + '%';
						itm.imgNode.style.width = (100 - 2 * this.itemPadding)
								+ '%';
						itm.imgNode.style.height = (100 - 2 * this.itemPadding)
								+ '%';
					}

					//
					// calc the grid
					//
					this._calcHitGrid();
				},

				_overElement : function(/* DomNode|String */node, /* Event */
						e) {
					// summary:
					// Returns whether the mouse is over the passed element.
					// Node: Must must be display:block (ie, not a <span>)
					node = dojo.byId(node);
					var mouse = {
						x : e.pageX,
						y : e.pageY
					};
					var bb = dojo._getBorderBox(node);
					var absolute = dojo.coords(node, true);
					var top = absolute.y;
					var bottom = top + bb.h;
					var left = absolute.x;
					var right = left + bb.w;

					return (mouse.x >= left && mouse.x <= right
							&& mouse.y >= top && mouse.y <= bottom); // boolean
				},

				_onBodyOut : function(/* Event */e) {
					// clicking over an object inside of body causes this event
					// to fire; ignore that case
					if (this._overElement(dojo.body(), e)) {
						return;
					}
					this._setDormant(e);
				},

				_setDormant : function(/* Event */e) {
					// summary: called when mouse moves out of menu's range

					if (!this.isOver) {
						return;
					} // already dormant?
					this.isOver = false;

					if (this.conservativeTrigger) {
						// user can't re-trigger the menu expansion
						// until he mouses over a icon again
						dojo.disconnect(this._onMouseMoveHandle);
					}
					this._onGridMouseMove(-1, -1);
				},

				_setActive : function(/* Event */e) {
					// summary: called when mouse is moved into menu's range

					if (this.isOver) {
						return;
					} // already activated?
					this.isOver = true;

					if (this.conservativeTrigger) {
						// switch event handlers so that we handle mouse events
						// from anywhere near
						// the menu
						this._onMouseMoveHandle = dojo.connect(
								document.documentElement, "onmousemove", this,
								"_onMouseMove");

						this.timerScale = 0.0;

						// call mouse handler to do some initial necessary
						// calculations/positioning
						this._onMouseMove(e);

						// slowly expand the icon size so it isn't jumpy
						this._expandSlowly();
					}
				},

				_onMouseMove : function(/* Event */e) {
					// summary: called when mouse is moved
					if ((e.pageX >= this.hitX1) && (e.pageX <= this.hitX2)
							&& (e.pageY >= this.hitY1)
							&& (e.pageY <= this.hitY2)) {
						if (!this.isOver) {
							this._setActive(e);
						}
						this._onGridMouseMove(e.pageX - this.hitX1, e.pageY
										- this.hitY1);
					} else {
						if (this.isOver) {
							this._setDormant(e);
						}
					}
				},

				_onScroll : function() {
					this._calcHitGrid();
				},

				onResized : function() {
					this._calcHitGrid();
				},

				_onGridMouseMove : function(x, y) {
					// summary: called when mouse is moved in the vicinity of
					// the menu
					this.pos = {
						x : x,
						y : y
					};
					this._paint();
				},

				_paint : function() {
					var x = this.pos.x;
					var y = this.pos.y;

					if (this.itemCount <= 0) {
						return;
					}

					//
					// figure out our main index
					//
					var pos = this.isHorizontal ? x : y;
					var prx = this.isHorizontal
							? this.proximityLeft
							: this.proximityTop;
					var siz = this.isHorizontal
							? this.itemWidth
							: this.itemHeight;
					var sim = this.isHorizontal ? (1.0 - this.timerScale)
							* this.itemWidth + this.timerScale
							* this.itemMaxWidth : (1.0 - this.timerScale)
							* this.itemHeight + this.timerScale
							* this.itemMaxHeight;

					var cen = ((pos - prx) / siz) - 0.5;
					var max_off_cen = (sim / siz) - 0.5;

					if (max_off_cen > this.effectUnits) {
						max_off_cen = this.effectUnits;
					}

					//
					// figure out our off-axis weighting
					//
					var off_weight = 0;

					if (this.anchorEdge == this.EDGE.BOTTOM) {
						var cen2 = (y - this.proximityTop) / this.itemHeight;
						off_weight = (cen2 > 0.5) ? 1 : y
								/ (this.proximityTop + (this.itemHeight / 2));
					}
					if (this.anchorEdge == this.EDGE.TOP) {
						var cen2 = (y - this.proximityTop) / this.itemHeight;
						off_weight = (cen2 < 0.5)
								? 1
								: (this.totalHeight - y)
										/ (this.proximityBottom + (this.itemHeight / 2));
					}
					if (this.anchorEdge == this.EDGE.RIGHT) {
						var cen2 = (x - this.proximityLeft) / this.itemWidth;
						off_weight = (cen2 > 0.5) ? 1 : x
								/ (this.proximityLeft + (this.itemWidth / 2));
					}
					if (this.anchorEdge == this.EDGE.LEFT) {
						var cen2 = (x - this.proximityLeft) / this.itemWidth;
						off_weight = (cen2 < 0.5) ? 1 : (this.totalWidth - x)
								/ (this.proximityRight + (this.itemWidth / 2));
					}
					if (this.anchorEdge == this.EDGE.CENTER) {
						if (this.isHorizontal) {
							off_weight = y / (this.totalHeight);
						} else {
							off_weight = x / (this.totalWidth);
						}

						if (off_weight > 0.5) {
							off_weight = 1 - off_weight;
						}

						off_weight *= 2;
					}

					//
					// set the sizes
					//
					for (var i = 0; i < this.itemCount; i++) {
						var weight = this._weighAt(cen, i);
						if (weight < 0) {
							weight = 0;
						}
						this._setItemSize(i, weight * off_weight);
					}

					//
					// set the positions
					//

					var main_p = Math.round(cen);
					var offset = 0;

					if (cen < 0) {

						main_p = 0;

					} else if (cen > this.itemCount - 1) {

						main_p = this.itemCount - 1;

					} else {

						offset = (cen - main_p)
								* ((this.isHorizontal
										? this.itemWidth
										: this.itemHeight) - this.children[main_p].sizeMain);
					}

					this._positionElementsFrom(main_p, offset);
				},

				_weighAt : function(/* Integer */cen, /* Integer */i) {
					var dist = Math.abs(cen - i);
					var limit = ((cen - i) > 0)
							? this.children[i].effectRangeRght
							: this.children[i].effectRangeLeft;
					return (dist > limit) ? 0 : (1 - dist / limit); // Integer
				},

				_setItemSize : function(p, scale) {
					scale *= this.timerScale;
					var w = Math.round(this.itemWidth
							+ ((this.itemMaxWidth - this.itemWidth) * scale));
					var h = Math.round(this.itemHeight
							+ ((this.itemMaxHeight - this.itemHeight) * scale));

					if (this.isHorizontal) {

						this.children[p].sizeW = w;
						this.children[p].sizeH = h;

						this.children[p].sizeMain = w;
						this.children[p].sizeOff = h;

						var y = 0;
						if (this.anchorEdge == this.EDGE.TOP) {
							y = (this.children[p].cenY - (this.itemHeight / 2));
						} else if (this.anchorEdge == this.EDGE.BOTTOM) {
							y = (this.children[p].cenY - (h - (this.itemHeight / 2)));
						} else {
							y = (this.children[p].cenY - (h / 2));
						}

						this.children[p].usualX = Math
								.round(this.children[p].cenX - (w / 2));
						this.children[p].domNode.style.top = y + 'px';
						this.children[p].domNode.style.left = this.children[p].usualX
								+ 'px';

					} else {

						this.children[p].sizeW = w;
						this.children[p].sizeH = h;

						this.children[p].sizeOff = w;
						this.children[p].sizeMain = h;

						var x = 0;
						if (this.anchorEdge == this.EDGE.LEFT) {
							x = this.children[p].cenX - (this.itemWidth / 2);
						} else if (this.anchorEdge == this.EDGE.RIGHT) {
							x = this.children[p].cenX
									- (w - (this.itemWidth / 2));
						} else {
							x = this.children[p].cenX - (w / 2);
						}

						this.children[p].domNode.style.left = x + 'px';
						this.children[p].usualY = Math
								.round(this.children[p].cenY - (h / 2));

						this.children[p].domNode.style.top = this.children[p].usualY
								+ 'px';
					}

					this.children[p].domNode.style.width = w + 'px';
					this.children[p].domNode.style.height = h + 'px';

					if (this.children[p].svgNode) {
						this.children[p].svgNode.setSize(w, h);
					}
				},

				_positionElementsFrom : function(p, offset) {
					var pos = 0;

					if (this.isHorizontal) {
						pos = Math.round(this.children[p].usualX + offset);
						this.children[p].domNode.style.left = pos + 'px';
					} else {
						pos = Math.round(this.children[p].usualY + offset);
						this.children[p].domNode.style.top = pos + 'px';
					}
					this._positionLabel(this.children[p]);

					// position before
					var bpos = pos;
					for (var i = p - 1; i >= 0; i--) {
						bpos -= this.children[i].sizeMain;

						if (this.isHorizontal) {
							this.children[i].domNode.style.left = bpos + 'px';
						} else {
							this.children[i].domNode.style.top = bpos + 'px';
						}
						this._positionLabel(this.children[i]);
					}

					// position after
					var apos = pos;
					for (var i = p + 1; i < this.itemCount; i++) {
						apos += this.children[i - 1].sizeMain;
						if (this.isHorizontal) {
							this.children[i].domNode.style.left = apos + 'px';
						} else {
							this.children[i].domNode.style.top = apos + 'px';
						}
						this._positionLabel(this.children[i]);
					}

				},

				_positionLabel : function(itm) {
					var x = 0;
					var y = 0;

					var mb = dojo.marginBox(itm.lblNode);

					if (this.labelEdge == this.EDGE.TOP) {
						x = Math.round((itm.sizeW / 2) - (mb.w / 2));
						y = -mb.h;
					}

					if (this.labelEdge == this.EDGE.BOTTOM) {
						x = Math.round((itm.sizeW / 2) - (mb.w / 2));
						y = itm.sizeH;
					}

					if (this.labelEdge == this.EDGE.LEFT) {
						x = -mb.w;
						y = Math.round((itm.sizeH / 2) - (mb.h / 2));
					}

					if (this.labelEdge == this.EDGE.RIGHT) {
						x = itm.sizeW;
						y = Math.round((itm.sizeH / 2) - (mb.h / 2));
					}

					itm.lblNode.style.left = x + 'px';
					itm.lblNode.style.top = y + 'px';
				},

				_calcHitGrid : function() {

					var pos = dojo.coords(this.domNode, true);

					this.hitX1 = pos.x - this.proximityLeft;
					this.hitY1 = pos.y - this.proximityTop;
					this.hitX2 = this.hitX1 + this.totalWidth;
					this.hitY2 = this.hitY1 + this.totalHeight;

				},

				_toEdge : function(inp, def) {
					return this.EDGE[inp.toUpperCase()] || def;
				},

				_expandSlowly : function() {
					// summary: slowly expand the image to user specified max
					// size
					if (!this.isOver) {
						return;
					}
					this.timerScale += 0.2;
					this._paint();
					if (this.timerScale < 1.0) {
						setTimeout(dojo.hitch(this, "_expandSlowly"), 10);
					}
				},

				destroyRecursive : function() {
					// need to disconnect when we destroy
					dojo.disconnect(this._onMouseOutHandle);
					dojo.disconnect(this._onMouseMoveHandle);
					dojo.disconnect(this._addChildHandle);
					if (this.isFixed) {
						dojo.disconnect(this._onScrollHandle);
					}
					dojo.disconnect(this._onResizeHandle);
					this.inherited("destroyRecursive", arguments);
				}
			});

	dojo.declare("dojox.widget.FisheyeListItem", [dijit._Widget,
					dijit._Templated, dijit._Contained], {
				/*
				 * summary Menu item inside of a FisheyeList. See FisheyeList
				 * documentation for details on usage.
				 */

				// iconSrc: String
				// pathname to image file (jpg, gif, png, etc.) of icon for this
				// menu item
				iconSrc : "",

				// label: String
				// label to print next to the icon, when it is moused-over
				label : "",

				// id: String
				// will be set to the id of the orginal div element
				id : "",

				_blankImgPath : dojo.moduleUrl("dojox.widget",
						"FisheyeList/blank.gif"),

				templateString : '<div class="dojoxFisheyeListItem">'
						+ '  <img class="dojoxFisheyeListItemImage" dojoAttachPoint="imgNode" dojoAttachEvent="onmouseover:onMouseOver,onmouseout:onMouseOut,onclick:onClick">'
						+ '  <div class="dojoxFisheyeListItemLabel" dojoAttachPoint="lblNode"></div>'
						+ '</div>',

				_isNode : function(/* object */wh) {
					// summary:
					// checks to see if wh is actually a node.
					if (typeof Element == "function") {
						try {
							return wh instanceof Element; // boolean
						} catch (e) {
						}
					} else {
						// best-guess
						return wh && !isNaN(wh.nodeType); // boolean
					}
				},

				_hasParent : function(/* Node */node) {
					// summary:
					// returns whether or not node is a child of another node.
					return Boolean(node && node.parentNode
							&& this._isNode(node.parentNode)); // boolean
				},

				postCreate : function() {

					// set image
					if ((this.iconSrc.toLowerCase()
							.substring(this.iconSrc.length - 4) == ".png")
							&& (dojo.isIE) && (dojo.isIE < 7)) {
						/*
						 * we set the id of the new fisheyeListItem to the id of
						 * the div defined in the HTML
						 */
						if (this._hasParent(this.imgNode) && this.id != "") {
							var parent = this.imgNode.parentNode;
							parent.setAttribute("id", this.id);
						}
						this.imgNode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
								+ this.iconSrc + "', sizingMethod='scale')";
						this.imgNode.src = this._blankImgPath.toString();
					} else {
						if (this._hasParent(this.imgNode) && this.id != "") {
							var parent = this.imgNode.parentNode;
							parent.setAttribute("id", this.id);
						}
						this.imgNode.src = this.iconSrc;
					}

					// Label
					if (this.lblNode) {
						this.lblNode.appendChild(document
								.createTextNode(this.label));
					}
					dojo.setSelectable(this.domNode, false);
					this.startup();
				},

				startup : function() {
					this.parent = this.getParent();
				},

				onMouseOver : function(/* Event */e) {
					// summary: callback when user moves mouse over this menu
					// item
					// in conservative mode, don't activate the menu until user
					// mouses over an icon
					if (!this.parent.isOver) {
						this.parent._setActive(e);
					}
					if (this.label != "") {
						dojo.addClass(this.lblNode, "dojoxFishSelected");
						this.parent._positionLabel(this);
					}
				},

				onMouseOut : function(/* Event */e) {
					// summary: callback when user moves mouse off of this menu
					// item
					dojo.removeClass(this.lblNode, "dojoxFishSelected");
				},

				onClick : function(/* Event */e) {
					// summary: user overridable callback when user clicks this
					// menu item
				}
			});

}