luos/gulliver/js/ext/moocanvas.js

//MooCanvas, My Object Oriented Canvas Element. Copyright (c) 2007 Olmo Maldonado, <http://ibolmo.no-ip.info/sandbox/moocanvas/>, MIT Style License.
/*
Script: Canvas.js
	Contains the <Canvas> class.

Dependencies:
	MooTools, <http://mootools.net/>
		Element, and its dependencies

Author:
	Olmo Maldonado, <http://olmo-maldonado.com/>
	
Credits:
	Lightly based from Ralph Sommerer's work: <http://blogs.msdn.com/sompost/archive/2006/02/22/536967.aspx>
	Moderately based from excanvas: <http://excanvas.sourceforge.net/>
	Great thanks to Inviz, <http://inviz.ru/>, for his optimizing help.
	
License:
	MIT License, <http://en.wikipedia.org/wiki/MIT_License>
*/

/*
Class: Canvas
	Creates the element <canvas> and extends the element with getContext if not defined.

Arguments:
	id - The ID of the canvas element
	props - Optional properties for the canvas element, which also gets passed to the new Element
	
Example:
	> var cv = new Canvas('cv');
	> var ctx = cv.getContext('2d');
	> 
	> $(document.body).adopt(cv);
*/
var MooCanvas = new Class({
	
	initialize: function(id, props) {
		var el;
		if($type(id) == 'string') {
			props = $merge({width: 300, height: 150}, props, {'id': id});
			el = new Element('canvas', props);
			if(!el.getContext) {
				if(!CanvasRenderingContext2D.cssFixed) {
					document.createStyleSheet().cssText = 
						'canvas{display:inline-block;overflow:hidden;text-align:left;cursor:default;}' +
						'v\\:*{behavior:url(#default#VML)}' + 
						'o\\:*{behavior:url(#default#VML)}';
					CanvasRenderingContext2D.cssFixed = true;
				}
		
				el.set({
					styles: { 
						width: props.width,
						height: props.height,
						display: 'inline-block',
						overflow: 'hidden'
					},
					
					getContext: function() {
						this.context = this.context || new CanvasRenderingContext2D(el);
						return this.context;
					}
				});
				
			}
		}
		
		return el;
	}
	
});

/*
Class: CanvasRenderingContext2D
	Context2D class with all the Context methods specified by the WHATWG, <http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>
	
Arguments:
	el - Element requesting the context2D
*/
var CanvasRenderingContext2D = new Class({

	initialize: function(el) {
		this.parent = el;
		this.fragment = document.createDocumentFragment();
		this.element = new Element('div', {
			styles: {
				width: el.clientWidth || el.width,
				height: el.clientHeight || el.height,
				overflow: 'hidden',
				position: 'absolute'	
			}
		});
		this.fragment.appendChild(this.element);

		this.m = [
			[1, 0, 0],
			[0, 1, 0],
			[0, 0, 1]
		];
		this.rot = 0;
		this.state = [];
		this.path = [];
		this.delay = 30;
		this.max = 10;
		this.i = 0;
		
		// from excanvas, subpixel rendering.
		this.Z = 10;
		this.Z2 = this.Z / 2;
		this.arcScaleX = 1;
		this.arcScaleY = 1;
		this.currentX = 0;
		this.currentY = 0;
		
		
		this.miterLimit = this.Z * 1;
	},
	
	lineWidth: 1,
	strokeStyle: '#000',
	fillStyle: '#fff',
	globalAlpha: 1,
	globalCompositeOperation: 'source-over',
	lineCap: 'butt',
	lineJoin: 'miter',
	shadowBlur: 0,
	shadowColor: '#000',
	shadowOffsetX: 0,
	shadowOffsetY: 0
	
});

/*
Script: Path.js

Dependencies:
	Canvas.js
	
Author:
	Olmo Maldonado, <http://olmo-maldonado.com/>
	
Credits:
	Lightly based from Ralph Sommerer's work: <http://blogs.msdn.com/sompost/archive/2006/02/22/536967.aspx>
	Moderately based from excanvas: <http://excanvas.sourceforge.net/>
	Great thanks to Inviz, <http://inviz.ru/>, for his optimizing help.
	
License:
	MIT License, <http://en.wikipedia.org/wiki/MIT_License>
*/

CanvasRenderingContext2D.implement({
	
	/*
		A path has a list of zero or more subpaths. 
		Each subpath consists of a list of one or more points, 
		connected by straight or curved lines, and a flag indicating whether
		the subpath is closed or not. A closed subpath is one where the
		last point of the subpath is connected to the first point of
		the subpath by a straight line. Subpaths with fewer than two
		points are ignored when painting the path.
	*/

	/*
	Property:
		Empties the list of subpaths so that the context once again has zero
		subpaths.
	*/
	beginPath: function() {
		this.path = [];
		this.moved = false;
	},
	
	/*
	Property:
		Creates a new subpath with the specified point as its first
		(and only) point.
	*/
	moveTo: function(x, y) {
		this.path.push('m', this.coord(x, y));
		this.currentX = x;
		this.currentY = y;
		this.moved = true;
	},
	
	/*
	Property:
		Does nothing if the context has no subpaths.
		Otherwise, marks the last subpath as closed, create a new
		subpath whose first point is the same as the previous 
		subpath's first point, and finally add this new subpath to the
		path.
	*/
	closePath: function() {
		this.path.push('x');
	},
	
	/*
	Property:
		Method must do nothing if the context has no subpaths. Otherwise, 
		it must connect the last point in the subpath to the given point 
		(x, y) using a straight line, and must then add the given point 
		(x, y) to the subpath.
	*/
	lineTo: function(x, y) {
		this.path.push((this.moved ? 'l' : ','), this.coord(x, y));
		this.currentX = x;
		this.currentY = y;
		this.moved = false;
	},

	/*
	Property:
		Method must do nothing if the context has no subpaths. Otherwise, 
		it must connect the last point in the subpath to the given point 
		(x, y) using a straight line, and must then add the given point 
		(x, y) to the subpath.
	*/
	quadraticCurveTo: function(cpx, cpy, x, y) {
		var cx = 2 * cpx,
			cy = 2 * cpy;
			
		this.bezierCurveTo(
			(cx + this.currentX) / 3, 
			(cy + this.currentY) / 3, 
			(cx + x) / 3, 
			(cy + y) / 3, 
			x, 
			y
		);
	},
	
	/*
	Property:
		Method must do nothing if the context has no subpaths. Otherwise, 
		it must connect the last point in the subpath to the given point 
		(x, y) using a bezier curve with control points (cp1x, cp1y) and 
		(cp2x, cp2y). Then, it must add the point (x, y) to the subpath.
	*/
	bezierCurveTo: function(cp0x, cp0y, cp1x, cp1y, x, y) {
		this.path.push(' c ',
			this.coord(cp0x, cp0y), ",",
			this.coord(cp1x, cp1y), ",",
			this.coord(x, y)
		);
		
		this.currentX = x;
		this.currentY = y;
	},
	
	/*
	Property:
		Method must do nothing if the context has no subpaths. If the context
		does have a subpath, then the behaviour depends on the arguments and 
		the last point in the subpath.
		
		Let the point (x0, y0) be the last point in the subpath. Let The Arc 
		be the shortest arc given by circumference of the circle that has one 
		point tangent to the line defined by the points (x0, y0) and (x1, y1), 
		another point tangent to the line defined by the points (x1, y1) and 
		(x2, y2), and that has radius radius. The points at which this circle 
		touches these two lines are called the start and end tangent points 
		respectively.
		
		If the point (x2, y2) is on the line defined by the points (x0, y0) 
		and (x1, y1) then the method must do nothing, as no arc would satisfy 
		the above constraints.
		
		Otherwise, the method must connect the point (x0, y0) to the start 
		tangent point by a straight line, then connect the start tangent point 
		to the end tangent point by The Arc, and finally add the start and end 
		tangent points to the subpath.
		
		Negative or zero values for radius must cause the implementation to 
		raise an INDEX_SIZE_ERR exception.
	*/
	arcTo: function(x, y, w, h) {

	},
	
	/*
	Property:
		Method draws an arc. If the context has any subpaths, then the method 
		must add a straight line from the last point in the subpath to the 
		start point of the arc. In any case, it must draw the arc between the 
		start point of the arc and the end point of the arc, and add the start 
		and end points of the arc to the subpath. The arc and its start and 
		end points are defined as follows:
		
		Consider a circle that has its origin at (x, y) and that has radius 
		radius. The points at startAngle and endAngle along the circle's 
		circumference, measured in radians clockwise from the positive x-axis, 
		are the start and end points respectively. The arc is the path along 
		the circumference of this circle from the start point to the end point, 
		going anti-clockwise if the anticlockwise argument is true, and 
		clockwise otherwise.
		
		Negative or zero values for radius must cause the implementation to 
		raise an INDEX_SIZE_ERR exception.
	*/
	arc: function(x, y, rad, a0, a1, cw) {
		if(this.rot === 0) rad *= this.Z;
		
		var x0 = Math.cos(a0) * rad,
			y0 = Math.sin(a0) * rad,
			x1 = Math.cos(a1) * rad,
			y1 = Math.sin(a1) * rad;
			
		if (this.rot !== 0) {
			var da = Math.PI / 24;
			this.lineTo(x0 + x, y0 + y);
			if(cw) {
				if (a0 < a1) a0 += 2 * Math.PI;
				while(a0 - da > a1) this.lineTo(x + Math.cos(a0 -= da) * rad, y + Math.sin(a0) * rad);
			} else {
				if (a1 < a0) a1 += 2 * Math.PI;
				while(a0 + da < a1) this.lineTo(x + Math.cos(a0 += da) * rad, y + Math.sin(a0) * rad);
			}
			this.lineTo(x1 + x, y1 + y);
			return;
		}
		
		if (x0 == x1 && !cw) x0 += 0.125;
		
		var c = this.getCoords(x, y);
		this.path.push(cw ? 'at ' : 'wa ',
			Math.round(c.x - this.arcScaleX * rad) + ',' + Math.round(c.y - this.arcScaleY * rad),  ' ',
			Math.round(c.x + this.arcScaleX * rad) + ',' + Math.round(c.y + this.arcScaleY * rad),  ' ',
			this.coord(x0 + x - this.Z2, y0 + y - this.Z2), ' ',
			this.coord(x1 + x - this.Z2, y1 + y - this.Z2)
		);
	},

	/*
	Property:
		method must create a new subpath containing just the four points 
		(x, y), (x+w, y), (x+w, y+h), (x, y+h), with those four points 
		connected by straight lines, and must then mark the subpath as 
		closed. It must then create a new subpath with the point (x, y) 
		as the only point in the subpath.
		
		Negative values for w and h must cause the implementation to raise 
		an INDEX_SIZE_ERR exception.
	*/
	rect: function(x, y, w, h) {
		this.moveTo(x, y);
		this.lineTo(x + w, y);
		this.lineTo(x + w, y + h);
		this.lineTo(x, y + h);
		this.closePath();
	},
	
	/*
	Property:
		Method must fill each subpath of the current path in turn, using 
		fillStyle, and using the non-zero winding number rule. Open subpaths 
		must be implicitly closed when being filled (without affecting the 
		actual subpaths).
	*/
	fill: function() {
		this.stroke(true);
	},


	/*
	Property:
		Method must stroke each subpath of the current path in turn, using 
		the strokeStyle, lineWidth, lineJoin, and (if appropriate) miterLimit 
		attributes.
		
		Paths, when filled or stroked, must be painted without affecting the 
		current path, and must be subject to transformations, shadow effects, 
		global alpha, clipping paths, and global composition operators.
		
		The transformation is applied to the path when it is drawn, not when 
		the path is constructed. Thus, a single path can be constructed and 
		then drawn according to different transformations without recreating 
		the path. 
	*/
	
	stroke: function(fill) {
		if(!this.path.length) return;
		var a, color;
		if (fill) {
			a = [1000, '<v:fill ' + this.processColorObject(this.fillStyle) + '></v:fill>'];
		} else {
			color = this.processColor(this.strokeStyle);
			a = [10, 
			'<v:stroke ' +
				'endcap="' + ((this.lineCap == 'butt') ? 'flat' : this.lineCap) + '" ' +
				'joinstyle="' + this.lineJoin + '" ' +
				'color="' + color.color + '" ' +
				'opacity="' + color.opacity + '"' +
			'/>'];
		}
		this.element.insertAdjacentHTML('beforeEnd', 
			'<v:shape ' +
				'path="' + this.path.join('') + 'e" ' +
				'stroked="' + !fill + '" ' +
				(!fill ? ('strokeweight="' + 0.8 * this.lineWidth * this.m[0][0] + '" ') : '') +
				'filled="' + !!fill + '" ' +
				'coordsize="' + this.Z * a[0] + ',' +  this.Z * a[0] + '" ' +
				'style="width:' + a[0] + 'px; height:' + a[0] + 'px; position: absolute;">' +
				a[1] +
			'</v:shape>'
		);
		
		this.parent.appendChild(this.fragment);
		
		if(fill && this.fillStyle.img) this.element.getLast().fill.alignshape = false; // not sure why this has to be called explicitly
											 
		this.path = [];
	},

	/*
	Property:
		Method must create a new clipping path by calculating the intersection 
		of the current clipping path and the area described by the current path 
		(after applying the current transformation), using the non-zero winding 
		number rule. Open subpaths must be implicitly closed when computing the 
		clipping path, without affecting the actual subpaths.
		
		When the context is created, the initial clipping path is the rectangle 
		with the top left corner at (0,0) and the width and height of the 
		coordinate space. 
	*/
	clip: function() {

	},
	
	/*
	Property:
		Method must return true if the point given by the x and y coordinates 
		passed to the method, when treated as coordinates in the canvas' 
		coordinate space unaffected by the current transformation, is within 
		the area of the canvas that is inside the current path; and must 
		return false otherwise.
	*/
	isPointInPath: function(x, y) {
	
	},
	
	processColor: function(col) { //path
		var a = this.globalAlpha;	
		if (col.substr(0, 3) == 'rgb') {
			if (col.charAt(3) == "a") {
				a*= col.match(/([\d.]*)\)$/)[1];
			}
			
			col = col.rgbToHex();
		}
		return {
			color: col,
			opacity: a
		};
	},
	
	/* 
		If a gradient has no stops defined, then the gradient must be treated as a 
		solid transparent black. Gradients are, naturally, only painted where the 
		stroking or filling effect requires that they be drawn.
	*/
	processColorObject: function(obj) {
		var ret = '', col;
		if(obj.addColorStop) {
			ret += ((obj.r0) ? (
				'type="gradientradial" ' +
				'focusposition="0.2, 0.2" ' +
				'focussize="0.2, 0.2" '
			) : (
				'type="gradient" ' +
				'focus="0" ' +
				'angle="' + (180 + (180 * obj.angle(obj.x0, obj.y0, obj.x1, obj.y1) / Math.PI)) + '" '
			)) +
				'color="' + obj.col0.color + '" ' +
				'opacity="' + obj.col0.opacity * 100 + '%" ' +
				'color2="' + obj.col1.color + '" ' +
				'o:opacity2="' + obj.col1.opacity * 100 + '%" ' +
				'colors="';
			if(obj.stops) {
				for (var i = 0, l = obj.stops.length; i < l; i++) {
					ret += Math.round(100 * obj.stops[i][0]) + '% ' + obj.stops[i][1];
				}
			}
			ret +=
				'" ';
		} else if(obj.img) { //pattern
			ret +=
				'type="tile" ' +
				'src="' + obj.img.src + '" ';
		} else {
			col = this.processColor(obj);
			ret +=
				'color="' + col.color + '" ' +
				'opacity="' + col.opacity + '" ';
		}
		
		return ret;
	},
	
	getCoords: function(x, y) {
		var m = this.m;
		return {
			x: this.Z * (x * m[0][0] + y * m[1][0] + m[2][0]) - this.Z2, 
			y: this.Z * (x * m[0][1] + y * m[1][1] + m[2][1]) - this.Z2
		};
	},

	coord: function(x, y) {
		var m = this.m;
		return  [
			 Math.round(this.Z * (x * m[0][0] + y * m[1][0] + m[2][0]) - this.Z2), ',',
			 Math.round(this.Z * (x * m[0][1] + y * m[1][1] + m[2][1]) - this.Z2)
		].join('');
	}
});
/*
Script: Rects.js

Dependencies: 
	Canvas.js, Path.js

Author:
	Olmo Maldonado, <http://olmo-maldonado.com/>
	
Credits:
	Lightly based from Ralph Sommerer's work: <http://blogs.msdn.com/sompost/archive/2006/02/22/536967.aspx>
	Moderately based from excanvas: <http://excanvas.sourceforge.net/>
	Great thanks to Inviz, <http://inviz.ru/>, for his optimizing help.
	
License:
	MIT License, <http://en.wikipedia.org/wiki/MIT_License>
*/

CanvasRenderingContext2D.implement({
	
	/*
	Property: clearRect
		Clears the pixels in the specified rectangle.
		If height or width are zero has no effect.
		
		If no arguments, clears all of the canvas
		
		Currently, clearRect clears all of the canvas.
	 */
	clearRect: function(x, y, w, h) {
		//if((x <= 0) && (y <= 0) && ( x + w >= this.element.width) && (y + h >= this.element.height)){
			this.element.innerHTML = '';
		//} else {
		//	var f0 = this.fillStyle;
		//	this.fillStyle = '#fff';
		//	this.fillRect(x, y, w, h);
		//	this.fillStyle = f0;
		//}
	},
	
	/*
	Property: fillRect
		Paints the specified rectangle using fillStyle.
		If height or width are zero, this method has no effect.
	 */
	fillRect: function(x, y, w, h) {
		this.rect(x, y, w, h);
		this.fill();
	},
	
	/*
		Draws a rectangular outline of the specified size.
		If width or height are zero: ??
	 */
	strokeRect: function(x, y, w, h) {
		this.rect(x, y, w, h);
		this.stroke();
	}
	
});
/*
Script: Transform.js

Dependencies:
	Canvas.js

Author:
	Olmo Maldonado, <http://olmo-maldonado.com/>
	
Credits:
	Lightly based from Ralph Sommerer's work: <http://blogs.msdn.com/sompost/archive/2006/02/22/536967.aspx>
	Moderately based from excanvas: <http://excanvas.sourceforge.net/>
	Great thanks to Inviz, <http://inviz.ru/>, for his optimizing help.
	
License:
	MIT License, <http://en.wikipedia.org/wiki/MIT_License>
*/

CanvasRenderingContext2D.implement({
	/*
		The transformation matrix is applied to all drawing operations prior 
		to their being rendered. It is also applied when creating the clip region.
		*  The transformations must be performed in reverse order. For instance, 
		if a scale transformation that doubles the width is applied, followed 
		by a rotation transformation that rotates drawing operations by a 
		quarter turn, and a rectangle twice as wide as it is tall is then 
		drawn on the canvas, the actual result will be a square.
	*/

  	/*
  	Property: scale
		Method must add the scaling transformation described by the arguments 
		to the transformation matrix. The x argument represents the scale factor 
		in the horizontal direction and the y argument represents the scale 
		factor in the vertical direction. The factors are multiples.
	*/
	scale: function(x, y) {
		this.arcScaleX *= x;
		this.arcScaleY *= y;
		
		this.matMult([
			[x, 0, 0],
			[0, y, 0],
			[0, 0, 1]
		]);
	},
	
  	/*
  	Property: rotate
		Method must add the rotation transformation described by the argument 
		to the transformation matrix. The angle argument represents a clockwise 
		rotation angle expressed in radians.
	*/
	rotate: function(ang) {
		this.rot += ang;
		var c = Math.cos(ang),
			s = Math.sin(ang);
		
		this.matMult([
			[ c, s, 0],
			[-s, c, 0],
			[ 0, 0, 1]
		]);
	},
	
  	/*
  	Property: translate
		Method must add the translation transformation described by the arguments 
		to the transformation matrix. The x argument represents the translation 
		distance in the horizontal direction and the y argument represents the 
		translation distance in the vertical direction. The arguments are in 
		coordinate space units.
	*/
	translate: function(x, y) {
		this.matMult([
			[1, 0, 0],
			[0, 1, 0],
			[x, y, 1]
		]);
	},
	
  	/*
  	Property: transform
		Method must multiply the current transformation matrix with the matrix described
		by the inputs.
	*/
 	transform: function(m11, m12, m21, m22, dx, dy) {
		this.matMult([
			[m11, m21, dx],
			[m12, m22, dy],
			[  0,   0,  1]
		]);		
	},
  
  	/*
  	Property: setTransform
  		Method must reset the current transform to the identity matrix, and then invoke 
  		the transform method with the same arguments.
  	*/
	setTransform: function(m11, m12, m21, m22, dx, dy) {
		this.m = [
			[1, 0, 0],
			[0, 1, 0],
			[0, 0, 1]
		];
		
		this.transform(m11, m12, m21, m22, dx, dy);
	},
	
	/*
		Property: matMult
			Method to multiply 3x3 matrice. Currently takes input and multiplies against
			the transform matrix and saves the result to the transform matrix.
			
			This is an optimized multiplication method. Will only multiply if the input
			value is not zero. Thus, minimizing multiplications and additions.
	*/
	matMult: function(b) {
		var m = this.m,
			o = [
				[0, 0, 0], 
				[0, 0, 0], 
				[0, 0, 0]
			];
		
		for(var i = 0; i < 3; i++) {
			if(b[0][i] !== 0) this.sum(o[0], this.mult(b[0][i], m[i]));
			if(b[1][i] !== 0) this.sum(o[1], this.mult(b[1][i], m[i]));
			if(b[2][i] !== 0) this.sum(o[2], this.mult(b[2][i], m[i]));
		}
		
		this.m = [o[0], o[1], o[2]];
	},

	mult: function(x, y) {
		return [x * y[0], x * y[1], x * y[2]];	
	},
	
	sum: function(o, v) {
		o[0] += v[0];
		o[1] += v[1];
		o[2] += v[2];
	}
});
/*
Script: Image.js

Dependencies:
	Canvas.js

Author:
	Olmo Maldonado, <http://olmo-maldonado.com/>
	
Credits:
	Lightly based from Ralph Sommerer's work: <http://blogs.msdn.com/sompost/archive/2006/02/22/536967.aspx>
	Moderately based from excanvas: <http://excanvas.sourceforge.net/>
	Great thanks to Inviz, <http://inviz.ru/>, for his optimizing help.
	
License:
	MIT License, <http://en.wikipedia.org/wiki/MIT_License>
*/

CanvasRenderingContext2D.implement({
	/*
	Property: drawImage
		This method is overloaded with three variants: drawImage(image, dx, dy),
		drawImage(image, dx, dy, dw, dh), and drawImage(image, sx, sy, sw, sh, 
		dx, dy, dw, dh). (Actually it is overloaded with six; each of those three 
		can take either an HTMLImageElement or an HTMLCanvasElement for the image 
		argument.) If not specified, the dw and dh arguments default to the values 
		of sw and sh, interpreted such that one CSS pixel in the image is treated 
		as one unit in the canvas coordinate space. If the sx, sy, sw, and sh 
		arguments are omitted, they default to 0, 0, the image's intrinsic width 
		in image pixels, and the image's intrinsic height in image pixels, 
		respectively.
		
		If the image is of the wrong type, the implementation must raise a 
		TYPE_MISMATCH_ERR exception. If one of the sy, sw, sw, and sh arguments 
		is outside the size of the image, or if one of the dw and dh arguments 
		is negative, the implementation must raise an INDEX_SIZE_ERR  exception.
		
		The specified region of the image specified by the source rectangle 
		(sx, sy, sw, sh) must be painted on the region of the canvas specified 
		by the destination rectangle (dx, dy, dw, dh).
		
		Images are painted without affecting the current path, and are subject to
		transformations, shadow effects, global alpha, clipping paths, and global 
		composition operators.
	*/
	drawImage: function (image, var_args) {
		var args = arguments, 
			length = args.length, 
			off = (length == 9) ? 4 : 0;
			
		if(!((length + '').test(/3|5|9/))) throw 'Wrong number of arguments';
		
		var w0 = image.runtimeStyle.width, 
			h0 = image.runtimeStyle.height;
		image.runtimeStyle.width = 'auto';
		image.runtimeStyle.height = 'auto';
	
		var w = image.width, 
			h = image.height;
		image.runtimeStyle.width = w0;
		image.runtimeStyle.height = h0;
		
		var sx = 0, 
			sy = 0, 
			sw = w, 
			sh = h, 
			dx = args[1 + off], 
			dy = args[2 + off], 
			dw = args[3 + off] || w, 
			dh = args[4 + off] || h;
		
		if (length == 9) {
			sx = args[1];
			sy = args[2];
			sw = args[3];
			sh = args[4];
		}

		var d = this.getCoords(dx, dy),
			vmlStr = 
			'<v:group coordsize="' + this.Z * 10 + ',' + this.Z * 10 + '" ' + 
				'coordorigin="0,0" ' +
				'style="width:10;height:10;position:absolute;';
		
		if (this.m[0][0] != 1 || this.m[0][1]) {
			var max = Math.max(
				this.getCoords(dx + dw, dy), 
				this.getCoords(dx, dy + dh), 
				this.getCoords(dx + dw, dy + dh)
			);
			
			vmlStr += 
				'padding:0;' +
				'padding-right:' + Math.round(Math.max(d.x, max) / this.Z) + 'px;' +
				'padding-bottom:' + Math.round(Math.max(d.y, max) / this.Z) + 'px;' +
				'filter:progid:DXImageTransform.Microsoft.Matrix(' +
					"M11='" + this.m[0][0] + "', M12='" + this.m[1][0] + "', " +
					"M21='" + this.m[0][1] + "', M22='" + this.m[1][1] + "', " +
					"Dx='" + Math.round(d.x / this.Z) + "', Dy='" + Math.round(d.y / this.Z) + "', " +
					"sizingmethod='clip'" +
				');';
		} else {
			vmlStr += 
				'top:' + Math.round(d.y / this.Z) + 'px;' +
				'left:' + Math.round(d.x / this.Z) + 'px;';
		}
		
		this.element.insertAdjacentHTML('BeforeEnd', vmlStr + 
			'"><v:image src="' + image.src + '" ' +
				'style="width:' + this.Z * dw + ';height:' + this.Z * dh + ';" ' +
				'cropleft="' + sx / w + '" ' +
				'croptop="' + sy / h + '" ' +
				'cropright="' + (w - sx - sw) / w + '" ' +
				'cropbottom="' + (h - sy - sh) / h + '" ' +
			'/></v:group>'
		);
		
		this.parent.appendChild(this.fragment);
	},

	drawImageFromRect: Function.empty,
	
	/*
	Property: getImageData
		Method must return an ImageData object representing the underlying 
		pixel data for the area of the canvas denoted by the rectangle which 
		has one corner at the (sx, sy) coordinate, and that has width sw and 
		height sh. Pixels outside the canvas must be returned as transparent 
		black.
	*/
	getImageData: function(sx, sy, sw, sh) {

	},
	
	/*
	Property: putImageData
		Method must take the given ImageData structure, and draw it at the 
		specified location dx,dy in the canvas coordinate space, mapping each 
		pixel represented by the ImageData structure into one device pixel.
	*/
	putImageData: function(image, dx, dy) {
	
	},

	getCoords: function(x, y) {
		var m = this.m;
		return {
			x: this.Z * (x * m[0][0] + y * m[1][0] + m[2][0]) - this.Z2, 
			y: this.Z * (x * m[0][1] + y * m[1][1] + m[2][1]) - this.Z2
		};
	}
	
});