//This script controls sliding of html elements
var registeredElements= new Array();

var SHOW=0;
var HIDE=1;
var HORIZONTAL=0;
var VERTICAL=1;

var LEFT=0;
var RIGHT=1;
var UP=2;
var DOWN=3;

var endSize;
var cSize;
var htmlElement;
var mode;
var interval=5; //higher number = more slide per interval
var speed=10; //higher number = slower animation

//each element must register so it's state can be managed
function registerElement(id, initialState, direction) {

    htmlElement = document.getElementById(id);
	var newElement;
	newElement = new RegisteredElement();
	newElement.id=id;
	newElement.currentState=initialState;
	if(direction == HORIZONTAL) {
		newElement.size = htmlElement.style.width.replace("px","");
	} else {
		newElement.size=htmlElement.style.height.replace("px","");
	}
	newElement.showDirection=direction;
	
	
	newElement.top 	  = htmlElement.style.top.replace("px","");
	newElement.bottom = htmlElement.style.bottom.replace("px", "");
	newElement.left   = htmlElement.style.left.replace("px", "");
	newElement.right  = htmlElement.style.right.replace("px","");
	
	
	if(initialState == HIDE) {
		htmlElement.style.height=0;
	}
	
	//store each element in an array to manage it's state
	registeredElements[id] = newElement;
}

function toggleSlider(id) {
	element = registeredElements[id];
	if(element === undefined) {
		alert("Element is unregistered.");
		return null;
	}
	element.toggleState();
	slide(id);
}

/*Given a direction, this slides the element given by the id
  id 		- element to move 
  direction - the direction given
*/
function slide(id) {
	element = registeredElements[id];
	switch(element.showDirection) {
		case HORIZONTAL:
			slideHorizontal(id);
			break;
		case UP:
			slideUp(id);
			break;
		case DOWN:
			slideDown(id);
			break;
	    default:
	    	//do nothing
	    	break;
	}
	element.commit();
}

function slideUp(id) {
	regElement = registeredElements[id];
	htmlElement = document.getElementById(id);
    mode=regElement.newState;
    
    if(mode == SHOW) {
    	endSize=element.size; //height
    	cSize = 0;
    } else {
    	endSize=0;
    	cSize=element.size;
    }
    doSlideUp();
}

function doSlideUp() {
//currently doesn't work if the top goes to negative number.
	if(isEnd()) {
		htmlElement.style.height=cSize;
		next = nextSize();
		top = htmlElement.style.top.replace("px","");
		
		htmlElement.style.top=eval(top - eval(next-cSize)) + "px";
		cSize = next;
		
        setTimeout("doSlideUp()", speed);
    }
}

function slideDown(id) {
	regElement = registeredElements[id];
	htmlElement = document.getElementById(id);
    mode=regElement.newState;
    if(mode == SHOW) {
    	endSize=element.size; //height
    	cSize = 0;
    } else {
    	endSize=0;
    	cSize=element.size;
    }
    doSlideDown();
}

function doSlideDown() {
	//alert(htmlElement.style.height + " -> " + cSize);
	if(isEnd()) {
		htmlElement.style.height=cSize;
		cSize = nextSize();
        setTimeout("doSlideDown()", speed);
    }
}

function slideHorizontal(id) {
	regElement = registeredElements[id];
	htmlElement = document.getElementById(id);
	mode = element.newState;
	
	if(regElement.newState == SHOW) {
		//the element is being shown
		endSize=element.size;
		cSize=0;
	} else {
		//hide the element
		endSize = 0;
		cSize = element.size;
	}
	
	setTimeout("doHorizontalSlide()", speed);
}



function doHorizontalSlide() {
	if(isEnd()) {
		htmlElement.style.width=cSize;
		cSize = nextSize();
        setTimeout("doHorizontalSlide()", speed);
    }
}

function isEnd() {
	if(mode == SHOW) {
		return (cSize <= endSize);
    } else {
    	return (cSize >= endSize);
    }
}

function nextSize() {
	if(mode == SHOW) {
		return eval(cSize+interval);
    } else {
    	return eval(cSize-interval);
    }
}



//Define a registered element
function RegisteredElement() {
	this.id="";
	this.showDirection=HORIZONTAL; //direction to slide when showing
	this.currentState=SHOW;  //current state... if currentState=showDirection, the object is showing
	this.newState=SHOW;      //used when changing state, used internally to decide if the action has been taken or not
	this.size=0;
	this.top=0;
	this.bottom=0;
	this.left=0;
	this.right=0;
	
	
	this.dump = function() {
		var output;
		output += "ID:\t" + this.id +"\n";
		output += "ShowDirection:\t" + this.showDirection +"\n";
		output += "CurrentState:\t" + this.currentState +"\n";
		output += "NewState:\t" + this.newState + "\n";
		output += "Size:\t" + this.size + "\n";
		
		return output;
	};
	
	this.toggleState = function() {
		if(this.newState == SHOW) {
			this.newState = HIDE;
	    } else {
	    	this.newState = SHOW;
	    }
	};
	
	
	
	this.commit = function() {
		this.currentState = this.newState;
	};
	
	this.rollback = function() {
		this.newState = this.currentState;
	};

}