////////////////////////////////////////////////////////////////////////////////
/// itemBrowser constructor
function itemBrowser(items)
{
	var instance = this;
	
	/// Make the mode links toggle the appropriate content.
	this.catLink = e("ib-mode-cat");
	this.alphaLink = e("ib-mode-alpha");
	this.onlineLink = e("ib-mode-online");
	this.catLink.onclick = function() { instance.toggleMode("cat"); return false; }
	this.alphaLink.onclick = function() { instance.toggleMode("alpha"); return false; }
	this.onlineLink.onclick = function() { instance.toggleMode("online"); return false; }
	this.mode = "alpha"; ///< Category is the initial mode. Template needs to set this up.
	
	var button = e("ib-online-link");
	if(button) button.onclick = function() { instance.toggleMode("online"); return false; }
	
	/// Initialize the alphabet letter clicks.
	var alphabet = Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
	
	var makef = function(letter) { return function() { instance.toggleLetter(letter); }}
	for(i in alphabet)
	{
		e("ib-letter-" + alphabet[i]).onclick = makef(alphabet[i]);
	}
	this.letter = "A"; ///< A is initially open. Template needs to set this up.
	
	/// Initialize subitems opening / closing.
	var makef = function(id, group) { return function() { instance.itemOpen(id, group); }}
	for(i in items)
	{
		/// For the category view.
		e("ib-cat-item-" + items[i]).onclick = makef(items[i], "cat");
	
		/// For the alphabetical view. Not all items are output in this mode
		//// so the element has to be checked.
		var item = e("ib-alpha-item-" + items[i]);
		if(item) item.onclick = makef(items[i], "alpha");
		
		/// Same deal for online view;
		var item = e("ib-online-item-" + items[i]);
		if(item) item.onclick = makef(items[i], "online");
	}
	
	/// Keep track of selected item.
	this.selectedItemId = -1;
}

////////////////////////////////////////////////////////////////////////////////
/// Hides the old mode and shows the new mode.
itemBrowser.prototype.toggleMode = function(newMode)
{
	/// Hide old...
	add(e("ib-header-" + this.mode), "disHide");
	add(e("ib-items-" + this.mode), "disHide");
	rem(e("ib-mode-" + this.mode), "ib-selected-mode");
	
	/// Show new...
	rem(e("ib-header-" + newMode), "disHide");
	rem(e("ib-items-" + newMode), "disHide");
	add(e("ib-mode-" + newMode), "ib-selected-mode");
	
	this.closeList();
	
	/// Keep track of mode.
	this.mode = newMode;
}

////////////////////////////////////////////////////////////////////////////////
/// Hides old letter and shows new letter.
itemBrowser.prototype.toggleLetter = function(letter)
{
	/// Hide old...
	add(e("ib-subitems-" + this.letter), "disHide");
	rem(e("ib-letter-" + this.letter), "ib-letter-selected");
	
	/// Show new...
	rem(e("ib-subitems-" + letter), "disHide");
	add(e("ib-letter-" + letter), "ib-letter-selected");
	
	this.closeList();
	
	/// Keep track of letter.
	this.letter = letter;
}



////////////////////////////////////////////////////////////////////////////////
/// When an item is clicked this function shows any existing subitems.
itemBrowser.prototype.itemOpen = function(id, group)
{
	if(this.selectedItemId == id)
	{
		/// Item is selected. 
		this.close(id, group);
		this.deselect(id, group);
		this.showNullInfo();
		this.selectedItemId = -1;
	}
	else
	{
		/// Item is not selected. Open it.
		this.open(id, group);
		this.select(id, group);
		
		/// Then close the previous one, if there is a previous one.
		if(this.selectedItemId != -1) this.deselect(this.selectedItemId, group);
		else this.hideNullInfo();
		this.selectedItemId = id;
	}
}


////////////////////////////////////////////////////////////////////////////////
///
itemBrowser.prototype.closeList = function()
{
	/// Close everything...
	if(this.selectedItemId != -1)
	{
		this.deselect(this.selectedItemId, this.mode);
		this.showNullInfo();
		this.selectedItemId = -1;
	}
}

////////////////////////////////////////////////////////////////////////////////
///
itemBrowser.prototype.open = function(id, group)
{
	var item = e("ib-" + group + "-item-" + id);
	var subItems = e("ib-" + group + "-subitems-" + id);
	if(subItems)
	{
		rem(subItems, "disHide");
		if(item.className.indexOf("selected") != -1) item.className = "ib-item-selected-open";
		else item.className = "ib-item-open";
	}
}

////////////////////////////////////////////////////////////////////////////////
///
itemBrowser.prototype.close = function(id, group)
{
	var item = e("ib-" + group + "-item-" + id);
	var subItems = e("ib-" + group + "-subitems-" + id);
	if(subItems)
	{
		add(subItems, "disHide");
		if(item.className.indexOf("selected") != -1) item.className = "ib-item-selected-closed";
		else item.className = "ib-item-closed";
	}
}


////////////////////////////////////////////////////////////////////////////////
/// Highlight an item and show any existing sub items.
itemBrowser.prototype.select = function(id, group)
{
	/// Show this item's description.
	var description = e("ib-description-" + id);
	if(description) rem(description, "disHide");
	
	/// Update the style class for this item.
	var item = e("ib-" + group + "-item-" + id);
	var subitems = e("ib-" + group + "-subitems-" + id);
	
	if(subitems) 
	{
		if(item.className.indexOf("open") != -1) item.className = "ib-item-selected-open";
		else item.className = "ib-item-selected-closed";
	}
	else item.className = "ib-item-selected";
}

////////////////////////////////////////////////////////////////////////////////
/// Unhighlight an item.
itemBrowser.prototype.deselect = function(id, group)
{
	/// Hide this items description.
	var description = e("ib-description-" + id);
	if(description) add(description, "disHide");
	
	/// Update the style class for this item.
	var item = e("ib-" + group + "-item-" + id);
	var subitems = e("ib-" + group + "-subitems-" + id);
	
	if(subitems)
	{
		if(item.className.indexOf("open") != -1) item.className = "ib-item-open";
		else item.className = "ib-item-closed";
	}
	else item.className = "ib-item";
}


////////////////////////////////////////////////////////////////////////////////
itemBrowser.prototype.showNullInfo = function()
{
	rem(e("ib-description-null"), "disHide");
}

////////////////////////////////////////////////////////////////////////////////
itemBrowser.prototype.hideNullInfo = function()
{
	add(e("ib-description-null"), "disHide");
}