/*
ALL SCRIPTING IN THIS DOCUMENT WAS WRITTEN BY NICK ANNIS FOR THE ENGINES AND ENERGY CONVERSION LAB (CSU)
	-last revised: 4/21/09

AVAILABLE FUNCTIONS:
-constructor				: creates an expanding box around an existing html element, requires a 
								args-
									name : string equivalent of the variable name assigned to the specific object
										   ie: var <name> = new collapsable("<name>",....);
									divObj : element to encapsulate in an expanding box
									closedHeight : minimum height, or closed height, of the box in its closed state

	mOver					: event function triggered from mousing over the button
	mOut					: event function triggered from mousing out of the button
	toggleButton			: changes text state of the button ("expand" or "collapse")
	clicked					: event function triggered from clicking the button
	recMove					: recursively open or close the expanding box based on its current state
	setExpandText			: changes the default text "Expand" to a new value
	setCollapseText			: changes the default text "Collapse" to a new value
	hideBox					: hides the entire box (display:none)
	showBox					: makes the box visible (display:block)
	setInHTML				: change the innerHTML value of the frame
	setClosedHeight			: reset the minimum height of the box
	setRate					: changes how many pixels the box moves by at each interval
	setInt					: changes how many milliseconds before the box's height is changed again by the rate value
	setHoverColor			: changes the background color when the button is hovered over
	setDefaultColor			: changes the background color when the buitton is in its normal state
	setHoverTextColor		: changes the text color when the button is hovered over
	setDefaultTextColor		: changes the text color when the button is in its normal state
	setWidth				: changes the width of the entire frame
	getButton				: returns the button object (div)
	getFrame				: returns the frame object (div)
*/

function collapsable(name,divObj,closedHeight){
	if(typeof collapsable.count == 'undefined'){
		collapsable.count = 0;
	}
	collapsable.count++;
	
	this.rate = 32;
	
	this.name = name;
	window[this.name] = this;
	this.object = "window[\""+this.name+"\"]";
	this.UID = collapsable.count;
	
	this.dObj = divObj;
	this.cHeight = closedHeight;
	this.currHeight = this.cHeight;
	this.move = null;
	this.letClick = true;
	this.isClosed = true;
	this.isBare = false;
	
	this.expandTxt = "Expand";
	this.collapseTxt = "Collapse";
	
	this.hoverColor = "#00490c";
	this.hoverTextColor = "#ffffff";
	this.defaultColor = "#c8c8c8";
	this.defaultTextColor = "#000000";
	
	this.outerFrameStyle = "overflow:hidden;border:1px solid #c8c8c8;border-bottom:0px;";
	this.buttonStyle = "height:18px;background:#c8c8c8;margin-bottom:15px;text-align:center;font-family:Verdana;font-size:14px;"+
					  "cursor:pointer;";
	
	var inHtml = "<div id='Frame"+this.UID+"' name='Frame"+this.UID+"' style='height:"+this.cHeight+"px;"+this.outerFrameStyle+
				 "'></div>"+
				 
				 "<div style='"+this.buttonStyle+"' id='Button"+this.UID+"' name='Button"+this.UID+"' onclick='"+this.object+
				 ".clicked()' onmouseover='"+this.object+".mOver()' onmouseout='"+this.object+".mOut()'>"+
				 this.expandTxt+"</div>";
			
	this.frameCase = document.createElement("div");
	this.frameCase.innerHTML = inHtml;
	
	this.dObj.parentNode.insertBefore(this.frameCase,this.dObj);
	this.frameCase = document.getElementById("Frame"+this.UID);
	this.expandButton = document.getElementById("Button"+this.UID);
	this.frameCase.appendChild(this.dObj);
	
	this.heightMove = new genMotion("heightMove"+this.UID,this.frameCase,"height");
	this.heightMove.addTermEval(this.object+".finishMove()","collapsableTerm."+this.UID);
	this.heightMove.rate(this.rate);
	this.heightMove.acceleration(-500);
	
	return true;
}
	
	collapsable.prototype.mOver = function(){
		this.expandButton.style.color = this.hoverTextColor;
		this.expandButton.style.background = this.hoverColor;
		this.frameCase.style.border = "1px solid "+this.hoverColor;
		this.frameCase.style.borderBottom = "0px";
	}
	
	collapsable.prototype.mOut = function(){
		this.expandButton.style.color = this.defaultTextColor;
		this.expandButton.style.background = this.defaultColor;
		this.frameCase.style.border = "1px solid "+this.defaultColor;
		this.frameCase.style.borderBottom = "0px";
	}
	
	collapsable.prototype.toggleButton = function(){
		if(this.isClosed){
			this.expandButton.innerHTML = this.collapseTxt;
			this.isClosed = false;
		}
		else{
			this.expandButton.innerHTML = this.expandTxt;
			this.isClosed = true;
		}
	}
	
	collapsable.prototype.clicked = function(){
		if(this.letClick){
			this.letClick = false;
			if(this.isClosed){ this.heightMove.moveToFinal(this.getElementHeight(this.dObj)); }
			else{ this.heightMove.moveToFinal(this.cHeight); }
			this.toggleButton();
		}
	}
	
	collapsable.prototype.finishMove = function(){
		this.letClick = true;
	}
	
	collapsable.prototype.stopMove = function(){
		this.heightMove.terminate();
		this.letClick = true;
	}
	
	collapsable.prototype.setExpandText = function(str){
		this.expandTxt = str;
		if(this.isClosed){
			this.expandButton.innerHTML = this.expandTxt;
		}
	}
	
	collapsable.prototype.setCollapseText = function(str){
		this.collapseTxt = str;
		if(!this.isClosed){
			this.expandButton.innerHTML = this.collapseTxt;
		}
	}
	
	collapsable.prototype.hideBox = function(){
		this.frameCase.style.visibility = "hidden";
		this.expandButton.style.visibility = "hidden";
	}
	
	collapsable.prototype.showBox = function(){
		this.frameCase.style.visibility = "visible";
		this.expandButton.style.visibility = "visible";
	}
	
	collapsable.prototype.getElementHeight = function(element){
		var y = 0;
		if(element.offsetHeight){
			y = element.offsetHeight;
		}
		else if(element.clientHeight){
			y = element.clientHeight;
		}
		return y;
	}
	
	collapsable.prototype.setInHtml = function(str){
		if(typeof str == "string"){
			var newElem = document.createElement('span');
			newElem.innerHTML = str;
			if(newElem.firstChild == newElem.lastChild){
				newElem = newElem.firstChild;
			}
			this.setElement(newElem);
		}
	}
	
	collapsable.prototype.setElement = function(element){
		if(typeof element == "object" && element != null){
			this.frameCase.innerHTML = "";
			this.dObj = element;
			this.frameCase.appendChild(this.dObj);
		}
	}
	
	collapsable.prototype.setClosedHeight = function(newNum){
		if(typeof newNum == "number"){
			this.cHeight = newNum;
			this.frameCase.style.height = this.cHeight+"px";
		}
	}
	
	collapsable.prototype.setWidth = function(width){
		if(typeof width == "number"){
			this.frameCase.style.width = width+"px";
			this.expandButton.style.width = width+"px";
		}
	}
	
	collapsable.prototype.setRate = function(newRate){
		if(typeof newRate == "number"){
			this.rate = newRate;
		}
	}
	
	collapsable.prototype.setHoverColor = function(hexColor){
		if(typeof hexColor == "string"){
			this.hoverColor = hexColor;
		}
	}
	
	collapsable.prototype.setDefaultColor = function(hexColor){
		if(typeof hexColor == "string"){
			this.defaultColor = hexColor;
			this.expandButton.style.background = hexColor;
			this.frameCase.style.border = "1px solid "+hexColor;
			this.frameCase.style.borderBottom = "0px";
		}
	}
	
	collapsable.prototype.setDefaultTextColor = function(hexColor){
		if(typeof hexColor == "string"){
			this.defaultTextColor = hexColor;
			this.expandButton.style.color = hexColor;
		}
	}
	
	collapsable.prototype.setHoverTextColor = function(hexColor){
		if(typeof hexColor == "string"){
			this.hoverTextColor = hexColor;
		}
	}
	
	collapsable.prototype.setWidth = function(newWidth){
		if(typeof newWidth == "number"){
			this.frameCase.style.width = newWidth+"px";
			this.expandButton.style.width = (newWidth+2)+"px";
		}
	}
	
	collapsable.prototype.setButtonStyle = function(newStyle){
		if(typeof newStyle == "string"){
			this.expandButton.cssText = newStyle;
			this.defaultColor = this.expandButton.style.background;
			this.defaultTextColor = this.expandButton.style.color;
		}
	}
	
	collapsable.prototype.getButton = function(){
		return document.getElementById("Button"+this.UID);
	}
	
	collapsable.prototype.getFrame = function(){
		return document.getElementById("Frame"+this.UID);
	}
	
	collapsable.prototype.isOpen = function(){
		return !this.isClosed;
	}
	
	collapsable.prototype.getInnerHeight = function(){
		return this.getElementHeight(this.dObj);
	}
	
	collapsable.prototype.expand = function(){
		if(this.isClosed)
			this.clicked();
	}
	
	collapsable.prototype.collapse = function(){
		if(!this.isClosed)
			this.clicked();
	}
	
	collapsable.prototype.setOpen = function(){
		this.stopMove();
		this.frameCase.style.height = this.getElementHeight(this.dObj)+"px";
		if(this.isClosed){
			this.toggleButton();
		}
	}
	
	collapsable.prototype.setClosed = function(){
		this.stopMove();
		this.frameCase.style.height = this.cHeight+"px";
		if(!this.isClosed){
			this.toggleButton();
		}
	}
	
	collapsable.prototype.toggleBare = function(){
		if(!this.isBare){
			this.isBare = true;
			this.frameCase.style.border = "0px;";
			this.expandButton.style.display = "none";
		}
		else{
			this.isBare = false;
			this.frameCase.style.border = "1px solid "+this.defaultColor+";";
			this.expandButton.style.display = "block";
		}
	}