/* Initiate menu */

/*addLoadEvent(function() {
	var x = new ImagePicker("tab1_panel1");
	x.Init();
});*/


/****************/
/* Image picker */
/****************/

// Constructor

var ImagePicker = function(containerId) {

	this.Container = document.getElementById(containerId);
	this.ImageArray = [];
}

// Public static properties

ImagePicker.DefaultImageID = "imgPlaceholder";
ImagePicker.DefaultParagraphID = "pPlaceholder";
ImagePicker.DefaultParagraphClassName = "imageScollerDescription";
ImagePicker.PreviousLinkClass = "Previousbtn";
ImagePicker.PreviousLinkText = "Previous";
ImagePicker.NextLinkClass = "Nextbtn";
ImagePicker.NextLinkText = "Next";
ImagePicker.ActiveLinkClass = "MediaItemActive";
ImagePicker.ActiveLinkIndex = 0;


// Public instance methods

ImagePicker.prototype.Init = function() {

	if(!document.getElementById || !document.getElementsByTagName || !document.createTextNode) {
		return;
	}

	// Collect images
	this.PopulateImageArray(this.Container)

	if(this.ImageArray.length > 0)
	{
		//Remove child nodes
		Utility.EmptyContainer(this.Container);
		
		// Add holding image, description and list
		ImagePicker.DisplayDefaultImage(this.Container, this.ImageArray);
		ImagePicker.DisplayDefaultImageDescription(this.Container, this.ImageArray);
		ImagePicker.DisplayImageLinks(this.Container, this.ImageArray);
	}
}


ImagePicker.prototype.PopulateImageArray = function(container)
{
	if(container.hasChildNodes())
	{
		var nodeList = container.childNodes;
		
		for(var i=0; i<nodeList.length; i++)
		{
			if(nodeList[i].nodeType == document.ELEMENT_NODE || nodeList[i].nodeType == 1)
			{
				switch(nodeList[i].tagName.toLowerCase())
				{
					case "li":
						this.ImageArray[this.ImageArray.length] = new ImageOption(
								GetUrlFromListItem(nodeList[i]), // Url
								GetTextFromListItem(nodeList[i]), // Text
								GetTitleFromListItem(nodeList[i]) // Title
							);
						break;
						
					default:
						this.PopulateImageArray(nodeList[i]);
						break;
				}
			}
		}
	}
}

// Public static methods

ImagePicker.DisplayImageLinks = function(container, optionList)
{
	if(optionList.length > 1)
	{
		// Define existing placeholding elements
		var _image = document.getElementById(ImagePicker.DefaultImageID);
		var _para = document.getElementById(ImagePicker.DefaultParagraphID);
		
		// Temporary array for storing references to created links
		var linkArray = [];

		// Create new elements
		var _ul = document.createElement("ul");
		var _li = null;
		var _a = null;

		// Define link events
		var eventArray = ["click", "keypress"];


		for(var i = 0; i < optionList.length; i++)
		{
			_li = document.createElement("li");
			_a = Utility.CreateLink(i + 1, "#", "a_" + i);
			
			// Add link to link array
			linkArray[i] = _a;

			(function(){

				var index = i;
				var item = optionList[i];
				var self = _a;
				
				for(var j = 0; j< eventArray.length; j++)
				{
					self["on" + eventArray[j]] = function(){

						// Set active index
						ImagePicker.ActiveLinkIndex = index;

						// Set image, empty then repopulate paragraph
						Utility.SetImageProperties(_image, item.Src, item.Alt, item.Description, null);
						Utility.SetParagraphProperties(_para, item.Description, null);

						// Remove class from added links
						ImagePicker.SetActiveLink(linkArray, self);

						return false;
					}
				}
			})();

			_li.appendChild(_a);
			_ul.appendChild(_li);
		}
		
		// Set default link
		ImagePicker.SetActiveLink(linkArray, linkArray[ImagePicker.ActiveLinkIndex]);
		
		
		
		// Create "previous" link
		var _aPrevious = Utility.CreateLink(ImagePicker.PreviousLinkText, "#");
		for(var i = 0; i< eventArray.length; i++)
		{
			_aPrevious["on" + eventArray[i]] = function(){
				
				// Determine previous index
				var newIndex = (ImagePicker.ActiveLinkIndex == 0) ? optionList.length - 1 : ImagePicker.ActiveLinkIndex - 1 ;

				// Set current index
				ImagePicker.ActiveLinkIndex = newIndex;
						
				// Set new image properties, empty then repopulate paragraph
				Utility.SetImageProperties(_image, optionList[newIndex].Src, optionList[newIndex].Alt, optionList[newIndex].Description, null);
				Utility.SetParagraphProperties(_para, optionList[newIndex].Description, null);

				// Remove class from added links
				ImagePicker.SetActiveLink(linkArray, linkArray[ImagePicker.ActiveLinkIndex]);

				return false;
			}
		}
		
		// Create "next" link
		var _aNext = Utility.CreateLink(ImagePicker.NextLinkText, "#");
		for(var i = 0; i< eventArray.length; i++)
		{
			_aNext["on" + eventArray[i]] = function(){
				
				// Determine previous index
				var newIndex = (ImagePicker.ActiveLinkIndex == optionList.length - 1) ? ImagePicker.ActiveLinkIndex = 0 : ImagePicker.ActiveLinkIndex + 1;

				// Set current index
				ImagePicker.ActiveLinkIndex = newIndex;
						
				// Set new image properties, empty then repopulate paragraph
				Utility.SetImageProperties(_image, optionList[newIndex].Src, optionList[newIndex].Alt, optionList[newIndex].Description, null);
				Utility.SetParagraphProperties(_para, optionList[newIndex].Description, null);

				// Remove class from added links
				ImagePicker.SetActiveLink(linkArray, linkArray[ImagePicker.ActiveLinkIndex]);

				return false;
			}
		}
		
		// Build previous & next links
		var _divPreviousLink = Utility.CreateDiv(null, ImagePicker.PreviousLinkClass, [_aPrevious]);
		var _divNextLink = Utility.CreateDiv(null, ImagePicker.NextLinkClass, [_aNext]);

		// Create list wrapper and add elements to it
		var _divListWrapper = Utility.CreateDiv(null, "ListWrapper", [_divPreviousLink, _ul, _divNextLink]);

		container.appendChild(_divListWrapper);
	}
}

ImagePicker.DisplayDefaultImage = function(container, optionList)
{
	if(optionList.length > 0)
	{
		container.appendChild(Utility.CreateImage(
			optionList[0].Src,
			optionList[0].Alt,
			ImagePicker.DefaultImageID, null, null)
		);
 	}
}

ImagePicker.DisplayDefaultImageDescription = function(container, optionList)
{
	if(optionList.length > 0)
	{
		if(optionList[0].Description != null)
		{
			if(optionList[0].Description.length > 0)
			{
				container.appendChild(
					Utility.CreateParagraph(optionList[0].Description, ImagePicker.DefaultParagraphID, ImagePicker.DefaultParagraphClassName)
				);
			}
		}
	}
}

ImagePicker.SetActiveLink = function(linkArray, currentLink)
{
	for(var k = 0; k < linkArray.length; k++)
		linkArray[k].className = null;
	
	// Reapply class to the link
	currentLink.className = ImagePicker.ActiveLinkClass;
}


/****************/
/* Image Option */
/****************/

// Constructor

function ImageOption(src, alt, description)
{
	this.Src = src;
	this.Alt = alt;
	this.Description = description;
}


/*******************/
/* Utility methods */
/*******************/

var Utility = {}

Utility.EmptyContainer = function(container)
{
	if(container.hasChildNodes())
	{
		while(container.childNodes.length >= 1)
			container.removeChild(container.firstChild);
	}
}

Utility.CreateDiv = function(id, className, children)
{
	var obj = document.createElement("div");
	obj.id = id;
	obj.className = className;
	
	if(children != null)
		for(var i=0; i<children.length; i++)
			obj.appendChild(children[i]);

	return obj;
}

Utility.CreateUl = function(id, className, children)
{
	var obj = document.createElement("ul");
	obj.id = id;
	obj.className = className;
	
	if(children != null)
		for(var i=0; i<children.length; i++)
			obj.appendChild(children[i]);

	return obj;
}

Utility.CreateLink = function(text, href, id, className)
{
	var obj = document.createElement("a");
	obj.appendChild(document.createTextNode(text));
	obj.href = href;
	obj.id = id;
	obj.className = className;
	return obj;
}

Utility.CreateImage = function(src, alt, id, className)
{
	var obj = document.createElement("img");
	obj.setAttribute("src", src);
	obj.setAttribute("alt", alt);
	obj.setAttribute("title", alt);
	obj.id = id;
	obj.className = className;
	return obj;
}

Utility.SetImageProperties = function(obj, src, alt, title, className)
{
	obj.setAttribute("src", src);
	obj.setAttribute("alt", alt);
	obj.setAttribute("title", (title == null) ? alt : title);
	obj.className = className;
}

Utility.CreateParagraph = function(text, id, className)
{
	var obj = document.createElement("p");
	obj.appendChild(document.createTextNode(text));
	obj.id = id;
	obj.className = className;
	return obj;
}

Utility.SetParagraphProperties = function(obj, text, className)
{
	if(text != null) {
		Utility.EmptyContainer(obj);
		obj.appendChild(document.createTextNode(text));
	}
	obj.className = className;
}



function GetUrlFromListItem(containerElement) {
	var nodeList = containerElement.childNodes;
	for(var i=0; i<nodeList.length; i++)
	{
		if(nodeList[i].nodeType == document.ELEMENT_NODE | nodeList[i].nodeType == 1)
		{
			if(nodeList[i].tagName.toLowerCase() == "a")
				return nodeList[i].getAttribute("href");
		}
	}
}

function GetTitleFromListItem(containerElement) {
	var nodeList = containerElement.childNodes;
	for(var i=0; i<nodeList.length; i++)
	{
		if(nodeList[i].nodeType == document.ELEMENT_NODE | nodeList[i].nodeType == 1)
		{
			if(nodeList[i].tagName.toLowerCase() == "a")
				return nodeList[i].getAttribute("title");
		}
	}
}

function GetTextFromListItem(containerElement) {
	var nodeList = containerElement.childNodes;
	for(var i=0; i<nodeList.length; i++)
	{
		if(nodeList[i].nodeType == (document.ELEMENT_NODE | 1))
		{
			if(nodeList[i].childNodes[0].nodeValue != "")
				return nodeList[i].childNodes[0].nodeValue;
		}
	}
}