// Copyright 2008 MSE-iT - Thomas Maierhofer
// All rights reserved

(function($) {
	$.fn.backgroundCanvas = function() {
	$(this).each(function() {
		var $this = $(this);
		//$this.css("background-color","transparent");
		//$this.css("border-color","transparent");

	if($.browser.msie ) {
		$this.wrapInner('<div class="jbgContentDiv" style="width:100%; height:100%; display:block; position:relative; z-index:2;"><\/div>');
		var divElement = document.createElement('div');
		divElement.className = "jbgCanvasDiv";
		divElement.style.position = "relative";
		divElement.style.display = "block";	 	            
		divElement.style.height = "0px";
		divElement.style.width = "0px";
		divElement.style.top = "0px";
		divElement.style.left = "0px";
		divElement.setAttribute("z-index", "0"); 

		var canvasElement = document.createElement('canvas');
		canvasElement.className = "jbgCanvas";
		canvasElement.style.height = "0px";
		canvasElement.style.width = "0px";
		canvasElement.style.position = "absolute";
		canvasElement.style.display = "block";
		canvasElement.style.top = "0px";
		canvasElement.style.left = "0px";
		//canvasElement.setAttribute("top", "0px");
		//canvasElement.setAttribute("left", "0px");
		canvasElement.setAttribute("z-index", "-1"); 

		canvasElement = G_vmlCanvasManager.initElement(canvasElement);
		$this.get(0).insertBefore(divElement,$this.get(0).firstChild);
		divElement.appendChild(canvasElement);
	} 	 
	else
	{
		$this.wrapInner('<div class="jbgContentDiv" style="width:100%; height:100%; display:block; position:relative; z-index:2;"><\/div>');
		$this.prepend('<div class="jbgCanvasDiv" style="display:block; position:relative; width:0px; height:0px;  z-index:0;">' 
			+ '<canvas class="jbgCanvas" style="width:0px; height:0px; z-index:-1;" ></canvas></div>');
		// $this.prepend('<div class="jbgCanvasDiv" style="display:block; position:relative; width:0px; height:0px; margin-bottom:0px; z-index:0;">' 
		// + '<canvas class="jbgCanvas" style="width:0px; height:0px; z-index:-1;" ></canvas></div>');
	 }	
	});	
	return this;
};


 $.fn.backgroundCanvasPaint=function( paintFkt ) {
	 $(this).each
		 ( function() {
			 var $this = $(this);
			 var $canvasDiv = $this.children(".jbgCanvasDiv");
			 var $canvas = $canvasDiv.children(".jbgCanvas");
			 var $content = $this.children(".jbgContentDiv");
			 if( $canvas.length == 0 ) return this;

			 var canvas = $canvas.get(0);
			 if(! $.browser.msie )   // Internet Explorer ignores bounding divs -> With/Height 0/0 is applicable, other browsers must adjust bounding elements 
			 {     
			 //  $content.css("width",'');
			 //  $content.css("height",'');
			 //  $content.css("height",'100%');
			 }
			 else
			 {
			 if( parseInt(jQuery.browser.version) < 7 )
			 {
				 $canvas.width('0px');
				 $canvas.height('0px');  
				 $canvasDiv.css("width",'0px');
				 $canvasDiv.css("height",'0px');

				 $canvasDiv.css("margin-bottom",'0px');
				 $canvasDiv.css("margin-right",'0px');

				 $content.css("width",'');
				 $content.css("height",'');


				 // $this.css("width","100%");
			 }

			 }

		 /*
				$canvasDiv.css("width","0px");
				$canvasDiv.css("height","0px");
				$canvasDiv.css("margin-bottom","0px");        

				$canvas.css("width","0px");
				$canvas.css("height","0px");
				*/

		 // $this.css("height",'');                        

		 var width = $this.innerWidth();
		 var height = $this.innerHeight();  

		 var outerWidth = $this.width();
		 var outerHeight = $this.height(); 

		 if(! $.browser.msie )   // Internet Explorer ignores bounding divs -> With/Height 0/0 is applicable, other browsers must adjust bounding elements 
		 {    
			 /*
					$content.css("width",outerWidth+'.4px');
					$content.css("height",outerHeight+'.4px');
					$canvasDiv.css("width",outerWidth+'.4px');
					$canvasDiv.css("height",outerHeight+'.4px');
					$canvasDiv.css("margin-right",'-'+outerWidth+'.4px');
					$canvasDiv.css("margin-bottom",'-'+outerHeight+'.4px');                
					*/    
			 // $this.css("width",outerWidth+'.4px');
			 // $this.css("height",outerHeight+'.4px');
			 /*
					$content.css("width",width+'.4px');
					$content.css("height",height+'.4px');

					$canvasDiv.css("width",width+'.4px');
					$canvasDiv.css("height",height+'.4px');
					$canvasDiv.css("margin-right",'-'+width+'.4px');
					$canvasDiv.css("margin-bottom",'-'+height+'.4px');
					*/

			 $canvas.width(width +'.4px');
			 $canvas.height(height + '.4px');
			 $canvas.css('position', 'absolute');
			 $canvasDiv.css('position', 'absolute');
			 // $canvasDiv.css("margin-right",'-'+width+'.4px');
			 // $canvasDiv.css("margin-bottom",'-'+height+'.4px');                
		 }
		 else
		 {
			 if( parseInt(jQuery.browser.version) < 7 )
			 {

				 $content.css("width",width+'.4px');
				 $content.css("height",height+'.4px');

				 $canvasDiv.css("margin-bottom",'-'+outerHeight+'.4px');
				 $canvasDiv.css("margin-right",'-'+outerWidth+'.4px');
				 $canvasDiv.css("width",outerWidth+'.4px');
				 $canvasDiv.css("height",outerHeight+'.4px');                    

			 }

		 }


		 if (canvas.getContext) 
		 {
			 canvas.width=width;
			 canvas.height = height; 

			 var ctx = canvas.getContext("2d");
			 paintFkt( ctx, width, height, canvas, $canvas, $canvasDiv, $content, $this );

		 }
		 else
		 {
			 alert("context not found")
		 } 



		 });

	 return this;
 };



 // Helper functions to paint background elements like rounded rects on canvas
 $.canvasPaint={
roundedRect: function(ctx,options){
							 options = jQuery.extend({
width: 0,
radius: 0,
border: 0,
stroke: false,
fill: true,
adjustRadius: true
}, options);

options = jQuery.extend({
x: 0,
y: 0,
height: options.width,
radiusTL: options.radius,
radiusTR: options.radius,
radiusBL: options.radius,
radiusBR: options.radius,
borderL: options.border,
borderR: options.border,
borderT: options.border,
borderB: options.border
}, options);            

/*
	 radius = Math.min(radius,height/2);
	 radius = Math.min(radius,width/2);
	 */



if( options.adjustRadius )
{
	options.radiusTL = Math.max( options.radiusTL - ((options.borderT + options.borderL) / 2), 0);
	options.radiusTR = Math.max( options.radiusTR - ((options.borderT + options.borderR) / 2), 0);
	options.radiusBL = Math.max( options.radiusBL - ((options.borderB + options.borderL) / 2), 0);
	options.radiusBR = Math.max( options.radiusBR - ((options.borderB + options.borderR) / 2), 0);

}


var x = options.x + options.borderL;
var y = options.y + options.borderT;
var width = options.width - options.borderL - options.borderR;
var height = options.height - options.borderT - options.borderB; 




var kappaRradiusTL = options.radiusTL * 0.3333;
var kappaRradiusTR = options.radiusTR * 0.3333;
var kappaRradiusBL = options.radiusBL * 0.3333;
var kappaRradiusBR = options.radiusBR * 0.3333;

ctx.beginPath();
ctx.moveTo(x,y+ options.radiusTL);              // left top corner
ctx.lineTo(x,y+height-options.radiusBL);        // left line to bottom  corner

ctx.bezierCurveTo(x,y+height-kappaRradiusBL, x+kappaRradiusBL,y+height, x+options.radiusBL,y+height); // left lower corner

ctx.lineTo(x+width-options.radiusBR,y+height); // lower line to right lower corner

ctx.bezierCurveTo(x+width-kappaRradiusBR,y+height,x+width,y+height-kappaRradiusBR,x+width,y+height-options.radiusBR); // right lower corner

ctx.lineTo(x+width,y+options.radiusTR); // right line to upper corner

ctx.bezierCurveTo(x+width,y+kappaRradiusTR,x+width-kappaRradiusTR,y,x+width-options.radiusTR,y); // right upper corner

ctx.lineTo(x+options.radiusTL,y); // top line to left corner

ctx.bezierCurveTo(x+kappaRradiusTL,y,x,y+kappaRradiusTL,x,y+options.radiusTL); // left upper corner

if( options.stroke )
	ctx.stroke();

if( options.fill )
	ctx.fill();
	},


	// draws a tab with round corners 
roundTab: function(ctx,options){
						options = jQuery.extend({
x: 0,
y: 0,
width: 0,
radiusLeft: 0,
radiusRight: 0,
bottomRadiusLeft: 0,
bottomRadiusRight: 0,
offsetLeft: 0,
offsetRight: 0,             
border: 0,
stroke: false,
fill: true,
adjustRadius: true
}, options);

options = jQuery.extend({
height: options.width
}, options);            

/*
	 radius = Math.min(radius,height/2);
	 radius = Math.min(radius,width/2);
	 */

if( options.adjustRadius )
{
	options.radiusLeft = options.radiusLeft - options.border;
	options.radiusRight = options.radiusRight - options.border;
	options.bottomRadiusLeft = options.bottomRadiusLeft - options.border;
	options.bottomRadiusRight = options.bottomRadiusRight - options.border;
}

var x = options.x + options.border;
var y = options.y + options.border;
var width = options.width - options.border - options.border;
var height = options.height - options.border;





var hypoLeft = Math.sqrt( (height * height) + (options.offsetLeft * options.offsetLeft) );
var hypoRight = Math.sqrt( (height * height) + (options.offsetRight * options.offsetRight) );


ctx.beginPath();
// Connection Point calc.
// ctx.moveTo(x,y+height); // Lower right corner

var xRadius = ( options.radiusLeft * options.offsetLeft ) / hypoLeft;
var yRadius = ( options.radiusLeft * height ) / hypoLeft;
var kappaRadius = options.radiusLeft * 0.3333;
var kappaXRadius = xRadius * 0.3333;
var kappaYRadius = yRadius * 0.3333;            
ctx.moveTo(x + options.offsetLeft - xRadius,y + yRadius ); // left line

ctx.bezierCurveTo(x + options.offsetLeft - kappaXRadius,y + kappaYRadius,    x + options.offsetLeft + kappaRadius,y,     x + options.offsetLeft + options.radiusLeft,y); // Left upper radius


var xRadius = ( options.radiusRight * options.offsetRight ) / hypoRight;
var yRadius = ( options.radiusRight * height ) / hypoRight;
var kappaRadius = options.radiusRight * 0.3333;
var kappaXRadius = xRadius * 0.3333;
var kappaYRadius = yRadius * 0.3333;             

ctx.lineTo(x + width  - options.offsetRight - options.radiusRight,y); // top line       

ctx.bezierCurveTo(x + width  - options.offsetRight - kappaRadius,y,
		x + width  - options.offsetRight + kappaXRadius,y + kappaYRadius,
		x + width  - options.offsetRight + xRadius,y + yRadius); // Right upper radius 




var xRadius = ( options.bottomRadiusRight * options.offsetRight ) / hypoRight;
var yRadius = ( options.bottomRadiusRight * height ) / hypoRight;
var kappaRadius = options.bottomRadiusRight * 0.3333;
var kappaXRadius = xRadius * 0.3333;
var kappaYRadius = yRadius * 0.3333;               

ctx.lineTo(x + width - xRadius, y+height - yRadius); // right line
ctx.bezierCurveTo(x + width  - kappaXRadius, y+height - kappaYRadius,
		x + width +  kappaRadius, y+height,
		x + width +  options.bottomRadiusRight, y+height); // right lower radius

var xRadius = ( options.bottomRadiusLeft * options.offsetLeft ) / hypoLeft;
var yRadius = ( options.bottomRadiusLeft * height ) / hypoLeft;
var kappaRadius = options.bottomRadiusLeft * 0.3333;
var kappaXRadius = xRadius * 0.3333;
var kappaYRadius = yRadius * 0.3333;               


ctx.lineTo(x - options.bottomRadiusLeft,y+height); // Lower right corner               

ctx.bezierCurveTo(x - kappaRadius, y+height,
		x + kappaXRadius, y+height-kappaYRadius,
		x + xRadius, y+height-yRadius ); // left lower radius

if( options.stroke )
	ctx.stroke();

if( options.fill )
	ctx.fill();
	}


};

})(jQuery)