function animation(globalID, vSteps, vSpeed, transiteStep, oncomplete, onstart) {
	if (globalID == null)
		throw "globalID of the animation created should be defined";
	this.index = 0;
	this.steps = vSteps == null ? 15 : vSteps;
	this.speed = vSpeed == null ? 30 : vSpeed;
	this.step = transiteStep;
	this.onAnimateComplete = oncomplete;
	this.onAnimateStart = onstart;
	this.isPaused = false;
	this.isPlaying = false;
	this.reverse = false;

	this.makeStep = function () {
		if (this.isPaused)
			return;
		var goon = false;
		var inc = 1;
		if (this.reverse) {
			goon = this.index >= 0;
			inc = -1;
		}
		else {
			goon = this.index <= this.steps;
			inc = 1;
		}
		if (goon) {
			this.index += inc;
			this.step(this.index / this.steps);
			setTimeout(globalID + ".makeStep()", this.speed);
		}
		else {
			if (this.onAnimateComplete != null)
				this.onAnimateComplete();
			this.isPlaying = false;
		}
	};

	this.start = function (vSteps, vSpeed, vReverse) {
		if (vSteps != null)
			this.steps = vSteps;
		if (vSpeed != null)
			this.speed = vSpeed;
		if (vReverse != null)
			this.reverse = vReverse;
		this.index = this.reverse ? this.steps : 0;
		this.isPlaying = true;
		if (this.onAnimateStart != null)
			this.onAnimateStart();
		this.makeStep();
	}

	this.startFrom = function (percent) {
		this.isPlaying = true;
		var tmp = this.steps * percent;
		this.index = (tmp - tmp % 100) / 100;
		if (this.onAnimateStart != null)
			this.onAnimateStart();
		this.makeStep();
	};

	this.pause = function () {
		this.isPaused = true;
	};

	this.continueNext = function () {
		this.isPaused = false;
		if(this.isPlaying)
			this.makeStep();
	};

	this.stop = function () {
		this.isPaused = false;
		if(!this.isPlaying)
			return;
		if (this.onAnimateComplete != null)
			this.onAnimateComplete();
		this.index = steps + 1;
		this.isPlaying = false;
	};
}



function setOpace(el, value, filterindex) {
	if (filterindex >= 0) {
		if (el.filters != null) {
			var filter = el.filters[filterindex];
			if (filter == null)
				el.style.filter = "alpha(opacity = " + (value * 100) + ")";
			else
				filter.opacity = value * 100;
		}
		else
			el.style.opacity = value;
	}
	else
		el.style.opacity = value;
}

function fadeAnimation(globalID, element, steps, speed, onComplete, onStep) {
	this.anim = new animation(globalID + ".anim", steps, speed);
	if (element.length > 0) {
		this.anim.onAnimateStart = function () {
			for (var i = 0; i < element.length; i++) {
				element[i].style.visibility = "visible";
			}
		}
		this.anim.onAnimateComplete = function () {
			for (var i = 0; i < element.length; i++) {
				element[i].style.filter = "none";
			}
			if (onComplete != null)
				onComplete();
		}
		this.anim.step = function (mult) {
			for (var i = 0; i < element.length; i++) {
				setOpace(element[i], mult, 0);
			}
			if (onStep != null)
				onStep(mult);
		}
	}
	else {
		this.anim.onAnimateStart = function () {
			element.style.visibility = "visible";
		}
		this.anim.onAnimateComplete = function () {
			element.style.filter = "none";
			if (onComplete != null)
				onComplete();
		}
		this.anim.step = function (mult) {
			setOpace(element, mult, 0);
			if (onStep != null)
				onStep(mult);
		}
	}
	this.start = function (reverce) { this.anim.start(null, null, reverce); };
}