function SetOpacity ( element, opacity )
{
	element.style.opacity = opacity;
	element.style.MozOpacity = opacity;
	element.style.KhtmlOpacity = opacity;
	element.style.filter = "alpha(opacity=" + ( opacity * 100 ) + ")";
}

function GetElementText ( element )
{
	var count = element.childNodes.length;
	var text = "";
	for ( var index = 0; index < count; index++ )
	{
		text += element.childNodes [ index ].data;
	}
	return text;
}

function SelectorWidgetSlide()
{
	var id = "";
	var title = "";
	var div = null;
	var infoDiv = null;
	var videoDiv = null;
	var hasVideo = false;
	var imageURL = "";
	var textColor = "#FFF";
	var textBackgroundColor = "#000";
	var textBackgroundAlpha = 1.0;
	var horizontal = false;
	var timeout = 8;
	
	
	this.GetDiv = function() { return this.div; }
	this.GetTitle = function() { return this.title; }
	
	this.ShowText = function()
	{
		this.infoDiv.style.display = "";
		this.videoDiv.style.display = "none";
	}
	
	this.ShowVideo = function()
	{
		this.infoDiv.style.display = "none";
		this.videoDiv.style.display = "";
	}
	
	this.Show = function ( show )
	{
		if ( show ) { this.div.style.display = ""; this.ShowText(); }
		else this.div.style.display = "none";
	}
	
	this.GetTimeout = function()
	{
		return this.timeout;
	}
	
	this.HasVideo = function()
	{
		return this.hasVideo;
	}

	this.CreateUsingXML = function ( xml, fullWidth, fullHeight )
	{
		this.id = xml.attributes.getNamedItem ( "id" ).nodeValue || "";
		this.imageURL = xml.attributes.getNamedItem ( "background" ).nodeValue || "";
		this.textColor = xml.attributes.getNamedItem( "textColor" ).nodeValue || "#FFF";
		this.textBackgroundColor = xml.attributes.getNamedItem("textShadeColor").nodeValue || "#000";
		this.textBackgroundAlpha = xml.attributes.getNamedItem("textShadeAlpha").nodeValue || 1.0;
		this.horizontal = ( xml.attributes.getNamedItem ( "orientation" ).nodeValue == "horizontal" );
		this.timeout = ( Number ( xml.attributes.getNamedItem("time").nodeValue ) * 1000 ) || 5000;
		this.title = xml.attributes.getNamedItem("title").nodeValue || "";

		this.div = document.createElement ( "div" );
		this.infoDiv = document.createElement ( "div" );
		this.videoDiv = document.createElement ( "div" );
		
		var shadeDiv = document.createElement ( "div" );
		var textDiv = document.createElement ( "div" );

		if ( this.imageURL != "" )
		{
			preload = new Image();
			preload.src = this.imageURL;
		}

		/******** STYLE ********/
		this.div.setAttribute ( "id", this.id );
		
		this.div.style.width = fullWidth + "px";
		this.div.style.height = fullHeight + "px";
		this.div.style.backgroundColor = this.textBackgroundColor;
		this.div.style.backgroundImage = "url('" + this.imageURL + "')";
		this.div.style.backgroundRepeat = "no-repeat";
		this.div.style.display = "none";

		shadeDiv.style.position = "relative";
		shadeDiv.style.backgroundColor = this.textBackgroundColor;
		SetOpacity ( shadeDiv, this.textBackgroundAlpha );

		textDiv.style.position = "relative";
		textDiv.style.color = this.textColor;
		textDiv.style.padding = "10px";

		if ( this.horizontal )
		{
			shadeDiv.style.top = ( fullHeight / 2 ) + "px";
			shadeDiv.style.height = ( fullHeight / 2 ) + "px";
			shadeDiv.style.width = fullWidth + "px";
			textDiv.style.top = "0";
			textDiv.style.height = ( fullHeight / 2 ) + "px";
			textDiv.style.width = ( fullWidth - 20 ) + "px";
			this.infoDiv.style.height = fullHeight + "px";
			this.infoDiv.style.width = fullWidth + "px";
		}
		else
		{
			shadeDiv.style.width = ( fullWidth / 2 ) + "px";
			shadeDiv.style.height = fullHeight + "px";
			textDiv.style.top = "-" + fullHeight + "px";
			textDiv.style.width = ( fullWidth / 2 - 20 ) + "px";
			textDiv.style.height = fullHeight + "px";
			this.infoDiv.style.width = ( fullWidth / 2 ) + "px";
			this.infoDiv.style.height = fullHeight + "px";
		}
		/******** STYLE ********/

		if ( xml.getElementsByTagName ( "video" ).length > 0 )
		{
			this.videoDiv.innerHTML = GetElementText ( xml.getElementsByTagName ( "video" ) [ 0 ] );
			this.hasVideo = true;
		}

		textDiv.innerHTML = GetElementText ( xml.getElementsByTagName ( "text" ) [ 0 ] );
		
		var anchors = textDiv.getElementsByTagName ( "a" );
		
		for ( var index = 0; index < anchors.length; index++ )
		{
			anchors [ index ].style.color = this.textColor;
		}
		
		this.infoDiv.appendChild ( shadeDiv );
		this.infoDiv.appendChild ( textDiv );
		this.div.appendChild ( this.infoDiv );
		this.div.appendChild ( this.videoDiv );

		this.ShowText();

		return div;
	}
	
	
}

function SelectorWidget()
{
	var id = "";
	var div = null;
	var xmlObject = null;

	var navDiv = null;
	var navText = null;
	var navButtons = null;
	var navButtonColor = "#CCC";
	var navButtonBorderColor = "#444";
	var navButtonSelectedColor = "#DDD";
	var navButtonSelectedBorderColor = "#CCC";

	var slides = null;
	var slideCurrent = -1;
	var slideCount = 0;
	var slideTimer = null;
	
	this.ResetTimer = function ( longDelay )
	{
		clearTimeout ( this.timer );
		if ( longDelay ) this.timer = setTimeout ( function(owner) { return function () { owner.SetNextSlide(); }; } ( this ), this.slides [ this.slideCurrent ].GetTimeout() * 3 );
		else this.timer = setTimeout ( function(owner) { return function () { owner.SetNextSlide(); }; } ( this ), this.slides [ this.slideCurrent ].GetTimeout() );
	}

	this.SetNextSlide = function()
	{
		this.SetCurrentSlide ( this.slideCurrent + 1 );
		this.ResetTimer ( false );
	}

	this.SetNavText = function ( slide )
	{
		if ( slide )
		{
			this.navText.innerHTML = this.slides [ slide ].GetTitle();
		}
		else
		{
			this.navText.innerHTML = this.slides [ this.slideCurrent ].GetTitle();
		}
	}

	this.SetCurrentSlide = function ( slide, longDelay )
	{
		if ( this.slideCurrent >= 0 )
		{
			this.slides [ this.slideCurrent ].Show ( false );
			this.navButtons [ this.slideCurrent ].style.backgroundColor = this.navButtonColor;
			this.navButtons [ this.slideCurrent ].style.borderColor = this.navButtonBorderColor;
		}
		if ( ( slide < 0 ) || ( slide >= this.slides.length ) ) this.slideCurrent = 0;
		else this.slideCurrent = slide;
		this.slides [ this.slideCurrent ].Show ( true );
		this.navButtons [ this.slideCurrent ].style.backgroundColor = this.navButtonSelectedColor;
		this.navButtons [ this.slideCurrent ].style.borderColor = this.navButtonSelectedBorderColor;
		this.SetNavText ( this.slideCurrent );
		this.ResetTimer ( longDelay );
	}
	
	
	this.ShowVideo = function()
	{
		clearTimeout ( this.timer );
		this.slides [ this.slideCurrent ].ShowVideo();
	}
	
	this.CreateWidgetUsingXML = function ( xml )
	{
		this.div = document.getElementById ( "widget" );
		this.navDiv = document.createElement ( "div" );
		this.navText = document.createElement ( "div" );

		var slideXML = xml.getElementsByTagName ( "slide" );
		this.slideCount = slideXML.length;
		
		var widgetTop = this.div.offsetTop;
		var widgetLeft = this.div.offsetLeft;
		var widgetWidth = xml.attributes.getNamedItem("width").nodeValue;
		var widgetHeight = xml.attributes.getNamedItem("height").nodeValue;
		var widgetColor = xml.attributes.getNamedItem("color").nodeValue;
		var widgetAlpha = xml.attributes.getNamedItem("alpha").nodeValue;
		var widgetTextColor = xml.attributes.getNamedItem("textColor").nodeValue;
		var navWidth = 24;
		var navMargin = 16;

		this.navButtonColor = xml.attributes.getNamedItem("navColor").nodeValue;
		this.navButtonBorderColor = xml.attributes.getNamedItem("navBorderColor").nodeValue;
		this.navButtonSelectedColor = xml.attributes.getNamedItem("navSelectedColor").nodeValue;
		this.navButtonSelectedBorderColor = xml.attributes.getNamedItem("navSelectedBorderColor").nodeValue;
		
		this.div.style.position = "relative";
		this.div.style.width = widgetWidth + "px";
		this.div.style.height = widgetHeight + "px";
		this.div.style.backgroundColor = widgetColor;
		this.div.style.color = widgetTextColor;
		this.div.style.overflow = "hidden";
		
		this.slides = new Array();
		this.navButtons = new Array();
		
		for ( var index = 0; index < this.slideCount; index++ )
		{
			this.slides [ index ] = new SelectorWidgetSlide();
			var slideDiv = this.slides [ index ].CreateUsingXML ( slideXML [ index ], widgetWidth, widgetHeight );
			this.div.appendChild ( this.slides [ index ].GetDiv() );
			if ( this.slides [ index ].HasVideo() )
				this.slides [ index ].GetDiv().onclick = function() { widget.ShowVideo(); };

			this.navButtons [ index ] = document.createElement ( "div" );
			this.navButtons [ index ].onclick = function(slide) { return function() { widget.SetCurrentSlide ( slide, true ); }; } ( index );
			this.navButtons [ index ].onmouseover = function(slide) { return function() { widget.SetNavText ( slide ); }; } ( index );
			this.navButtons [ index ].onmouseout = function() { widget.SetNavText(); };
			this.navButtons [ index ].style.top = "4px";
			this.navButtons [ index ].style.left = ( navMargin + ( navMargin + navWidth ) * index ) + "px";
			this.navButtons [ index ].style.width = ( navWidth - 1) + "px";
			this.navButtons [ index ].style.height = "19px";
			this.navButtons [ index ].style.position = "absolute"
			this.navButtons [ index ].style.backgroundColor = this.navButtonColor;
			this.navButtons [ index ].style.border = "solid 1px " + this.navButtonBorderColor;
			this.navButtons [ index ].style.fontWeight = "bold";
			this.navButtons [ index ].style.textAlign = "center";
			this.navButtons [ index ].innerHTML = ( index + 1 );
			this.navButtons [ index ].style.cursor = "pointer";


			var navShade;
			navShade = document.createElement ( "div" );
			navShade.style.top = "6px";
			navShade.style.left = ( 2 + navMargin + ( navMargin + navWidth ) * index ) + "px";
			navShade.style.width = ( navWidth - 1) + "px";
			navShade.style.height = "19px";
			navShade.style.position = "absolute"
			navShade.style.backgroundColor = "#AAA";
			navShade.style.border = "solid 1px #AAA";

			
			this.navDiv.appendChild ( navShade );

			this.navDiv.appendChild ( this.navButtons [ index ] );
		}
		
		this.SetCurrentSlide ( 0 );

		this.navDiv.style.position = "absolute";
		this.navDiv.style.top = ( widgetHeight - 30 ) + "px";
		this.navDiv.style.height = "30px";
		this.navDiv.style.width = widgetWidth + "px";
		this.navDiv.style.color = "#FFF";
		this.navDiv.style.backgroundColor = widgetColor;

		this.navText.style.fontWeight = "bold";
		this.navText.style.color = "#666";
		this.navText.style.textAlign = "right";
		this.navText.style.padding = "6px 8px 0 0";
		this.navText.style.textTransform = "uppercase";

		this.navDiv.appendChild ( this.navText );


		this.navDiv.appendChild ( this.navText );
		this.div.appendChild ( this.navDiv );
		
		this.ResetTimer ( false );

	}

	this.Startup = function ( xmlUrl, elementID )
	{
		this.xmlObject = XMLRequestSync ( xmlUrl );
		var element = document.getElementById ( elementID );
		element.innerHTML = "";
		this.CreateWidgetUsingXML ( this.xmlObject.getElementsByTagName("widget")[0] );
		return true;
	}
	
	
		
	
}

var widget = new SelectorWidget();