var Resizer = Class.create(
{
	initialize: function( element, escaparate )
	{
		this.unitSize = 'px';
		if( typeof(element) == 'string' )
			element = document.getElementById( element );
		this.element = element;
		this.escaparate = escaparate;
		this.proportion = parseInt(element.style.height)*1.0/parseInt(element.style.width);

		this.minSide = 60;

		this.createRDHandler( this.element );
		this.createRUHandler( this.element );
		this.createLDHandler( this.element );
		this.createLUHandler (element, escaparate);
		this.organizeCorners();
		
		this.enableControls();
	},
	createLUHandler: function( element, escaparate )
	{
		var handler = this.createTemplateHandler();		
		handler.style.cursor= "nw-resize";
		handler.appendChild(this.createCornerImageDiv());
		element.appendChild( handler );
		this.luHandler = handler;

		var current = this;
		var onMouseMoveFunction = function (event) 
		{
			if (Prototype.Browser.IE) 
				if (!current.validateCanvasArea(event, escaparate.canvas)) return;
			var newLeft = event.pointerX() - escaparate.canvas.cumulativeOffset().left; 
			var difference = newLeft - parseInt(element.style.left);
			var newTop = parseInt(element.style.top) + difference;
			var newWidth = parseInt(element.style.width) - difference;
			var newHeight = current.proportion*newWidth;
			
			if (difference == 0 || newWidth < current.minSide || newHeight < current.minSide) {
				Event.stop(event);
				return;
			}
			element.style.left = newLeft + current.unitSize;		
			element.style.top = newTop + current.unitSize;
			element.style.width = newWidth + current.unitSize;
			element.style.height = newHeight + current.unitSize;
	
			current.organizeCorners();
			
			Event.stop(event);
			
		};
	
		var onMouseUpFunction = function (event) {
			escaparate.canvas.stopObserving('mousemove', onMouseMoveFunction);		
			
			escaparate.canvas.stopObserving('mouseup', onMouseUpFunction);

			document.stopObserving('mousemove', onMouseMoveFunction);		
			
			document.stopObserving('mouseup', onMouseUpFunction);
			
			Event.stop(event);
		}
		
		handler = $(handler); //IE Fix
		Event.observe(handler, 'mousedown', function (event) {
			escaparate.canvas.observe('mousemove', onMouseMoveFunction)
		
			escaparate.canvas.observe('mouseup', onMouseUpFunction);

			document.observe('mousemove', onMouseMoveFunction)
		
			document.observe('mouseup', onMouseUpFunction);
			
			Event.stop(event);
		});
	},	
	createRDHandler: function( element )
	{
		var handler = this.createTemplateHandler();		
		handler.style.cursor= "nw-resize";
		handler.appendChild(this.createCornerImageDiv());
		this.element.appendChild( handler );
		this.rdHandler = handler;

		var current = this;
		var onMouseMoveFunction = function (event) 
		{
			if (Prototype.Browser.IE) 
				if (!current.validateCanvasArea(event, escaparate.canvas)) return;		
			var newWidth = event.pointerX() - element.cumulativeOffset().left;
			var difference = newWidth - parseInt(element.style.width);
			
			var newHeight = current.proportion*newWidth;
			if (difference == 0 || newWidth < current.minSide || newHeight < current.minSide) {
				Event.stop(event);
				return;
			}
			element.style.width = newWidth + current.unitSize;
			element.style.height = newHeight + current.unitSize;
	
			current.organizeCorners();
			
			Event.stop(event);
		};
	
		var onMouseUpFunction = function (event) 
		{
			current.escaparate.canvas.stopObserving('mousemove', onMouseMoveFunction);	
			
			current.escaparate.canvas.stopObserving('mouseup', onMouseUpFunction);

			document.stopObserving('mousemove', onMouseMoveFunction);	
			
			document.stopObserving('mouseup', onMouseUpFunction);
			
			Event.stop(event);
		};
	
		handler = $(handler); //IE Fix
		handler.observe('mousedown', function (event) 
		{
			current.escaparate.canvas.observe('mousemove', onMouseMoveFunction)
		
			current.escaparate.canvas.observe('mouseup', onMouseUpFunction);
			
			document.observe('mousemove', onMouseMoveFunction)
		
			document.observe('mouseup', onMouseUpFunction);
			
			Event.stop(event);
		});				
	},
	createRUHandler: function( element )
	{
		var handler = this.createTemplateHandler();		
		handler.style.cursor= "ne-resize";
		handler.appendChild(this.createCornerImageDiv());
		this.element.appendChild( handler );
		this.ruHandler = handler;		

		var current = this;
		var onMouseMoveFunction = function (event) 
		{		
			if (Prototype.Browser.IE) 
				if (!current.validateCanvasArea(event, escaparate.canvas)) return;			
			var newWidth = event.pointerX() - element.cumulativeOffset().left;
			var difference = newWidth - parseInt(element.style.width);
			var newWidth = parseInt(element.style.width) + difference;
			//var propDiff = parseInt(element.style.width)*difference/parseInt(element.style.top);
			var newTop = parseInt(element.style.top) - difference;
			//var newHeight = parseInt(element.style.height) + difference;
			var newHeight = current.proportion*newWidth;
			if (difference == 0 || newWidth < current.minSide || newHeight < current.minSide) {
				Event.stop(event);
				return;
			}
			element.style.top = newTop + current.unitSize;
			element.style.width = newWidth + current.unitSize;
			element.style.height = newHeight + current.unitSize;
	
			current.organizeCorners();
			
			Event.stop(event);
		};
	
		var onMouseUpFunction = function (event) {
			
			current.escaparate.canvas.stopObserving('mousemove', onMouseMoveFunction);		
			
			current.escaparate.canvas.stopObserving('mouseup', onMouseUpFunction);

			document.stopObserving('mousemove', onMouseMoveFunction);		
			
			document.stopObserving('mouseup', onMouseUpFunction);
			
			Event.stop(event);
		}
	
		handler = $(handler); //IE Fix	
		handler.observe('mousedown', function (event) {
			
			current.escaparate.canvas.observe('mousemove', onMouseMoveFunction)
		
			current.escaparate.canvas.observe('mouseup', onMouseUpFunction);

			document.observe('mousemove', onMouseMoveFunction)
		
			document.observe('mouseup', onMouseUpFunction);
			
			Event.stop(event);
		});
	},
	createLDHandler: function( element )
	{
		var handler = this.createTemplateHandler();		
		handler.style.cursor= "ne-resize";
		handler.appendChild(this.createCornerImageDiv());
		this.element.appendChild(handler);
		this.ldHandler = handler;
		
		var current = this;
		var onMouseMoveFunction = function (event) 
		{	
			if (Prototype.Browser.IE) 
				if (!current.validateCanvasArea(event, escaparate.canvas)) return;		
			var leftAnt = parseInt(current.element.style.left);
			var leftNuevo =  event.pointerX() - current.escaparate.canvas.cumulativeOffset().left;
			var difference = leftNuevo - leftAnt;
			var newWidth = parseInt(current.element.style.width) - difference;
			//var newHeight = parseInt(current.element.style.height) - difference;
			var newHeight = current.proportion*newWidth;
			if (difference == 0 || newWidth < current.minSide || newHeight < current.minSide) {
				Event.stop(event);
				return;
			}
			current.element.style.left = leftNuevo + current.unitSize;
			current.element.style.width = newWidth + current.unitSize;
			current.element.style.height = newHeight + current.unitSize;
	
			current.organizeCorners();
			
			Event.stop(event);
		}; 
	
		var onMouseUpFunction = function (event) 
		{
			
			current.escaparate.canvas.stopObserving('mousemove', onMouseMoveFunction);	
			
			current.escaparate.canvas.stopObserving('mouseup', onMouseUpFunction);	
			
			document.stopObserving('mousemove', onMouseMoveFunction);	
			
			document.stopObserving('mouseup', onMouseUpFunction);	
			
			Event.stop(event);
		}
	
		handler = $(handler); //IE Fix
		handler.observe('mousedown', function (event) 
		{
			
			current.escaparate.canvas.observe('mousemove', onMouseMoveFunction)
		
			current.escaparate.canvas.observe('mouseup', onMouseUpFunction);
			
			document.observe('mousemove', onMouseMoveFunction)
		
			document.observe('mouseup', onMouseUpFunction);
			
			Event.stop(event);
		});
	},

	createTemplateHandler: function()
	{
		var handler = document.createElement('div');
		handler.align="center";
		handler.valign="middle";
		handler.style.position= "absolute";
		handler.style.border = "0px";
		handler.style.margin = "0px";
		handler.style.width="10px";
		handler.style.height="10px";
		
		var zIndex = 0;
		if (this.element.zIndex != null) 
			zIndex = parseInt(this.element.zIndex); 
		handler.style.zIndex = zIndex + 2;
		

		return handler;
	},	
	createCornerImageDiv: function()
	{
		var imgCorner = document.createElement('img');		
		imgCorner.src="/images/corner.gif";
		imgCorner.style.width = "100%";
		imgCorner.style.height = "100%";
		
		return imgCorner;		
	},
	organizeCorners: function() 
	{
		this.luHandler.style.top = '-5' + this.unitSize; 
		
		this.luHandler.style.left = '-5' + this.unitSize;
	
		this.ldHandler.style.top = (parseInt(this.element.style.height) - 5) + this.unitSize; 
		this.ldHandler.style.left = '-5' + this.unitSize;
		
		this.ruHandler.style.top = '-5' + this.unitSize; 
		this.ruHandler.style.left = (parseInt(this.element.style.width) - 5) + this.unitSize;

		this.rdHandler.style.top = (parseInt(this.element.style.height) - 5) + this.unitSize; 
		this.rdHandler.style.left = (parseInt(this.element.style.width) - 5) + this.unitSize;			
	},
	enableControls: function()
	{
		this.element.style.border = "1px solid #D1D1D1";
		this.rdHandler.style.visibility="visible";
		this.ruHandler.style.visibility="visible";
		this.ldHandler.style.visibility="visible";
		this.luHandler.style.visibility = "visible";
	},
	disableControls: function()
	{
		this.element.style.border = "0px";
		this.rdHandler.style.visibility="hidden";
		this.ruHandler.style.visibility="hidden";
		this.ldHandler.style.visibility="hidden";
		this.luHandler.style.visibility="hidden";
	},
	validateCanvasArea: function(event, canvas) 
	{
		var canvasOffset = canvas.cumulativeOffset();
		var canvasDim = canvas.getDimensions();
		var pointerX = event.pointerX(); 
		var pointerY = event.pointerY();
		if (pointerX <= canvasOffset.left || pointerX >= canvasOffset.left + canvasDim.width || pointerY <= canvasOffset.top || pointerY >= canvasOffset.top + canvasDim.height) {
			Event.stop(event);
			return false;
		}
		return true;
	}
});