incubator-xap-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mtu...@apache.org
Subject svn commit: r518313 [34/43] - in /incubator/xap/trunk/codebase/src/dojo: ./ src/ src/animation/ src/cal/ src/charting/ src/charting/svg/ src/charting/vml/ src/collections/ src/crypto/ src/data/ src/data/core/ src/data/old/ src/data/old/format/ src/data...
Date Wed, 14 Mar 2007 20:37:27 GMT
Added: incubator/xap/trunk/codebase/src/dojo/src/widget/Rounded.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/dojo/src/widget/Rounded.js?view=auto&rev=518313
==============================================================================
--- incubator/xap/trunk/codebase/src/dojo/src/widget/Rounded.js (added)
+++ incubator/xap/trunk/codebase/src/dojo/src/widget/Rounded.js Wed Mar 14 13:36:44 2007
@@ -0,0 +1,713 @@
+/*
+	Copyright (c) 2004-2006, The Dojo Foundation
+	All Rights Reserved.
+
+	Licensed under the Academic Free License version 2.1 or above OR the
+	modified BSD license. For more information on Dojo licensing, see:
+
+		http://dojotoolkit.org/community/licensing.shtml
+*/
+
+dojo.provide("dojo.widget.Rounded");
+dojo.widget.tags.addParseTreeHandler("dojo:rounded");
+
+dojo.require("dojo.widget.*");
+dojo.require("dojo.widget.ContentPane");
+dojo.require("dojo.html.style");
+dojo.require("dojo.html.display");
+dojo.require("dojo.gfx.color");
+
+dojo.deprecated("dojo.widget.Rounded will be removed in version 0.5; you can now apply rounded corners to any block element using dojo.lfx.rounded.", "0.5");
+
+/*
+ *	The following script is derived (with permission) from curvyCorners,
+ *	written by Cameron Cooke (CLA on file) and was adapted to Dojo by Brian
+ *	Lucas (CLA on file)
+ */
+
+dojo.widget.defineWidget(
+	"dojo.widget.Rounded",
+	dojo.widget.ContentPane,
+{
+	isSafari: dojo.render.html.safari,
+
+	boxMargin: "50px", // margin outside rounded corner box
+	radius: 14, // radius of corners
+	domNode: "",
+	corners: "TR,TL,BR,BL", // corner string to render
+	antiAlias: true, // false to disable anti-aliasing
+
+	fillInTemplate: function(args, frag) {
+		dojo.widget.Rounded.superclass.fillInTemplate.call(this, args, frag);
+
+		dojo.html.insertCssFile(this.templateCssPath);
+
+		// Magic to automatically calculate the box height/width if not supplied
+		if (this.domNode.style.height<=0) {
+			var minHeight = (this.radius*1)+this.domNode.clientHeight;
+			this.domNode.style.height = minHeight+"px";
+		}
+
+		if (this.domNode.style.width<=0) {
+			var minWidth = (this.radius*1)+this.domNode.clientWidth;
+			this.domNode.style.width = minWidth+"px";
+		}
+
+		var cornersAvailable = ["TR", "TL", "BR", "BL"];
+		var cornersPassed = this.corners.split(",");
+
+		this.settings = {
+			antiAlias: this.antiAlias
+		};
+
+		var setCorner = function(currentCorner) {
+			var val = currentCorner.toLowerCase();
+			if(dojo.lang.inArray(cornersPassed, currentCorner)) {
+				this.settings[val] = { radius: this.radius, enabled: true };
+			} else {
+				this.settings[val] = { radius: 0 }
+			}
+		}
+		dojo.lang.forEach(cornersAvailable, setCorner, this);
+
+		this.domNode.style.margin = this.boxMargin;
+		this.curvyCorners(this.settings);
+		this.applyCorners();
+	},
+
+	// ------------- curvyCorners OBJECT
+
+	curvyCorners: function(settings){	
+
+		// Setup Globals
+		this.box             = this.domNode;
+		this.topContainer    = null;
+		this.bottomContainer = null;
+		this.masterCorners   = [];
+
+		// Get box formatting details
+		var boxHeight       = dojo.html.getStyle(this.box, "height");
+		if(boxHeight=="") boxHeight="0px";
+		var boxWidth        = dojo.html.getStyle(this.box, "width");
+		var borderWidth     = dojo.html.getStyle(this.box, "borderTopWidth");
+		if(borderWidth=="") borderWidth="0px";
+		//alert(borderWidth);
+
+		var borderColour    = dojo.html.getStyle(this.box, "borderTopColor");
+		// Set to true if we have a border
+		if(borderWidth>0) this.antiAlias=true;
+
+		var boxColour       = dojo.html.getStyle(this.box, "backgroundColor");
+		var backgroundImage = dojo.html.getStyle(this.box, "backgroundImage");
+		var boxPosition     = dojo.html.getStyle(this.box, "position");
+
+		// Set formatting propertes
+		this.boxHeight       = parseInt(((boxHeight != "" && boxHeight != "auto" && boxHeight.indexOf("%") == -1)? boxHeight.substring(0, boxHeight.indexOf("px")) : this.box.scrollHeight));
+		this.boxWidth        = parseInt(((boxWidth != "" && boxWidth != "auto" && boxWidth.indexOf("%") == -1)? boxWidth.substring(0, boxWidth.indexOf("px")) : this.box.scrollWidth));
+		this.borderWidth     = parseInt(((borderWidth != "" && borderWidth.indexOf("px") !== -1)? borderWidth.slice(0, borderWidth.indexOf("px")) : 0));
+
+		// DEBUG ME?
+
+		//dojo.debug(this.rgb2Hex(boxColour));
+		var test  = new dojo.gfx.color.Color(boxColour);
+		//dojo.debug(test.toHex()); 
+
+		this.boxColour       = ((boxColour != "" && boxColour != "transparent")? ((boxColour.substr(0, 3) == "rgb")? this.rgb2Hex(boxColour) : boxColour) : "#ffffff");
+		this.borderColour    = ((borderColour != "" && borderColour != "transparent" && this.borderWidth > 0)? ((borderColour.substr(0, 3) == "rgb")? this.rgb2Hex(borderColour)  : borderColour) : this.boxColour);
+		this.borderString    = this.borderWidth + "px" + " solid " + this.borderColour;
+		this.backgroundImage = ((backgroundImage != "none")? backgroundImage : "");
+
+		// Make box relative if not already absolute
+		if(boxPosition != "absolute") this.box.style.position = "relative";
+
+		//This method creates the corners and
+		//applies them to the div element.
+
+		this.applyCorners = function() {
+			// Create top and bottom containers.
+			// These will be used as a parent for the corners and bars.
+			for(var t = 0; t < 2; t++) {
+			    switch(t) {
+			        // Top
+			        case 0:
+						// Only build top bar if a top corner is to be draw
+						if(this.settings.tl.enabled || this.settings.tr.enabled ) {
+							var newMainContainer = document.createElement("DIV");
+			
+							with(newMainContainer.style){
+								width    = "100%";
+								fontSize = "1px";
+								overflow = "hidden";
+								position = "absolute";
+								//backgroundColor = "#FFFFC4";
+								paddingLeft  = this.borderWidth + "px";
+								paddingRight = this.borderWidth + "px";
+								var topMaxRadius = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0);
+								height = topMaxRadius + "px";
+								top    = 0 - topMaxRadius + "px";
+								left   = 0 - this.borderWidth + "px";
+							}
+							
+							this.topContainer = this.box.appendChild(newMainContainer);
+						}
+			            break;
+	
+			        // Bottom
+			        case 1:      
+			            // Only build bottom bar if a top corner is to be draw
+			            if(this.settings.bl.enabled || this.settings.br.enabled) {
+							var newMainContainer = document.createElement("DIV");
+							with(newMainContainer.style){
+								width    = "100%";
+								fontSize = "1px";
+								overflow = "hidden";
+								position = "absolute";
+								//backgroundColor = "#FFFFC4";
+								paddingLeft  = this.borderWidth + "px";
+								paddingRight = this.borderWidth + "px";
+								var botMaxRadius = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0);
+								height  = botMaxRadius + "px";
+								bottom  =  0 - botMaxRadius + "px";
+								left    =  0 - this.borderWidth + "px";
+							}
+						this.bottomContainer = this.box.appendChild(newMainContainer);
+			            }
+		            break;
+			    }
+			}
+	
+			// Turn off current borders
+			if(this.topContainer) this.box.style.borderTopWidth = "0px";
+			if(this.bottomContainer) this.box.style.borderBottomWidth = "0px";
+	
+			// Create array of available corners
+			var corners = ["tr", "tl", "br", "bl"];
+		
+			//Loop for each corner
+	
+			for(var i in corners) {
+			    // Get current corner type from array
+			    var cc = corners[i];
+
+			    // Has the user requested the currentCorner be round?
+			    if(!this.settings[cc]) {
+			        // No
+			        if(((cc == "tr" || cc == "tl") && this.topContainer != null) || ((cc == "br" || cc == "bl") && this.bottomContainer != null)) {
+						// We need to create a filler div to fill the space upto the next horzontal corner.
+						var newCorner = document.createElement("DIV");
+		
+						// Setup corners properties
+						newCorner.style.position = "relative";
+						newCorner.style.fontSize = "1px";
+						newCorner.style.overflow = "hidden";
+		
+						// Add background image?
+						if(this.backgroundImage == "") {
+							newCorner.style.backgroundColor = this.boxColour;
+						} else {
+							newCorner.style.backgroundImage = this.backgroundImage;
+						}
+
+			            switch(cc) {
+							case "tl":
+								with(newCorner.style){
+									height      = topMaxRadius - this.borderWidth + "px";
+									marginRight = this.settings.tr.radius - (this.borderWidth*2) + "px";
+									borderLeft  = this.borderString;
+									borderTop   = this.borderString;
+									left         = -this.borderWidth + "px";
+								}
+							break;
+			
+							case "tr":
+								with(newCorner.style){
+									height      = topMaxRadius - this.borderWidth + "px";
+									marginLeft  = this.settings.tl.radius - (this.borderWidth*2) + "px";
+									borderRight = this.borderString;
+									borderTop   = this.borderString;
+									backgroundPosition  = "-" + this.boxWidth + "px 0px";
+									left         = this.borderWidth + "px";
+								}
+							break;
+	
+							case "bl":
+								with(newCorner.style){
+									height       = botMaxRadius - this.borderWidth + "px";
+									marginRight  = this.settings.br.radius - (this.borderWidth*2) + "px";
+									borderLeft   = this.borderString;
+									borderBottom = this.borderString;
+									left         = -this.borderWidth + "px";
+								}
+							break;
+			
+							case "br":
+								with(newCorner.style){
+									height       = botMaxRadius - this.borderWidth + "px";
+									marginLeft   = this.settings.bl.radius - (this.borderWidth*2) + "px";
+									borderRight  = this.borderString;
+									borderBottom = this.borderString;
+									left         = this.borderWidth + "px"
+								}
+							break;
+			            }
+			        }
+			    } else {
+			        /*
+			        PERFORMANCE NOTE:
+
+			        If more than one corner is requested and a corner has been already
+			        created for the same radius then that corner will be used as a master and cloned.
+			        The pixel bars will then be repositioned to form the new corner type.
+			        All new corners start as a bottom right corner.
+			        */
+			        if(this.masterCorners[this.settings[cc].radius]) {
+			            // Create clone of the master corner
+			            var newCorner = this.masterCorners[this.settings[cc].radius].cloneNode(true);
+			        } else {
+			            // Yes, we need to create a new corner
+			            var newCorner = document.createElement("DIV");
+						with(newCorner.style){
+							height = this.settings[cc].radius + "px";
+							width  = this.settings[cc].radius + "px";
+							position = "absolute";
+							fontSize = "1px";
+							overflow = "hidden";
+						}
+						// THE FOLLOWING BLOCK OF CODE CREATES A ROUNDED CORNER
+						// ---------------------------------------------------- TOP
+			
+						// Get border radius
+						var borderRadius = parseInt(this.settings[cc].radius - this.borderWidth);
+			
+						// Cycle the x-axis
+						for(var intx = 0, j = this.settings[cc].radius; intx < j; intx++) {
+							// Calculate the value of y1 which identifies the pixels inside the border
+							if((intx +1) >= borderRadius) {
+								var y1 = -1;
+							} else {
+								var y1 = (Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((intx+1), 2))) - 1);
+							}
+			
+							// Only calculate y2 and y3 if there is a border defined
+							if(borderRadius != j) {
+								if((intx) >= borderRadius) {
+									var y2 = -1;
+								} else {
+									var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius,2) - Math.pow(intx, 2)));
+								}
+			
+								if((intx+1) >= j) {
+									var y3 = -1;
+								} else {
+									var y3 = (Math.floor(Math.sqrt(Math.pow(j ,2) - Math.pow((intx+1), 2))) - 1);
+								}
+							}
+
+							// Calculate y4
+							if((intx) >= j) {
+								var y4 = -1;
+							} else {
+								var y4 = Math.ceil(Math.sqrt(Math.pow(j ,2) - Math.pow(intx, 2)));
+							}
+
+							// Draw bar on inside of the border with foreground colour
+							if(y1 > -1) this.drawPixel(intx, 0, this.boxColour, 100, (y1+1), newCorner, -1, this.settings[cc].radius);
+	
+							// Only draw border/foreground antialiased pixels and border if there is a border defined
+							if(borderRadius != j) {
+								// Draw aa pixels?
+								if(this.antiAlias) {
+									// Cycle the y-axis
+									for(var inty = (y1 + 1); inty < y2; inty++) {
+										// For each of the pixels that need anti aliasing between the foreground and border colour draw single pixel divs
+										if(this.backgroundImage != "") {					
+											var borderFract = (this.pixelFraction(intx, inty, borderRadius) * 100);
+					
+											if (borderFract < 30) {
+												this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, 0, this.settings[cc].radius);
+											} else {
+												this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, -1, this.settings[cc].radius);
+											}
+										} else {
+											var pixelcolour = dojo.gfx.color.blend(this.boxColour, this.borderColour, this.pixelFraction(intx, inty, borderRadius));
+											this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner, 0, this.settings[cc].radius);
+										}
+									}
+								}
+
+								// Draw bar for the border
+								if(y3 >= y2) {
+									if (y1 == -1) {
+										y1 = 0;
+									}
+									this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner, 0, this.settings[cc].radius);
+								}	
+								// Set the colour for the outside curve
+								var outsideColour = this.borderColour;
+							} else {
+								// Set the coour for the outside curve
+								var outsideColour = this.boxColour;
+								var y3 = y1;
+							}
+			
+							// Draw aa pixels?
+							if(this.antiAlias) {		
+								// Cycle the y-axis and draw the anti aliased pixels on the
+								// outside of the curve
+								for(var inty = (y3 + 1); inty < y4; inty++) {
+									// For each of the pixels that need anti aliasing between 
+									//the foreground/border colour & background draw single pixel divs
+									this.drawPixel(intx, inty, outsideColour, (this.pixelFraction(intx, inty , j) * 100), 1, newCorner, ((this.borderWidth > 0)? 0 : -1), this.settings[cc].radius);
+								}
+							}
+			            }
+
+			            // END OF CORNER CREATION
+			            // ---------------------------------------------------- END
+
+			            // We now need to store the current corner in the masterConers array
+			            this.masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true);
+			        }
+			
+					//Now we have a new corner we need to reposition all the pixels unless
+					//the current corner is the bottom right.
+			        if(cc != "br") {	
+						// Loop through all children (pixel bars)
+						for(var t = 0, k = newCorner.childNodes.length; t < k; t++) {
+							// Get current pixel bar
+							var pixelBar = newCorner.childNodes[t];
+	
+							// Get current top and left properties
+							var pixelBarTop    = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px")));
+							var pixelBarLeft   = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px")));
+							var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px")));
+							
+							// Reposition pixels
+							if(cc == "tl" || cc == "bl") {
+								pixelBar.style.left = this.settings[cc].radius -pixelBarLeft -1 + "px"; // Left
+							}
+							if(cc == "tr" || cc == "tl") {
+								pixelBar.style.top =  this.settings[cc].radius -pixelBarHeight -pixelBarTop + "px"; // Top
+							}
+							var value;
+					
+							switch(cc) {
+								case "tr":
+									value = (-1 *( Math.abs((this.boxWidth - this.settings[cc].radius + this.borderWidth) + pixelBarLeft) - (Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth))));
+									pixelBar.style.backgroundPosition  = value + "px";
+									
+								break;
+				
+								case "tl":
+									value = (-1 *( Math.abs((this.settings[cc].radius -pixelBarLeft -1)  - this.borderWidth) - (Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth))));
+									pixelBar.style.backgroundPosition  = value + "px";
+
+								break;
+				
+								case "bl":
+									value = (-1 *( Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) - (Math.abs((this.boxHeight + this.settings[cc].radius + pixelBarTop) -this.borderWidth))));
+									pixelBar.style.backgroundPosition  = value + "px";
+
+								break;
+							}
+						}
+					}
+				}
+				if(newCorner) {
+					// Position the container
+					switch(cc) {
+						case "tl":
+							if(newCorner.style.position == "absolute") newCorner.style.top  = "0px";
+							if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
+							if(this.topContainer) this.topContainer.appendChild(newCorner);
+						break;
+
+						case "tr":
+							if(newCorner.style.position == "absolute") newCorner.style.top  = "0px";
+							if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
+							if(this.topContainer) this.topContainer.appendChild(newCorner);
+						break;
+		
+						case "bl":
+							if(newCorner.style.position == "absolute") newCorner.style.bottom  = "0px";
+							if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
+							if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
+						break;
+						
+						case "br":
+							if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px";
+							if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
+							if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
+						break;
+					}
+				}
+			}
+			//The last thing to do is draw the rest of the filler DIVs.
+			//We only need to create a filler DIVs when two corners have
+			//diffrent radiuses in either the top or bottom container.
+	
+			// Find out which corner has the biiger radius and get the difference amount
+			var radiusDiff = [];
+			radiusDiff["t"] = this.settings.tl.enabled && this.settings.tr.enabled ? Math.abs(this.settings.tl.radius - this.settings.tr.radius) : 0;
+			radiusDiff["b"] = this.settings.bl.enabled && this.settings.br.enabled ? Math.abs(this.settings.bl.radius - this.settings.br.radius) : 0;
+
+			for(var z in radiusDiff) {
+				if(radiusDiff[z]) {
+					// Get the type of corner that is the smaller one
+					var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius)? z +"l" : z +"r");
+
+					// First we need to create a DIV for the space under the smaller corner
+					var newFiller = document.createElement("DIV");
+					with(newFiller.style) {
+						height = radiusDiff[z] + "px";
+						width  =  this.settings[smallerCornerType].radius+ "px"
+						position = "absolute";
+						fontSize = "1px";
+						overflow = "hidden";
+						backgroundColor = this.boxColour;
+					}
+
+					// Position filler
+					switch(smallerCornerType) {
+						case "tl":
+							with(newFiller.style) {
+								bottom = "0px";
+								left   = "0px";
+								borderLeft = this.borderString;
+							}
+							this.topContainer.appendChild(newFiller);
+						break;
+	
+						case "tr":
+							with(newFiller.style) {
+								bottom = "0px";
+								right  = "0px";
+								borderRight = this.borderString;
+							}
+							this.topContainer.appendChild(newFiller);
+						break;
+
+						case "bl":
+							with(newFiller.style) {
+								top    = "0px";
+								left   = "0px";
+								borderLeft = this.borderString;
+							}
+							this.bottomContainer.appendChild(newFiller);
+						break;
+
+						case "br":
+							with(newFiller.style) {
+								top    = "0px";
+								right  = "0px";
+								borderRight = this.borderString;
+							}
+							this.bottomContainer.appendChild(newFiller);
+						break;
+					}
+			    }
+
+				// Create the bar to fill the gap between each corner horizontally
+				var newFillerBar = document.createElement("DIV");
+				with(newFillerBar.style) {
+					position = "relative";
+					fontSize = "1px";
+					overflow = "hidden";
+					backgroundColor = this.boxColour;
+				}
+
+				switch(z) {
+					case "t":
+						// Top Bar
+						if(this.topContainer) {
+							with(newFillerBar.style) {
+								height      = topMaxRadius - this.borderWidth + "px";
+								marginLeft  = this.settings.tl.radius - this.borderWidth + "px";
+								marginRight = this.settings.tr.radius - this.borderWidth + "px";
+								borderTop   = this.borderString;
+							}
+						this.topContainer.appendChild(newFillerBar);
+						}
+					break;
+
+					case "b":
+						if(this.bottomContainer) {
+						// Bottom Bar
+						with(newFillerBar.style) {
+							height       = botMaxRadius - this.borderWidth + "px";
+							marginLeft   = this.settings.bl.radius - this.borderWidth + "px";
+							marginRight  = this.settings.br.radius - this.borderWidth + "px";
+							borderBottom = this.borderString;
+						}
+						this.bottomContainer.appendChild(newFillerBar);
+					}
+					break;
+				}
+			}
+		}
+
+		// This function draws the pixles
+		this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius) {
+			// Create pixel
+			var pixel = document.createElement("DIV");
+
+			
+			// Section doesn't like with (pixel.style) { DEBUG?
+			pixel.style.height   = height + "px";
+			pixel.style.width    = "1px";
+			pixel.style.position = "absolute";
+			pixel.style.fontSize = "1px";
+			pixel.style.overflow = "hidden";
+			
+			// Dont apply background image to border pixels
+			if(image == -1 && this.backgroundImage != "") {
+				pixel.style.backgroundImage = this.backgroundImage;
+				pixel.style.backgroundPosition  = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + cornerRadius + inty) -this.borderWidth) + "px";
+			} else {
+				pixel.style.backgroundColor = colour;
+			}
+			
+			// Set opacity if the transparency is anything other than 100
+			if (transAmount != 100) {
+				dojo.html.setOpacity(pixel, transAmount);
+			}
+			// Set the pixels position
+			pixel.style.top = inty + "px";
+			pixel.style.left = intx + "px";
+		
+			newCorner.appendChild(pixel);
+		}
+	},
+
+	//For a pixel cut by the line determines the fraction of the pixel on the 'inside' of the
+	//line.  Returns a number between 0 and 1
+	pixelFraction: function(x, y, r) {
+		var pixelfraction = 0;
+		
+		//determine the co-ordinates of the two points on the perimeter of the pixel that the
+		//circle crosses
+		
+		var xvalues = [];
+		var yvalues = [];
+		var point = 0;
+		var whatsides = "";
+
+		// x + 0 = Left
+		var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x,2)));
+
+		if ((intersect >= y) && (intersect < (y+1))) {
+			whatsides = "Left";
+			xvalues[point] = 0;
+			yvalues[point] = intersect - y;
+			point =  point + 1;
+		}
+
+		// y + 1 = Top
+		var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y+1,2)));
+		
+		if ((intersect >= x) && (intersect < (x+1))) {
+			whatsides = whatsides + "Top";
+			xvalues[point] = intersect - x;
+			yvalues[point] = 1;
+			point = point + 1;
+		}
+		// x + 1 = Right
+		var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x+1,2)));
+
+		if ((intersect >= y) && (intersect < (y+1))) {
+			whatsides = whatsides + "Right";
+			xvalues[point] = 1;
+			yvalues[point] = intersect - y;
+			point =  point + 1;
+		}
+		// y + 0 = Bottom
+		var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y,2)));
+
+		if ((intersect >= x) && (intersect < (x+1))) {
+			whatsides = whatsides + "Bottom";
+			xvalues[point] = intersect - x;
+			yvalues[point] = 0;
+		}
+
+	    //depending on which sides of the perimeter of the pixel the circle crosses calculate the
+	    //fraction of the pixel inside the circle
+
+		switch (whatsides) {
+			case "LeftRight":
+				pixelfraction = Math.min(yvalues[0],yvalues[1]) + ((Math.max(yvalues[0],yvalues[1]) - Math.min(yvalues[0],yvalues[1]))/2);
+			break;
+			
+			case "TopRight":
+				pixelfraction = 1-(((1-xvalues[0])*(1-yvalues[1]))/2);
+			break;
+			
+			case "TopBottom":
+				pixelfraction = Math.min(xvalues[0],xvalues[1]) + ((Math.max(xvalues[0],xvalues[1]) - Math.min(xvalues[0],xvalues[1]))/2);
+			break;
+			
+			case "LeftBottom":
+				pixelfraction = (yvalues[0]*xvalues[1])/2;
+			break;
+			
+			default:
+				pixelfraction = 1;
+	    }
+	    return pixelfraction;
+	},
+
+	// This function converts CSS rgb(x, x, x) to hexadecimal
+	rgb2Hex: function (rgbColour) {
+		try{	
+			// Get array of RGB values
+			var rgbArray = this.rgb2Array(rgbColour);
+			
+			// Get RGB values
+			var red   = parseInt(rgbArray[0]);
+			var green = parseInt(rgbArray[1]);
+			var blue  = parseInt(rgbArray[2]);
+			
+			// Build hex colour code
+			var hexColour = "#" + this.intToHex(red) + this.intToHex(green) + this.intToHex(blue);
+		}
+		catch(e){ alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex");
+		}
+		return hexColour;
+	},
+
+	//Converts a number to hexadecimal format
+
+	intToHex: function (strNum) {
+		var base = strNum / 16;
+		var rem = strNum % 16;
+		var base = base - (rem / 16);
+		var baseS = this.makeHex(base);
+		var remS = this.makeHex(rem);
+		return baseS + '' + remS;
+	},
+	//gets the hex bits of a number
+
+	makeHex: function(x) {
+		if((x >= 0) && (x <= 9)) {
+			return x;
+		} else {
+			switch(x) {
+				case 10: return "A";
+				case 11: return "B";
+				case 12: return "C";
+				case 13: return "D";
+				case 14: return "E";
+				case 15: return "F";
+			}
+		}
+	},
+
+	// Returns an array of rbg values
+	rgb2Array: function(rgbColour) {
+		// Remove rgb()
+		var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")"));
+	
+		// Split RGB into array
+		var rgbArray = rgbValues.split(", ");
+		return rgbArray;
+	}
+}); // end function

Added: incubator/xap/trunk/codebase/src/dojo/src/widget/Select.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/dojo/src/widget/Select.js?view=auto&rev=518313
==============================================================================
--- incubator/xap/trunk/codebase/src/dojo/src/widget/Select.js (added)
+++ incubator/xap/trunk/codebase/src/dojo/src/widget/Select.js Wed Mar 14 13:36:44 2007
@@ -0,0 +1,89 @@
+/*
+	Copyright (c) 2004-2006, The Dojo Foundation
+	All Rights Reserved.
+
+	Licensed under the Academic Free License version 2.1 or above OR the
+	modified BSD license. For more information on Dojo licensing, see:
+
+		http://dojotoolkit.org/community/licensing.shtml
+*/
+
+dojo.provide("dojo.widget.Select");
+
+dojo.require("dojo.widget.ComboBox");
+dojo.require("dojo.widget.*");
+dojo.require("dojo.widget.html.stabile");
+
+dojo.widget.defineWidget(
+	"dojo.widget.Select",
+	dojo.widget.ComboBox,
+	{
+		/*
+		 * summary
+		 *	Enhanced version of HTML's <select> tag.
+		 *
+		 *	Similar features:
+		 *	  - There is a drop down list of possible values.
+		 *    - You can only enter a value from the drop down list.  (You can't enter an arbitrary value.)
+		 *    - The value submitted with the form is the hidden value (ex: CA),
+		 *      not the displayed value a.k.a. label (ex: California)
+		 *
+		 *	Enhancements over plain HTML version:
+		 *    - If you type in some text then it will filter down the list of possible values in the drop down list.
+		 *    - List can be specified either as a static list or via a javascript function (that can get the list from a server)
+		 */
+
+		//	This value should not be changed by the user
+		forceValidOption: true,
+
+		setValue: function(value) {
+			// summary
+			//	Sets the value of the combobox.
+			//	TODO: this doesn't work correctly when a URL is specified, because we can't
+			//	set the label automatically (based on the specified value)
+			this.comboBoxValue.value = value;
+			dojo.widget.html.stabile.setState(this.widgetId, this.getState(), true);
+			this.onValueChanged(value);
+		},
+
+		setLabel: function(value){
+			// summary
+			//	FIXME, not sure what to do here!
+			//	Users shouldn't call this function; they should be calling setValue() instead
+			this.comboBoxSelectionValue.value = value;
+			if (this.textInputNode.value != value) { // prevent mucking up of selection
+				this.textInputNode.value = value;
+			}
+		},	  
+
+		getLabel: function(){
+			// summary: returns current label
+			return this.comboBoxSelectionValue.value;	// String
+		},
+
+		getState: function() {
+			// summary: returns current value and label
+			return {
+				value: this.getValue(),
+				label: this.getLabel()
+			};	// Object
+		},
+
+		onKeyUp: function(/*Event*/ evt){
+			// summary: internal function
+			this.setLabel(this.textInputNode.value);
+		},
+
+		setState: function(/*Object*/ state) {
+			// summary: internal function to set both value and label
+			this.setValue(state.value);
+			this.setLabel(state.label);
+		},
+
+		setAllValues: function(/*String*/ value1, /*String*/ value2){
+			// summary: internal function to set both value and label
+			this.setLabel(value1);
+			this.setValue(value2);
+		}
+	}
+);

Added: incubator/xap/trunk/codebase/src/dojo/src/widget/Show.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/dojo/src/widget/Show.js?view=auto&rev=518313
==============================================================================
--- incubator/xap/trunk/codebase/src/dojo/src/widget/Show.js (added)
+++ incubator/xap/trunk/codebase/src/dojo/src/widget/Show.js Wed Mar 14 13:36:44 2007
@@ -0,0 +1,256 @@
+/*
+	Copyright (c) 2004-2006, The Dojo Foundation
+	All Rights Reserved.
+
+	Licensed under the Academic Free License version 2.1 or above OR the
+	modified BSD license. For more information on Dojo licensing, see:
+
+		http://dojotoolkit.org/community/licensing.shtml
+*/
+
+dojo.provide("dojo.widget.Show");
+
+dojo.require("dojo.widget.*");
+dojo.require("dojo.widget.HtmlWidget");
+dojo.require("dojo.uri.Uri");
+dojo.require("dojo.event.*");
+dojo.require("dojo.lfx.*");
+dojo.require("dojo.math.curves");
+dojo.require("dojo.lang.common");
+dojo.require("dojo.lang.func");
+
+dojo.widget.defineWidget(
+	"dojo.widget.Show",
+	dojo.widget.HtmlWidget,
+	function(){
+		this._slides=[];
+	},
+	{
+	isContainer: true,
+	_slide: -1,
+
+	body: null,
+	nav: null,
+	hider: null,
+	select: null,
+	option: null,
+	inNav: false,
+	debugPane: null,
+	noClick: false,
+	templatePath: dojo.uri.dojoUri("src/widget/templates/Show.html"),
+	templateCssPath: dojo.uri.dojoUri("src/widget/templates/Show.css"),
+	fillInTemplate: function(args, frag){
+		if(args.debugPane){
+			var dp = this.debugPane = dojo.widget.byId(args.debugPane);
+			dp.hide();
+			dojo.event.connect(dp, "closeWindow", dojo.lang.hitch(this, function(){ this.debugPane = false; }));
+		}
+		var source = this.getFragNodeRef(frag);
+		this.sourceNode = dojo.body().appendChild(source.cloneNode(true));
+		for(var i = 0, child; child = this.sourceNode.childNodes[i]; i++){
+			if(child.tagName && child.getAttribute("dojotype").toLowerCase() == "showslide"){
+				child.className = "dojoShowPrintSlide";
+				child.innerHTML = "<h1>" + child.title + "</h1>" + child.innerHTML;
+			}
+		}
+		this.sourceNode.className = "dojoShowPrint";
+		this.sourceNode.style.display = "none";
+		
+		dojo.event.connect(document, "onclick", this, "gotoSlideByEvent");
+		if(dojo.render.html.ie) {
+			dojo.event.connect(document,"onkeydown",this, "gotoSlideByEvent");
+		} else {
+			// while keydown works, keypress allows rapid successive key presses
+			// to be handled correctly
+			dojo.event.connect(document,"onkeypress",this, "gotoSlideByEvent");
+		}
+		dojo.event.connect(window, "onresize", this, "resizeWindow");
+		dojo.event.connect(this.nav, "onmousemove", this, "popUpNav");
+	},
+	postCreate: function(){
+		this._slides = [];
+		for(var i = 0, child; child = this.children[i]; i++){
+			if(child.widgetType == "ShowSlide"){
+				this._slides.push(child);
+				this.option.text = child.title+" ("+(i+1)+")";
+				this.option.parentNode.insertBefore(this.option.cloneNode(true), this.option);
+			}
+		}
+		this.option.parentNode.removeChild(this.option);
+		this.domNode.style.display = "block";
+		this.resizeWindow();
+
+		this.gotoSlide(0, true);
+
+		// check to see if we're initialized from a particular slide
+		dojo.addOnLoad(dojo.lang.hitch(this, 
+			function(){
+				var th = window.location.hash;
+				if(th.length){
+					var parts = (""+window.location).split(this.widgetId+"_SlideNo_");
+					if(parts.length > 1){
+						setTimeout(dojo.lang.hitch(this, function(){
+							this.gotoSlide(parseInt(parts[1]), true);
+						}), 300);
+					}
+				}
+			})
+		);
+	},
+	gotoSlide: function(/*int*/ slide, /*Boolean*/preventSetHash){
+		if(slide == this._slide){
+			return;
+		}
+
+		if(!this._slides[slide]){
+			// slide: string
+			for(var i = 0, child; child = this._slides[i]; i++){
+				if(child.title == slide){
+					slide = i;
+					break;
+				}
+			}
+		}
+		
+		if(!this._slides[slide]){
+			return;
+		}
+
+		if(this.debugPane){
+			if(this._slides[slide].debug){
+				this.debugPane.show();
+			}else{
+				this.debugPane.hide();
+			}
+		}
+		
+		if(this._slide != -1){
+			while(this._slides[this._slide].previousAction()){}
+		}
+
+		if(!preventSetHash){
+			window.location.href = "#"+this.widgetId+"_SlideNo_"+slide;
+		}
+		if(this._slides[this._slide]){
+			this._slides[this._slide].hide();
+		}
+		
+		this._slide = slide;
+		this.select.selectedIndex = slide;
+		var cn = this.contentNode;
+		while(cn.firstChild){ cn.removeChild(cn.firstChild); }
+		cn.appendChild(this._slides[slide].domNode);
+		this._slides[slide].show();
+	},
+	gotoSlideByEvent: function(/*Event*/ event){
+		var node = event.target;
+		var type = event.type;
+		if(type == "click"){
+			if(node.tagName == "OPTION" && node.parentNode == this.select){
+				this.gotoSlide(node.index);
+			}else if(node == this.select){
+				this.gotoSlide(node.selectedIndex);
+			}else{
+				this.nextSlide(event);
+			}
+		}else if (type=="keydown" || type=="keypress") {
+			var key = event.keyCode;
+			var ch = event.charCode;
+			if(key == 63234 || key == 37){
+				this.previousSlide(event);
+			}else if(key == 63235 || key == 39 || ch == 32){
+				this.nextSlide(event);
+			}
+		}
+	},
+	nextSlide: function(/*Event?*/ event){
+		if(!this.stopEvent(event)){
+			return false;
+		}
+		if(!this._slides[this._slide].nextAction(event)){
+			if((this._slide + 1) != this._slides.length){
+				this.gotoSlide(this._slide + 1);
+				return true; // boolean
+			}
+			return false; // boolean
+		}
+	},
+	previousSlide: function(/*Event?*/ event){
+		if(!this.stopEvent(event)){
+			return false;
+		}
+		if(!this._slides[this._slide].previousAction(event)){
+			if((this._slide - 1) != -1){
+				this.gotoSlide(this._slide - 1);
+				return true; // boolean
+			}
+			return false; // boolean
+		}
+	},
+
+	stopEvent: function(/*Event*/ ev){
+		if(!ev){
+			return true;
+		}
+	
+		if (ev.type == "click" && (this._slides[this._slide].noClick || this.noClick)) {
+			return false;
+		}	
+		var target = ev.target;
+		// Check to see if the target is below the show domNode
+		while(target != null){
+			if(target == this.domNode){
+				target = ev.target;
+				break;
+			}
+			target = target.parentNode;
+		}
+		// Now that we know it's below this widget's domNode, we bubble up until we get to our domNode
+		if(!dojo.dom.isDescendantOf(target, this.nav)){
+			while(target && target != this.domNode){
+				if(target.tagName == "A" || target.tagName == "INPUT" || target.tagName == "TEXTAREA" || target.tagName == "SELECT"){
+					return false;
+				}
+				if(typeof target.onclick == "function" || typeof target.onkeypress == "function"){
+					return false;
+				}
+				target = target.parentNode;
+			}
+		}
+		
+		if(window.event){
+			ev.returnValue = false;
+			ev.cancelBubble = true;
+		}else{
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
+		
+		return true;
+	},
+	popUpNav: function(){
+		if(!this.inNav){
+			// dojo.widget.Show.node = this.nav;
+			dojo.lfx.propertyAnimation(this.nav, {
+				"height": { start: 5, end: 30 }
+			}, 250).play();
+		}
+		clearTimeout(this.inNav);
+		this.inNav = setTimeout(dojo.lang.hitch(this, "hideNav"), 2000);
+	},
+	hideNav: function(){
+		clearTimeout(this.inNav);
+		this.inNav = false;
+		// dojo.widget.Show.node = this.nav;
+		dojo.lfx.propertyAnimation(this.nav, {
+			"height": { start: 30, end: 5 }
+		}, 250).play();
+	},
+	resizeWindow: function(/*Event*/ ev){
+		dojo.body().style.height = "auto";
+		var h = Math.max(
+			document.documentElement.scrollHeight || dojo.body().scrollHeight,
+			dojo.html.getViewport().height);
+		dojo.body().style.height = h + "px";
+	}
+});

Added: incubator/xap/trunk/codebase/src/dojo/src/widget/ShowAction.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/dojo/src/widget/ShowAction.js?view=auto&rev=518313
==============================================================================
--- incubator/xap/trunk/codebase/src/dojo/src/widget/ShowAction.js (added)
+++ incubator/xap/trunk/codebase/src/dojo/src/widget/ShowAction.js Wed Mar 14 13:36:44 2007
@@ -0,0 +1,30 @@
+/*
+	Copyright (c) 2004-2006, The Dojo Foundation
+	All Rights Reserved.
+
+	Licensed under the Academic Free License version 2.1 or above OR the
+	modified BSD license. For more information on Dojo licensing, see:
+
+		http://dojotoolkit.org/community/licensing.shtml
+*/
+
+dojo.provide("dojo.widget.ShowAction");
+dojo.require("dojo.widget.*");
+
+dojo.widget.defineWidget(
+	"dojo.widget.ShowAction",
+	dojo.widget.HtmlWidget,
+{
+	on: "",
+	action: "fade",
+	duration: 350,
+	from: "",
+	to: "",
+	auto: "false",
+	postMixInProperties: function(){ 
+		// fix for very strange Opera 9 bug
+		if(dojo.render.html.opera){
+			this.action = this.action.split("/").pop();
+		}
+	}
+});

Added: incubator/xap/trunk/codebase/src/dojo/src/widget/ShowSlide.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/dojo/src/widget/ShowSlide.js?view=auto&rev=518313
==============================================================================
--- incubator/xap/trunk/codebase/src/dojo/src/widget/ShowSlide.js (added)
+++ incubator/xap/trunk/codebase/src/dojo/src/widget/ShowSlide.js Wed Mar 14 13:36:44 2007
@@ -0,0 +1,229 @@
+/*
+	Copyright (c) 2004-2006, The Dojo Foundation
+	All Rights Reserved.
+
+	Licensed under the Academic Free License version 2.1 or above OR the
+	modified BSD license. For more information on Dojo licensing, see:
+
+		http://dojotoolkit.org/community/licensing.shtml
+*/
+
+dojo.provide("dojo.widget.ShowSlide");
+
+dojo.require("dojo.widget.*");
+dojo.require("dojo.lang.common");
+dojo.require("dojo.widget.HtmlWidget");
+dojo.require("dojo.lfx.html");
+dojo.require("dojo.html.display");
+dojo.require("dojo.html.layout");
+dojo.require("dojo.animation.Animation");
+dojo.require("dojo.gfx.color");
+
+dojo.widget.defineWidget(
+	"dojo.widget.ShowSlide",
+	dojo.widget.HtmlWidget,
+{
+	title: "",
+	_action: -1,
+	isContainer: true,
+	_components: {},
+	_actions: [],
+
+	gotoAction: function(/*int*/ action){
+		this._action = action;
+	},
+	_nextAction: function(/*Event?*/ event){
+		if((this._action + 1) != this._actions.length){
+			++this._action;
+			return true; // boolean
+		}
+		return false; // boolean
+	},
+	_previousAction: function(/*Event?*/ event){
+		if((this._action - 1) != -1){
+			--this._action;
+			return true; // boolean
+		}
+		return false; // boolean
+	},
+
+	htmlTitle: null,
+	debug: false,
+	noClick: false,
+	templatePath: dojo.uri.dojoUri("src/widget/templates/ShowSlide.html"),
+	templateCssPath: dojo.uri.dojoUri("src/widget/templates/ShowSlide.css"),
+	postCreate: function(){
+		this.htmlTitle.innerHTML = this.title;
+
+		var actions = this.getChildrenOfType("ShowAction", false);
+		var atypes = {};
+		dojo.lang.forEach(actions, function(act){ atypes[act.on] = true; });
+
+		this._components = {};
+		var cn = this.containerNode;
+		var nodes = dojo.render.html.ie ? cn.all : cn.getElementsByTagName('*');
+		dojo.lang.forEach(nodes, function(node){
+			var as = node.getAttribute("as");
+			if(as){
+				if(!this._components[as]){
+					this._components[as] = [];
+				}
+				this._components[as].push(node);
+				if(!atypes[as]){
+					var tmpAction = dojo.widget.createWidget("ShowAction", { on: as });
+					this.addChild(tmpAction);
+					atypes[as] = true;
+				}
+			}
+		}, this);
+
+		this._actions = [];
+		actions = this.getChildrenOfType("ShowAction", false);
+		dojo.lang.forEach(actions, function(child){
+			this._actions.push(child);
+			var components = this._components[child.on];
+			for(var j = 0, component; component = components[j]; j++){
+				if(child["action"] && (
+					(child.action != "remove")&&
+					(child.action != "fadeout")&&
+					(child.action != "wipeout")
+				) ){
+					this.hideComponent(component);
+				}
+			}
+		}, this);
+	},
+
+	previousAction: function(/*Event?*/ event){
+		if(!this.parent.stopEvent(event)){
+			return false;
+		}
+
+		var action = this._actions[this._action];
+		if(!action){
+			return false;
+		}
+
+		var on = action.on;
+		while(action.on == on){
+			var components = this._components[on];
+			for(var i = 0, component; component = components[i]; i++){
+				if(
+					(action.action == "remove")||
+					(action.action == "fadeout")||
+					(action.action == "wipeout")
+				){
+					if(component.style.display == "none"){
+						component.style.display = "";
+						component.style.visibility = "visible";
+						var exits = true;
+					}
+					dojo.html.setOpacity(component, 1);
+				}else if(action.action){
+					this.hideComponent(component);
+				}
+			}
+
+			--this._action;
+
+			if(exits){
+				return true;
+			}	
+
+			if(action.auto == "true"){
+				on = this._actions[this._action].on;
+			}
+
+			action = this._actions[this._action];
+			if(!action){
+				return false;
+			}
+		}
+		return true;
+	},
+	hideComponent: function(/*Node*/ component){
+		component.style.visibility = "hidden";
+		component.style.backgroundColor = "transparent";
+		var parent = component.parentNode;
+		if((parent)&&(parent.tagName.toLowerCase() == "li")){
+			parent.oldType = parent.style.listStyleType;
+			parent.style.listStyleType = "none";
+		}
+	},
+	nextAction: function(/*Event?*/ event){
+		if(!this.parent.stopEvent(event)){
+			return false;
+		}
+
+		if(!this._nextAction(this)){
+			return false;
+		}
+
+		var action = this._actions[this._action];
+		if(!action){
+			return false;
+		}
+		var tmpAction = action["action"];
+		
+		var components = this._components[action.on];
+		for(var i = 0, component; component = components[i]; i++){
+			if(tmpAction){
+				var duration = action.duration || 1000;
+				if((tmpAction == "fade")||(tmpAction == "fadeIn")){
+					dojo.html.setOpacity(component, 0);
+					dojo.lfx.html.fadeShow(component, duration).play(true);
+				}else if(tmpAction == "fadeout"){
+					dojo.lfx.html.fadeHide(component, duration).play(true);
+				}else if(tmpAction == "fly"){
+					var width = dojo.html.getMarginBox(component).width;
+					var position = dojo.html.getAbsolutePosition(component);
+					// alert(position);
+					component.style.position = "relative";
+					component.style.left = -(width + position.x) + "px";
+					dojo.lfx.html.slideBy(component, { top: 0, left: (width + position.x)}, duration, -1, this.callWith).play(true);
+				}else if((tmpAction == "wipe")||(tmpAction == "wipein")){
+					dojo.lfx.html.wipeIn(component, duration).play();
+				}else if(tmpAction == "wipeout"){
+					dojo.lfx.html.wipeOut(component, duration).play();
+				}else if(tmpAction == "color"){
+					var from = new dojo.gfx.color.Color(action.from).toRgb();
+					var to = new dojo.gfx.color.Color(action.to).toRgb();
+					var anim = new dojo.animation.Animation(new dojo.math.curves.Line(from, to), duration, 0);
+					var node = component;
+					dojo.event.connect(anim, "onAnimate", function(e) {
+						node.style.color = "rgb(" + e.coordsAsInts().join(",") + ")";
+					});
+					anim.play(true);
+				}else if(tmpAction == "bgcolor"){
+					dojo.lfx.html.unhighlight(component, action.to, duration).play();
+				}else if(tmpAction == "remove"){
+					component.style.display = "none";
+				}
+
+				if(tmpAction == "hide"){
+					component.style.visibility = "hidden";
+				}else{
+					component.style.visibility = "visible";
+				}
+			}
+		}
+		
+		action = this._actions[this._action + 1];
+		if(action && action.auto == "true"){
+			this.nextAction();
+		}
+
+		return true;
+	},
+	callWith: function(/*Node*/ node){
+		if(!node){ return; }
+		if(dojo.lang.isArray(node)){
+			dojo.lang.forEach(node, arguments.callee);
+			return;
+		}
+		var parent = node.parentNode;
+		if((parent)&&(parent.tagName.toLowerCase() == "li")){
+			parent.style.listStyleType = parent.oldType;
+		}
+	}
+});

Added: incubator/xap/trunk/codebase/src/dojo/src/widget/SlideShow.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/dojo/src/widget/SlideShow.js?view=auto&rev=518313
==============================================================================
--- incubator/xap/trunk/codebase/src/dojo/src/widget/SlideShow.js (added)
+++ incubator/xap/trunk/codebase/src/dojo/src/widget/SlideShow.js Wed Mar 14 13:36:44 2007
@@ -0,0 +1,174 @@
+/*
+	Copyright (c) 2004-2006, The Dojo Foundation
+	All Rights Reserved.
+
+	Licensed under the Academic Free License version 2.1 or above OR the
+	modified BSD license. For more information on Dojo licensing, see:
+
+		http://dojotoolkit.org/community/licensing.shtml
+*/
+
+dojo.provide("dojo.widget.SlideShow");
+
+dojo.require("dojo.event.*");
+dojo.require("dojo.widget.*");
+dojo.require("dojo.lfx.*");
+dojo.require("dojo.html.display");
+
+
+dojo.widget.defineWidget(
+	"dojo.widget.SlideShow",
+	dojo.widget.HtmlWidget,
+	{
+		/*
+		summary
+			Takes a bunch of pictures and displays them one by one, like a slide show.
+		Usage
+			<img dojoType="SlideShow" 
+				imgUrls="images/1.jpg;images/2.jpg;images/3.jpg;images/4.jpg;images/5.jpg;images/6.jpg" 
+				imgUrlBase="/foo/bar/images/"
+				transitionInterval="700"
+				delay="7000" 
+				src="images/1.jpg"
+				imgWidth="400" imgHeight="300" />
+		*/
+
+		templatePath: dojo.uri.dojoUri("src/widget/templates/SlideShow.html"),
+		templateCssPath: dojo.uri.dojoUri("src/widget/templates/SlideShow.css"),
+
+		// imgUrls: String[]
+		//	List of images to use
+		//	Ex: "1.jpg;2.jpg;3.jpg"
+		imgUrls: [],
+		
+		// imgUrlBase: String
+		//	Path prefix to prepend to each file specified in imgUrls
+		//	Ex: "/foo/bar/images/"
+		imgUrlBase: "",
+
+		// delay: Integer
+		//	Number of milliseconds to display each image
+		delay: 4000,
+
+		// transitionInterval: Integer
+		//	Number of milliseconds to transition between pictures
+		transitionInterval: 2000,
+		
+		// imgWidth: Integer
+		//	Width of image in pixels
+		imgWidth: 800,
+		
+		// imgHeight: Integer
+		//	Height of image in pixels
+		imgHeight: 600,
+
+		// preventCache: Boolean
+		//	If true, download the image every time, rather than using cached version in browser
+		preventCache: false,
+		
+		// stopped: Boolean
+		//	is Animation paused?
+		stopped: false,
+
+		////// Properties
+		_urlsIdx: 0, 		// where in the images we are
+		_background: "img2", // what's in the bg
+		_foreground: "img1", // what's in the fg
+		fadeAnim: null, // references our animation
+
+		///////// our DOM nodes 
+		startStopButton: null,
+		img1: null,
+		img2: null,
+
+		postMixInProperties: function(){
+			this.width = this.imgWidth + "px";
+			this.height = this.imgHeight + "px";
+		},
+
+		fillInTemplate: function(){
+			// safari will cache the images and not fire an image onload event if
+			// there are only two images in the slideshow
+			if(dojo.render.html.safari && this.imgUrls.length == 2) {
+				this.preventCache = true;
+			}
+			dojo.html.setOpacity(this.img1, 0.9999);
+			dojo.html.setOpacity(this.img2, 0.9999);
+			if(this.imgUrls.length>1){
+				this.img2.src = this.imgUrlBase+this.imgUrls[this._urlsIdx++] + this._getUrlSuffix();
+				this._endTransition();
+			}else{
+				this.img1.src = this.imgUrlBase+this.imgUrls[this._urlsIdx++] + this._getUrlSuffix();
+			}
+		},
+
+		_getUrlSuffix: function() {
+			if(this.preventCache) {
+				return "?ts=" + (new Date()).getTime();
+			} else {
+				return "";
+			}
+		},
+		
+		togglePaused: function(){
+			// summary: pauses or restarts the slideshow
+			if(this.stopped){
+				this.stopped = false;
+				this._backgroundImageLoaded();
+				this.startStopButton.value= "pause";
+			}else{
+				this.stopped = true;
+				this.startStopButton.value= "play";
+			}
+		},
+
+		_backgroundImageLoaded: function(){
+			// start fading out the _foreground image
+			if(this.stopped){ return; }
+
+			// actually start the fadeOut effect
+			// NOTE: if we wanted to use other transition types, we'd set them up
+			// 		 here as well
+			if(this.fadeAnim) {
+				this.fadeAnim.stop();
+			}
+			this.fadeAnim = dojo.lfx.fadeOut(this[this._foreground], 
+				this.transitionInterval, null);
+			dojo.event.connect(this.fadeAnim,"onEnd",this,"_endTransition");
+			this.fadeAnim.play();
+		},
+
+		_endTransition: function(){
+			// move the _foreground image to the _background 
+			with(this[this._background].style){ zIndex = parseInt(zIndex)+1; }
+			with(this[this._foreground].style){ zIndex = parseInt(zIndex)-1; }
+
+			// fg/bg book-keeping
+			var tmp = this._foreground;
+			this._foreground = this._background;
+			this._background = tmp;
+			// keep on truckin
+			this._loadNextImage();
+		},
+
+		_loadNextImage: function(){
+			// summary
+			//	after specified delay,
+			//	load a new image in that container, and call _backgroundImageLoaded()
+			//	when it finishes loading
+			dojo.event.kwConnect({
+				srcObj: this[this._background],
+				srcFunc: "onload",
+				adviceObj: this,
+				adviceFunc: "_backgroundImageLoaded",
+				once: true, // kill old connections
+				delay: this.delay
+			});
+			dojo.html.setOpacity(this[this._background], 1.0);
+			this[this._background].src = this.imgUrlBase+this.imgUrls[this._urlsIdx++];
+			if(this._urlsIdx>(this.imgUrls.length-1)){
+				this._urlsIdx = 0;
+			}
+		}
+	}
+);

Added: incubator/xap/trunk/codebase/src/dojo/src/widget/Slider.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/dojo/src/widget/Slider.js?view=auto&rev=518313
==============================================================================
--- incubator/xap/trunk/codebase/src/dojo/src/widget/Slider.js (added)
+++ incubator/xap/trunk/codebase/src/dojo/src/widget/Slider.js Wed Mar 14 13:36:44 2007
@@ -0,0 +1,927 @@
+/*
+	Copyright (c) 2004-2006, The Dojo Foundation
+	All Rights Reserved.
+
+	Licensed under the Academic Free License version 2.1 or above OR the
+	modified BSD license. For more information on Dojo licensing, see:
+
+		http://dojotoolkit.org/community/licensing.shtml
+*/
+
+dojo.provide("dojo.widget.Slider");
+
+// load dependencies
+dojo.require("dojo.event.*");
+dojo.require("dojo.dnd.*");
+// dojo.dnd.* doesn't include this package, because it's not in __package__.js
+dojo.require("dojo.dnd.HtmlDragMove");
+dojo.require("dojo.widget.*");
+dojo.require("dojo.html.layout");
+
+
+dojo.widget.defineWidget (
+	"dojo.widget.Slider",
+	dojo.widget.HtmlWidget,
+	{
+		// summary
+		//	Slider Widget.
+		//	
+		//	The slider widget comes in three forms:
+		//	 1. Base Slider widget which supports movement in x and y dimensions
+		//	 2. Vertical Slider (SliderVertical) widget which supports movement
+		//	    only in the y dimension.
+		//	 3. Horizontal Slider (SliderHorizontal) widget which supports movement
+		//	    only in the x dimension.
+		//
+		//	The key objects in the widget are:
+		//	 - a container div which displays a bar in the background (Slider object)
+		//	 - a handle inside the container div, which represents the value
+		//	   (sliderHandle DOM node)
+		//	 - the object which moves the handle (_handleMove is of type 
+		//	   SliderDragMoveSource)
+		//
+		//	The values for the slider are calculated by grouping pixels together, 
+		//	based on the number of values to be represented by the slider.
+		//	The number of pixels in a group is called the _valueSize
+		//	 e.g. if slider is 150 pixels long, and is representing the values
+		//	      0,1,...10 then pixels are grouped into lots of 15 (_valueSize), where:
+		//	        value 0 maps to pixels  0 -  7
+		//	              1                 8 - 22
+		//	              2                23 - 37 etc.
+		//	The accuracy of the slider is limited to the number of pixels
+		//	(i.e tiles > pixels will result in the slider not being able to
+		//	 represent some values).
+
+		// minimumX: Number
+		//	minimum value to be represented by slider in the horizontal direction
+		minimumX: 0,
+
+		// minimumY: Number
+		//	minimum value to be represented by slider in the vertical direction
+		minimumY: 0,
+
+		// maximumX: Number
+		//	maximum value to be represented by slider in the horizontal direction
+		maximumX: 10,
+
+		// maximumY: Number
+		//	maximum value to be represented by slider in the vertical direction
+		maximumY: 10,
+
+		// snapValuesX: Number
+		//	number of values to be represented by slider in the horizontal direction
+		//	=0 means no snapping
+		snapValuesX: 0,
+
+		// snapValuesY: Number
+		//	number of values to be represented by slider in the vertical direction
+		//	=0 means no snapping
+		snapValuesY: 0,
+
+		// should the handle snap to the grid or remain where it was dragged to?
+		// FIXME: snapToGrid=false is logically in conflict with setting snapValuesX and snapValuesY
+		_snapToGrid: true,
+
+		// isEnableX: Boolean
+		//	enables (disables) sliding in the horizontal direction
+		isEnableX: true,
+
+		// isEnableY: Boolean
+		//	enables (disables) sliding in the vertical direction
+		isEnableY: true,
+
+		// value size (pixels) in the x dimension
+		_valueSizeX: 0.0,
+		// value size (pixels) in the y dimension
+		_valueSizeY: 0.0,
+		// left most edge of constraining container (pixels) in the X dimension
+		_minX: 0,
+		// top most edge of constraining container (pixels) in the Y dimension
+		_minY: 0,
+		// constrained slider size (pixels) in the x dimension
+		_constraintWidth: 0,
+		// constrained slider size (pixels) in the y dimension
+		_constraintHeight: 0,
+		// progress image right clip value (pixels) in the X dimension
+		_clipLeft: 0,
+		// progress image left clip value (pixels) in the X dimension
+		_clipRight: 0,
+		// progress image top clip value (pixels) in the Y dimension
+		_clipTop: 0,
+		// progress image bottom clip value (pixels) in the Y dimension
+		_clipBottom: 0,
+		// half the size of the slider handle (pixels) in the X dimension
+		_clipXdelta: 0,
+		// half the size of the slider handle (pixels) in the Y dimension
+		_clipYdelta: 0,
+
+		// initialValueX: Number
+		//	initial value in the x dimension
+		initialValueX: 0,
+
+		// initialValueY: Number
+		//	initial value in the y dimension
+		initialValueY: 0,
+
+		// flipX: Boolean
+		//	values decrease in the X dimension
+		flipX: false,
+
+		// flipY: Boolean
+		//	values decrease in the Y dimension
+		flipY: false,
+
+		// clickSelect: Boolean
+		//	enables (disables) the user to click on the slider to set the position
+		clickSelect: true,
+
+		// activeDrag: Boolean
+		//	disables (enables) the value to change while you are dragging, or just after drag finishes
+		activeDrag: false,
+
+		templateCssPath: dojo.uri.dojoUri ("src/widget/templates/Slider.css"),
+		templatePath: dojo.uri.dojoUri ("src/widget/templates/Slider.html"),
+
+		// This is set to true when a drag is started, so that it is not confused
+		// with a click
+		_isDragInProgress: false,
+
+		// default user style attributes
+
+		// bottomButtonSrc: String
+		//	down arrow graphic URL
+		bottomButtonSrc: dojo.uri.dojoUri("src/widget/templates/images/slider_down_arrow.png"),
+
+		// topButtonSrc: String
+		//	up arrow graphic URL
+		topButtonSrc: dojo.uri.dojoUri("src/widget/templates/images/slider_up_arrow.png"),
+
+		// leftButtonSrc: String
+		//	left arrow graphic URL
+		leftButtonSrc: dojo.uri.dojoUri("src/widget/templates/images/slider_left_arrow.png"),
+
+		// rightButtonSrc: String
+		//	right arrow graphic URL
+		rightButtonSrc: dojo.uri.dojoUri("src/widget/templates/images/slider_right_arrow.png"),
+
+		// backgroundSrc: String
+		//	slider background graphic URL
+		backgroundSrc: dojo.uri.dojoUri("src/widget/templates/images/blank.gif"),
+
+		// progressBackgroundSrc: String
+		//	slider background graphic URL to overlay the normal background to show progress
+		progressBackgroundSrc: dojo.uri.dojoUri("src/widget/templates/images/blank.gif"),
+
+		// backgroundSize: String
+		//	sizing style attributes for the background image
+		backgroundSize: "width:200px;height:200px;",
+
+		// backgroundStyle: String
+		//	style attributes (other than sizing) for the background image
+		backgroundStyle: "",
+
+		// buttonStyleX: String
+		//	style attributes for the left and right arrow images
+		buttonStyleX: "",
+
+		// buttonStyleY: String
+		//	style attributes for the up and down arrow images
+		buttonStyleY: "",
+
+		// handleStyle: String
+		//	style attributes for the moveable slider image
+		handleStyle: "",
+
+		// handleSrc: String
+		//	moveable slider graphic URL
+		handleSrc: dojo.uri.dojoUri("src/widget/templates/images/slider-button.png"),
+
+		// showButtons: Boolean
+		//	show (don't show) the arrow buttons
+		showButtons: true,
+
+		_eventCount: 0,
+		_typamaticTimer: null,
+		_typamaticFunction: null,
+
+		// defaultTimeout: Number
+		//	number of milliseconds before a held key or button becomes typematic 
+		defaultTimeout: 500,
+
+		// timeoutChangeRate: Number
+		//	fraction of time used to change the typematic timer between events
+		//	1.0 means that each typematic event fires at defaultTimeout intervals
+		//	< 1.0 means that each typematic event fires at an increasing faster rate
+		timeoutChangeRate: 0.90,
+
+		_currentTimeout: this.defaultTimeout,
+
+		// does the keyboard related stuff
+		_handleKeyEvents: function(/*Event*/ evt){
+			if(!evt.key){ return; }
+
+			if(!evt.ctrlKey && !evt.altKey){
+				switch(evt.key){
+					case evt.KEY_LEFT_ARROW:
+						dojo.event.browser.stopEvent(evt);
+						this._leftButtonPressed(evt);
+						return;
+					case evt.KEY_RIGHT_ARROW:
+						dojo.event.browser.stopEvent(evt);
+						this._rightButtonPressed(evt);
+						return;
+					case evt.KEY_DOWN_ARROW:
+						dojo.event.browser.stopEvent(evt);
+						this._bottomButtonPressed(evt);
+						return;
+					case evt.KEY_UP_ARROW:
+						dojo.event.browser.stopEvent(evt);
+						this._topButtonPressed(evt);
+						return;
+				}
+			}
+			this._eventCount++;
+
+		},
+
+		_pressButton: function(/*DomNode*/ buttonNode){
+			buttonNode.className = buttonNode.className.replace("Outset","Inset");
+		},
+
+		_releaseButton: function(/*DomNode*/ buttonNode){
+			buttonNode.className = buttonNode.className.replace("Inset","Outset");
+		},
+
+		_buttonPressed: function(/*Event*/ evt, /*DomNode*/ buttonNode){
+			this._setFocus();
+			if(typeof evt == "object"){
+				if(this._typamaticTimer != null){
+					if(this._typamaticNode == buttonNode){
+						return;
+					}
+					clearTimeout(this._typamaticTimer);
+				}
+				this._buttonReleased(null);
+				this._eventCount++;
+				this._typamaticTimer = null;
+				this._currentTimeout = this.defaultTimeout;
+				dojo.event.browser.stopEvent(evt);
+			}else if (evt != this._eventCount){
+				this._buttonReleased(null);
+				return false;
+			}
+			if (buttonNode == this.leftButtonNode && this.isEnableX){
+				this._snapX(dojo.html.getPixelValue (this.sliderHandleNode,"left") - this._valueSizeX);
+			}
+			else if (buttonNode == this.rightButtonNode && this.isEnableX){
+				this._snapX(dojo.html.getPixelValue (this.sliderHandleNode,"left") + this._valueSizeX);
+			}
+			else if (buttonNode == this.topButtonNode && this.isEnableY){
+				this._snapY(dojo.html.getPixelValue (this.sliderHandleNode,"top") - this._valueSizeY);
+			}
+			else if (buttonNode == this.bottomButtonNode && this.isEnableY){
+				this._snapY(dojo.html.getPixelValue (this.sliderHandleNode,"top") + this._valueSizeY);
+			}
+			else {
+				return false;
+			}
+			this._pressButton(buttonNode);
+			this.notifyListeners();
+			this._typamaticNode = buttonNode;
+			this._typamaticTimer = dojo.lang.setTimeout(this, "_buttonPressed", this._currentTimeout, this._eventCount, buttonNode);
+			this._currentTimeout = Math.round(this._currentTimeout * this.timeoutChangeRate);
+			return false;
+		},
+
+		_bottomButtonPressed: function(/*Event*/ evt){
+			return this._buttonPressed(evt,this.bottomButtonNode);
+		},
+
+		// IE sends these events when rapid clicking, mimic an extra single click
+		_bottomButtonDoubleClicked: function(/*Event*/ evt){
+			var rc = this._bottomButtonPressed(evt);
+			dojo.lang.setTimeout( this, "_buttonReleased", 50, null);
+			return rc;
+		},
+
+		_topButtonPressed: function(/*Event*/ evt){
+			return this._buttonPressed(evt,this.topButtonNode);
+		},
+
+		// IE sends these events when rapid clicking, mimic an extra single click
+		_topButtonDoubleClicked: function(/*Event*/ evt){
+			var rc = this._topButtonPressed(evt);
+			dojo.lang.setTimeout( this, "_buttonReleased", 50, null);
+			return rc;
+		},
+
+		_leftButtonPressed: function(/*Event*/ evt){
+			return this._buttonPressed(evt,this.leftButtonNode);
+		},
+
+		// IE sends these events when rapid clicking, mimic an extra single click
+		_leftButtonDoubleClicked: function(/*Event*/ evt){
+			var rc = this._leftButtonPressed(evt);
+			dojo.lang.setTimeout( this, "_buttonReleased", 50, null);
+			return rc;
+		},
+
+		_rightButtonPressed: function(/*Event*/ evt){
+			return this._buttonPressed(evt,this.rightButtonNode);
+		},
+
+		// IE sends these events when rapid clicking, mimic an extra single click
+		_rightButtonDoubleClicked: function(/*Event*/ evt){
+			var rc = this._rightButtonPressed(evt);
+			dojo.lang.setTimeout( this, "_buttonReleased", 50, null);
+			return rc;
+		},
+
+		_buttonReleased: function(/*Event*/ evt){
+			if(typeof evt == "object" && evt != null && typeof evt.keyCode != "undefined" && evt.keyCode != null){
+				var keyCode = evt.keyCode;
+
+				switch(keyCode){
+					case evt.KEY_LEFT_ARROW:
+					case evt.KEY_RIGHT_ARROW:
+					case evt.KEY_DOWN_ARROW:
+					case evt.KEY_UP_ARROW:
+						dojo.event.browser.stopEvent(evt);
+						break;
+				}
+			}
+			this._releaseButton(this.topButtonNode);
+			this._releaseButton(this.bottomButtonNode);
+			this._releaseButton(this.leftButtonNode);
+			this._releaseButton(this.rightButtonNode);
+			this._eventCount++;
+			if(this._typamaticTimer != null){
+				clearTimeout(this._typamaticTimer);
+			}
+			this._typamaticTimer = null;
+			this._currentTimeout = this.defaultTimeout;
+		},
+
+		_mouseWheeled: function(/*Event*/ evt){
+			var scrollAmount = 0;
+			if(typeof evt.wheelDelta == 'number'){ // IE
+				scrollAmount = evt.wheelDelta;
+			}else if (typeof evt.detail == 'number'){ // Mozilla+Firefox
+				scrollAmount = -evt.detail;
+			}
+			if (this.isEnableY){
+				if(scrollAmount > 0){
+					this._topButtonPressed(evt);
+					this._buttonReleased(evt);
+				}else if (scrollAmount < 0){
+					this._bottomButtonPressed(evt);
+					this._buttonReleased(evt);
+				}
+			} else if (this.isEnableX){
+				if(scrollAmount > 0){
+					this._rightButtonPressed(evt);
+					this._buttonReleased(evt);
+				}else if (scrollAmount < 0){
+					this._leftButtonPressed(evt);
+					this._buttonReleased(evt);
+				}
+			}
+		},
+
+		_discardEvent: function(/*Event*/ evt){
+			dojo.event.browser.stopEvent(evt);
+		},
+
+		_setFocus: function(){
+			if (this.focusNode.focus){
+				this.focusNode.focus();
+			}
+		},
+
+		// This function is called when the template is loaded
+		fillInTemplate: function (/*Object*/ args, /*Object*/ frag) 
+		{
+			var source = this.getFragNodeRef(frag);
+			dojo.html.copyStyle(this.domNode, source);
+			// the user's style for the widget might include border and padding
+			// unfortunately, border isn't supported for inline elements
+			// so I get to fake everyone out by setting the border and padding
+			// of the outer table cells
+			var padding = this.domNode.style.padding;
+			if (dojo.lang.isString(padding) && padding != "" && padding != "0px" && padding != "0px 0px 0px 0px"){
+				this.topBorderNode.style.padding = 
+					this.bottomBorderNode.style.padding = padding;
+				this.topBorderNode.style.paddingBottom = "0px";
+				this.bottomBorderNode.style.paddingTop = "0px";
+				this.rightBorderNode.style.paddingRight = this.domNode.style.paddingRight;
+				this.leftBorderNode.style.paddingLeft= this.domNode.style.paddingLeft;
+				this.domNode.style.padding = "0px 0px 0px 0px";
+			}
+			var borderWidth = this.domNode.style.borderWidth;
+			if (dojo.lang.isString(borderWidth) && borderWidth != "" && borderWidth != "0px" && borderWidth != "0px 0px 0px 0px"){
+				this.topBorderNode.style.borderStyle = 
+					this.rightBorderNode.style.borderStyle = 
+					this.bottomBorderNode.style.borderStyle = 
+					this.leftBorderNode.style.borderStyle = 
+						this.domNode.style.borderStyle;
+				this.topBorderNode.style.borderColor = 
+					this.rightBorderNode.style.borderColor = 
+					this.bottomBorderNode.style.borderColor = 
+					this.leftBorderNode.style.borderColor = 
+						this.domNode.style.borderColor;
+				this.topBorderNode.style.borderWidth = 
+					this.bottomBorderNode.style.borderWidth = borderWidth;
+				this.topBorderNode.style.borderBottomWidth = "0px";
+				this.bottomBorderNode.style.borderTopWidth = "0px";
+				this.rightBorderNode.style.borderRightWidth = this.domNode.style.borderRightWidth;
+				this.leftBorderNode.style.borderLeftWidth = this.domNode.style.borderLeftWidth;
+				this.domNode.style.borderWidth = "0px 0px 0px 0px";
+			}
+
+			// dojo.debug ("fillInTemplate - className = " + this.domNode.className);
+
+			// setup drag-n-drop for the sliderHandle
+			this._handleMove = new dojo.widget._SliderDragMoveSource (this.sliderHandleNode);
+			this._handleMove.setParent (this);
+
+			if (this.clickSelect){
+				dojo.event.connect (this.constrainingContainerNode, "onmousedown", this, "_onClick");
+			} 
+
+			if (this.isEnableX){
+				this.setValueX (!isNaN(this.initialValueX) ? this.initialValueX : (!isNaN(this.minimumX) ? this.minimumX : 0));
+			}
+			if (!this.isEnableX || !this.showButtons){
+				this.rightButtonNode.style.width = "1px"; // allow the border to show
+				this.rightButtonNode.style.visibility = "hidden";
+				this.leftButtonNode.style.width = "1px"; // allow the border to show
+				this.leftButtonNode.style.visibility = "hidden";
+			}
+			if (this.isEnableY){
+				this.setValueY (!isNaN(this.initialValueY) ? this.initialValueY : (!isNaN(this.minimumY) ? this.minimumY : 0));
+			}
+			if (!this.isEnableY || !this.showButtons){
+				this.bottomButtonNode.style.width = "1px"; // allow the border to show
+				this.bottomButtonNode.style.visibility = "hidden";
+				this.topButtonNode.style.width = "1px"; // allow the border to show
+				this.topButtonNode.style.visibility = "hidden";
+			}
+			if(this.focusNode.addEventListener){
+				// dojo.event.connect() doesn't seem to work with DOMMouseScroll
+				this.focusNode.addEventListener('DOMMouseScroll', dojo.lang.hitch(this, "_mouseWheeled"), false); // Mozilla + Firefox + Netscape
+			}
+		},
+
+		// move the X value to the closest allowable value
+		_snapX: function(/*Number*/ x){
+			if (x < 0){ x = 0; }
+			else if (x > this._constraintWidth){ x = this._constraintWidth; }
+			else {
+				var selectedValue = Math.round (x / this._valueSizeX);
+				x = Math.round (selectedValue * this._valueSizeX);
+			}
+			this.sliderHandleNode.style.left = x + "px";
+			if (this.flipX){
+				this._clipLeft = x + this._clipXdelta;
+			} else {
+				this._clipRight = x + this._clipXdelta;
+			}
+			this.progressBackgroundNode.style.clip = "rect("+this._clipTop+"px,"+this._clipRight+"px,"+this._clipBottom+"px,"+this._clipLeft+"px)";
+		},
+
+		// compute _valueSizeX & _constraintWidth & default snapValuesX
+		_calc_valueSizeX: function (){
+			var constrainingCtrBox = dojo.html.getContentBox(this.constrainingContainerNode);
+			var sliderHandleBox = dojo.html.getContentBox(this.sliderHandleNode);
+			if (isNaN(constrainingCtrBox.width) || isNaN(sliderHandleBox.width) || constrainingCtrBox.width <= 0 || sliderHandleBox.width <= 0){ 
+				return false; 
+			}
+
+			this._constraintWidth = constrainingCtrBox.width 
+				+ dojo.html.getPadding(this.constrainingContainerNode).width
+				- sliderHandleBox.width;
+
+			if (this.flipX){
+				this._clipLeft = this._clipRight = constrainingCtrBox.width;
+			} else {
+				this._clipLeft = this._clipRight = 0;
+			}
+			this._clipXdelta = sliderHandleBox.width >> 1;
+			if (!this.isEnableY){
+				this._clipTop = 0;
+				this._clipBottom = constrainingCtrBox.height;
+			}
+
+			if (this._constraintWidth <= 0){ return false; }
+			if (this.snapValuesX == 0){
+				this.snapValuesX = this._constraintWidth + 1;
+			}
+
+			this._valueSizeX = this._constraintWidth / (this.snapValuesX - 1);
+			return true;
+		},
+
+		// summary
+		//	move the handle horizontally to the specified value
+		setValueX: function (/*Number*/ value){
+			if (0.0 == this._valueSizeX){
+				if (this._calc_valueSizeX () == false){
+					dojo.lang.setTimeout(this, "setValueX", 100, value);
+					return;
+				}
+			}
+			if (isNaN(value)){
+				value = 0;
+			}
+			if (value > this.maximumX){
+				value = this.maximumX;
+			}
+			else if (value < this.minimumX){
+				value = this.minimumX;
+			}
+			var pixelPercent = (value-this.minimumX) / (this.maximumX-this.minimumX);
+			if (this.flipX){
+				pixelPercent = 1.0 - pixelPercent;
+			}
+			this._snapX (pixelPercent * this._constraintWidth);
+			this.notifyListeners();
+		},
+
+
+		// summary
+		//	return the X value that the matches the position of the handle
+		getValueX: function (){
+			var pixelPercent = dojo.html.getPixelValue (this.sliderHandleNode,"left") / this._constraintWidth;
+			if (this.flipX){
+				pixelPercent = 1.0 - pixelPercent;
+			}
+			return Math.round (pixelPercent * (this.snapValuesX-1)) * ((this.maximumX-this.minimumX) / (this.snapValuesX-1)) + this.minimumX;
+		},
+
+		// move the Y value to the closest allowable value
+		_snapY: function (/*Number*/ y){
+			if (y < 0){ y = 0; }
+			else if (y > this._constraintHeight){ y = this._constraintHeight; }
+			else {
+				var selectedValue = Math.round (y / this._valueSizeY);
+				y = Math.round (selectedValue * this._valueSizeY);
+			}
+			this.sliderHandleNode.style.top = y + "px";
+			if (this.flipY){
+				this._clipTop = y + this._clipYdelta;
+			} else {
+				this._clipBottom = y + this._clipYdelta;
+			}
+			this.progressBackgroundNode.style.clip = "rect("+this._clipTop+"px,"+this._clipRight+"px,"+this._clipBottom+"px,"+this._clipLeft+"px)";
+		},
+		// compute _valueSizeY & _constraintHeight & default snapValuesY
+		_calc_valueSizeY: function (){
+			var constrainingCtrBox = dojo.html.getContentBox(this.constrainingContainerNode);
+			var sliderHandleBox = dojo.html.getContentBox(this.sliderHandleNode);
+			if (isNaN(constrainingCtrBox.height) || isNaN(sliderHandleBox.height) || constrainingCtrBox.height <= 0 || sliderHandleBox.height <= 0){ 
+				return false; 
+			}
+
+			this._constraintHeight = constrainingCtrBox.height
+				+ dojo.html.getPadding(this.constrainingContainerNode).height
+				- sliderHandleBox.height;
+
+			if (this.flipY){
+				this._clipTop = this._clipBottom = constrainingCtrBox.height;
+			} else {
+				this._clipTop = this._clipBottom = 0;
+			}
+			this._clipYdelta = sliderHandleBox.height >> 1;
+			if (!this.isEnableX){
+				this._clipLeft = 0;
+				this._clipRight = constrainingCtrBox.width;
+			}
+
+			if (this._constraintHeight <= 0){ return false; }
+			if (this.snapValuesY == 0){
+				this.snapValuesY = this._constraintHeight + 1;
+			}
+
+			this._valueSizeY = this._constraintHeight / (this.snapValuesY - 1);
+			return true;
+		},
+
+		// summary
+		//	move the handle vertically to the specified value
+		setValueY: function (/*Number*/ value){
+			if (0.0 == this._valueSizeY){
+				if (this._calc_valueSizeY () == false){
+					dojo.lang.setTimeout(this, "setValueY", 100, value);
+					return;
+				}
+			}
+			if (isNaN(value)){
+				value = 0;
+			}
+			if (value > this.maximumY){
+				value = this.maximumY;
+			}
+			else if (value < this.minimumY){
+				value = this.minimumY;
+			}
+			var pixelPercent = (value-this.minimumY) / (this.maximumY-this.minimumY);
+			if (this.flipY){
+				pixelPercent = 1.0 - pixelPercent;
+			}
+			this._snapY (pixelPercent * this._constraintHeight);
+			this.notifyListeners();
+		},
+
+		// summary
+		//	return the Y value that the matches the position of the handle
+		getValueY: function (){
+			var pixelPercent = dojo.html.getPixelValue (this.sliderHandleNode,"top") / this._constraintHeight;
+			if (this.flipY){
+				pixelPercent = 1.0 - pixelPercent;
+			}
+			return Math.round (pixelPercent * (this.snapValuesY-1)) * ((this.maximumY-this.minimumY) / (this.snapValuesY-1)) + this.minimumY;
+		},
+
+		// set the position of the handle
+		_onClick: function(/*Event*/ evt){
+			if (this._isDragInProgress){
+				return;
+			}
+
+			var parent = dojo.html.getAbsolutePosition(this.constrainingContainerNode, true, dojo.html.boxSizing.MARGIN_BOX);
+			var content = dojo.html.getContentBox(this._handleMove.domNode);			
+			if (this.isEnableX){
+				var x = evt.pageX - parent.x - (content.width >> 1);
+				this._snapX(x);
+			}
+			if (this.isEnableY){
+				var y = evt.pageY - parent.y - (content.height >> 1);
+				this._snapY(y);
+			}
+			this.notifyListeners();
+		},
+
+		// summary
+		//	method to invoke user's onValueChanged method
+		notifyListeners: function(){
+			this.onValueChanged(this.getValueX(), this.getValueY());
+		},
+
+		// summary
+		//	empty method to be overridden by user
+		onValueChanged: function(/*Number*/ x, /*Number*/ y){
+		}
+	}
+);
+
+
+
+dojo.widget.defineWidget (
+	"dojo.widget.SliderHorizontal",
+	dojo.widget.Slider,
+	{
+		// summary
+		//	the horizontal slider widget subclass
+
+		isEnableX: true,
+		isEnableY: false,
+
+		// initialValue: Number
+		//	sets initialValueX.
+		//	TODO: should be called "value".  Also, common attributes between SliderHorizontal/SliderVertical
+		//	should be consolidated to Slider1D base class
+		initialValue: "",
+
+		// snapValues: Number
+		//	sets snapValuesX
+		snapValues: "",
+
+		// minimum: Number
+		//	sets minimumX
+		minimum: "",
+
+		// maximum: Number
+		//	sets maximumX
+		maximum: "",
+
+		// buttonStyle: String
+		//	sets buttonStyleX
+		buttonStyle: "",
+
+		backgroundSize: "height:10px;width:200px;",
+		backgroundSrc: dojo.uri.dojoUri("src/widget/templates/images/slider-bg.gif"),
+
+		// flip: Boolean
+		//	sets flipX
+		flip: false,
+
+		postMixInProperties: function(){
+			dojo.widget.SliderHorizontal.superclass.postMixInProperties.apply(this, arguments);
+			if (!isNaN(parseFloat(this.initialValue))){
+				this.initialValueX = parseFloat(this.initialValue);
+			}
+			if (!isNaN(parseFloat(this.minimum))){
+				this.minimumX = parseFloat(this.minimum);
+			}
+			if (!isNaN(parseFloat(this.maximum))){
+				this.maximumX = parseFloat(this.maximum);
+			}
+			if (!isNaN(parseInt(this.snapValues))){
+				this.snapValuesX = parseInt(this.snapValues);
+			}
+			if (dojo.lang.isString(this.buttonStyle) && this.buttonStyle != ""){
+				this.buttonStyleX = this.buttonStyle;
+			}
+			if (dojo.lang.isBoolean(this.flip)){
+				this.flipX = this.flip;
+			}
+		},
+
+		notifyListeners: function(){
+			this.onValueChanged(this.getValueX());
+		},
+
+		// summary
+		//	wrapper for getValueX()
+		getValue: function (){
+			return this.getValueX ();
+		},
+
+		// summary
+		//	wrapper for setValueX()
+		setValue: function (/*Number*/ value){
+			this.setValueX (value);
+		},
+
+		onValueChanged: function(/*Number*/ value){
+		}
+	}
+);
+
+
+/* ------------------------------------------------------------------------- */
+
+
+dojo.widget.defineWidget (
+	"dojo.widget.SliderVertical",
+	dojo.widget.Slider,
+	{
+		// summary
+		//	the vertical slider widget subclass
+
+		isEnableX: false,
+		isEnableY: true,
+
+		// initialValue: Number
+		//	sets initialValueY
+		initialValue: "",
+
+		// snapValues: Number
+		//	sets snapValuesY
+		snapValues: "",
+
+		// minimum: Number
+		//	sets minimumY
+		minimum: "",
+
+		// Number
+		//	maximum: sets maximumY
+		maximum: "",
+
+		// buttonStyle: String
+		//	sets buttonStyleY
+		buttonStyle: "",
+
+		backgroundSize: "width:10px;height:200px;",
+		backgroundSrc: dojo.uri.dojoUri("src/widget/templates/images/slider-bg-vert.gif"),
+
+		// flip: Boolean
+		//	sets flipY
+		flip: false,
+
+		postMixInProperties: function(){
+			dojo.widget.SliderVertical.superclass.postMixInProperties.apply(this, arguments);
+			if (!isNaN(parseFloat(this.initialValue))){
+				this.initialValueY = parseFloat(this.initialValue);
+			}
+			if (!isNaN(parseFloat(this.minimum))){
+				this.minimumY = parseFloat(this.minimum);
+			}
+			if (!isNaN(parseFloat(this.maximum))){
+				this.maximumY = parseFloat(this.maximum);
+			}
+			if (!isNaN(parseInt(this.snapValues))){
+				this.snapValuesY = parseInt(this.snapValues);
+			}
+			if (dojo.lang.isString(this.buttonStyle) && this.buttonStyle != ""){
+				this.buttonStyleY = this.buttonStyle;
+			}
+			if (dojo.lang.isBoolean(this.flip)){
+				this.flipY = this.flip;
+			}
+		},
+
+		notifyListeners: function(){
+			this.onValueChanged(this.getValueY());
+		},
+
+		// summary
+		//	wrapper for getValueY()
+		getValue: function (){
+			return this.getValueY ();
+		},
+
+		// summary
+		//	wrapper for setValueY()
+		setValue: function (/*Number*/ value){
+			this.setValueY (value);
+		},
+
+		onValueChanged: function(/*Number*/ value){
+		}
+	}
+);
+
+
+/* ------------------------------------------------------------------------- */
+
+
+/**
+ * This class extends the HtmlDragMoveSource class to provide
+ * features for the slider handle.
+ */
+dojo.declare (
+	"dojo.widget._SliderDragMoveSource",
+	dojo.dnd.HtmlDragMoveSource,
+{
+	slider: null,
+
+	/** Setup the handle for drag
+	 *  Extends dojo.dnd.HtmlDragMoveSource by creating a SliderDragMoveSource */
+	onDragStart: function(/*Event*/ evt){
+		this.slider._isDragInProgress = true;
+		var dragObj = this.createDragMoveObject ();
+
+		this.slider.notifyListeners();
+		return dragObj;
+	},
+
+	onDragEnd: function(/*Event*/ evt){
+		this.slider._isDragInProgress = false;
+		this.slider.notifyListeners();
+	},
+
+	createDragMoveObject: function (){
+		//dojo.debug ("SliderDragMoveSource#createDragMoveObject - " + this.slider);
+		var dragObj = new dojo.widget._SliderDragMoveObject (this.dragObject, this.type);
+		dragObj.slider = this.slider;
+
+		// this code copied from dojo.dnd.HtmlDragSource#onDragStart
+		if (this.dragClass){ 
+			dragObj.dragClass = this.dragClass; 
+		}
+
+		return dragObj;
+	},
+
+
+	setParent: function (/*Widget*/ slider){
+		this.slider = slider;
+	}
+});
+
+
+/* ------------------------------------------------------------------------- */
+
+
+/**
+ * This class extends the HtmlDragMoveObject class to provide
+ * features for the slider handle.
+ */
+dojo.declare (
+	"dojo.widget._SliderDragMoveObject",
+	dojo.dnd.HtmlDragMoveObject,
+{
+	// reference to dojo.widget.Slider
+	slider: null,
+
+	/** Moves the node to follow the mouse.
+	 *  Extends functon HtmlDragObject by adding functionality to snap handle
+	 *  to a discrete value */
+	onDragMove: function(/*Event*/ evt){
+		this.updateDragOffset ();
+
+		if (this.slider.isEnableX){
+			var x = this.dragOffset.x + evt.pageX;
+			this.slider._snapX(x);
+		}
+
+		if (this.slider.isEnableY){
+			var y = this.dragOffset.y + evt.pageY;
+			this.slider._snapY(y);
+		}
+		if(this.slider.activeDrag){
+			this.slider.notifyListeners();
+		}
+	}
+});



Mime
View raw message