/*
jQuery.fn.rotate = function(angle,whence) {
	var p = this.get(0);

	// we store the angle inside the image tag for persistence
	if (!whence) {
		p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
	} else {
		p.angle = angle;
	}

	if (p.angle >= 0) {
		var rotation = Math.PI * p.angle / 180;
	} else {
		var rotation = Math.PI * (360+p.angle) / 180;
	}
	var costheta = Math.cos(rotation);
	var sintheta = Math.sin(rotation);

	if (document.all && !window.opera) {
		var canvas = document.createElement('img');

		canvas.src = p.src;
		canvas.height = p.height;
		canvas.width = p.width;
		canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
	} else {
		var canvas = document.createElement('canvas');
		if (!p.oImage) {
			canvas.oImage = new Image();
			canvas.oImage.src = p.src;
		} else {
			canvas.oImage = p.oImage;
		}

		canvas.style.width = canvas.width = canvas.oImage.width;
		canvas.style.height = canvas.height = canvas.oImage.height;

		var context = canvas.getContext('2d');
		//context.save();
		
		context.translate(canvas.oImage.width / 2, canvas.oImage.height / 2);
		context.rotate(rotation);
		context.translate(-canvas.oImage.width / 2, -canvas.oImage.height / 2);
		context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
		//context.restore();
	}
	canvas.id = p.id;
	canvas.angle = p.angle;
	p.parentNode.replaceChild(canvas, p);
}

jQuery.fn.rotateRight = function(angle) {
	this.rotate(angle==undefined?90:angle);
}

jQuery.fn.rotateLeft = function(angle) {
	this.rotate(angle==undefined?-90:-angle);
}

jQuery.fn.zoom = function(x,y) {

	var p = this.get(0);
	var canvas = document.createElement('canvas');

	if (!p.oImage) {
		canvas.oImage = new Image();
		canvas.oImage.src = p.src;
	} else {
		canvas.oImage = p.oImage;
	}
	canvas.style.width = canvas.width = canvas.oImage.width;
	canvas.style.height = canvas.height = canvas.oImage.height;

	var context = canvas.getContext('2d');
	//context.save();
	context.scale(x/100, y/100);
	context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
	//context.restore();
	
	canvas.id = p.id;
	canvas.angle = p.angle;
	p.parentNode.replaceChild(canvas, p);
}
*/
jQuery.fn.transform = function(angle,whence, zoom) {
	var p = this.get(0);

	// we store the angle inside the image tag for persistence
	if (!whence) {
		p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
	} else {
		p.angle = angle;
	}

	if (p.angle >= 0) {
		var rotation = Math.PI * p.angle / 180;
	} else {
		var rotation = Math.PI * (360+p.angle) / 180;
	}
	var costheta = Math.cos(rotation);
	var sintheta = Math.sin(rotation);
	
	if (document.all && !window.opera) {
		var canvas = document.createElement('img');

		canvas.src = p.src;
		canvas.height = p.height;
		canvas.width = p.width;
		strFilter = "";
		strFilter += " progid:DXImageTransform.Microsoft.Matrix(M11="+ (costheta) +",M12="+(-sintheta)+",M21="+sintheta+",M22="+(costheta)+",SizingMethod='auto expand')";
		var zoomSizingMethod = 'clip to original';
		if(zoom > 100){
			zoomSizingMethod = 'auto expand';
		}
		
		if(jQuery.fn.oldWidth === 0){
			jQuery.fn.oldWidth = p.width;
		}
		if(jQuery.fn.oldHeight === 0){
			jQuery.fn.oldHeight = p.height;
		}
		
		if (zoom > 0)
		{
			// try to keep the zoom centered on the image.
			jQuery.fn.translateX = jQuery.fn.translateX + ((jQuery.fn.oldWidth - (p.width * (zoom/100))) / 2);
			jQuery.fn.translateY = jQuery.fn.translateY + ((jQuery.fn.oldHeight - (p.height * (zoom/100))) / 2);

			jQuery.fn.oldWidth = p.width * (zoom/100);
			jQuery.fn.oldHeight = p.height * (zoom/100);
		}
		
		strFilter += " progid:DXImageTransform.Microsoft.Matrix(M11="+ (zoom/100) +",M12="+(0)+",M21="+0+",M22="+(zoom/100)+",SizingMethod='" + zoomSizingMethod + "')";
		strFilter += " progid:DXImageTransform.Microsoft.Matrix(Dx=" + jQuery.fn.translateX + ",Dy=" + jQuery.fn.translateY + ",SizingMethod='clip to original')";
		canvas.style.filter = strFilter;
		
		$('#imgEditorContainer2').css('width','244px').css('height','246px');
		
	} else {
		var canvas = document.createElement('canvas');
		if (!p.oImage) {
			canvas.oImage = new Image();
			canvas.oImage.src = p.src;
			//console.log('1');
		} else {
			canvas.oImage = p.oImage;
			//console.log('2');
		}
		
		canvas.style.width = canvas.width = canvas.oImage.width;
		canvas.style.height = canvas.height = canvas.oImage.height;

		var context = canvas.getContext('2d');
		context.save();
		
		context.translate(canvas.oImage.width / 2 + jQuery.fn.translateX, canvas.oImage.height / 2 + jQuery.fn.translateY);
		context.scale(zoom/100, zoom/100);
		context.translate((-canvas.oImage.width / 2) - (jQuery.fn.translateX), (-canvas.oImage.height / 2) - (jQuery.fn.translateY));
		
		// determine the center of the image, without angle
		var centerX = (canvas.oImage.width / 2) + jQuery.fn.translateX;
		var centerY = (canvas.oImage.height / 2) + jQuery.fn.translateY;
		
		// set the center of the transformation
		context.translate(centerX, centerY);
		context.rotate(rotation);
		// the translate coordinates have changed, update them
		context.translate(-(canvas.oImage.width / 2) -  jQuery.fn.translateX, -(canvas.oImage.height / 2) -  jQuery.fn.translateY);
		
		context.translate(jQuery.fn.translateX, jQuery.fn.translateY);
		
		//console.log('image: ' + canvas.oImage);
		context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
		/*
		var imgMask = new Image();
		imgMask.src = '/images/tattoodle-your-photos/circle_test.gif';
		if (zoom != 100){
			context.scale(100/zoom, 100/zoom);
		}
		// blah. find the zoomer here
		context.translate(-jQuery.fn.translateX, -jQuery.fn.translateY);
		context.drawImage(imgMask,0,0, 300, 300);
		*/
		context.restore();
	}
	
	if (document.all && !window.opera){
	}else{
	// unbind the old events
	$('#imgEditor').unbind('mousedown').unbind('mouseup').unbind('mousemove');
	$('#imgEditorContainer').unbind('mousedown').unbind('mouseup').unbind('mousemove');
	}
	
	canvas.id = p.id;
	canvas.angle = p.angle;
	if (document.all && !window.opera) {canvas.style.overflow = 'hidden';}
	p.parentNode.replaceChild(canvas, p);
	
	if (document.all && !window.opera){
		//jQuery.fn.ieFirstTranslation = true;
		//jQuery.fn.SetUpDragEventsIE(canvas, rotation, zoom);
	}else{
		
		jQuery.fn.SetUpDragEvents(canvas, rotation, zoom);
	}
}

jQuery.fn.translateClicked = false;

jQuery.fn.resetTransformData = function(){
	jQuery.fn.oldPageX = 0;
	jQuery.fn.oldPageY = 0;
	jQuery.fn.translateX = 0;
	jQuery.fn.translateY = 0;
	jQuery.fn.oldWidth = 0;
	jQuery.fn.oldHeight = 0;
}

jQuery.fn.oldPageX = 0;
jQuery.fn.oldPageY = 0;
jQuery.fn.translateX = 0;
jQuery.fn.translateY = 0;
jQuery.fn.oldWidth = 0;
jQuery.fn.oldHeight = 0;

jQuery.fn.ieFirstTranslation = true;

jQuery.fn.SetUpDragEvents = function (canvas, rotation, zoom){
	var canvas = $('#' + canvas.id);
	
	canvas.mousedown(function(e){
		
		jQuery.fn.oldPageX = e.pageX;
		jQuery.fn.oldPageY = e.pageY;
		
		jQuery.fn.translateClicked = true;
		jQuery.fn.ieFirstTranslation = true;
	}).mouseup(function(e){
		jQuery.fn.translateClicked = false;
	}).mousemove(function(e){
		if (jQuery.fn.translateClicked){
			if (jQuery.fn.oldPageX == 0){
				jQuery.fn.oldPageX = $(this).offset().left;
			}
			if (jQuery.fn.oldPageY == 0){
				jQuery.fn.oldPageY = $(this).offset().top;
			}
			
			if ((e.pageX === jQuery.fn.oldPageX) && (e.pageY === jQuery.fn.oldPageY)){
				return;
			}
			
			jQuery.fn.translateX = jQuery.fn.translateX + (e.pageX - jQuery.fn.oldPageX);
			jQuery.fn.translateY = jQuery.fn.translateY + (e.pageY - jQuery.fn.oldPageY);
			
			var factorX = jQuery.fn.translateX; // this is the current position of the mouse cursor, relative to the upper left corner of the canvas (X)
			var factorY = jQuery.fn.translateY; // this is the current position of the mouse cursor, relative to the upper left corner of the canvas (Y)
			
			var p = $(this).get(0);
			var context = canvas[0].getContext('2d');
			
			context.clearRect(0,0, p.oImage.width, p.oImage.height);
			
			context.save();
			
			context.translate(p.oImage.width / 2 + factorX, p.oImage.height / 2 + factorY);
			context.scale(zoom/100.0,zoom/100.0);
			context.translate((-p.oImage.width / 2) - factorX, (-p.oImage.height / 2) - factorY);
			
			context.translate((p.oImage.width / 2) + factorX, (p.oImage.height / 2) + factorY);
			context.rotate(rotation);
			context.translate(-(p.oImage.width / 2) - factorX, - (p.oImage.height / 2) - factorY);
			
			// ---- zoom -----
			
			context.translate(factorX, factorY);
			context.drawImage(p.oImage, 0, 0, p.oImage.width, p.oImage.height);
			
			context.restore();
			
			jQuery.fn.oldPageX = e.pageX;
			jQuery.fn.oldPageY = e.pageY;
		}
	});
}

/*
jQuery.fn.SetUpDragEventsIE = function (canvas, rotation, zoom){
	var canvas = $('#' + canvas.id);
	
	$('#imgEditorContainer').mouseup(function(e){
		jQuery.fn.translateClicked = !jQuery.fn.translateClicked;
		if (jQuery.fn.translateClicked){
			jQuery.fn.oldPageX = e.pageX;
			jQuery.fn.oldPageY = e.pageY;
			jQuery.fn.ieFirstTranslation = true;
			$(this).css('cursor','move');
		}else{
			$(this).css('cursor','default');
		}
	}).mousemove(function(e){
		if (jQuery.fn.translateClicked){
			if (jQuery.fn.oldPageX == 0){
				jQuery.fn.oldPageX = $(this).offset().left;
			}
			if (jQuery.fn.oldPageY == 0){
				jQuery.fn.oldPageY = $(this).offset().top;
			}
			if ((e.pageX == jQuery.fn.oldPageX) && (e.pageY == jQuery.fn.oldPageY)){
				return;
			}
			
			jQuery.fn.translateX = jQuery.fn.translateX + (e.pageX - jQuery.fn.oldPageX);
			jQuery.fn.translateY = jQuery.fn.translateY + (e.pageY - jQuery.fn.oldPageY);
			
			var factorX = jQuery.fn.translateX; // this is the current position of the mouse cursor, relative to the upper left corner of the canvas (X)
			var factorY = jQuery.fn.translateY; // this is the current position of the mouse cursor, relative to the upper left corner of the canvas (Y)
			
			// ----- IE-specific -------------------
			if (document.all && !window.opera){
				var costheta = Math.cos(rotation);
				var sintheta = Math.sin(rotation);
				strFilter = "";
				strFilter += " progid:DXImageTransform.Microsoft.Matrix(M11="+ (costheta) +",M12="+(-sintheta)+",M21="+sintheta+",M22="+(costheta)+",SizingMethod='auto expand')";
				var zoomSizingMethod = 'clip to original';
				if(zoom > 100){
					zoomSizingMethod = 'auto expand';
				}
				strFilter += " progid:DXImageTransform.Microsoft.Matrix(M11="+ (zoom/100) +",M12="+(0)+",M21="+0+",M22="+(zoom/100)+",SizingMethod='" + zoomSizingMethod + "')";
				strFilter += " progid:DXImageTransform.Microsoft.Matrix(Dx=" + jQuery.fn.translateX + ",Dy=" + jQuery.fn.translateY + ",SizingMethod='clip to original')";
				canvas = document.getElementById('imgEditor');
				canvas.style.filter = strFilter;
				
				jQuery.fn.oldPageX = e.pageX;
				jQuery.fn.oldPageY = e.pageY;
				
				return;
			}
		}
	});
}
*/