function Ebene(id)
{
	this.element = document.getElementById(id);

	this.getWidth=function()
	{
		return(parseInt(this.element.style.width));
	}

	this.getHeight=function()
	{
		return(parseInt(this.element.style.height));
	}

	this.setHeight=function(h)
	{
		this.element.style.height = arguments[0] + "px";
	}

	this.setWidth =function(h)
	{
		this.element.style.width = arguments[0] + "px";
	}
	return this;
}


Stretcher.prototype = new Ebene();
Stretcher.prototype.constructor = Stretcher;

function Stretcher(id)
{

	// Stretcher.prototype = new Ebene(id);
	// this.prototype = new Ebene(id);
	
	var me = this;

	me.element = document.getElementById(id); // Ÿberschreibt die nicht gesetzte Eingenschaft des Prototypen.
	me.i = 0;

	me.Schritte = 20;

	(arguments[1] == undefined) ? me.Min = 0  : me.Min = arguments[1];
	(arguments[2] == undefined) ? me.Max = 100 : me.Max = arguments[2];

	(me.getHeight() <= me.Min ) ? me.status = "closed" : me.status = "open";
	
	
	me.Start = 0;
	me.Ziel = 100;
	
	me.berechneNeuePosition = function()
	{
	

		var ease = 0.5 - (0.5 * Math.cos(Math.PI * (me.i/me.Schritte)));
		var pos = me.Start + (me.Ziel-me.Start)  * ease;
		
		return(pos);	
	}

   me.tick = function()
   {
	 

	 var vektor = Math.round(me.berechneNeuePosition());


	 me.setHeight(vektor);


     me.i++;
     if(me.i >= me.Schritte)
     {
    	 me.i=0;
		 me.setHeight(me.Ziel);
		 
			// alert(me.onFinished);
 		if (typeof(me.onFinished) != "undefined") 
 		{
			// call after the last frame is drawn
			var localThis = this;
			// alert("fertig - im objekt");
			setTimeout (function() { me.onFinished(); }, 20);
		}

		(me.Ziel == me.Max ) ? me.status = "open" : me.status = "closed";

		 window.clearInterval(me.aktiv);
     }

	// alert(me.i);

   }

	me.doNothing = function() {}

	me.stretch = function()
	{
		
		// Parameter 1: Zielhšhe in Pixel;
		// Parameter 2: Vollzugs-Callback;
		
		Ziel = arguments[0];
		
		(arguments[1]) ? me.onFinished = arguments[1] :	me.onFinished = me.doNothing;
		
		if (typeof(me.aktiv) != "undefined") 
		{
			      window.clearInterval(me.aktiv);
		}

		
		me.i = 0;
		
		me.Start = parseInt(me.getHeight());
		
	    me.Ziel = Ziel;
	    
		var localThis = this;
		me.tick();
		me.aktiv = setInterval (function() { me.tick(); }, 50);

	}
	
	me.open = function()
	{
		me.stretch(me.Max);
	}
	
	me.close = function()
	{
		me.stretch(me.Min);
	}
	
	me.toggle = function()
	{
		(me.getHeight() <= me.Min) ? me.open() : me.close();
	}


}