function simpleTransformation(elem, start, stopval, step, accel, delay, callback1, callback2, callback3)
{
	var app = this;
	app.timer = null;
	app.currentValue = 0;
	app.currentStep = 0;

	app.elem = elem;
	app.start = (typeof start == 'undefined')? 0 : start;
	app.stopval = (typeof stopval == 'undefined')? 0 : stopval;
	app.step = (typeof step == 'undefined')? 10 : step;
	app.delay = (typeof delay == 'undefined' || delay < 1)? 25 : delay;
	app.accel = (typeof delay == 'undefined')? 1 : accel;
	app.callback1 = callback1;
	app.callback2 = callback2;
	app.callback3 = callback3;

	if (Math.abs(app.step) < 1) {
		app.step = (app.step < 0)? -1 : 1;
	}
	if (app.start < app.stopval && app.step < 0) app.step = -app.step;
	else if (app.stopval < app.start && app.step > 0) app.step = -app.step;

	app.getContainer = function()
	{
		return(app.elem);
	}

	app.nextFrame = function()
	{
		// Neue Blendwerte berechnen
		if (Math.abs(app.currentStep *app.accel) > 0.1) {
			app.currentStep = app.currentStep *app.accel;
		}

		/*
		if (app.accel != 0) {
			app.currentStep = app.currentStep +app.accel;
		}
		*/
		
		if ((app.currentStep > 0 && app.currentValue <= app.stopval)
			|| (app.currentStep < 0 && app.currentValue >= app.stopval))
		{
			app.currentValue += app.currentStep;
			if (app.currentStep > 0 && app.currentValue > app.stopval) app.currentValue = app.stopval;
			if (app.currentStep < 0 && app.currentValue < app.stopval) app.currentValue = app.stopval;
		}

		// Callbacks ausführen
		if (app.callback1) {
			app.callback1(app.elem, app.currentValue);
		}

		// Timer setzen
		if (app.currentValue != app.stopval) {
			app.timer = window.setTimeout(function() {
				app.nextFrame();
			}, app.delay);
		} else {
			app.stop();
		}
	}

	app.play = function()
	{
		// Timer löschen
		if (app.timer != null) window.clearTimeout(app.timer);

		// Blendwerte auf Initalwerte setzen
		app.currentValue = app.start;
		app.currentStep = app.step;

		// Erstes Callback ausführen
		if (app.callback1) {
			app.callback1(app.elem, app.currentValue);
		}

		// Abspielen
		app.timer = window.setTimeout(function() {
			app.nextFrame();
		}, app.delay);
	}

	app.stop = function()
	{
		// Timer löschen
		if (app.timer != null) window.clearTimeout(app.timer);

		// Und "End-Callback" aufrufen
		if (app.callback2) {
			app.callback2(app.elem);
		}
	}

	app.cancel = function()
	{
		// Timer löschen
		if (app.timer != null) window.clearTimeout(app.timer);

		// Drittes Callback aufrufen
		if (app.callback3) {
			app.callback3(app.elem);
		}
	}
}

function imageNavigation(containerId)
{
	var app = this;
	app.container = null;
	app.functions = new ly_functions();
	app.currentTransformation = null;

	app.init = function()
	{
		app.container = document.getElementById(containerId);

		if (app.container)
		{
			var nodes = app.functions.filterChildNodesRecursive(app.container, 'LI');
			for (var i = 0; i < nodes.length; i++)
			{
				app.functions.addEvent(nodes[i], 'mouseover', function()
				{
					if (app.currentTransformation != null) {
						//app.currentTransformation.cancel();
					}

					var sv = this.childNodes[0].offsetWidth;
					//console.debug('Startwert (1): ' + sv);
					app.currentTransformation = new simpleTransformation(
						this.childNodes[0],
						sv,
						252,
						15,
						0.9,
						20,
						function(elem, o) {
							elem.style['width'] = String(o) + 'px';
							elem.style['backgroundPosition'] = 'right top';
						},
						null,
						null
					);
					app.currentTransformation.play();
				} );

				app.functions.addEvent(nodes[i], 'mouseout', function()
				{
					if (app.currentTransformation != null) {
						app.currentTransformation.cancel();
					}

					var sv = this.childNodes[0].offsetWidth;
					//console.debug('Startwert (2): ' + sv);
					app.currentTransformation = new simpleTransformation(
						this.childNodes[0],
						sv,
						120,
						2,
						1.1,
						20,
						function(elem, o) {
							elem.style['width'] = String(o) + 'px';
						},
						null,
						null
					);
					app.currentTransformation.play();
				} );
			}
		}
	}

	app.functions.addEvent(window, 'load', app.init);
}

new imageNavigation('navigation');