/*	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.provide("dojo.widget.html.SlideShow");dojo.require("dojo.event");dojo.require("dojo.widget.*");dojo.require("dojo.lfx.*");dojo.require("dojo.style");dojo.widget.defineWidget(	"dojo.widget.html.SlideShow",	dojo.widget.HtmlWidget,	{		templatePath: dojo.uri.dojoUri("src/widget/templates/HtmlSlideShow.html"),		templateCssPath: dojo.uri.dojoUri("src/widget/templates/HtmlSlideShow.css"),		// over-ride some defaults		isContainer: false,		widgetType: "SlideShow",		// useful properties		imgUrls: [],		// the images we'll go through		imgUrlBase: "",		urlsIdx: 0,		// where in the images we are		delay: 4000, 		// give it 4 seconds		transitionInterval: 2000, // 2 seconds		imgWidth: 800,	// img width		imgHeight: 600,	// img height		background: "img2", // what's in the bg		foreground: "img1", // what's in the fg		stopped: false,	// should I stay or should I go?		fadeAnim: null, // references our animation		// our DOM nodes:		imagesContainer: null,		startStopButton: null,		controlsContainer: null,		img1: null,		img2: null,		fillInTemplate: function(){			dojo.style.setOpacity(this.img1, 0.9999);			dojo.style.setOpacity(this.img2, 0.9999);			with(this.imagesContainer.style){				width = this.imgWidth+"px";				height = this.imgHeight+"px";			}			with(this.img1.style){				width = this.imgWidth+"px";				height = this.imgHeight+"px";			}			with(this.img2.style){				width = this.imgWidth+"px";				height = this.imgHeight+"px";			}			if(this.imgUrls.length>1){				this.img2.src = this.imgUrlBase+this.imgUrls[this.urlsIdx++];				this.endTransition();			}else{				this.img1.src = this.imgUrlBase+this.imgUrls[this.urlsIdx++];			}		},		togglePaused: function(){			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(){			// load a new image in that container, and make sure it informs			// us when it finishes loading			dojo.event.kwConnect({				srcObj: this[this.background],				srcFunc: "onload",				adviceObj: this,				adviceFunc: "backgroundImageLoaded",				once: true, // make sure we only ever hear about it once				delay: this.delay			});			dojo.style.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;			}		}	});