Element.implement({

ImageRotate:function(parameters) {	
	if (!this.Wilq32) this.Wilq32 = {}
	if (this.Wilq32.PhotoEffect) return;
	this.Wilq32.PhotoEffect = new Wilq32.PhotoEffect(this,parameters);
	
},

rotate:function(parameters) {  
	if ($type(parameters) == false) return;
	if ($type(parameters) == 'number') parameters = {angle:parameters};
	if (!this.Wilq32) this.ImageRotate(parameters);
	else { this.Wilq32.PhotoEffect._rotate(parameters.angle);	}
	return this;
},

rotateAnimation:function(parameters) {
	if ($type(parameters) == false) return;
	if ($type(parameters) == 'number') parameters = {angle:parameters};
	if (!this.Wilq32) this.ImageRotate(parameters);
	else {
		this.Wilq32.PhotoEffect._parameters.animateAngle = parameters.angle;
		this.Wilq32.PhotoEffect._parameters.callback = parameters.callback || function(){};		
		this.Wilq32.PhotoEffect._animateStart();
	}
	return this;
}

});

Wilq32 = {};

Wilq32.PhotoEffect = function(img,parameters) {
			this._IEfix = img;			      
			this._parameters = parameters;
			if (!parameters) this._parameters = {};
			this._angle=0;
			if (!parameters.angle) this._parameters.angle = 0;
			this._temp = new Element('span');
			var image = img.src;
			img.getParent().insertBefore(this._temp,img);
			this._img = new Image();
			this._img.src = image;
			this._img._ref = this;
			$(this._img).addEvent('load', function() {
				this._ref._Loader.call(this._ref);
			});
			if (Browser.Engine.trident) if (this._img.complete) this._Loader();	
}

Wilq32.PhotoEffect.prototype._Loader = function () {
	this._IEfix.parentNode.removeChild(this._IEfix);
	var width = this._img.width;
	var height = this._img.height;
	
	this._img._widthMax = this._img._heightMax = Math.sqrt((height)*(height) + (width) * (width));

	this._canvas = new Element('canvas');
	this._canvas._ref = this;
	this._canvas.height = width;
	this._canvas.width = height;

	this._canvas.setProperty('width',width);

	this._canvas.inject(this._temp);
	if (Browser.Engine.trident) {	
		// ExCanvas to make it work in IE
		this._canvas.id = "Wilq32.PhotoTemp";
		G_vmlCanvasManager.initElement(this._canvas);
		this._canvas = $('Wilq32.PhotoTemp');
		this._canvas.id = "";							
		this._canvas._ref = this;
	}
	var self = this;
	this._parameters.animateAngle = 0;
	if (this._parameters.bind) {
		for (var a in this._parameters.bind) if (this._parameters.bind.hasOwnProperty(a)) 
		for (var b in this._parameters.bind[a]) if (this._parameters.bind[a].hasOwnProperty(b)) 
		this._canvas.addEvent(b,this._parameters.bind[a][b]);
	}
	this._cnv = this._canvas.getContext('2d');
	this._rotate(this._parameters.angle);
}

Wilq32.PhotoEffect.prototype._animateStart = function() {	
	if (this._timer) clearTimeout(this._timer);
	this._animate();
}

Wilq32.PhotoEffect.prototype._animate = function() {	
  var temp = this._angle;
	if ($type(this._parameters.animateAngle) != false) this._angle -= (this._angle - this._parameters.animateAngle) * 0.1;
	if ($type(this._parameters.minAngle) != false) if (this._angle < this._parameters.minAngle) this._angle = this._parameters.minAngle;
	if ($type(this._parameters.maxAngle) != false) if (this._angle > this._parameters.maxAngle) this._angle = this._parameters.maxAngle; 

	if (Math.round(this._angle * 100 - temp * 100) == 0 && this._timer) {
		clearTimeout(this._timer);
		if (this._parameters.callback) 
			this._parameters.callback();
	}	else {
		this._rotate(this._angle);
		var self = this;
		this._timer = setTimeout(function()	{
			self._animate.call(self);
		}, 10);
	}
}

Wilq32.PhotoEffect.prototype._rotate = function(angle) {
	if (!this._img.width) return;
	if ($type(angle) != 'number') return;
	angle =( angle%360)* Math.PI / 180;
	var width = this._img.width;
	var height = this._img.height;
	var widthAdd = this._img._widthMax - width;
	var heightAdd = this._img._heightMax - height;
	// clear canvas	
	this._canvas.width = width + widthAdd;
	this._canvas.height = height + heightAdd;

	//this._cnv.scale(0.8,0.8); // SCALE - if needed ;)
	
	// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
	this._cnv.save();
	this._cnv.translate(widthAdd/2,heightAdd/2); // at least center image on screen
	this._cnv.translate(width/2,height/2);		  // we move image back to its orginal 
	this._cnv.rotate(angle);					  // rotate image
	this._cnv.translate(-width/2,-height/2);	  // move image to its center, so we can rotate around its center
	this._cnv.drawImage(this._img, 0, 0);		  // First - we draw image
	this._cnv.restore();
}