/*
 *
 * @(#) $Id: animation.js,v 1.29 2012/12/27 06:12:20 mlemos Exp $
 *
 */

var ML;

if(ML === undefined)
{
	ML = { };
}

if(ML.Animation === undefined)
{
	ML.Animation = { };
}

if(ML.Animation.Utility === undefined)
{

ML.Animation.Utility =
{
	setOpacity: function(element, value)
	{
		element.style.opacity = element.style['-moz-opacity'] = element.style['-khtml-opacity'] = value;
		element.style.filter = 'alpha(opacity=' + Math.round(100*value) + ')';
		if(!element.currentStyle
		|| !element.currentStyle.hasLayout)
		{
			element.style.zoom = '100%';
		}
	},

	getElementPosition: function(element)
	{
		var position = { x: 0, y: 0};
		do
		{
			position.x += element.offsetLeft;
			position.y += element.offsetTop;
			element = element.offsetParent;
			if(!element)
			{
				return position;
			}
		}
		while(element.nodeName !== 'HTML');
		position.x += element.offsetLeft;
		position.y += element.offsetTop;
		return position;
	},

	getElementSize: function(element, inner)
	{
		if(inner)
		{
			if(element.innerWidth)
			{
				return { width: element.innerWidth, height: element.innerHeight };
			}
			if(element.clientWidth)
			{
				return { width: element.clientWidth, height: element.clientHeight };
			}
		}
		else
		{
			if(element.clip !== undefined)
			{
				return { width: element.clip.width, height: element.clip.height };
			}
		}
		return { width: element.offsetWidth, height: element.offsetHeight };
	},

	getWindowViewport: function()
	{
		var viewport;

		if(window.pageXOffset !== undefined)
		{
			viewport = { x: window.pageXOffset, y: window.pageYOffset };
		}
		else
		{
			if(document.documentElement
			&& document.documentElement.scrollLeft !== undefined)
			{
				viewport = { x: document.documentElement.scrollLeft, y: document.documentElement.scrollTop };
			}
			else
			{
				if(document.body)
				{
					viewport = { x: document.body.scrollLeft, y: document.body.scrollTop };
				}
				else
				{
					viewport = { x: 0, y: 0 };
				}
			}
		}
		if(window.innerHeight !== undefined)
		{
			viewport.width = window.innerWidth;
			viewport.height = window.innerHeight;
		}
		else
		{
			if(document.documentElement
			&& document.documentElement.clientHeight !== undefined)
			{
				viewport.width = document.documentElement.clientWidth;
				viewport.height = document.documentElement.clientHeight;
			}
			else
			{
				if(document.body)
				{
					viewport.width = document.body.clientWidth;
					viewport.height = document.body.clientHeight;
				}
				else
				{
					viewport.width = 0;
					viewport.height = 0;
				}
			}
		}
		return viewport;
	}
};

}

if(ML.Animation.Effects === undefined)
{
ML.Animation.Effects = {

	AppendContent: function(effect)
	{
		this.start = function()
		{
			var e = document.getElementById(effect.element);
			if(e)
			{
				e.innerHTML += effect.content;
			}
			else
			{
				if(this.debug)
				{
					alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
				}
			}
			return true;
		};
	},

	CancelAnimation: function(effect)
	{
		this.start = function()
		{
			var a, c;

			for(a = 0, c = 0; a<ML.Animation.animations.length; a++)
			{
				if(ML.Animation.animations[a] !== null
				&& this.animation.animation !== a
				&& ML.Animation.animations[a].definition.name
				&& ML.Animation.animations[a].definition.name === effect.animation)
				{
					ML.Animation.cancelAnimation(ML.Animation.animations[a]);
					c++;
				}
			}
			if(c === 0
			&& this.debug
			&& this.debug >= 2)
			{
				alert('Inexisting animation to cancel "' + effect.animation + '" of effect ' + this.animation.effect);
			}
			return true;
		};
	},

	Emphasize: function(effect)
	{
		this.context = null;
		this.angle = Math.PI / 6;
		this.angleGap = Math.PI / 48;
		this.underlineAngle = Math.PI / 90;
		this.lineWidth = (effect.lineWidth !== undefined ? effect.lineWidth : 4);
		this.opacity = (effect.opacity !== undefined ? effect.opacity : 0.5);
		this.strokeStyle = (effect.strokeStyle !== undefined ? effect.strokeStyle : '#0000ff');
		this.lastAngle = this.angle;
		this.lastStep = 0;

		function drawEllipse(context, x, y, w, h, start, end, anticlockwise)
		{
			var scale;

			if((w <= 0
			|| h <= 0)
			&& this.debug)
			{
				alert('Inexisting animation to cancel "' + effect.animation + '" of effect ' + this.animation.effect);
				return;
			}
			scale = h / w;
			context.save();
			context.scale(1, scale);
			context.beginPath();
			context.arc(x, y / scale, w, start, end, anticlockwise);
			context.restore();
			context.stroke();
		}
		
		this.start = function()
		{
			var canvas, e = document.getElementById(effect.element);

			if(e)
			{
				canvas = document.createElement('canvas');
				if(!canvas
				|| !canvas.getContext
				|| (this.context = canvas.getContext('2d')) === null)
				{
					if(this.debug)
					{
						alert('Canvas elements are not supported.');
					}
					return true;
				}
				if(effect.canvas !== undefined)
				{
					canvas.id = effect.canvas;
				}
				this.size = ML.Animation.Utility.getElementSize(e, false);
				if(effect.method === 'circle')
				{
					canvas.width = this.size.width / Math.cos(this.angle) + this.lineWidth;
					canvas.style.left = (this.size.width - canvas.width)/2 + 'px';
					this.size.width = canvas.width;
					canvas.height = this.size.height / Math.sin(this.angle) + this.lineWidth;
					canvas.style.top = (this.size.height - canvas.height)/2 + 'px';
					this.size.height = canvas.height;
					e.insertBefore(canvas, e.firstChild);
					this.lastAngle = -this.angle;
				}
				else
				{
					if(effect.method === 'underline'
					|| effect.method === 'double-underline')
					{
						canvas.width = this.size.width + this.lineWidth;
						canvas.style.left = (this.lineWidth / 2) + 'px';
						canvas.height = (1 - Math.cos(this.underlineAngle)) * this.size.width / Math.sin(this.underlineAngle) + this.lineWidth * 1.5;
						canvas.style.top = this.size.height;
						if(effect.method === 'double-underline')
						{
							canvas.height += this.lineWidth * 2;
						}
						this.size.height = this.size.width / Math.sin(this.underlineAngle) - this.lineWidth;
						e.insertBefore(canvas, e.firstChild);
						this.lastAngle = -Math.PI / 2 - this.underlineAngle;
					}
					else
					{
						if(this.debug)
						{
							alert('It was not specified a valid method for effect ' + this.animation.effect + ' "' + effect.type + '"');
						}
						return true;
					}
				}
				if(e.style.zIndex.length === 0)
				{
					e.style.zIndex = 0;
				}
				e.style.position = "relative";
				canvas.style.zIndex = parseInt(e.style.zIndex, 10) - 1;
				canvas.style.position = 'absolute';
				canvas.style.pointerEvents = 'none';
				ML.Animation.Utility.setOpacity(canvas, this.opacity);
				this.context.lineWidth = this.lineWidth;
				this.context.lineCap = 'round';
				this.context.strokeStyle = this.strokeStyle;
				return false;
			}
			if(this.debug)
			{
				alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
			}
			return true;
		};

		this.step = function()
		{
			var p, angle;

			p = (new Date().getTime() - this.startTime)/(this.duration*1000.0);
			if(p>1)
			{
				p = 1;
			}
			if(effect.method === 'circle')
			{
				angle = p * p * (-2 * Math.PI + this.angleGap) - this.angle;
				drawEllipse(this.context, this.size.width/2, this.size.height/2, this.size.width/2 - this.lineWidth, this.size.height/2 - this.lineWidth, this.lastAngle, angle, true);
				this.lastAngle = angle;
			}
			else
			{
				if(effect.method === 'underline')
				{
					angle = -Math.PI / 2 - (1 - p * p) * this.underlineAngle;
					drawEllipse(this.context, this.size.width + this.lineWidth / 2, this.size.height + this.lineWidth / 2, this.size.height, this.size.height, this.lastAngle, angle, false);
					this.lastAngle = angle;
				}
				else
				{
					if(effect.method === 'double-underline')
					{
						if(p <= 0.5)
						{
							angle = -Math.PI / 2 - (1 - 4 * p * p) * this.underlineAngle;
							drawEllipse(this.context, this.size.width + this.lineWidth / 2, this.size.height + this.lineWidth / 2, this.size.height, this.size.height, this.lastAngle, angle, false);
						}
						else
						{
							angle = -Math.PI / 2 - (1 - 4 * (p - 0.5) * (p - 0.5)) * this.underlineAngle;
							if(this.lastStep < 0.5)
							{
								drawEllipse(this.context, this.size.width + this.lineWidth / 2, this.size.height + this.lineWidth / 2, this.size.height, this.size.height, this.lastAngle, -Math.PI / 2, false);
								this.lastAngle = -Math.PI / 2 - this.underlineAngle;
							}
							drawEllipse(this.context, this.size.width + this.lineWidth / 2, this.size.height + this.lineWidth * 2.5, this.size.height, this.size.height, this.lastAngle, angle, false);
						}
						this.lastAngle = angle;
						this.lastStep = p;
					}
				}
			}
			return(p < 1);
		};
	},

	FadeIn: function(effect)
	{
		this.node = null;
		this.opacity = 0;

		this.start = function()
		{
			this.node = document.getElementById(effect.element);
			if(this.node)
			{
				this.opacity = 0;
				ML.Animation.Utility.setOpacity(this.node, this.opacity);
				if(effect.visibility === 'display')
				{
					this.node.style.display = 'block';
				}
				else
				{
					this.node.style.visibility = 'visible';
				}
				return false;
			}
			if(this.debug)
			{
				alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
			}
			return true;
		};

		this.step = function()
		{
			var p, opacity;

			p = (new Date().getTime() - this.startTime)/(this.duration*1000.0);
			if(p>1)
			{
				p = 1;
			}
			opacity = Math.round(p * ML.Animation.fadeStep) / ML.Animation.fadeStep;
			if(opacity !== this.opacity)
			{
				ML.Animation.Utility.setOpacity(this.node, this.opacity = opacity);
			}
			return (p < 1);
		};
	},

	FadeOut: function(effect)
	{
		this.node = null;
		this.opacity = 0;

		this.start = function()
		{
			this.node = document.getElementById(effect.element);
			if(this.node)
			{
				this.opacity = 1.0;
				ML.Animation.Utility.setOpacity(this.node, this.opacity);
				return false;
			}
			if(this.debug)
			{
				alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
			}
			return true;
		};

		this.step = function()
		{
			var p, opacity, step;

			p = (new Date().getTime() - this.startTime)/(this.duration*1000.0);
			if(p>1)
			{
				p = 1;
			}
			opacity = Math.round((1.0 - p) * ML.Animation.fadeStep) / ML.Animation.fadeStep;
			if(opacity !== this.opacity)
			{
				ML.Animation.Utility.setOpacity(this.node, this.opacity = opacity);
			}
			step = p < 1;
			if(!step)
			{
				if(effect.visibility === 'display')
				{
					this.node.style.display = 'none';
				}
				else
				{
					this.node.style.visibility = 'hidden';
				}
			}
			return step;
		};
	},

	Hide: function(effect)
	{
		this.start = function()
		{
			var e = document.getElementById(effect.element);
			if(e)
			{
				if(effect.visibility === 'display')
				{
					e.style.display = 'none';
				}
				else
				{
					e.node.style.visibility = 'hidden';
				}
			}
			else
			{
				if(this.debug)
				{
					alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
				}
			}
			return true;
		};
	},

	MakeVisible: function(effect)
	{
		this.startX = 0;
		this.startY = 0;

		this.start = function()
		{
			var viewport, e = document.getElementById(effect.element);
			if(e)
			{
				viewport = ML.Animation.Utility.getWindowViewport();
				this.startX = viewport.x;
				this.startY = viewport.y;
			}
			else
			{
				if(this.debug)
				{
					alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
				}
			}
			return false;
		};

		this.step = function()
		{
			var p, e, viewport, position, size, x, y, limit;

			e = document.getElementById(effect.element);
			viewport = ML.Animation.Utility.getWindowViewport();
			position = ML.Animation.Utility.getElementPosition(e);
			size = ML.Animation.Utility.getElementSize(e, false);
			x = viewport.x;
			limit = position.x + size.width - viewport.width;
			if(limit > x)
			{
				x = limit;
			}
			if(x > position.x)
			{
				x = position.x;
			}
			y = viewport.y;
			limit = position.y + size.height - viewport.height;
			if(limit > y)
			{
				y = limit;
			}
			if(y > position.y)
			{
				y = position.y;
			}
			if(x === viewport.x
			&& y === viewport.y)
			{
				return false;
			}
			p = (new Date().getTime() - this.startTime)/(this.duration*1000.0);
			if(p>1)
			{
				p = 1;
			}
			x = this.startX + Math.round((x - this.startX) * p * p);
			y = this.startY + Math.round((y - this.startY) * p * p);
			window.scrollTo(x, y);
			return (p !== 1);
		};
	},

	PrependContent: function(effect)
	{
		this.start = function()
		{
			var e = document.getElementById(effect.element);
			if(e)
			{
				e.innerHTML = effect.content + e.innerHTML;
			}
			else
			{
				if(this.debug)
				{
					alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
				}
			}
			return true;
		};
	},

	ReplaceContent: function(effect)
	{
		this.start = function()
		{
			var e = document.getElementById(effect.element);
			if(e)
			{
				e.innerHTML = effect.content;
			}
			else
			{
				if(this.debug)
				{
					alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
				}
			}
			return true;
		};
	},

	Show: function(effect)
	{
		this.start = function()
		{
			var e = document.getElementById(effect.element);
			if(e)
			{
				if(effect.visibility === 'display')
				{
					e.style.display = 'block';
				}
				else
				{
					e.style.visibility = 'visible';
				}
			}
			else
			{
				if(this.debug)
				{
					alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
				}
			}
			return true;
		};
	},

	SlideIn: function(effect)
	{
		this.node =
		this.parent =
		this.edge = 
		this.size = 
		this.oldEdge =
		this.oldPosition = null;

		this.start = function()
		{
			var size;

			this.node = document.getElementById(effect.element);
			if(this.node)
			{
				this.parent = document.createElement('div');
				this.parent.style.overflow = 'hidden';
				this.node.style.display = 'block';
				size = ML.Animation.Utility.getElementSize(this.node, false);
				switch(effect.edge)
				{
					case 'top':
						this.edge = this.size = size.height;
						this.oldEdge = this.node.style.bottom;
						this.node.style.bottom = this.edge + 'px';
						this.parent.style.height = '0';
						break;

					case 'bottom':
						this.edge = this.size = size.height;
						this.oldEdge = this.node.style.top;
						this.node.style.top = this.edge + 'px';
						this.parent.style.height = '0';
						break;

					case 'left':
						this.edge = this.size = size.width;
						this.oldEdge = this.node.style.right;
						this.node.style.right = this.edge + 'px';
						this.parent.style.width = '0';
						break;

					case 'right':
						this.edge = this.size = size.width;
						this.oldEdge = this.node.style.left;
						this.node.style.left = this.edge + 'px';
						this.parent.style.width = '0';
						break;

					default:
						if(this.debug)
						{
							alert('Invalid ' + effect.type + ' effect edge "' + effect.edge);
							this.parent = null;
							return true;
						}
				}
				this.oldPosition = this.node.style.position;
				this.node.style.position = 'relative';
				this.node.parentNode.insertBefore(this.parent, this.node);
				this.node.parentNode.removeChild(this.node);
				this.parent.appendChild(this.node);
				return false;
			}
			if(this.debug)
			{
				alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
			}
			return true;
		};

		this.step = function()
		{
			var p, edge, step;

			p = (new Date().getTime() - this.startTime)/(this.duration*1000.0);
			if(p>1)
			{
				p = 1;
			}
			edge = Math.round(this.size * (1 - p * p));
			if(edge !== this.edge)
			{
				this.edge = edge;
				switch(effect.edge)
				{
					case 'top':
						this.node.style.bottom = this.edge + 'px';
						this.parent.style.height = (this.size - this.edge) + 'px';
						break;

					case 'bottom':
						this.node.style.top = this.edge + 'px';
						this.parent.style.height = (this.size - this.edge) + 'px';
						break;

					case 'left':
						this.node.style.right = this.edge + 'px';
						this.parent.style.width = (this.size - this.edge) + 'px';
						break;

					case 'right':
						this.node.style.left = this.edge + 'px';
						this.parent.style.width = (this.size - this.edge) + 'px';
						break;
				}
			}
			step = (p < 1);
			if(!step)
			{
				this.parent.removeChild(this.node);
				this.parent.parentNode.insertBefore(this.node, this.parent);
				switch(effect.edge)
				{
					case 'top':
						this.node.style.bottom = this.oldEdge;
						break;

					case 'bottom':
						this.node.style.top = this.oldEdge;
						break;

					case 'left':
						this.node.style.right = this.oldEdge;
						break;

					case 'right':
						this.node.style.left = this.oldEdge;
						break;
				}
				this.node.style.position = this.oldPosition;
				this.parent.parentNode.removeChild(this.parent);
				this.parent = null;
			}
			return step;
		};
	},

	SlideOut: function(effect)
	{
		this.node =
		this.parent =
		this.edge = 
		this.size = 
		this.oldEdge =
		this.oldPosition = null;

		this.start = function()
		{
			var size;

			this.node = document.getElementById(effect.element);
			if(this.node)
			{
				this.parent = document.createElement('div');
				this.parent.style.overflow = 'hidden';
				this.node.style.display = 'block';
				size = ML.Animation.Utility.getElementSize(this.node, false);
				switch(effect.edge)
				{
					case 'top':
						this.parent.style.height = this.edge = this.size = size.height;
						this.oldEdge = this.node.style.bottom;
						this.node.style.bottom = this.edge + 'px';
						break;

					case 'bottom':
						this.parent.style.height = this.edge = this.size = size.height;
						this.oldEdge = this.node.style.top;
						this.node.style.top = this.edge + 'px';
						break;

					case 'left':
						this.parent.style.width = this.edge = this.size = size.width;
						this.oldEdge = this.node.style.right;
						this.node.style.right = this.edge + 'px';
						break;

					case 'right':
						this.parent.style.width = this.edge = this.size = size.width;
						this.oldEdge = this.node.style.left;
						this.node.style.left = this.edge + 'px';
						break;

					default:
						if(this.debug)
						{
							alert('Invalid ' + effect.type + ' effect edge "' + effect.edge);
							this.parent = null;
							return true;
						}
				}
				this.oldPosition = this.node.style.position;
				this.node.style.position = 'relative';
				this.node.parentNode.insertBefore(this.parent, this.node);
				this.node.parentNode.removeChild(this.node);
				this.parent.appendChild(this.node);
				return false;
			}
			if(this.debug)
			{
				alert('Inexisting element "' + effect.element + '" of effect ' + this.animation.effect + ' "' + effect.type + '"');
			}
			return true;
		};

		this.step = function()
		{
			var p, edge, step;

			p = (new Date().getTime() - this.startTime)/(this.duration*1000.0);
			if(p>1)
			{
				p = 1;
			}
			edge = Math.round(this.size * p * p);
			if(edge !== this.edge)
			{
				this.edge = edge;
				switch(effect.edge)
				{
					case 'top':
						this.node.style.bottom = this.edge + 'px';
						this.parent.style.height = (this.size - this.edge) + 'px';
						break;

					case 'bottom':
						this.node.style.top = this.edge + 'px';
						this.parent.style.height = (this.size - this.edge) + 'px';
						break;

					case 'left':
						this.node.style.right = this.edge + 'px';
						this.parent.style.width = (this.size - this.edge) + 'px';
						break;

					case 'right':
						this.node.style.left = this.edge + 'px';
						this.parent.style.width = (this.size - this.edge) + 'px';
						break;
				}
			}
			step = (p < 1);
			if(!step)
			{
				this.parent.removeChild(this.node);
				this.parent.parentNode.insertBefore(this.node, this.parent);
				switch(effect.edge)
				{
					case 'top':
						this.node.style.bottom = this.oldEdge;
						break;

					case 'bottom':
						this.node.style.top = this.oldEdge;
						break;

					case 'left':
						this.node.style.right = this.oldEdge;
						break;

					case 'right':
						this.node.style.left = this.oldEdge;
						break;
				}
				this.node.style.position = this.oldPosition;
				this.parent.parentNode.removeChild(this.parent);
				this.parent = null;
				this.node.style.display = 'none';
			}
			return step;
		};
	},

	Wait: function(effect)
	{
		this.start = function()
		{
			return false;
		};

		this.step = function()
		{
			return (new Date().getTime() - this.startTime < this.duration*1000.0);
		};
	}

};

ML.Animation.registerEffects = function(name, effects)
{
	if(ML.Animation.Effects[name] !== undefined)
	{
		return false;
	}
	ML.Animation.Effects[name] = effects;
	return true;
};

}

if(ML.Animation.Animate === undefined)
{
ML.Animation.animations = [];
ML.Animation.running = 0;
ML.Animation.poll = null;
ML.Animation.frameRate = 120;
ML.Animation.fadeStep = 100;
ML.Animation.defaultDuration = 1;

ML.Animation.cancelAnimation = function(animation)
{
	ML.Animation.animations[animation.animation] = null;
	if(--ML.Animation.running === 0)
	{
		clearInterval(ML.Animation.poll);
		ML.Animation.poll = null;
	}
};

ML.Animation.Animate = function()
{
	var advanceAnimation,
		stepEffects,
		startEffect;

	advanceAnimation = function(animation)
	{
		animation.running = false;
		if(++animation.effect < animation.definition.effects.length)
		{
			startEffect(animation);
		}
		else
		{
			ML.Animation.cancelAnimation(animation);
		}
	};

	stepEffects = function()
	{
		var a, animation, effect, step;

		for(a = 0; a<ML.Animation.animations.length; a++)
		{
			if(ML.Animation.animations[a] !== null
			&& ML.Animation.animations[a].running)
			{
				animation = ML.Animation.animations[a];
				effect = animation.definition.effects[animation.effect];
				step = effect.effect.step();
				if(!step)
				{
					advanceAnimation(animation);
				}
			}
		}
	};

	startEffect = function(animation)
	{
		var effect = animation.definition.effects[animation.effect],
			type = effect.type,
			advance, e, timeout;

		if(ML.Animation.Effects[type] === undefined)
		{
			if(animation.definition.debug)
			{
				alert('Unsupported animation type "' + type + '"');
			}
			advance = true;
		}
		else
		{
			e = effect.effect = new ML.Animation.Effects[type](effect);
			e.animation = animation;
			e.debug = animation.definition.debug;
			e.startTime = new Date().getTime();
			e.duration = (effect.duration === undefined ? ML.Animation.defaultDuration : effect.duration);
			advance = e.start();
		}
		if(advance)
		{
			effect.effect = null;
			advanceAnimation(animation);
		}
		else
		{
			if(ML.Animation.poll === null)
			{
				timeout = 1000 / ML.Animation.frameRate;
				ML.Animation.poll = setInterval(stepEffects, timeout < 1 ? 1 : timeout);
			}
			animation.running = true;
		}
	};

	this.addAnimation = function(animation)
	{
		var a = ML.Animation.animations.length;

		ML.Animation.animations[a] = { definition: animation, animation: a, effect: 0, running: false };
		ML.Animation.running++;
		startEffect(ML.Animation.animations[a]);
		return a;
	};
};

}