var canvas1;
var img = [];


function CanvasTextArea(id, oConfig) {
	Canvas.Element.call(this, id, oConfig);	
	addFF3Fix();
}
CanvasTextArea.prototype = new Canvas.Element('tmp', { width: 300, height: 100 });
CanvasTextArea.prototype.constructor = CanvasTextArea;

CanvasTextArea.prototype.draggedImages = 0;
CanvasTextArea.prototype.showcorners = true;


CanvasTextArea.prototype._initEvents = function() {
	document.getElementById('tArea').value = '';
	var tArea = document.getElementById('tArea');
	var self = this;
	tArea.onmousedown = function(e) { self.onMouseDown.call(self, e) };
	tArea.onmouseup = function(e) { self.onMouseUp.call(self, e) };
	tArea.onmousemove = function(e) { self.onMouseMove.call(self, e) };
};

CanvasTextArea.prototype.setCursor = function(mp, targetImg) {
	var tArea = document.getElementById('tArea');
	if (!targetImg) {
		tArea.style.cursor = 'default';
	}
	else { 
		var corner = this.findTargetCorner(mp, targetImg);
		if (!corner) {
			tArea.style.cursor = 'move';
		}
		else {
			if(corner == 'tr') {
				tArea.style.cursor = 'ne-resize';
			}
			else if(corner == 'br') {
				tArea.style.cursor = 'se-resize';
			}
			else if(corner == 'bl') {
				tArea.style.cursor = 'sw-resize';
			}
			else if(corner == 'tl') {
				tArea.style.cursor = 'nw-resize';
			}									
			else {
				tArea.style.cursor = 'default';
			}
		}
	}
};


CanvasTextArea.prototype.onMouseDown = function(e) {
	YAHOO.util.Event.stopEvent(e);	
	Canvas.Element.prototype.onMouseDown.call(this, e);
};
	
CanvasTextArea.prototype.onMouseUp = function(e) {
	Canvas.Element.prototype.onMouseUp.call(this, e);
};

Canvas.Element.prototype.onMouseOver = function(e) {
	Canvas.Element.prototype.onMouseUp.call(this, e);
};

CanvasTextArea.prototype.loadNewImg = function(mp, imgUrl) {
  var img = document.createElement('img');
  img.src = imgUrl;
  img.onload = (function() {
    img.id = 'dImg' + this.draggedImages;

    document.getElementById('content_div').appendChild(img);
		
    this.addImage(new Canvas.Img(img, { top: mp.ey, left: mp.ex, angle: 0, cornersize: 3 }));   
    this.draggedImages += 1;
  }).call(this);

};


function addFF3Fix() {			
	var pos = {}
	var YE = YAHOO.util.Event;
	var YD = YAHOO.util.Dom;
		
	var defaultValue = [];
	var tArea = document.getElementById('tArea');
	tArea.style.color = 'transparent';
	tArea.style.fontSize = '6px'; 
	tArea.style.fontFamily = 'Courier, Monospace';
	var dropEvent = new YAHOO.util.CustomEvent('textareaDrop', this);

	var getDropCoords = function(caret) {
		var tAreaDimensions = [tArea.offsetWidth, tArea.offsetHeight];
		var charsPerRow = tArea.getAttribute('cols');
		var charWidth = tAreaDimensions[0] / charsPerRow;
		var charHeight = tAreaDimensions[1] / tArea.getAttribute('rows');
		var xPos = (caret % charsPerRow) * charWidth;
		var yPos = (Math.floor(caret / charsPerRow)) * charHeight;
		return [xPos, yPos];
	};

	var onTextareaDrop = function(eventName, domEvent) {				
		var imgurl = tArea.value.match(/^[w | w]*(.*?)[w | w]*$/)[1];
		var caret = tArea.selectionStart - imgurl.length;
		var dropCoords = getDropCoords(caret);
		canvas1.loadNewImg({ ex: dropCoords[0], ey: dropCoords[1]} , imgurl);
	};

	dropEvent.subscribe(onTextareaDrop);			

	for(var i=0; i<5000; i++) {
		defaultValue.push('w');
	}
	
	tArea.value = defaultValue.join(' ');
	tArea.selectionStart = 0;
	tArea.selectionEnd = 0;			

	YE.on(window, 'mousemove', function(e) {
		if (tArea.value.match(':')) {				
			dropEvent.fire(e);
			tArea.value = defaultValue.join(' ');
		}
	});
	

	YE.on(tArea, 'mousedown', YE.stopEvent, YE, true);	
};