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

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

12 files changed, 1038 insertions, 0 deletions

diff --git a/includes/js/dojox/presentation/README b/includes/js/dojox/presentation/README
new file mode 100644
index 0000000..4be60f5
--- /dev/null
+++ b/includes/js/dojox/presentation/README
@@ -0,0 +1,72 @@
+-------------------------------------------------------------------------------
+dojox.presentation
+-------------------------------------------------------------------------------
+Version 0.9
+Release date: 10/31/2007
+-------------------------------------------------------------------------------
+Project state:
+experimental
+-------------------------------------------------------------------------------
+Credits
+	pete higgins (dante)
+-------------------------------------------------------------------------------
+
+Project description
+
+This is the presentation base class. It provides a mechanism for various
+display-oriented tasks. It includes a powerpoint-esque engine [prototype].
+The SlideShow aspect of this project has been deprecated and lives now
+in dojox.image project.
+
+-------------------------------------------------------------------------------
+
+Dependencies:
+
+dojox.presentation requires both Dojo Base, Dojo FX Core, and Dijit system(s).
+
+-------------------------------------------------------------------------------
+
+Documentation
+
+See the Dojo API tool (http://dojotoolkit.org/api)
+
+-------------------------------------------------------------------------------
+
+Installation instructions
+
+This package is self-contained, but needs Dijit sytem. 
+
+Grab the following from the Dojo SVN Repository:
+
+svn co http://svn.dojotoolkit.org/dojo/dojox/trunk/presentation*
+svn co http://svn.dojotoolkit.org/dojo/dijit/*
+
+into your:
+/dojo root folder [checkout/release root]
+
+and require in dependancies via dojo.require('dojox.presentation');
+
+see /dojox/presentation/tests/test_presentation.html for example usage, but 
+basically the structure is this:
+
+presentation />
+	Slide />
+	Slide />
+		Text Outside of Part is Static
+		Part />
+		Part />
+		Action forPart/>
+		Action forPart/>
+	Slide href="remote.html" />
+	Slide />
+		Part />
+		Action forPart/>
+/presentation>
+
+NOTE: project marked experimental, and API has a planned deprecation. To 
+participate in the formation of the new presentation class, visit 
+the dojotoolkit forums at:
+
+http://dojotoolkit.org/forums
+
+
diff --git a/includes/js/dojox/presentation/_base.js b/includes/js/dojox/presentation/_base.js
new file mode 100644
index 0000000..2077a4e
--- /dev/null
+++ b/includes/js/dojox/presentation/_base.js
@@ -0,0 +1,557 @@
+if(!dojo._hasResource["dojox.presentation._base"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.presentation._base"] = true;
+dojo.provide("dojox.presentation._base");
+dojo.experimental("dojox.presentation"); 
+
+dojo.require("dijit._Widget");
+dojo.require("dijit._Container"); 
+dojo.require("dijit._Templated");
+dojo.require("dijit.layout.StackContainer"); 
+dojo.require("dijit.layout.ContentPane"); 
+dojo.require("dojo.fx"); 
+
+dojo.declare("dojox.presentation.Deck", [ dijit.layout.StackContainer, dijit._Templated ], {
+	// summary:
+	//	dojox.presentation class
+	//	basic powerpoint esque engine for handling transitons and control
+	//	in a page-by-page and part-by-part way
+	//	
+	// 	FIXME: parsing part(s)/widget(s) in href="" Slides not working
+	//	TODO: make auto actions progress. 
+	//	FIXME: Safari keydown/press/up listener not working. 
+	//	noClick=true prevents progression of slides in that broweser
+	//	
+	// fullScreen: Boolean
+	// 	unsupported (that i know of) just yet. Default it to take control
+	//	of window. Would be nice to be able to contain presentation in a 
+	//	styled container, like StackContainer ... theoretically possible.
+	//	[and may not need this variable?]
+	fullScreen: true,
+
+	// useNav: Boolean
+	//	true to allow navigation popup, false to disallow
+	useNav: true,
+
+	// navDuration: Integer
+	//	time in MS fadein/out of popup nav [default: 250]
+	navDuration: 250,
+
+	// noClick: Boolean
+	//	if true, prevents _any_ click events to propagate actions
+	//	(limiting control to keyboard and/or action.on="auto" or action.delay=""
+	//	actions.
+	noClick: false,
+
+	// setHash: Boolean
+	//	if true, window location bar will get a #link to slide for direct
+	//	access to a particular slide number.
+	setHash: true,
+
+	// just to over-ride:
+	templateString: null,
+	templateString:"<div class=\"dojoShow\" dojoAttachPoint=\"showHolder\">\n\t<div class=\"dojoShowNav\" dojoAttachPoint=\"showNav\" dojoAttachEvent=\"onmouseover: _showNav, onmouseout: _hideNav\">\n\t<div class=\"dojoShowNavToggler\" dojoAttachPoint=\"showToggler\">\n\t\t<img dojoAttachPoint=\"prevNode\" src=\"${prevIcon}\" dojoAttachEvent=\"onclick:previousSlide\">\n\t\t<select dojoAttachEvent=\"onchange:_onEvent\" dojoAttachPoint=\"select\">\n\t\t\t<option dojoAttachPoint=\"_option\">Title</option>\n\t\t</select>\n\t\t<img dojoAttachPoint=\"nextNode\" src=\"${nextIcon}\" dojoAttachEvent=\"onclick:nextSlide\">\n\t</div>\n\t</div>\n\t<div dojoAttachPoint=\"containerNode\"></div>\n</div>\n",
+
+	// nextIcon: String
+	//	icon for navigation "next" button
+	nextIcon: dojo.moduleUrl('dojox.presentation','resources/icons/next.png'),
+
+	// prevIcon: String
+	// 	icon for navigation "previous" button
+	prevIcon: dojo.moduleUrl('dojox.presentation','resources/icons/prev.png'),
+
+	_navOpacMin: 0,
+	_navOpacMax: 0.85,
+	_slideIndex: 0,
+	
+	// Private:
+	_slides: [], 
+	_navShowing: true,
+	_inNav: false,
+	
+	startup: function(){
+		// summary: connect to the various handlers and controls for this presention
+		this.inherited(arguments);
+
+		if(this.useNav){ 
+			this._hideNav(); 
+		}else{ 
+			this.showNav.style.display = "none"; 
+		} 
+
+		this.connect(document,'onclick', '_onEvent');
+		this.connect(document,'onkeypress', '_onEvent');
+		
+		// only if this.fullScreen == true?
+		this.connect(window, 'onresize', '_resizeWindow');
+		this._resizeWindow();
+		
+		this._updateSlides(); 
+		
+		this._readHash();
+		this._setHash();
+	},
+
+	moveTo: function(/* Integer */ number){
+		// summary: jump to slide based on param
+		var slideIndex = number - 1; 
+		
+		if(slideIndex < 0)
+			slideIndex = 0;
+		
+		if(slideIndex > this._slides.length - 1)
+			slideIndex = this._slides.length - 1; 
+		
+		this._gotoSlide(slideIndex);
+	},
+
+	onMove: function (number){
+		// summary: stub function? TODOC: ?
+	},
+	
+	nextSlide: function(/*Event*/ evt){
+		// summary: transition to the next slide.
+		if (!this.selectedChildWidget.isLastChild) {
+			this._gotoSlide(this._slideIndex+1);
+		}
+		if (evt) { evt.stopPropagation(); }
+	},
+
+	previousSlide: function(/*Event*/ evt){
+		// summary: transition to the previous slide
+		if (!this.selectedChildWidget.isFirstChild) {
+			
+			this._gotoSlide(this._slideIndex-1);
+			
+		} else { this.selectedChildWidget._reset(); } 
+		if (evt) { evt.stopPropagation();}
+	},
+
+	getHash: function(id){
+		// summary: get the current hash to set in localtion
+		return this.id+"_SlideNo_"+id;
+	},
+	
+	_hideNav: function(evt){
+		// summary: hides navigation
+		if(this._navAnim){ this._navAnim.stop(); }
+		this._navAnim = dojo.animateProperty({
+			node:this.showNav, 
+			duration:this.navDuration, 
+			properties: {
+				opacity: { end:this._navOpacMin } 
+			}
+		}).play();
+	},
+
+	_showNav: function(evt){
+		// summary: shows navigation
+		if(this._navAnim){ this._navAnim.stop(); }
+		this._navAnim = dojo.animateProperty({
+			node:this.showNav, 
+			duration:this.navDuration, 
+			properties: { 
+				opacity: { end:this._navOpacMax }
+			}
+		}).play();
+	},
+
+	_handleNav: function(evt){
+		// summary: does nothing? _that_ seems useful.
+		evt.stopPropagation(); 
+	},
+
+	_updateSlides: function(){
+		// summary: 
+		//		populate navigation select list with refs to slides call this
+		//		if you add a node to your presentation dynamically.
+		this._slides = this.getChildren(); 
+		if(this.useNav){
+			// populate the select box with top-level slides
+			var i=0;
+			dojo.forEach(this._slides,dojo.hitch(this,function(slide){
+				i++;
+				var tmp = this._option.cloneNode(true);
+				tmp.text = slide.title+" ("+i+") ";
+				this._option.parentNode.insertBefore(tmp,this._option);
+			}));
+			if(this._option.parentNode){
+				this._option.parentNode.removeChild(this._option);
+			}
+			// dojo._destroyElement(this._option); 
+		}
+	},
+
+	_onEvent: function(/* Event */ evt){
+		// summary: 
+		//		main presentation function, determines next 'best action' for a
+		//		specified event.
+		var _node = evt.target;
+		var _type = evt.type;
+
+		if(_type == "click" || _type == "change"){
+			if(_node.index && _node.parentNode == this.select){ 
+				this._gotoSlide(_node.index);
+			}else if(_node == this.select){
+				this._gotoSlide(_node.selectedIndex);
+			}else{
+				if (this.noClick || this.selectedChildWidget.noClick || this._isUnclickable(evt)) return; 
+				this.selectedChildWidget._nextAction(evt);
+			}
+		}else if(_type=="keydown" || _type == "keypress"){
+			
+			// FIXME: safari doesn't report keydown/keypress?
+			
+			var key = (evt.charCode == dojo.keys.SPACE ? dojo.keys.SPACE : evt.keyCode);
+			switch(key){
+				case dojo.keys.DELETE:
+				case dojo.keys.BACKSPACE:
+				case dojo.keys.LEFT_ARROW:
+				case dojo.keys.UP_ARROW:
+				case dojo.keys.PAGE_UP:
+				case 80:	// key 'p'
+					this.previousSlide(evt);
+					break;
+
+				case dojo.keys.ENTER:
+				case dojo.keys.SPACE:
+				case dojo.keys.RIGHT_ARROW:
+				case dojo.keys.DOWN_ARROW:
+				case dojo.keys.PAGE_DOWN: 
+				case 78:	// key 'n'
+					this.selectedChildWidget._nextAction(evt); 
+					break;
+
+				case dojo.keys.HOME:	this._gotoSlide(0);
+			}
+		}
+		this._resizeWindow();
+		evt.stopPropagation(); 
+	},
+		
+	_gotoSlide: function(/* Integer */ slideIndex){
+		// summary: goes to slide
+		this.selectChild(this._slides[slideIndex]);
+		this.selectedChildWidget._reset();
+
+		this._slideIndex = slideIndex;
+		
+		if(this.useNav){
+			this.select.selectedIndex = slideIndex; 
+		}
+		
+		if(this.setHash){ 
+			this._setHash(); 
+		}
+		this.onMove(this._slideIndex+1);
+	},
+
+	_isUnclickable: function(/* Event */ evt){
+		// summary: returns true||false base of a nodes click-ability 
+		var nodeName = evt.target.nodeName.toLowerCase();
+		// TODO: check for noClick='true' in target attrs & return true
+		// TODO: check for relayClick='true' in target attrs & return false
+		switch(nodeName){
+			case 'a' : 
+			case 'input' :
+			case 'textarea' : return true; break;
+		}
+		return false; 
+	},
+
+	_readHash: function(){
+		var th = window.location.hash;
+		if (th.length && this.setHash) {
+			var parts = (""+window.location).split(this.getHash(''));
+			if(parts.length>1){
+				this._gotoSlide(parseInt(parts[1])-1);
+			}
+		}
+	},
+
+	_setHash: function(){
+		// summary: sets url #mark to direct slide access
+		if(this.setHash){
+			var slideNo = this._slideIndex+1;
+			window.location.href = "#"+this.getHash(slideNo);	
+		}
+	},
+
+	_resizeWindow: function(/*Event*/ evt){
+		// summary: resize this and children to fix this window/container
+
+		// only if this.fullScreen?
+		dojo.body().style.height = "auto";
+		var wh = dijit.getViewport(); 
+		var h = Math.max(
+			document.documentElement.scrollHeight || dojo.body().scrollHeight,
+			wh.h);
+		var w = wh.w; 
+		this.selectedChildWidget.domNode.style.height = h +'px';
+		this.selectedChildWidget.domNode.style.width = w +'px';
+	},
+
+	_transition: function(newWidget,oldWidget){ 
+		// summary: over-ride stackcontainers _transition method
+		//	but atm, i find it to be ugly with not way to call
+		//	_showChild() without over-riding it too. hopefull
+		//	basic toggles in superclass._transition will be available
+		//	in dijit, and this won't be necessary.
+		var anims = [];
+		if(oldWidget){
+			/*
+			anims.push(dojo.fadeOut({ node: oldWidget.domNode, 
+				duration:250, 
+				onEnd: dojo.hitch(this,function(){
+					this._hideChild(oldWidget);
+				})
+			}));
+			*/
+			this._hideChild(oldWidget);
+		}
+		if(newWidget){
+			/*
+			anims.push(dojo.fadeIn({ 
+				node:newWidget.domNode, start:0, end:1, 
+				duration:300, 
+				onEnd: dojo.hitch(this,function(){
+					this._showChild(newWidget);
+					newWidget._reset();
+					}) 
+				})
+			);
+			*/
+			this._showChild(newWidget);
+			newWidget._reset();
+		}
+		//dojo.fx.combine(anims).play();
+	}
+});
+
+dojo.declare(
+	"dojox.presentation.Slide",
+	[dijit.layout.ContentPane,dijit._Contained,dijit._Container,dijit._Templated],
+	{
+	// summary:
+	//	a Comonent of a dojox.presentation, and container for each 'Slide'
+	//	made up of direct HTML (no part/action relationship), and dojox.presentation.Part(s),
+	//	and their attached Actions.
+
+	// templatPath: String
+	//	make a ContentPane templated, and style the 'titleNode'
+	templateString:"<div dojoAttachPoint=\"showSlide\" class=\"dojoShowPrint dojoShowSlide\">\n\t<h1 class=\"showTitle\" dojoAttachPoint=\"slideTitle\"><span class=\"dojoShowSlideTitle\" dojoAttachPoint=\"slideTitleText\">${title}</span></h1>\n\t<div class=\"dojoShowBody\" dojoAttachPoint=\"containerNode\"></div>\n</div>\n",
+
+	// title: String
+	//	string to insert into titleNode, title of Slide
+	title: "",
+
+	// inherited from ContentPane FIXME: don't seem to work ATM?
+	refreshOnShow: true, 
+	preLoad: false,
+	doLayout: true,
+	parseContent: true,
+
+	// noClick: Boolean
+	// 	true on slide tag prevents clicking, false allows
+	// 	(can also be set on base presentation for global control)
+	noClick: false,
+
+	// private holders:
+	_parts: [],
+	_actions: [],
+	_actionIndex: 0,
+	_runningDelay: false,	
+
+	startup: function(){
+		// summary: setup this slide with actions and components (Parts)
+		this.inherited(arguments);
+		this.slideTitleText.innerHTML = this.title; 
+		var children = this.getChildren();
+		this._actions = [];
+		dojo.forEach(children,function(child){
+			var tmpClass = child.declaredClass.toLowerCase();
+			switch(tmpClass){
+				case "dojox.presentation.part" : this._parts.push(child); break;
+				case "dojox.presentation.action" : this._actions.push(child); break;
+			}
+		},this);
+	},	
+
+
+	_nextAction: function(evt){	
+		// summary: gotoAndPlay current cached action
+		var tmpAction = this._actions[this._actionIndex] || 0;
+		if (tmpAction){
+			// is this action a delayed action? [auto? thoughts?]
+			if(tmpAction.on == "delay"){
+				this._runningDelay = setTimeout(
+					dojo.hitch(tmpAction,"_runAction"),tmpAction.delay
+					);
+				console.debug('started delay action',this._runningDelay); 
+			}else{
+				tmpAction._runAction();
+			}
+
+			// FIXME: it gets hairy here. maybe runAction should 
+			// call _actionIndex++ onEnd? if a delayed action is running, do
+			// we want to prevent action++?
+			var tmpNext = this._getNextAction();
+			this._actionIndex++;
+
+			if(tmpNext.on == "delay"){
+				// FIXME: yeah it looks like _runAction() onend should report
+				// _actionIndex++
+				console.debug('started delay action',this._runningDelay); 
+				setTimeout(dojo.hitch(tmpNext,"_runAction"),tmpNext.delay);
+			}
+		}else{
+			// no more actions in this slide
+			this.getParent().nextSlide(evt);
+		}	
+	},
+
+	_getNextAction: function(){
+		// summary: returns the _next action in this sequence
+		return this._actions[this._actionIndex+1] || 0;
+	},
+
+	_reset: function(){
+		// summary: set action chain back to 0 and re-init each Part
+		this._actionIndex = [0];
+		dojo.forEach(this._parts,function(part){
+			part._reset();
+		},this);
+	}
+});
+
+dojo.declare("dojox.presentation.Part", [dijit._Widget,dijit._Contained], {
+	// summary: 
+	//	a node in a presentation.Slide that inherits control from a
+	//	dojox.presentation.Action
+	//	can be any element type, and requires styling before parsing
+	//	
+	// as: String
+	//	like an ID, attach to Action via (part) as="" / (action) forSlide="" tags
+	//	this should be unique identifier?
+	as: "",
+	
+	// startVisible: boolean
+	//	true to leave in page on slide startup/reset
+	//	false to hide on slide startup/reset
+	startVisible: false,
+
+	// isShowing: Boolean,
+	//	private holder for _current_ state of Part
+	_isShowing: false,
+
+	postCreate: function(){
+		// summary: override and init() this component
+		this._reset();
+	},
+
+	_reset: function(){
+		// summary: set part back to initial calculate state
+		// these _seem_ backwards, but quickToggle flips it
+		this._isShowing =! this.startVisible; 
+		this._quickToggle();
+	},
+
+	_quickToggle: function(){
+		// summary: ugly [unworking] fix to test setting state of component
+		//	before/after an animation. display:none prevents fadeIns?
+		if(this._isShowing){
+			dojo.style(this.domNode,'display','none');	
+			dojo.style(this.domNode,'visibility','hidden');
+			dojo.style(this.domNode,'opacity',0);
+		}else{
+                        dojo.style(this.domNode,'display',''); 
+			dojo.style(this.domNode,'visibility','visible'); 
+			dojo.style(this.domNode,'opacity',1);
+		}
+		this._isShowing =! this._isShowing; 
+	}
+});
+
+dojo.declare("dojox.presentation.Action", [dijit._Widget,dijit._Contained], {
+	// summary:	
+	//	a widget to attach to a dojox.presentation.Part to control
+	//	it's properties based on an inherited chain of events ...
+	//
+	//
+	// on: String
+	//	FIXME: only 'click' supported ATM. plans include on="delay", 
+	//	on="end" of="", and on="auto". those should make semantic sense
+	//	to you.	
+	on: 'click',
+
+	// forSlide: String
+	//	attach this action to a dojox.presentation.Part with a matching 'as' attribute
+	forSlide: "",
+
+	// toggle: String
+	//	will toggle attached [matching] node(s) via forSlide/as relationship(s)
+	toggle: 'fade',
+	
+	// delay: Integer 
+	//	
+	delay: 0,
+
+	// duration: Integer
+	//	default time in MS to run this action effect on it's 'forSlide' node
+	duration: 1000,
+
+	// private holders:
+	_attached: [],
+	_nullAnim: false,
+
+	_runAction: function(){
+		// summary: runs this action on attached node(s)
+
+		var anims = [];
+		// executes the action for each attached 'Part' 
+		dojo.forEach(this._attached,function(node){
+			// FIXME: this is ugly, and where is toggle class? :(
+			var dir = (node._isShowing) ? "Out" : "In";
+			// node._isShowing =! node._isShowing; 
+			//var _anim = dojox.fx[ this.toggle ? this.toggle+dir : "fade"+dir]({ 
+			var _anim = dojo.fadeIn({
+				node:node.domNode, 
+				duration: this.duration,
+				beforeBegin: dojo.hitch(node,"_quickToggle")
+			});
+			anims.push(_anim);
+		},this);
+		var _anim = dojo.fx.combine(anims);
+		if(_anim){ _anim.play(); }
+	},
+
+	_getSiblingsByType: function(/* String */ declaredClass){
+		// summary: quick replacement for getChildrenByType("class"), but in 
+		// a child here ... so it's getSiblings. courtesy bill in #dojo 
+		// could be moved into parent, and just call this.getChildren(),
+		// which makes more sense.
+		var siblings = dojo.filter( this.getParent().getChildren(), function(widget){ 
+			return widget.declaredClass==declaredClass;
+			} 
+		);
+		return siblings; // dijit._Widget
+	}, 
+	
+	postCreate: function(){
+		// summary: run this once, should this be startup: function()?
+
+		this.inherited(arguments);
+		// prevent actions from being visible, _always_
+		dojo.style(this.domNode,"display","none"); 
+ 		var parents = this._getSiblingsByType('dojox.presentation.Part');
+		// create a list of "parts" we are attached to via forSlide/as 
+		this._attached = [];
+		dojo.forEach(parents,function(parentPart){
+			if(this.forSlide == parentPart.as){ 
+				this._attached.push(parentPart); 
+			}
+		},this);
+	}	
+
+});
+
+}
diff --git a/includes/js/dojox/presentation/resources/Show.css b/includes/js/dojox/presentation/resources/Show.css
new file mode 100644
index 0000000..8610675
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/Show.css
@@ -0,0 +1,100 @@
+@media screen {
+	html, body {
+			margin: 0px;
+			padding: 0px;
+		}
+		
+		h1.showTitle {
+			margin:0; 
+			margin-left:0; 
+			padding:0; 
+			font-size: 60px;
+			background:transparent; 
+			border-bottom:1px solid #000; 
+		}
+		p, li {
+			font-size: 17pt;
+		}
+		.dojoShowNav {
+			border-top:1px solid #ccc; 
+			background: #ededed;
+			overflow: hidden;
+			position: absolute;
+			bottom: 0px;
+			left: 0px;
+			width: 100%;
+			text-align: center;
+			z-index:420; 
+			padding:0; 
+			margin-bttom:5px; height:34px; 
+		}
+		.dojoShowNav img { cursor:pointer; } 
+		
+		.dojoShowSlide {
+			
+		}
+		.dojoShowNav option { font:6pt; color:#333; }
+		.dojoShowNav select {
+			margin: 0px;
+			color: #999; 
+			margin-top: 5px; 
+			padding: 2px; 
+			border: 1px solid #ccc; 
+			-moz-border-radius:6pt 6pt; 
+		}
+		.dojoShowHider {
+			height: 5px;
+			overflow: hidden;
+			width: 100%;
+			z-index:421; 
+		}
+		.dojoShowPrint {
+			position: absolute;
+			left: 0px;
+			top: 0px;
+			width:100%;
+		}
+		.dojoShowBody {
+			background:#fff url('../../../dijit/themes/tundra/images/testBodyBg.gif') repeat-x top left; 
+			padding:10px; 
+		}
+		.dojoShow {
+			width:100%; height:100%; 
+			overflow:hidden;
+		}
+}
+@media print {
+	.dojoShow {
+		display: none !important;
+	}
+	.dojoShowPrint {
+		display: block !important;
+	}
+	.dojoShowPrintSlide {
+		border: 1px solid #aaa;
+		padding: 10px;
+		margin-bottom: 15px;
+	}
+	.dojoShowPrintSlide, ul {
+	page-break-inside: avoid;
+	}
+	h1 {
+		margin-top: 0;
+		page-break-after: avoid;
+	}
+}
+.dojoShowSlideTitle {
+	height: 100px;
+	width:100%;
+	display:block;
+	background-color: #ededed; 
+	border-bottom:1px solid #666; 
+}
+.dojoShowSlideTitle h1 {
+	margin-top: 0;
+	
+}
+.dojoShowSlideBody {
+	margin: 15px;
+	background:#fff url('../../../dijit/themes/tundra/images/testBodyBg.gif') repeat-x top left; 
+}
diff --git a/includes/js/dojox/presentation/resources/Show.css.commented.css b/includes/js/dojox/presentation/resources/Show.css.commented.css
new file mode 100644
index 0000000..ee205e4
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/Show.css.commented.css
@@ -0,0 +1,110 @@
+@media screen {
+	html, body {
+			margin: 0px;
+			padding: 0px;
+		}
+		
+		h1.showTitle {
+			margin:0; 
+			margin-left:0; 
+			padding:0; 
+			font-size: 60px;
+			background:transparent; 
+			border-bottom:1px solid #000; 
+		}
+
+		p, li {
+			font-size: 17pt;
+		}
+
+		.dojoShowNav {
+			border-top:1px solid #ccc; 
+			background: #ededed;
+			overflow: hidden;
+			position: absolute;
+			bottom: 0px;
+			left: 0px;
+			width: 100%;
+			text-align: center;
+			z-index:420; 
+			padding:0; 
+			margin-bttom:5px; height:34px; 
+		}
+
+		.dojoShowNav img { cursor:pointer; } 
+		
+		.dojoShowSlide {
+			/* width:100%; height:100%; */
+		}
+
+		.dojoShowNav option { font:6pt; color:#333; }
+		.dojoShowNav select {
+			margin: 0px;
+			color: #999; 
+			margin-top: 5px; 
+			padding: 2px; 
+			border: 1px solid #ccc; 
+			-moz-border-radius:6pt 6pt; 
+		}
+
+		.dojoShowHider {
+			height: 5px;
+			overflow: hidden;
+			width: 100%;
+			z-index:421; 
+		}
+		.dojoShowPrint {
+			position: absolute;
+			left: 0px;
+			top: 0px;
+			width:100%;
+		}
+
+		.dojoShowBody {
+			background:#fff url('../../../dijit/themes/tundra/images/testBodyBg.gif') repeat-x top left; 
+			padding:10px; 
+		}
+
+		.dojoShow {
+			width:100%; height:100%; 
+			overflow:hidden;
+		}
+}
+
+@media print {
+	.dojoShow {
+		display: none !important;
+	}
+	.dojoShowPrint {
+		display: block !important;
+	}
+	.dojoShowPrintSlide {
+		border: 1px solid #aaa;
+		padding: 10px;
+		margin-bottom: 15px;
+	}
+	.dojoShowPrintSlide, ul {
+	page-break-inside: avoid;
+	}
+	h1 {
+		margin-top: 0;
+		page-break-after: avoid;
+	}
+}
+
+.dojoShowSlideTitle {
+	height: 100px;
+	width:100%;
+	display:block;
+	background-color: #ededed; 
+	border-bottom:1px solid #666; 
+}
+.dojoShowSlideTitle h1 {
+	margin-top: 0;
+	/* line-height: 100px;
+	margin-left: 30px; */
+}
+.dojoShowSlideBody {
+	margin: 15px;
+	background:#fff url('../../../dijit/themes/tundra/images/testBodyBg.gif') repeat-x top left; 
+}
diff --git a/includes/js/dojox/presentation/resources/Show.html b/includes/js/dojox/presentation/resources/Show.html
new file mode 100644
index 0000000..33672db
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/Show.html
@@ -0,0 +1,12 @@
+<div class="dojoShow" dojoAttachPoint="showHolder">
+	<div class="dojoShowNav" dojoAttachPoint="showNav" dojoAttachEvent="onmouseover: _showNav, onmouseout: _hideNav">
+	<div class="dojoShowNavToggler" dojoAttachPoint="showToggler">
+		<img dojoAttachPoint="prevNode" src="${prevIcon}" dojoAttachEvent="onclick:previousSlide">
+		<select dojoAttachEvent="onchange:_onEvent" dojoAttachPoint="select">
+			<option dojoAttachPoint="_option">Title</option>
+		</select>
+		<img dojoAttachPoint="nextNode" src="${nextIcon}" dojoAttachEvent="onclick:nextSlide">
+	</div>
+	</div>
+	<div dojoAttachPoint="containerNode"></div>
+</div>
diff --git a/includes/js/dojox/presentation/resources/Slide.html b/includes/js/dojox/presentation/resources/Slide.html
new file mode 100644
index 0000000..dc4627b
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/Slide.html
@@ -0,0 +1,4 @@
+<div dojoAttachPoint="showSlide" class="dojoShowPrint dojoShowSlide">
+	<h1 class="showTitle" dojoAttachPoint="slideTitle"><span class="dojoShowSlideTitle" dojoAttachPoint="slideTitleText">${title}</span></h1>
+	<div class="dojoShowBody" dojoAttachPoint="containerNode"></div>
+</div>
diff --git a/includes/js/dojox/presentation/resources/icons/down.png b/includes/js/dojox/presentation/resources/icons/down.png
new file mode 100644
index 0000000..46bf9ba
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/icons/down.png
diff --git a/includes/js/dojox/presentation/resources/icons/next.png b/includes/js/dojox/presentation/resources/icons/next.png
new file mode 100644
index 0000000..16afa87
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/icons/next.png
diff --git a/includes/js/dojox/presentation/resources/icons/prev.png b/includes/js/dojox/presentation/resources/icons/prev.png
new file mode 100644
index 0000000..5519eb5
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/icons/prev.png
diff --git a/includes/js/dojox/presentation/resources/icons/up.png b/includes/js/dojox/presentation/resources/icons/up.png
new file mode 100644
index 0000000..d77816a
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/icons/up.png
diff --git a/includes/js/dojox/presentation/tests/_ext1.html b/includes/js/dojox/presentation/tests/_ext1.html
new file mode 100644
index 0000000..d56be0e
--- /dev/null
+++ b/includes/js/dojox/presentation/tests/_ext1.html
@@ -0,0 +1,21 @@
+	<h2>WARNING:</h2>
+
+<p style="font:14pt Arial,sans-serif; color:#666; float:left; ">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean<br>
+semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin<br>
+porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.<br>
+Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.<br>
+Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae<br>
+risus.
+</p>
+
+<p style="font:8pt Arial,sans-serif; color:#666;" dojoType="dojox.presentation.Part" as="one">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.<br>
+Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.<br>
+Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+risus.
+</p>
+
+<input dojoType="dojox.presentation.Action" forSlide="one" toggle="fade">
diff --git a/includes/js/dojox/presentation/tests/test_presentation.html b/includes/js/dojox/presentation/tests/test_presentation.html
new file mode 100644
index 0000000..d9e86b5
--- /dev/null
+++ b/includes/js/dojox/presentation/tests/test_presentation.html
@@ -0,0 +1,162 @@
+<html>
+<head>
+	
+	<title>dojox.presentation - Presentation Mechanism</title>
+
+	<script type="text/javascript"> djConfig = { isDebug: true, parseOnLoad: true }; </script>
+	<script type="text/javascript" src="../../../dojo/dojo.js"></script>
+	<script type="text/javascript" src="../../../dijit/form/Button.js"></script>
+	
+		
+	<script type="text/javascript">
+		dojo.require("dojox.presentation");
+		dojo.require("dijit._Calendar"); 
+		dojo.require("dijit.TitlePane"); 
+		dojo.require("dojo.parser"); 
+		dojo.require("dojo.fx");
+		dojo.require("dojo.dnd.move");
+	</script>
+
+	<style type="text/css">
+		@import "../../../dojo/resources/dojo.css";
+	        @import "../../../dijit/themes/tundra/tundra.css";
+        	@import "../../../dijit/tests/css/dijitTests.css";
+		@import "../resources/Show.css"; 		
+	</style>
+
+	<script type="text/javascript">
+		var externalAnimation = null;
+		var titleCount=0;
+		var titles = [
+			"Just Kidding",
+			"The Title Will keep changing",
+			"but you can click to advance",
+			"nonthing fancy",
+			"just an example of",
+			"an external function controlling a slide."
+			];
+		function playIt() {
+			var node = dijit.byId('animated').slideTitle;
+			console.debug(node); 
+			// this is the fanciest animation chain i could thing of atm
+			tmpTitle = titles[titleCount++] || titles[0];
+			
+			externalAnimation = dojo.fx.chain([
+				dojo.fadeOut({ node: node,
+					duration: 500,
+					onEnd: dojo.hitch(this,function(){
+						node.innerHTML = tmpTitle;
+					})
+				}),
+				dojo.animateProperty({
+					node: node,
+					duration: 10,
+					properties: { letterSpacing: {
+						end:-26.3, unit: 'em', start:3.2
+						}	
+					}
+					
+				}),
+				dojo.fadeIn({ node: node,
+					duration:300
+				}),
+				dojo.animateProperty({
+					node: node,
+					duration: 800,
+					properties: { letterSpacing: {
+						end:2.8, unit: 'em' , start:-26.0
+						}
+					}
+				})
+			]);
+			setTimeout(function(){externalAnimation.play();},50); 
+		}
+
+		function makeDraggable(node) {
+			var tmp = new dojo.dnd.Moveable(node); 
+		}
+
+	</script>
+
+</head>
+<body class="tundra">
+	<div dojoType="dojox.presentation.Deck" id="testPresentation">
+		<div dojoType="dojox.presentation.Slide" id="myFirstSlide" title="Introduction">
+		
+			<p>This is a brief overview of what this presentation widget is capable of.</p>
+
+			<div dojoType="dojox.presentation.Part" as="one">... it's new, and completely different, so watch close</div>
+
+			<input dojoType="dojox.presentation.Action" forSlide="one" toggle="fade" duration="3000">
+			<input dojoType="dojox.presentation.Action" forSlide="one" toggle="wipe">
+
+		</div>
+
+		<div dojoType="dojox.presentation.Slide" title="Basic Actions">
+			<p>Click, and more text will appear</p>
+
+			<div dojoType="dojox.presentation.Part" as="one">
+				<p>Lorem something something. I am text, hear me _roar_.</p>
+			</div>
+			<input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade">
+		
+			<div dojoType="dojox.presentation.Part" as="me">
+				I am here to make sure click-advancing is disabled on normal input type elements:
+				<ul>
+					<li><a href="#">href</a></li>
+					<li>Input: <input type="text" name="foo"></li>
+				</ul>
+
+			</div>
+			<input dojoType="dojox.presentation.Action" forslide="me" toggle="slide">
+
+
+		</div>
+		<div dojoType="dojox.presentation.Slide" title="Automatically Advance">
+			
+			<p dojoType="dojox.presentation.Part" as="one">First You See me ...</p>
+			<p dojoType="dojox.presentation.Part" as="two">Then you see ME ...</p>
+			<p dojoType="dojox.presentation.Part" as="three" style="padding:20px;">oh yeah!</p>
+			
+
+			<input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade" delay="1500">
+			<input dojoType="dojox.presentation.Action" forSlide="two" toggle="wipe" delay="1500">
+			<input dojoType="dojox.presentation.Action" forSlide="three" toggle="wipe" delay="1500">
+
+		</div>
+		<!--
+		<div dojoType="dojox.presentation.Slide" title="Remote Slide" href="_ext1.html"></div>
+		-->
+		<div dojoType="dojox.presentation.Slide" title="Click Blocking" id="animated">
+			<p>You cannot click on this page</p>
+			<p dojoType="dojox.presentation.Part" as="1">I told you that you can't click ...</p>
+			<a href="#" onClick="playIt()">click here to move the title</a>
+			<input dojoType="dojox.presentation.Action" forSlide="1" toggle="wipe">
+			<input dojoType="dojox.presentation.Action" forSlide="2">
+			<input dojoType="dojox.presentation.Action" forSlide="1" toggle="fade">
+		</div>
+
+		<div dojoType="dojox.presentation.Slide" title="Widgets in Slide" noClick="true" id="wdijit">
+			<p>There is a widget in this page:</p>
+			<p>clicking has been stopped on this page to demonstrate the usage ..</p>
+			<div dojoType="dojox.presentation.Part" as="foo" startVisible="true">
+				There _should_ be a _Calendar widget here<br>
+				<div dojoType="dijit._Calendar"></div>
+			</div>
+			<div dojoType="dijit.TitlePane" title="foobar" id="newTitlePane"
+					style="width:300px; position:absolute; right:40px; top:125px;">
+					I am a titlepane, you can do cool things with me. 
+					<button onClick="makeDraggable('newTitlePane')">Make me Draggable!</button>
+			</div>
+			<div style="width:400px; position:absolute; right: 40px; bottom:40px;">
+			<p>... so I'm providing a next button: <button dojoType="dijit.form.Button" value="Next" onClick="dijit.byId('testPresentation').nextSlide();">Next</button></p>
+			</div>
+			<input type="dojox.presentation.Action" forSlide="foo" toggle="slide">
+		</div>
+
+		<div dojoType="dojox.presentation.Slide" title="The End">
+			<p>Thanks for watching!</p>
+		</div>
+	</div>
+</body>
+</html>