var titleColor = 100;		// final colour of panel title : rgb(titleColor,titleColor,titleColor)
var textColor = 0;			// final colour of panel text : rgb(textColor,textColor,textColor)
var movingDist = 100;		// number of pixels to move panel title upon selection
var movingEnd = 14;			// pixels from left margin to stop moving title
var movingTimeStep = 40;	// milliseconds between steps in moving title towards destination
var movingDecay = 0.95;		// closer to 1 moves slower, closer to 0 moves quicker

var movingStart = movingDist+movingEnd;
var visiblePanel = '';
var moving = false;

// displays a panel by sliding the title across and fading the body in from white
function slidePanel(name) {
	if (visiblePanel) {
		getElementStyle(visiblePanel).visibility = 'hidden';
		getElementStyle(visiblePanel+'Title').visibility = 'hidden';
	}
	visiblePanel = name;
	var es = getElementStyle(name);
	var est = getElementStyle(name+'Title');
	es.visibility = 'hidden';
	es.color = "white";
	es.left = movingEnd+"pt";
	es.visibility = 'visible';
	est.visibility = 'hidden';
	est.color = "white";
	est.left = movingStart+"pt";
	est.visibility = 'visible';
	setTimeout("movePanel()",movingTimeStep);
}

// returns the style element for a given document element
function getElementStyle(name) {
	return document.getElementById(name).style;
}

// moves a panel towards its destination
function movePanel() {
	var es = getElementStyle(visiblePanel);
	var est = getElementStyle(visiblePanel+'Title');
	var left = parseInt(est.left);
	if (left > movingEnd) {
		es.color = getColor(left-movingEnd,textColor);
		est.left = movingEnd+(left-movingEnd)*movingDecay+"pt";
		est.color = getColor(left-movingEnd,titleColor);
		setTimeout("movePanel()",movingTimeStep);
	}
	else {
		es.color = getColor(0,textColor);
		est.left = movingEnd+"pt";
		est.color = getColor(0,titleColor);
	}
}

// calculates the rgb colour based on the x position of the title
function getColor(x,dc) {
	var c = x/movingDist * (255-dc) + dc;
	return "rgb("+c+","+c+","+c+")";
}