var steps = 11;
var xSteps;
var ySteps;
var stepWidth = 1/steps;
var cumulatedStep = 0;

var originalLeft;
var originalTop;

var originalHeight;
var originalWidth;

var flyoutNode;
var direction;
var originalFlyout = null;

/*
 * @param sender	Sender of the flyout event.
 * @param marker	Fragment of the id of the flyoutNode to be expanded.
 * 					Note, that it has to be on the same level as the sender.
 * @param direction		directionection of the flyout effect:
 * 					0: top left
 * 					1: top right
 * 					2: bottom right
 * 					3: bottom left
 * */
function expandElement(sender, marker, dir) {
	if (cumulatedStep!=1 && cumulatedStep!=0) {
		return;
	}
	direction = dir;
	var tmpOriginalFlyout;
	// get the parent and search the child that has to be expanded
	var flyoutParent = sender.parentNode;
	for(var i=flyoutParent.childNodes.length-1; i>=0; i--){
		if (flyoutParent.childNodes[i].nodeName=='#text') continue; 
		if (flyoutParent.childNodes[i].id.indexOf(marker) > 0) {
			tmpOriginalFlyout = flyoutParent.childNodes[i];
			break;
		}
	}
	
	if (originalFlyout!=tmpOriginalFlyout && originalFlyout!=null && (typeof tmpOriginalFlyout != 'undefined')) {
		// move concurrent expanded flyout out of the way
		originalFlyout.style.visibility = 'hidden';
		originalFlyout.style.display = 'none';
		originalFlyout = null;
		cumulatedStep = 0;
	}
	
	if (originalFlyout == null) {
		// explode
		originalFlyout = tmpOriginalFlyout;
		flyoutNode = originalFlyout.cloneNode(false);
		flyoutParent.insertBefore(flyoutNode,originalFlyout);
		with(flyoutNode.style){
			display = 'block';
			visibility = 'visible';
			height = '0px';
			width = '0px';
			opacity = '0';
			margin='0px';
		}
	
		originalFlyout.style.visibility = 'hidden';
		originalFlyout.style.display = 'block';
	
		originalHeight = originalFlyout.clientHeight;
		originalWidth = originalFlyout.clientWidth;
		originalLeft = originalFlyout.offsetLeft;
		originalTop = originalFlyout.offsetTop;
	
		xSteps = originalWidth/steps;
		ySteps = originalHeight/steps;
		
		explodeMarginal();
	} else {
		// implode
		flyoutNode = originalFlyout.cloneNode(false);
		flyoutNode.style.margin='0px';
		originalFlyout.parentNode.insertBefore(flyoutNode,originalFlyout);
		originalFlyout.style.visibility = 'hidden';
		originalFlyout.style.display = 'none';
		flyoutNode.style.opacity = '1';
		implodeMarginal();
	}
}


function explodeMarginal(){
	if(cumulatedStep < 1){
		plodeSizes();
		cumulatedStep += stepWidth;
		setTimeout('explodeMarginal()','20');
	} else {
		flyoutNode.nextSibling.style.visibility = 'visible';
		flyoutNode.parentNode.removeChild(flyoutNode);
		cumulatedStep = 1;
		flyoutNode = null;
	}
}

function implodeMarginal() {
	if(cumulatedStep > 0){
		plodeSizes();
		cumulatedStep -= stepWidth;
		setTimeout('implodeMarginal()','20');
	} else{
		flyoutNode.nextSibling.style.visibility = 'hidden';
		flyoutNode.parentNode.removeChild(flyoutNode);
		cumulatedStep = 0;
		flyoutNode = null;
		originalFlyout = null;
	}
}

function plodeSizes() {
	var factHeight = parseInt(originalHeight*cumulatedStep);
	var factWidth = parseInt(originalWidth*cumulatedStep);
	var factLeft = ((direction == 2) || (direction == 1)) ? originalLeft + originalWidth - factWidth + 'px' : originalLeft + 'px';
	var factTop =  ((direction == 3) || (direction == 2)) ? originalTop + originalHeight - factHeight + 'px' : originalTop + 'px';
	var factOpacitiy = Math.sin(cumulatedStep);
	with(flyoutNode.style){
		left = factLeft;
		top  = factTop;
		height = factHeight + 'px';
		width = factWidth + 'px';
		opacity = factOpacitiy + '';
		filter = 'Alpha(opacity='+ (factOpacitiy*100) +', finishopacity=0, style=0)';
	}
}