/**
 * @author aishwar
 * @date April 24, 2009
 * @time 5:32PM
 * 
 * Contains 3 widgets:
 *  - Vertical Sliding Pane
 *  - Horizontal Sliding Pane
 *  - Tabbed window
 *  
 *  Version 1.1
 *   - Bug fix: set vertical splitter to half way and resize the window
 *   and resize back ... vertical panes are not in the same line anymore
 *   - But fix: resize window to smaller size, set splitter to half way
 *   and maximize the window - divider area is huge
 */

var selectedObj = null;
var lastXPos = null;
var lastYPos = null;
 
function selectObj(e) {
	if (!e) e = window.event;
	if (e.target)
		selectedObj = e.target;
	else selectedObj = e.srcElement;
}
 
function unselectObj(e) {
	if (!e) e = window.event;
	selectedObj = null;
}

function updateLastMousePosition(e) {
	if (!e) e = window.event;
	lastXPos = e.screenX;
	lastYPos = e.screenY;
}

function addEvent(object,type,func,useCapture) {
	if (object) {
	   if (object.addEventListener) {
		  object.addEventListener(type,func,useCapture);
	   } else {
		  object.attachEvent("on"+type,func);
	  }
	}
}

function removeEvent(object,type,func,useCapture) {
	if (object) {
		if (object.removeEventListener) {
			object.removeEventListener(type,func,useCapture);
		} else {
			object.detachEvent("on+type",func);
		}
	}
}

function HorizontalSplitPane(container,leftDiv,rightDiv,leftWidth,dividerWidth,bufferWidth) {
	this.container = document.getElementById(container);
	this.left = document.getElementById(leftDiv);
	this.right = document.getElementById(rightDiv);
	if (leftWidth.toString().search(/px/) > 0)
		leftWidth = (parseInt(leftWidth)/this.container.offsetWidth)*100 + '%';
	if (dividerWidth.toString().search(/px/) > 0)
		dividerWidth = (parseInt(dividerWidth)/this.container.offsetWidth)*100 + '%';
	if (bufferWidth.toString().search(/px/) > 0)
		bufferWidth = (parseInt(bufferWidth)/this.container.offsetWidth)*100 + '%';
	// Left and Right together expand and take up the whole
	// container's area. leftWidth specifies the width of 
	// the left pane in percent terms of the container width
	// dividerWidth specifies the width of the divider in 
	// percent terms of the container width
	if (parseFloat(dividerWidth) + parseFloat(leftWidth) > 100) {
		leftWidth = '49%';
		dividerWidth = '2%';
	}
	this.leftWidth = leftWidth;
	this.dividerWidth = dividerWidth;
	this.bufferWidthPx = parseInt(parseInt(bufferWidth)/100*this.container.offsetWidth);
	this.redraw = false;
}

HorizontalSplitPane.prototype.draw = function() {
	// Set Float
	this.left.style.cssFloat = 'left';
	this.right.style.cssFloat = 'right';
	this.left.style.styleFloat = 'left';
	this.right.style.styleFloat = 'right';
	
	// Set Height
	this.left.style.height = '100%';
	this.right.style.height = '100%';
	
	// Set Width
	this.left.style.width = this.leftWidth;
	this.right.style.width = (100 - parseFloat(this.leftWidth) - parseFloat(this.dividerWidth)) + '%';
	
	// Set Margin and Padding
	this.left.style.margin = '0px';
	this.right.style.margin = '0px';
	this.left.style.padding = '0px';
	this.right.style.padding = '0px';
	
	// Set Cursor
	this.container.style.cursor = 'col-resize';
	this.left.style.cursor = 'default';
	this.right.style.cursor = 'default';
	
	// Set Overflow
	this.left.style.overflow = 'auto';
	this.right.style.overflow = 'auto';
	
	var obj = this;
	
	// Register reize function to mouse move
	if (!this.redraw) {
		addEvent(document,'mousemove',function(e) { if (!e) e = window.event; obj.resize.apply(obj,arguments); },true);
		addEvent(window,'resize', function a(e) {if (!e) e = window.event; obj.draw.apply(obj,arguments); },true);
	}
	
	this.redraw = true;
}

HorizontalSplitPane.prototype.resize = function(e) {
    if (selectedObj == this.container) {
	   if (this.left.style.width.toString().search(/%/) > 0)
	      this.left.style.width = parseInt(parseFloat(this.left.style.width)/100 * parseInt(this.container.offsetWidth)) + 'px';
	   if (this.right.style.width.toString().search(/%/) > 0)
		  this.right.style.width = parseInt(parseFloat(this.right.style.width)/100 * parseInt(this.container.offsetWidth)) + 'px';
	   if (e.screenX != lastXPos) {
	      var xmove = e.screenX - lastXPos;
		  if (((parseInt(this.left.style.width)+xmove > this.bufferWidthPx) && (parseInt(this.right.style.width)-xmove > this.bufferWidthPx))
			|| ((parseInt(this.left.style.width) <= this.bufferWidthPx) && (xmove > 0)) 
			|| ((parseInt(this.right.style.width) <= this.bufferWidthPx) && (xmove < 0))){
		     this.left.style.width = parseInt(this.left.style.width) + xmove + "px";
		     this.right.style.width = parseInt(this.right.style.width) - xmove + "px";
		     // to avoid unintended selection
		     if (document.selection) document.selection.empty();
		     else window.getSelection().removeAllRanges();
		  }
	   }
	}
}

function VerticalSplitPane(container, topDiv, bottomDiv, topHeight, dividerHeight, bufferHeight){
	this.container = document.getElementById(container);
	this.top = document.getElementById(topDiv);
	this.bottom = document.getElementById(bottomDiv);
	if (topHeight.toString().search(/px/) > 0)
		topHeight = (parseInt(topHeight)/this.container.offsetHeight)*100 + '%';
	if (dividerHeight.toString().search(/px/) > 0)
		dividerHeight = (parseInt(dividerHeight)/this.container.offsetHeight)*100 + '%';
	if (bufferHeight.toString().search(/px/) > 0)
		bufferHeight = (parseInt(bufferHeight)/this.container.offsetHeight)*100 + '%';
	// Top and Bottom together expand and take up the whole
	// container's area. topHeight specifies the height of 
	// the top pane in percent terms of the container height
	// dividerHeight specifies the height of the divider in 
	// percent terms of the container height
	if (parseFloat(dividerHeight) + parseFloat(topHeight) > 100) {
		topHeight = '49%';
		dividerHeight = '2%';
	}
	this.topHeight = topHeight;
	this.dividerHeight = dividerHeight;
	this.bufferHeightPx = parseInt(parseFloat(bufferHeight)/100*this.container.offsetHeight);
	this.redraw = false;
}

VerticalSplitPane.prototype.draw = function() {
	// Set Positioning
	this.top.style.position = 'relative';
	this.bottom.style.position = 'relative';
	
	// Set Height
	this.top.style.height = this.topHeight;
	this.bottom.style.height = (100 - parseFloat(this.topHeight) - parseFloat(this.dividerHeight)) + '%';
	
	// Set Top and Bottom
	this.top.style.top = '0px';
	this.bottom.style.bottom = '-' + this.dividerHeight;
	
	// Set Width
	this.top.style.width = '100%';
	this.bottom.style.width = '100%';
	
	// Set Margin and Padding
	this.top.style.margin = '0px';
	this.bottom.style.margin = '0px';
	this.top.style.padding = '0px';
	this.bottom.style.padding = '0px';
	
	// Set Cursor
	this.container.style.cursor = 'row-resize';
	this.top.style.cursor = 'default';
	this.bottom.style.cursor = 'default';
	
	// Set Overflow
	this.top.style.overflow = 'auto';
	this.bottom.style.overflow = 'auto';
	
	var obj = this;
	
	// Register reize function to mouse move
	if (!this.redraw) {
		addEvent(document,'mousemove',function(e) { if (!e) e = window.event; obj.resize.apply(obj,arguments); },true);
		addEvent(window,'resize', function a(e) {if (!e) e = window.event; obj.draw.apply(obj,arguments); },true);
	}
	
	this.redraw = true;
}

VerticalSplitPane.prototype.resize = function(e) {
    if (selectedObj == this.container) {
	   if (this.top.style.height.toString().search(/%/) > 0)
	      this.top.style.height = parseInt(parseFloat(this.top.style.height)/100 * parseInt(this.container.offsetHeight)) + 'px';
	   if (this.bottom.style.height.toString().search(/%/) > 0)
		  this.bottom.style.height = parseInt(parseFloat(this.bottom.style.height)/100 * parseInt(this.container.offsetHeight)) + 'px';
	   if (e.screenY != lastYPos) {
	      var ymove = e.screenY - lastYPos;
		  if (((parseInt(this.top.style.height) > this.bufferHeightPx) && (parseInt(this.bottom.style.height) > this.bufferHeightPx))
			|| ((parseInt(this.top.style.height) <= this.bufferHeightPx) && (ymove > 0)) 
			|| ((parseInt(this.bottom.style.height) <= this.bufferHeightPx) && (ymove < 0))){
		     this.top.style.height = parseInt(this.top.style.height) + ymove + "px";
		     this.bottom.style.height = parseInt(this.bottom.style.height) - ymove + "px";
		     // to avoid unintended selection
		     if (document.selection) document.selection.empty();
		     else window.getSelection().removeAllRanges();
		  }
	   }
	}
}

function TabbedWindow(container) {
	this.container = document.getElementById(container);
	this.contentList = [];
	this.tabList = [];
	
	var firstChild = this.container.firstChild;
	var tabManager = document.createElement('div');
	tabManager.setAttribute('class','tabManager');
	// For IE
	tabManager.setAttribute('className','tabManager');
	this.container.insertBefore(tabManager,firstChild);
	this.tabManager = tabManager;
	
	var tabClear = document.createElement('div');
	tabClear.setAttribute('style','clear: both');
	this.tabManager.appendChild(tabClear);
	this.tabClear = tabClear;
}

TabbedWindow.prototype.registerTab = function(tabName,tabDivId,setdefault) {
	var newTabContent = document.getElementById(tabDivId);
	var newTab = document.createElement('div');
	newTab.setAttribute('class','tabButton');
	newTab.setAttribute('className','tabButton');
	tabName = document.createTextNode(tabName);
	newTab.appendChild(tabName);
	this.tabList.push(newTab);
	this.contentList.push(tabDivId);
	
	var obj = this;
	
	if (setdefault) {
		newTab.setAttribute('class','selectedTabButton');
		newTab.setAttribute('className','selectedTabButton');
		var tabDiv = document.getElementById(tabDivId);
		tabDiv.style.display = '';
	} else {
		var tabDiv = document.getElementById(tabDivId);
		tabDiv.style.display = 'none';
	}
	
	newTab.onclick = function() {
		var i = 0;
		for (i = 0;i < obj.contentList.length; i++) {
			var tabDiv = document.getElementById(obj.contentList[i]);
			tabDiv.style.display = 'none';
			obj.tabList[i].setAttribute('class','tabButton');
			obj.tabList[i].setAttribute('className','tabButton');
		}
		newTab.setAttribute('class','selectedTabButton');
		newTab.setAttribute('className','selectedTabButton');
		var tabDiv = document.getElementById(tabDivId);
		tabDiv.style.display = '';
	}
	this.tabManager.insertBefore(newTab,this.tabClear);
}

function fitContainerToWindow(container) {
	var container = document.getElementById(container);
	container.height = '100%;';
}

addEvent(document,'mousedown',selectObj,true);
addEvent(document,'mouseup',unselectObj,true);
addEvent(document,'mousemove',updateLastMousePosition,false);