<!--
// pre-load images
if (document.images)
{
  var expandImage= new Image(11,11); 
  expandImage.src="images/plus.gif"; 

  var collapseImage= new Image(11,11); 
  collapseImage.src="images/minus.gif"; 
}
//-->

function SSideBar(obj, container_el)
{
	this.container = container_el;
	this.obj = obj;
	this.views = [];
	this.resize = resizeSideBar;
	this.init = initSideBar;
	this.addView = addView;
	this.toggleView = toggleView;
	this.expandView = expandView;
	this.collapseView = collapseView;
	this.showView = showView;
	this.hideView = hideView;
	this.toggleViewVisibility = toggleViewVisibility;
}

function SSideView(id, title, initFunc, visible)
{
	this.id = id;
	this.title = title;
	this.height = 0;
	this.exp = true;
	this.hasToolbar = false;
	this.visible = visible;
	this.initFunc = initFunc;
}
function addView(view)
{
	this.views.push(view);
}
function toggleView(index)
{
	var view = this.views[index];
	view.exp = !view.exp;

	var idExp = view.id + "_exp";
	var elExp = getEl(idExp);
	var elImg = getEl(view.id + "_img");
	
	elExp.className = view.exp ? "minus" : "plus";
	// doesn't work in IE, only FF
	// elExp.innerHTML = view.exp ? "<img src='images/minus.gif'>" : "<img src='images/plus.gif'";
	// use this instead
	elImg.src = view.exp ? "images/minus.gif" : "images/plus.gif";
	elExp.title = view.exp ? "Collapse this" : "Expand this";
	
	if (view.exp)
	{
		elShow(view.id + "_fullcont");
	}
	else
	{
		elHide(view.id + "_fullcont");
	}
	this.resize();
	createCookie(view.id + "_state_exp", view.exp ? "1" : "0", null);	
}
function expandView(index)
{
	var view = this.views[index];
	if (!view.exp)
		this.toggleView(index);
}
function collapseView(index)
{
	var view = this.views[index];
	if (view.exp)
		this.toggleView(index);
}
function showView(index)
{
	var view = this.views[index];
	if (!view.visible)
	{
		view.visible = true;
		elShow(view.id);
		this.resize();
		createCookie(view.id + "_state_show", "1", null);	
	}
}
function hideView(index)
{
	var view = this.views[index];
	if (view.visible)
	{
		view.visible = false;
		elHide(view.id);
		this.resize();
		createCookie(view.id + "_state_show", "0", null);	
	}
}
function toggleViewVisibility(index)
{
	var view = this.views[index];
	if (view.visible)
		this.hideView(index);
	else
	{
		this.expandView(index);
		this.showView(index);
	}
}

function resizeSideBar()
{
	var i;
	var numExpandedViews = 0;
	var numCollapsedViews = 0;
	var view;
	
	for (i = 0; i < this.views.length; i++)
	{
		view = this.views[i];
		if (view.visible)
		{
			if (view.exp)
				numExpandedViews++;
			else
				numCollapsedViews++;
		}
	}
	
	var collapsedViewHeight = 32;
	
	var height = parseInt(this.container.height);
	if (isNaN(height))
		height = 0;
		
	height -= numCollapsedViews * collapsedViewHeight;
	var viewHeight = 0;
	if (numExpandedViews > 0)
		viewHeight = Math.floor(height / numExpandedViews);
	var lastViewHeight = viewHeight + (height - (viewHeight * numExpandedViews));
	
	var view_el;
	var cont_el;
	
	for (i = 0; i < this.views.length; i++)
	{
		view = this.views[i];
		
		if (view.visible)
		{
			if (view.exp)
			{
				if (i < this.views.length - 1)
					view.height = viewHeight;
				else
					view.height = lastViewHeight;
			}
			else
				view.height = collapsedViewHeight;
				
			view_el = elStyleId(view.id);		
			view_el.height = view.height + "px";	

			cont_el = elStyleId(view.id + "_fullcont");		
			cont_el.height = Math.max((view.height - collapsedViewHeight), 0) + "px";		
		}
	}
}
function initSideBar()
{
	var html = "";
	var view;
	var style = "";

	var visible;
	var expanded;
		
	for (i = 0; i < this.views.length; i++)
	{
		view = this.views[i];
	
		visible = parseInt(readCookie(view.id + "_state_show"));
		expanded = parseInt(readCookie(view.id + "_state_exp"));
		
		if (!isNaN(visible))
			view.visible = visible;

		if (!isNaN(expanded))
			view.exp = expanded;

		if (view.visible)
			style = "display: block;";
		else
			style = "display: none;";
			
		if (i == 0)
			style += "border-top: none;";
		
		html += "<div class='view' style='" + style + "' id='" + view.id + "'>";
		
		html += "<table width=100% border=0 cellpadding=0 cellspacing=0>";
		html += "<tr>";
		if (view.exp)
			html += "<td id='" + view.id + "_exp' class='minus' nowrap valign=top onclick='javascript:" + this.obj + ".toggleView(" + i + ");' title='Collapse this'><img src='images/minus.gif' id='" + view.id + "_img'></td>";
		else
			html += "<td id='" + view.id + "_exp' class='plus' nowrap valign=top onclick='javascript:" + this.obj + ".toggleView(" + i + ");' title='Expand this'><img src='images/plus.gif' id='" + view.id + "_img'></td>";
		html += "<td id='" + view.id + "_title' class='title' width=100% valign=top>" + view.title + "</td>";
		html += "<td id='" + view.id + "_close' class='close' nowrap valign=top onclick='javascript:" + this.obj + ".hideView(" + i + ");' title='Close this'><img src='images/close.gif' id='" + view.id + "_close_img'></td>";
		html += "</tr>";
		html += "</table>";
		html += "<div class='fullcont' id='" + view.id + "_fullcont'>";
		if (view.hasToolbar)
			html += "<div class='toolbar' id='" + view.id + "_toolbar'></div>";
		html += "<div class='cont' id='" + view.id + "_cont'>";
	
		html += "</div>";
		html += "</div>";
		html += "</div>";
	}
	
	this.container.innerHTML = html;
	this.resize();
	
	for (i = 0; i < this.views.length; i++)
	{
		view = this.views[i];
		
		if (view.initFunc)
			view.initFunc();
	}	
}

