var Igel = new Class(
{
	// Set by initializing Class
	centerElement:	undefined,
	infoElement: undefined,
	canvasContainer: undefined,
	
	// Set or manipulate after initializing Class
	dimCenterElement: {},
	dimInfoElement: {},
	
	// private
	overWriteDimCenterElement: {width: undefined, height: undefined},
	overWriteDimInfoElement: {width: undefined, height: undefined},
	infoElementPosition: undefined,
	parentElement: undefined,
	dimParentElement: undefined,
	dimCanvasContainer: {},
	lineCoordinates: {start: {x:undefined, y:undefined}, end: {x:undefined, y:undefined}, tangens: undefined},
    
    initialize: function(centerElement, infoElement, canvasContainer, dimCenterElement, dimInfoElement)
    {
    	this.centerElement = centerElement;
    	if (dimCenterElement != undefined) this.overWriteDimCenterElement = dimCenterElement;
    	
    	this.infoElement = infoElement;
       	if (dimInfoElement != undefined) this.overWriteDimInfoElement = dimInfoElement;
       	
       	this.canvasContainer = canvasContainer;
    	this.parentElement = this.centerElement.getParent();
    	
    	this.setAllSizeAndPosition();
    },
    
    setAllSizeAndPosition: function ()
    {
       	this.getDimensionAndCoordinateParentElement();
    	this.setCanvasSizeAndPosition();
       	this.getDimensionAndCoordinateAllElement();
       	this.getCenterAllElement();
       	this.getPosition();
       	this.getTangensAllElement();
    	this.getLineCoordinates();
    },
    
    resetSizeAndPosition: function ()
    {
       	this.getDimensionAndCoordinateAllElement();
       	this.getCenterAllElement();
       	this.getPosition();
       	this.getTangensAllElement();
    	this.getLineCoordinates();
   },
    
    getDimensionAndCoordinateAllElement: function ()
    {
    	this.dimCenterElement = this.centerElement.getCoordinates(this.centerElement.getParent());
    	if (this.overWriteDimCenterElement.width != undefined || this.overWriteDimCenterElement.height != undefined)
    	{
    		this.dimCenterElement.width = (this.overWriteDimCenterElement.width != undefined) ? this.overWriteDimCenterElement.width : this.dimCenterElement.width;				// echte Containermaße sind falsche wg. Schatten und Spiegelung
    		this.dimCenterElement.height = (this.overWriteDimCenterElement.height != undefined) ? this.overWriteDimCenterElement.height : this.dimCenterElement.height;				// echte Containermaße sind falsche wg. Schatten und Spiegelung
    		this.dimCenterElement.right = this.dimCenterElement.left + this.dimCenterElement.width;
			this.dimCenterElement.bottom = this.dimCenterElement.top + this.dimCenterElement.height;
    	}
    	
    	this.dimInfoElement = this.infoElement.getCoordinates(this.infoElement.getParent());
    	if (this.overWriteDimInfoElement.width != undefined || this.overWriteDimInfoElement.height != undefined)
    	{
    		this.dimInfoElement.width = (this.overWriteDimInfoElement.width != undefined) ? this.overWriteDimInfoElement.width : this.overWriteDimInfoElement.width;				// echte Containermaße sind falsche wg. Schatten und Spiegelung
    		this.dimInfoElement.height = (this.overWriteDimInfoElement.height != undefined) ? this.overWriteDimInfoElement.height : this.overWriteDimInfoElement.height;				// echte Containermaße sind falsche wg. Schatten und Spiegelung
    		this.dimInfoElement.right = this.dimInfoElement.left + this.dimInfoElement.width;
			this.dimInfoElement.bottom = this.dimInfoElement.top + this.dimInfoElement.height;
    	}
    },
    
    getCenterAllElement: function ()
    {
    	this.dimCenterElement.centerX = this.dimCenterElement.left + (this.dimCenterElement.width / 2);
    	this.dimCenterElement.centerY = this.dimCenterElement.top + (this.dimCenterElement.height / 2);
    	
    	this.dimInfoElement.centerX = this.dimInfoElement.left + (this.dimInfoElement.width / 2);
    	this.dimInfoElement.centerY = this.dimInfoElement.top + (this.dimInfoElement.height / 2);
    },
    
    getTangensAllElement: function ()
    {
		switch (this.infoElementPosition)
		{
		case 'right-top': case 'left-bottom':
			this.dimCenterElement.tangens = (this.dimCenterElement.width / this.dimCenterElement.height);
			this.dimInfoElement.tangens = (this.dimInfoElement.width / this.dimInfoElement.height);
			break;
		case 'right-bottom': case 'left-top':
			this.dimCenterElement.tangens = (-1 * this.dimCenterElement.width / this.dimCenterElement.height);
			this.dimInfoElement.tangens = (-1 * this.dimInfoElement.width / this.dimInfoElement.height);
			break;
		}
		
		this.lineCoordinates.tangens = (this.dimInfoElement.centerX - this.dimCenterElement.centerX) / (this.dimCenterElement.centerY - this.dimInfoElement.centerY);
    },
    
    getDimensionAndCoordinateParentElement: function ()
    {
    	this.dimParentElement = this.parentElement.getCoordinates(this.parentElement.getParent());
    },
    
    getPosition: function ()
    {
 	   this.infoElementPosition  = (this.dimInfoElement.centerX < this.dimCenterElement.centerX) ? 'left-' : 'right-';
 	   this.infoElementPosition += (this.dimInfoElement.centerY < this.dimCenterElement.centerY) ? 'top' : 'bottom';
    },
    
    getLineCoordinates: function ()
    {
		this.lineCoordinates.start.x = this.dimCenterElement.centerX;
		this.lineCoordinates.start.y = this.dimCenterElement.centerY;
		this.lineCoordinates.end.x = this.dimInfoElement.centerX;
		this.lineCoordinates.end.y = this.dimInfoElement.centerY;
		
	
		switch (this.infoElementPosition)
		{
		case 'right-top': case 'left-bottom':
			this.dimCenterElement.tangens = (this.dimCenterElement.width / this.dimCenterElement.height);
			this.dimInfoElement.tangens = (this.dimInfoElement.width / this.dimInfoElement.height);
			break;
		case 'right-bottom': case 'left-top':
			this.dimCenterElement.tangens = (-1 * this.dimCenterElement.width / this.dimCenterElement.height);
			this.dimInfoElement.tangens = (-1 * this.dimInfoElement.width / this.dimInfoElement.height);
			break;
		}
		
		// Korrektur am CenterElement
		if (this.dimCenterElement.tangens > this.lineCoordinates.tangens)
		{
			switch (this.infoElementPosition)
			{
			case 'right-top':
				this.lineCoordinates.start.x += (this.dimCenterElement.height / 2) * this.lineCoordinates.tangens;
				this.lineCoordinates.start.y -= this.dimCenterElement.height / 2;
				break;
			case 'right-bottom':
				this.lineCoordinates.start.x += this.dimCenterElement.width / 2;
				this.lineCoordinates.start.y -= (this.dimCenterElement.width / 2) / this.lineCoordinates.tangens;
				break;
			case 'left-bottom':
				this.lineCoordinates.start.x -= (this.dimCenterElement.height / 2) * this.lineCoordinates.tangens;
				this.lineCoordinates.start.y += this.dimCenterElement.height / 2;
				break;
			case 'left-top':
				this.lineCoordinates.start.x -= this.dimCenterElement.width / 2;
				this.lineCoordinates.start.y += (this.dimCenterElement.width / 2) / this.lineCoordinates.tangens;
				break;
			}
		}
		else
		{
			switch (this.infoElementPosition)
			{
			case 'right-top':
				this.lineCoordinates.start.x += this.dimCenterElement.width / 2;
				this.lineCoordinates.start.y -= (this.dimCenterElement.width / 2) / this.lineCoordinates.tangens;
				break;
			case 'right-bottom':
				this.lineCoordinates.start.x -= (this.dimCenterElement.height / 2) * this.lineCoordinates.tangens;
				this.lineCoordinates.start.y += this.dimCenterElement.height / 2;
				break;
			case 'left-bottom':
				this.lineCoordinates.start.x -= this.dimCenterElement.width / 2;
				this.lineCoordinates.start.y += (this.dimCenterElement.width / 2) / this.lineCoordinates.tangens;
				break;
			case 'left-top':
				this.lineCoordinates.start.x += (this.dimCenterElement.height / 2) * this.lineCoordinates.tangens;
				this.lineCoordinates.start.y -= this.dimCenterElement.height / 2;
				break;
			}
		}
		
		// Korrektur am InfoElement
		if (this.dimInfoElement.tangens > this.lineCoordinates.tangens)
		{
			switch (this.infoElementPosition)
			{
			case 'right-top':
				this.lineCoordinates.end.x -= (this.dimInfoElement.height / 2) * this.lineCoordinates.tangens;
				this.lineCoordinates.end.y += this.dimInfoElement.height / 2;
				break;
			case 'right-bottom':
				this.lineCoordinates.end.x -= this.dimInfoElement.width / 2;
				this.lineCoordinates.end.y += (this.dimInfoElement.width / 2) / this.lineCoordinates.tangens;
				break;
			case 'left-bottom':
				this.lineCoordinates.end.x += (this.dimInfoElement.height / 2) * this.lineCoordinates.tangens;
				this.lineCoordinates.end.y -= this.dimInfoElement.height / 2;
				break;
			case 'left-top':
				this.lineCoordinates.end.x += this.dimInfoElement.width / 2;
				this.lineCoordinates.end.y -= (this.dimInfoElement.width / 2) / this.lineCoordinates.tangens;
				break;
			}
		}
		else
		{
			switch (this.infoElementPosition)
			{
			case 'right-top':
				this.lineCoordinates.end.x -= this.dimInfoElement.width / 2;
				this.lineCoordinates.end.y += (this.dimInfoElement.width / 2) / this.lineCoordinates.tangens;
				break;
			case 'right-bottom':
				this.lineCoordinates.end.x += (this.dimInfoElement.height / 2) * this.lineCoordinates.tangens;
				this.lineCoordinates.end.y -= this.dimInfoElement.height / 2;
				break;
			case 'left-bottom':
				this.lineCoordinates.end.x += this.dimInfoElement.width / 2;
				this.lineCoordinates.end.y -= (this.dimInfoElement.width / 2) / this.lineCoordinates.tangens;
				break;
			case 'left-top':
				this.lineCoordinates.end.x -= (this.dimInfoElement.height / 2) * this.lineCoordinates.tangens;
				this.lineCoordinates.end.y += this.dimInfoElement.height / 2;
				break;
			}
		}
    }, 
    
    setCanvasSizeAndPosition: function ()
    {
    	this.canvasContainer.setPosition({x: 0, y:0});
//    	this.canvasContainer.setProperties({width: this.dimParentElement.width, height: this.dimParentElement.height});
    	this.canvasContainer.setProperties({width: this.dimParentElement.width, height: 665});
    	this.canvasContainer.setStyles({'position': 'absolute'});
    	this.canvasContainer.toggle();
    },
    
    draw: function ()
    {
//alert('draw');
    	if (this.canvasContainer.getContext)
    	{
			var ctx = this.canvasContainer.getContext("2d");
			ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
			ctx.strokeStyle = "rgb(255,255,255)";    
			ctx.lineCap = "square";
			ctx.lineWidth = 3;
			ctx.beginPath();
			ctx.moveTo(Math.round(this.lineCoordinates.start.x), Math.round(this.lineCoordinates.start.y));
			ctx.lineTo(Math.round(this.lineCoordinates.end.x), Math.round(this.lineCoordinates.end.y));
			ctx.closePath();
			ctx.stroke();
    	}
    	else
    	{
    		this.draw.delay(500, this);
    	}
    },
    
    redraw: function ()
    {
    	this.resetSizeAndPosition();
		this.draw();
    }
});