////////////////////////////////////////////////////////////
// images rotate() mini library
// -----------------------------------------------
// 1:Webkit/Mozilla: CSS 3 Transform
// 2:HTML 5 Canvas
// 3:IE:DXTransform Matrix filter
// -----------------------------------------------
// javascript written by Gerard Ferrandez
// initial version - April 5, 2009
// www.dhteumeuleu.com - CC-BY-NC licencied
////////////////////////////////////////////////////////////

var iR = {
	canvas               : false,
	context              : false,
	isCanvas             : false,
	isCSSTransform       : false,
	isWebkitTransform    : false,
	isMozTransform       : false,
	
	init : function (HTMLcontainer) {
		var cont = document.getElementById(HTMLcontainer) || HTMLcontainer;
		iR.isCanvas = (document.createElement("canvas").getContext) ? true : false;
		iR.isWebkitTransform = ('webkitTransform' in document.body.style);
		iR.isMozTransform = ('MozTransform' in document.body.style);
		if (iR.isWebkitTransform) {
			iR.renderingMode = "CSS3 Transform -webkit";
			cont.resize = function () {
				return false;
			}
			cont.clearRect = function () {
				return false;
			}
			iR.isCanvas = false;
			iR.createImage = function (imgsrc, FilterType) {
				var o = document.createElement("img");
				var i = document.getElementById(imgsrc) || imgsrc;
				o.src = i.src;
				o.style.position = "absolute";
				o.style.left = "0px";
				o.style.top  = "0px";
				o.loaded = false;
				o.drawImage = function(x, y, rotation, sx, sy, w, h) {
					if (this.complete) {
						if (!this.loaded) {
							this.w = this.w0 = this.width, this.h = this.h0 = this.height;
							this.loaded = true;
						}
						if (w == undefined) w = this.w;
						if (h == undefined) h = this.h;
						if (sx == undefined) sx = this.w * .5;
						if (sy == undefined) sy = this.h * .5;
						this.style.webkitTransform = "translate(" + Math.round(x - sx) + "px," + Math.round(y - sy) + "px) rotate(" + rotation + "rad)";
						this.style.webkitTransformOrigin = Math.round(sx) + "px," + Math.round(sy) + "px";
						this.style.width  = Math.round(w) + "px";
						this.style.height = Math.round(h) + "px";
					}
				}
				cont.appendChild(o);
				return o;
			}
			return cont;
		} else if (iR.isMozTransform) {
			iR.renderingMode = "CSS3 Transform -Moz";
			cont.resize = function () {
				return false;
			}
			cont.clearRect = function () {
				return false;
			}
			iR.isCanvas = false;
			iR.createImage = function (imgsrc, FilterType) {
				var o = document.createElement("img");
				var i = document.getElementById(imgsrc) || imgsrc;
				o.src = i.src;
				o.style.position = "absolute";
				o.style.left = "0px";
				o.style.top  = "0px";
				o.loaded = false;
				o.drawImage = function(x, y, rotation, sx, sy, w, h) {
					if (this.complete) {
						if (!this.loaded) {
							this.w = this.w0 = this.width, this.h = this.h0 = this.height;
							this.loaded = true;
						}
						if (w == undefined) w = this.w;
						if (h == undefined) h = this.h;
						if (sx == undefined) sx = this.w * .5;
						if (sy == undefined) sy = this.h * .5;
						this.style.MozTransform = "translate(" + Math.round(x - sx) + "px," + Math.round(y - sy) + "px) rotate(" + rotation + "rad)";
						this.style.MozTransformOrigin = Math.round(sx) + "px " + Math.round(sy) + "px";
						this.style.width = Math.round(w) + "px";
						this.style.height = Math.round(h) + "px";
					}
				}
				cont.appendChild(o);
				return o;
			}
			return cont;
		} else if (iR.isCanvas) {
			iR.renderingMode = "HTML 5 canvas";
			iR.canvas = document.createElement("canvas");
			iR.canvas.style.position = "absolute";
			cont.appendChild(this.canvas);
			iR.context = this.canvas.getContext("2d");
			iR.canvas.resize = function () {
				this.width = this.nw;
				this.height = this.nh;
				this.style.width = this.nw + "px";
				this.style.height = this.nh + "px";
			}
			iR.canvas.clearRect = function () {
				iR.context.clearRect(0, 0, this.nw, this.nh);
			}
			iR.createImage = function(imgsrc, FilterType) {
				var img = new Image();
				var i = document.getElementById(imgsrc) || imgsrc;
				img.src = i.src;
				img.sx = 0;
				img.sy = 0;
				img.w = 0;
				img.h = 0;
				img.loaded = false;
				img.drawImage = function(x, y, rotation, sx, sy, w, h) { 
					if (this.complete) {
						if (!this.loaded) {
							this.w = this.w0 = this.width, this.h = this.h0 = this.height;
							this.loaded = true;
						}
						if (w == undefined) w = this.w;
						if (h == undefined) h = this.h;
						if (sx == undefined) sx = this.w * .5;
						if (sy == undefined) sy = this.h * .5;
						iR.context.save();
						iR.context.translate(x, y);
						iR.context.rotate(rotation);
						iR.context.drawImage(this, Math.round(-sx), Math.round(-sy), Math.round(w), Math.round(h));
						iR.context.restore();
					}
				}
				return img;
			}
			return iR.canvas;
		} else {
			iR.renderingMode = "IE Matrix Filter";
			cont.resize = function () {
				return false;
			}
			cont.clearRect = function () {
				return false;
			}
			iR.isCanvas = false;
			iR.createImage = function(imgsrc, FilterType) {
				var o = document.createElement("img");
				var i = document.getElementById(imgsrc) || imgsrc;
				o.src = i.src;
				o.style.position = "absolute";
				o.style.left = "-10000px";
				o.style.filter = "progid:DXImageTransform.Microsoft.matrix(FilterType="+FilterType+", sizingMethod=\"auto expand\")";
				o.loaded = false;
				o.drawImage = function(x, y, rotation, sx, sy, w, h) {
					if (this.complete) {
						if (!this.loaded) {
							this.w = this.w0 = this.width, this.h = this.h0 = this.height;
							this.loaded = true;
						}
						if (w == undefined) w = this.w;
						if (h == undefined) h = this.h;
						if (sx == undefined) sx = this.w * .5;
						if (sy == undefined) sy = this.h * .5;
						var cos = Math.cos(rotation);
						var sin = Math.sin(rotation);
						var f = this.filters.item(0);
						f.M11 = cos;
						f.M12 = -sin;
						f.M21 = sin;
						f.M22 = cos;
						this.style.left = Math.round(x - sin * ((sin > 0) ? h-sy : -sy) - cos * ((cos > 0) ? sx : sx-w)) + "px";
						this.style.top  = Math.round(y - sin * ((sin > 0) ? sx : sx-w) - cos * ((cos > 0) ? sy : sy-h)) + "px";
						this.style.width  = Math.round(w) + "px";
						this.style.height = Math.round(h) + "px";
					}
				}
				cont.appendChild(o);
				return o;
			}
			return cont;
		}
	}	
}
//////////////////////////////////////////////////////////////////////////