(function($) {
		
	// where can be 'under' (default), 'over', 'unshift', 'push' 
	$.fn.canvas = function( where) { 	// reuse if where is not there
		//console.log( 'canvas, iterating DOM elements');
		$( this).each( function() {
			var $this = $( this);
			//console.log( 'canvas, working DOM element,', $this);
			
			var w = $this.width();
			var h = $this.height();
			//console.log( 'canvas, dimensions [w=' + w + ',h=' + h + ']');
			
			if ( ! where) where = 'under';
			//console.log( 'canvas, where to put is [' + where + ']');
			
			// first, remove all former canvas objects in this div
			$this.find( '.cnvsWrapper').remove();
			$this.find( '.cnvsCanvas').remove();
			var $canvas = $( '<canvas class="cnvsCanvas" style="position:absolute;top:0px;left:0px;width:100%;height:100%;" width="' + w + '" height="' + h + '"></canvas>');
			
			
			// if under or over, will have to wrap current contents
			if ( where == 'under' || where == 'over') { 
				$this.wrapInner( '<div class="cnvsWrapper" style="position:absolute;top:0px;left:0px;width:100%;height:100%;border:0px;padding:0px;margin:0px;"></div>');
			}
			if ( where == 'under' || where == 'unshift') {
				$this.prepend( $canvas);
			}
			if ( where == 'over' || where == 'push') {
				$this.append( $canvas);
			}
			
			// if in IE, initialize the canvas tag
			if ( $.browser.msie) {
				var canvas = G_vmlCanvasManager.initElement( $canvas.get( 0));
				$canvas = $(canvas);
			}
			
			this.cnvs = canvasObject( $canvas, w, h);
			return this;
		});
		return this;
	}
	$.fn.uncanvas = function() {
		$( this).each( function() {
			this.cnvs.getTag().remove();
			this.cnvs = null;
		});
		return this;
	}
	$.fn.hidecanvas = function() {
		$( this).each( function() {
			this.cnvs.getTag().hide();
		});
		return this;
	}
	$.fn.showcanvas = function() {
		$( this).each( function() {
			this.cnvs.getTag().show();
		});
		return this;
	}
	// call back with cnvs object, thus, allowing raw access
	$.fn.canvasraw = function( callback) {
		$( this).each( function() {
			if ( callback) eval( callback)( this.cnvs);
		});
	}
	// fills in the array with settings for each canvas
	// list( hash( 'width', 'height', 'tag' (jquery), 'context'))
	$.fn.canvasinfo = function( info) {
		$( this).each( function() {
			info[ info.length] = {};
			info[ info.length - 1].width = this.cnvs.w;
			info[ info.length - 1].height = this.cnvs.h;
			info[ info.length - 1].tag = this.cnvs.$tag;
			info[ info.length - 1].context = this.cnvs.c;
		});
	}
	
	// canvas operations (literaly the canvas functions)
	$.fn.style = function( style) {
		$( this).each( function() {
			this.cnvs.style( style);
			return this;
		});
		return this;
	}
	$.fn.beginPath = function() {
		$( this).each( function() {
			this.cnvs.beginPath();
			return this;
		});
		return this;
	}
	$.fn.closePath = function() {
		$( this).each( function() {
			this.cnvs.closePath();
			return this;
		});
		return this;
	}
	$.fn.stroke = function() {
		$( this).each( function() {
			this.cnvs.stroke();
			return this;
		});
		return this;
	}
	$.fn.fill = function() {
		$( this).each( function() {
			this.cnvs.fill();
			return this;
		});
		return this;
	}
	$.fn.moveTo = function( coord) {
		$( this).each( function() {
			this.cnvs.moveTo( coord);
			return this;
		});
		return this;
	}
	$.fn.arc = function( coord, settings, style) {
		$( this).each( function() {
			this.cnvs.arc( coord, settings, style);
			return this;
		});
		return this;
	}
	$.fn.arcTo = function( coord1, coord2, settings, style) {
		$( this).each( function() {
			this.cnvs.arcTo( coord1, coord2, settings, style);
			return this;
		});
		return this;
	}
	$.fn.bezierCurveTo = function( ref1, ref2, end, style) {
		$( this).each( function() {
			this.cnvs.bezierCurveTo( ref1, ref2, end, style); 
			return this;
		});
		return this;
	}
	$.fn.quadraticCurveTo = function( ref1, end, style) {
		$( this).each( function() {
			this.cnvs.quadraticCurveTo( ref1, end, style); 
			return this;
		});
		return this;
	}
	$.fn.clearRect = function( coord, settings) {
		$( this).each( function() {
			this.cnvs.clearRect( coord, settings); 
			return this;
		});
		return this;
	}
	$.fn.strokeRect = function( coord, settings, style) {
		$( this).each( function() {
			this.cnvs.fillRect( coord, settings, style); 
			return this;
		});
		return this;
	}
	$.fn.fillRect = function( coord, settings, style) {
		$( this).each( function() {
			this.cnvs.strokeRect( coord, settings, style); 
			return this;
		});
		return this;
	}
	$.fn.rect = function( coord, settings, style) {
		$( this).each( function() {
			this.cnvs.rect( coord, settings, style); 
			return this;
		});
		return this;
	}
	$.fn.lineTo = function( end, style) {
		$( this).each( function() {
			this.cnvs.lineTo( end, style); 
			return this;
		});
		return this;
	}
	
	// atomic operations
	$.fn.polygon = function( start, blocks, settings, style) {
		$( this).each( function() {
			this.cnvs.atomPolygon( start, blocks, settings, style);
		});
	}
	
	function canvasObject( $canvas, width, height) {
		var cnvs = {};
		cnvs.w = width;
		cnvs.h = height;
		cnvs.$tag = $canvas;
		cnvs.c = $canvas.get( 0).getContext( '2d');
		cnvs.laststyle = {		// default settings
			'fillStyle'					: 'rgba( 0, 0, 0, 0.2)',
			'strokeStyle'			: 'rgba( 0, 0, 0, 0.5)',
			'lineWidth'					: 5
		};
		
		// functions (all angles are in degrees)
		cnvs.getContext = function() { return this.c; }
		cnvs.getTag = function() { return this.$tag; }
		cnvs.deg2rad = function( deg) { 
			return 2 * 3.14159265 * ( deg / 360);
		}
		cnvs.style = function( style) {
			if ( style) this.laststyle = style;
			//console.log( 'cnvs.style, applying style,', this.laststyle);
			for ( var name in this.laststyle) this.c[ name] = this.laststyle[ name];
		}
		
		// raw canvas functions (see Apple reference)
		cnvs.beginPath = function() { this.c.beginPath(); }
		cnvs.closePath = function() { this.c.closePath(); }
		cnvs.stroke = function() { this.c.stroke(); }
		cnvs.fill = function() { this.c.fill(); }
		cnvs.moveTo = function( coord) { this.c.moveTo( coord[ 0], coord[ 1]); }
		cnvs.arc = function( coord, settings, style) { 
			// provide default settings
			settings = $.extend(
				{
					'radius'				: 50,
					'startAngle'		: 0,
					'endAngle'			: 360,
					'clockwise'		: true
				},
				settings
			);
			if ( style) this.style( style);
			this.c.arc( 
				coord[ 0], coord[ 1], settings.radius,
				this.deg2rad( settings.startAngle),
				this.deg2rad( settings.endAngle),
				settings.clockwise ? 1 : 0
			);
		}
		cnvs.arcTo = function( coord1, coord2, settings, style) { 
			// provide default settings
			settings = $.extend(
				{
					'radius'				: 50
				},
				settings
			);
			if ( style) this.style( style);
			this.c.arcTo(
				coord1[ 0], coord1[ 1], 
				coord2[ 0], coord2[ 1],
				settings.radius
			);
		}
		cnvs.bezierCurveTo = function( ref1, ref2, end, style) { 
			// provide default settings
			if ( style) this.style( style);
			this.c.bezierCurveTo(
				ref1[ 0], ref1[ 1],
				ref2[ 0], ref2[ 1],
				end[ 0], end[ 1]
			);
		}
		cnvs.quadraticCurveTo = function( ref1, end, style) { 
			// provide default settings
			if ( style) this.style( style);
			this.c.quadraticCurveTo(
				ref1[ 0], ref1[ 1],
				end[ 0], end[ 1]
			);
		}
		cnvs.clearRect = function( coord, settings, style) { 
			// provide default settings
			if ( ! coord) coord = [ 0, 0];
			settings = $.extend(
				{
					'width'			: this.w,
					'height'			: this.h
				},
				settings
			);
			this.c.clearRect(
				coord[ 0], coord[ 1], settings.width, settings.height
			);
		}
		cnvs.fillRect = function( coord, settings, style) { 
			// provide default settings
			settings = $.extend(
				{
					'width'			: 100,
					'height'			: 50
				},
				settings
			);
			if ( style) this.style( style);
			this.c.fillRect(
				coord[ 0], coord[ 1], settings.width, settings.height
			);
		}
		cnvs.strokeRect = function( coord, settings, style) { 
			// provide default settings
			settings = $.extend(
				{
					'width'			: 100,
					'height'			: 50
				},
				settings
			);
			if ( style) this.style( style);
			this.c.strokeRect(
				coord[ 0], coord[ 1], settings.width, settings.height
			);
		}
		cnvs.rect = function( coord, settings, style) { 
			// provide default settings
			settings = $.extend(
				{
					'width'			: 100,
					'height'			: 50
				},
				settings
			);
			if ( style) this.style( style);
			this.c.rect(
				coord[ 0], coord[ 1], settings.width, settings.height
			);
		}
		cnvs.lineTo = function( end, style) { 
			if ( style) this.style( style);
			this.c.lineTo( end[ 0], end[ 1]);
		}
		
		// extra (atomic) actions, fix some of canvas's shortcoming
		cnvs.path = function( blocks) {
			for ( var i = 0; i < blocks.length; i++) {
				var arg1 = null;
				var arg2 = null;
				var arg3 = null;
				var arg4 = null;
				if ( blocks[ i].length >= 2) arg1 = blocks[ i][ 1];
				if ( blocks[ i].length >= 3) arg2 = blocks[ i][ 2];
				if ( blocks[ i].length >= 4) arg3 = blocks[ i][ 3];
				if ( blocks[ i].length >= 5) arg4 = blocks[ i][ 4];
				if ( blocks[ i][ 0] == 'moveTo') this.moveTo( arg1);
				if ( blocks[ i][ 0] == 'arc') this.arc( arg1, arg2, arg3);
				if ( blocks[ i][ 0] == 'arcTo') this.arcTo( arg1, arg2, arg3, arg4);
				if ( blocks[ i][ 0] == 'bezierCurveTo') this.bezierCurveTo( arg1, arg2, arg3, arg4);
				if ( blocks[ i][ 0] == 'quadraticCurveTo') this.quadraticCurveTo( arg1, arg2, arg3);
				if ( blocks[ i][ 0] == 'lineTo') this.lineTo( arg1, arg2);
			}
		}
		cnvs.atomPolygon = function( start, blocks, settings, style) {
			settings = $.extend(
				{
					'fill'					: false,
					'stroke'			: true,
					'close'			: false
				},
				settings
			);
			this.style( style);
			if ( settings.stroke) {		// fill first
				this.beginPath();
				this.moveTo( start);
				this.path( blocks);
				if ( settings.close) {
					this.moveTo( start);
					this.closePath();
				}
				this.c.fillStyle = 'rgba( 0, 0, 0, 0)';
				this.stroke();
			}
			this.style( style);
			if ( settings.fill) {		// fill first
				this.beginPath();
				this.moveTo( start);
				this.path( blocks);
				if ( settings.close) {
					this.moveTo( start);
					this.closePath();
				}
				this.c.strokeStyle = 'rgba( 0, 0, 0, 0)';
				this.fill();
			}
			this.style( style);
		}
		
		return cnvs;
	}
	
})( jQuery)