if (window.addEventListener) {
    window.addEventListener( "load", buildKoffer, false );
}

// Kofferecken mit Bezierpfad zeichnen
function koffer(
    context,
    line,
    fillColor,
    strokeColor,
    width, height, tanw, tanh, offs)
{
	this.context = context;
	this.context.lineWidth = line;
	this.context.moveTo(tanw + offs, offs);
	this.context.fillStyle = fillColor;
	this.context.strokeStyle = strokeColor;
	var ax = width + offs;
	var ay = height + offs;
	var x = width - tanw + offs;
    var y = height - tanh + offs;
    this.context.quadraticCurveTo( ax,  offs, x,         offs );
    this.context.quadraticCurveTo( ax,  offs, ax, tanh + offs );
    this.context.quadraticCurveTo( ax,    ay, ax,           y );
    this.context.quadraticCurveTo( ax,    ay, x,           ay );
    this.context.quadraticCurveTo( offs,  ay, tanw + offs, ay );
    this.context.quadraticCurveTo( offs,  ay, offs,         y );
    this.context.quadraticCurveTo( offs, offs, offs, tanh + offs );
    this.context.quadraticCurveTo( offs, offs, tanw + offs, offs );
    this.context.fill();
    this.context.stroke();
    return this.context;
}

function buildKoffer()
{
	var divs = document.getElementsByTagName('div'); 
	for (var i=0, cDiv; cDiv=divs[i]; i++) {
		if (/canvas/.test(cDiv.className)) {						// alle DIV-Elemente mit class="canvas"
			var style = window.getComputedStyle(cDiv, null);		// jetzt die Stile des DIV-Elements lesen und 
			var canvasW = style.getPropertyValue("width");			// daraus die Stile für das CANVAS bauen
			var canvasH = style.getPropertyValue("height");
			var pT = style.getPropertyValue('padding-top');
			var pR = style.getPropertyValue('padding-right');
			var pB = style.getPropertyValue('padding-bottom');
			var pL = style.getPropertyValue('padding-left');
			var bb = parseInt(style.getPropertyValue('border-top-width'));
			
			var bc = style.getPropertyValue('border-top-color');	// Farben des Rahmens um das DIV
			bc = bc.replace(/rgb/, 'rgba');							// und Hintergrundfarbe des DIVs
			bc = bc.replace(/\)/, ',1)');							// in rgba mit Transparenzwert
			var bgc = style.getPropertyValue('background-color');	// umwandeln
			bgc = bgc.replace(/rgb/, 'rgba');
			bgc = bgc.replace(/\)/, ',1)');

			var fragment = document.createDocumentFragment();
			var iDiv = document.createElement('div');				// ein neues DIV für die Inhalte 
			fragment.appendChild(iDiv);

			var elems = cDiv.childNodes;							// alle Elemente im DIV canvas in ein neues 
			for (var j=0; j<elems.length; j++) {					// inneres DIV bewegen
				var node = elems[j].cloneNode(true);
				iDiv.appendChild(node);
			}

			cDiv.innerHTML = ''; 									// Alte Inhalte löschen, Inhalte in neues DIV
			cDiv.appendChild(fragment);

			var Canvas = document.createElement('canvas');			// ein Canvas-Element erzeugen, anfängliche Höhe auf 0 setzen
			Canvas.setAttribute ('height',"0px");					// damit es das DIV nicht vergrößert und ebenfalls in das DIV-Element hängen
			cDiv.appendChild(Canvas);

			var cWidth = parseInt(canvasW) + parseInt(pR) + parseInt(pL) - bb;	// Pixel für Border abziehen, damit 
			var cHeight = parseInt(canvasH) + parseInt(pT) + parseInt(pB) - bb;	// der Canvas Platz für border hat.
		
			Canvas.setAttribute('width', cWidth + bb + "px");
			Canvas.setAttribute('height', cHeight + bb + "px");
			Canvas.setAttribute('padding-top', style.getPropertyValue('padding-top'));
			Canvas.setAttribute('padding-right', style.getPropertyValue('padding-right'));
			cDiv.setAttribute('style','background: none; border: none; padding: 0;');
			iDiv.setAttribute('style', 'position: absolute;  z-index: 1; padding: 15px;');
			iDiv.style.width = style.getPropertyValue("width");
			
			var context = Canvas.getContext("2d");
			context.beginPath();
			var ctx = new koffer(
   				context,
				bb,  // Rahmenbreite
				bgc, // Canvasfarbe, Opakt (1), Transparent (0)
				bc, // Rahmenfarbe, Opakt
				cWidth, cHeight, 10, 10, 2); // Breite, Höhe, Eckenpixel, Eckenpixel
			context.closePath();
		}
	}
}