/*
	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("igx.widget.SlideShow");

dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.lfx.*");
dojo.require("dojo.html.display");

dojo.widget.defineWidget(
	"igx.widget.SlideShow",
	dojo.widget.HtmlWidget,
	{
		// useful properties
		itemIDs: [],		// the element to cycle through
		imgUrlBase: "",
		currentPosition: 0,		// where in the images we are
		transitionType: "fade",
		delay: 4000, 		// give it 4 seconds
		transitionInterval: 2000, // 2 seconds
		backgroundColor: "white", //default background color
		width: "",
		height: "",
		itemStyle: "",
		
		
		background: null, // what's in the bg
		foreground: null, // what's in the fg
		stopped: false,	// should I stay or should I go?
		fadeAnim: null, // references our animation

		// our DOM nodes:
		items: [],
		
		imagesContainer: null,
		startStopButton: null,
		controlsContainer: null,
		preventCache: false,
		
		anchor:{
			left: -1,
			top: -1
		},		
	
		
		boxSize: {	width:0, height:0 },
		
		getItemByPosition: function (pos)
		{
			return dojo.byId(this.itemIDs[pos]);
		},

		fillInTemplate: function(){
		
			//scroll the view to top 
			scroll(0, 0);
					
			// 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.itemIDs.length == 2) {
				this.preventCache = true;
			}			

			this.background = document.createElement("div");
			this.background.style.zIndex = "0";
			this.domNode.appendChild(this.background);	
			this.setPosition(this.background);
			this.loadItem(this.getItemByPosition(this.currentPosition));			
					
			if(this.itemIDs.length>1){
				//foreground is on top of background
				this.foreground = document.createElement("div");;
				this.domNode.appendChild(this.foreground);
				this.setPosition(this.foreground);

				this.foreground.style.zIndex = "1";
				
				this.endTransition();			
			}	
			
			dojo.event.connect(window, "onresize", this, "setBothPositions");
		},
		
		
		setBothPositions: function()
		{
			scroll(0, 0);
			this.setPosition(this.foreground);
			this.setPosition(this.background);
		},
		


		setPosition: function (layer)
		{	

			layer.style.position = "absolute";
				
			layer.style.left = dojo.html.getAbsolutePosition(this.domNode).left + document.body.scrollLeft;
			layer.style.top = dojo.html.getAbsolutePosition(this.domNode).top + document.body.scrollTop;
			layer.style.backgroundColor = this.backgroundColor;		
							
		},
		
		//this function will clone the item, append it to the container,
		//and set it visible
		loadItem: function(item, piece)
		{
			
	
			var tempItem = item.cloneNode(true);			
			tempItem.style.display = "inline";
			
			while (this.background.childNodes.length > 0)
			{
				this.background.removeChild(this.background.childNodes[0]);
			}
			
			this.background.appendChild(tempItem);

			
			
		},

		backgroundLoaded: 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();
			}
			

			if (this.transitionType == "wipe")
				this.fadeAnim = dojo.lfx.wipeOut(this.foreground, this.transitionInterval, null);
			else if (this.transitionType == "implode")
				this.fadeAnim = dojo.lfx.implode(this.foreground, this.background, this.transitionInterval, null);	
			else
				this.fadeAnim = dojo.lfx.fadeOut(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.background.style){ zIndex = parseInt(zIndex)+1; }
			
			if (this.foreground != null)
				with(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,
				srcFunc: "loadItem",
				adviceObj: this,
				adviceFunc: "backgroundLoaded",
				once: true, // make sure we only ever hear about it once
				delay: this.delay
			});
			dojo.html.style.display = "inline";
			dojo.html.setOpacity(this.background, 1.0);
			
			
			this.currentPosition ++;
			if(this.currentPosition>(this.itemIDs.length-1)){
				this.currentPosition = 0;
			}			

			this.loadItem(this.getItemByPosition(this.currentPosition));			

			if (this.background.clientWidth > this.foreground.clientWidth)
				this.foreground.style.width = this.background.clientWidth;		
				
			if (this.background.clientHeight > this.foreground.clientHeight)
				this.foreground.style.height = this.background.clientHeight;	
				
		}
	}
);