function showSubfeature(index, originNode)
{
	var elem;
	for (var i = 0; i < 4; i++)
	{
		if (elem = document.getElementById("subfeature-" + i))
		{ 
			elem.style.display = (i == index ? "block" : "none");
		}
	}

	var ul = originNode.parentNode.parentNode;
	var lis = ul.getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++)
	{
		lis[i].className = (i == index ? "current" : "");
	}
}

function HomePageMainFeatureCycler()
{
	this.articles = new Array();
	this.index = 0;

	this.imageLoadedCount = 0;
	this.imageTotalCount = 0;
	
	var timeoutHandle = null;
	var alreadyLoaded = false;

	this.imageLoaded = function(image, success)
	{
		this.imageLoadedCount++;

		var progress = document.getElementById("loading-progress").getElementsByTagName("span")[0];
		var percentComplete = this.imageLoadedCount / this.imageTotalCount;

		progress.firstChild.nodeValue = Math.round(percentComplete * 100);
		progress.style.width = Math.ceil(percentComplete * 100) + "%";

		if (percentComplete >= 1 && !alreadyLoaded)
		{
			alreadyLoaded = true;
			this.allImagesLoaded();
		}
	};

	this.allImagesLoaded = function()
	{
		//if (!YAHOO && !YAHOO.util && !YAHOO.util.Anim)
		//{
			var outer = this;
			new YAHOO.util.YUILoader
			(
				{
					base: "/js/lib24watch/yui/",
					require: ["animation"],
					onSuccess: function()
					{
						outer.yuiLoaded();
					}
				}
			).insert();
		//}
		//else
		//{
		//	this.yuiLoaded();
		//}
	};

	this.yuiLoaded = function()
	{
		var ul = document.getElementById("main-feature-thumbnails");
		for (var i = 0; i < this.articles.length; i++)
		{
			var li = document.createElement("li");
			li.setAttribute("id", "main-feature-thumbnail-" + i);
			
			var img = document.createElement("img");
			img.setAttribute("src", articles[i].thumbnailPath);
			img.setAttribute("alt", articles[i].imageCaption);
			
			li.appendChild(img);

			YAHOO.util.Dom.setStyle(li, "opacity", 0.3);
			
			var outer = this;
			
			if (li.attachEvent)
			{
				li.attachEvent("onclick", function(event)
				{
					if (event.srcElement.nodeName == 'IMG')
					{
						var id = event.srcElement.parentNode.getAttribute("id").match(/([0-9]+)/)[1];
					}
					else
					{
						var id = event.srcElement.getAttribute("id").match(/([0-9]+)/)[1];
					}
					id = parseInt(id, 10);
					outer.switchArticles(id);
				});
			}
			else
			{
				li.addEventListener("click", function()
				{
					var id = this.getAttribute("id").match(/([0-9]+)/)[1];
					id = parseInt(id, 10);
					outer.switchArticles(id);
				}, true);
			}
		
	        	ul.appendChild(li);
		}
		
		YAHOO.util.Dom.setStyle("current-main-feature", "opacity", 0);
	
		var outer = this;

		var anim = new YAHOO.util.Anim
		(
			"loading-container",
			{
				opacity:
				{
					from: 1,
					to: 0
				}
			}
		);
		anim.duration = 0.3;

		anim.onComplete.subscribe(function()
		{
			var elem = document.getElementById("loading-container");
			elem.parentNode.removeChild(elem);
			outer.showArticle(outer.articles[outer.index]);
		});

		anim.animate();
		
		this.renewTimeout();
	};
	
	this.showArticle = function(article)
	{
		var container = document.getElementById("current-main-feature");
		
		// main feature image
		var img = container.getElementsByTagName("img")[0];
		img.setAttribute("alt", article.imageCaption);
		img.src = article.image.src;

		// main feature image link
		var a = container.getElementsByTagName("div")[0].getElementsByTagName("a")[0];
		a.setAttribute("href", article.url);

		// headline text and link
		var headline = container.getElementsByTagName("h3")[0].getElementsByTagName("a")[0];
		if (!headline.firstChild)
		{
			headline.appendChild(document.createTextNode(""));
		}
		headline.firstChild.nodeValue = article.title;
		headline.setAttribute("href", article.url);
		
		// teaser
		var teaser = document.getElementById("main-feature-teaser");
		if (!teaser.firstChild)
		{
			teaser.appendChild(document.createTextNode(""));
		}
		teaser.firstChild.nodeValue = article.teaser;
		
		// media links
		var mediaLinks = document.getElementById("main-feature-media").getElementsByTagName("li");
		for (var i = 0; i < mediaLinks.length; i++)
		{
			while (mediaLinks[i].hasChildNodes())
			{
				mediaLinks[i].removeChild(mediaLinks[i].firstChild);
			}
		
			var supported = null;
			var title = null;
		
			switch (mediaLinks[i].className)
			{
				case "audio":
					supported = article.supportedMedia.audio;
					title = "Audio";
					break;
					
				case "video":
					supported = article.supportedMedia.video;
					title = "Video";
					break;
					
				case "image":
					supported = article.supportedMedia.image;
					title = "Image";
					break;
			}
			
			if (!supported)
			{
				var span = document.createElement("span");
				span.appendChild(document.createTextNode(title + " (not available"));
				mediaLinks[i].appendChild(span);
			}
			else
			{
				var a = document.createElement("a");
				a.appendChild(document.createTextNode(title));
				a.setAttribute("href", article.url);
				mediaLinks[i].appendChild(a);
			}
		}
		
		var anim = new YAHOO.util.Anim
		(
			container,
			{
				opacity:
				{
					from: 0,
					to: 1
				}
			}
		);
		anim.duration = 0.5;
		var thumbnailAnim = new YAHOO.util.Anim
		(
			"main-feature-thumbnail-" + article.index,
			{
				opacity:
				{
					from: 0.3,
					to: 1
				}
			}
		);
		thumbnailAnim.duration = 0.5;
		
		anim.animate();
		thumbnailAnim.animate();
	}

	this.switchArticles = function(newIndex)
	{
		if (newIndex >= 0)
		{
			window.clearTimeout(this.timeoutHandle);
		}
	
		var outer = this;
	
		var anim = new YAHOO.util.Anim
		(
			"current-main-feature",
			{
				opacity:
				{
					from: 1,
					to: 0
				}
			}
		);
		anim.duration = 0.3;
		
		var thumbnailAnim = new YAHOO.util.Anim
		(
			"main-feature-thumbnail-" + outer.index,
			{
				opacity:
				{
					from: 1,
					to: 0.3
				}
			}
		);
		thumbnailAnim.duration = 0.5;
		
		anim.onComplete.subscribe(function()
		{
			outer.index = (newIndex >= 0 ? newIndex : outer.index + 1);
			
			if (outer.index >= outer.articles.length)
			{
				outer.index = 0;
			}
			
			outer.showArticle(outer.articles[outer.index]);
			outer.renewTimeout();
		});
		
		anim.animate();
		thumbnailAnim.animate();
	}

	this.addArticle = function(article)
	{
		var image = new Image();
		var thumbnail = new Image();

		this.imageTotalCount += 2;

		var outer = this;

		image.onerror = function()
		{
			outer.imageLoaded(image, false);
		};
		thumbnail.onerror = function()
		{
			outer.imageLoaded(thumbnail, false);
		};

		image.onload = function()
		{
			outer.imageLoaded(image, true);
		};
		thumbnail.onload = function()
		{
			outer.imageLoaded(thumbnail, true);
		}

		image.src = article.imagePath;
		thumbnail.src = article.thumbnailPath;

		article.image = image;
		article.thumbnail = thumbnail;

		article.index = this.articles.length;

		this.articles.push(article);
	};

	this.addArticles = function(articles)
	{
		for (var i = 0; i < articles.length; i++)
		{
			this.addArticle(articles[i]);
		}
	};
	
	this.renewTimeout = function()
	{
		var outer = this;
		
		this.timeoutHandle = window.setTimeout(function()
		{
			outer.switchArticles()
		}, 6500);
	};

	this.start = function(articles)
	{
		var outer = this;
		
		this.addArticles(articles);
	};
}

var cycler = new HomePageMainFeatureCycler();

if (window.attachEvent)
{
	window.attachEvent("onload", function()
	{
		cycler.start(articles);
	});
}
else
{
	window.addEventListener("load", function()
	{
		cycler.start(articles);
	}, true);
}