var FLYOUT_WIDTH = 181;
var ANIMATION_STEP = 30;
var ANIMATION_DELAY = 10;
var FLYOUT_COUNT = 3;
var flyouts = new Array(FLYOUT_COUNT + 1);
flyouts[0] = "flyout_empty";
flyouts[1] = "flyout_about";
flyouts[2] = "flyout_services";
flyouts[3] = "flyout_methodologies";

var _currentlyOpening;
var _currentLayerId;

function all_hidden(){
	for(i = 1; i < FLYOUT_COUNT + 1; i++){
		if(document.getElementById(flyouts[i]).style.visibility == "visible"){
			return false;
		}
	}
	return true;
}

function hide_all(){
	for(i = 1; i < FLYOUT_COUNT + 1; i++){
		document.getElementById(flyouts[i]).style.visibility = "hidden";
	}
}

function get_flyout_id(name){
	for(i = 1; i < FLYOUT_COUNT + 1; i++){
		if(flyouts[i] == name) return i;
	}
	return -1;
}

function animate_open(width){
	layer_style = document.getElementById(flyouts[0]).style;
	if(width < FLYOUT_WIDTH){
		layer_style.width = width + "px";
		layer_style.visibility = "visible";
		setTimeout("animate_open(" + (width + ANIMATION_STEP) + ")", ANIMATION_DELAY);
	}else{
		document.getElementById(flyouts[_currentLayerId]).style.visibility = "visible";
		layer_style.visibility = "hidden";
		_currentlyOpening = false;
	}
}

function animate_close(width){
	layer_style = document.getElementById(flyouts[0]).style;
	if(width > 0){
		layer_style.width = width + "px";
		layer_style.visibility = "visible";
		document.getElementById(flyouts[_currentLayerId]).style.visibility = "hidden";
		setTimeout("animate_close(" + (width - ANIMATION_STEP) + ")", ANIMATION_DELAY);
	}else{
		layer_style.visibility = "hidden";
	}
}

function show_layer(name){
	if(all_hidden()){
		_currentLayerId = get_flyout_id(name);
		if(!_currentlyOpening){
			_currentlyOpening = true;
			document.getElementById(flyouts[0]).style.marginTop = document.getElementById(name).style.marginTop;
			animate_open(0);
		}
	}else{
		hide_all();
		document.getElementById(name).style.visibility = "visible";
	}
}

function hide_layer(name){
	if(document.getElementById(name).style.visibility == "visible"){
		_currentLayerId = get_flyout_id(name);
		document.getElementById(flyouts[0]).style.marginTop = document.getElementById(name).style.marginTop;
		animate_close(FLYOUT_WIDTH);
	}
}