function Drawing( canvas, overlay, overlayPosX, overlayPosY ) {
	this.canvas = '';
	this.overlay = '';
	this.posX = '';
	this.posY = '';
	
	this.locked = false;
}

Drawing.prototype.load = function( canvas, overlay, posX, posY ) {
	this.canvas = canvas;
	this.overlay = overlay;
	this.posX = posX;
	this.posY = posY;
}

Drawing.prototype.onload = function() {
	this.attachMouseoverListeners();
};

Drawing.prototype.mousemoveDraw = function(e) {
	var event = new Event(e);
	event.cancelBubble();

	var target = event.getTarget();
	var newX = event.getLayerX();
	var newY = event.getLayerY();

	drawing._mousemoveDraw( target, newX, newY );	
};

Drawing.prototype._mousemoveDraw = function( target, newX, newY ) {
	if( !this.isCanvas(target) ) {
		return;
	}

	var newW = newX - this.posX - 15;
	var newH = newY - this.posY - 15;

	with( this.overlay.style ) {
		if( newW < 0 ) {
			left = newX - 15;
		}

		if( newH < 0 ) {
			top = newY - 15;
		}
	
		newW = Math.abs( newW );
		newH = Math.abs( newH );
	
		width = newW+'px';
		height = newH+'px';
	}
};

Drawing.prototype.mouseupDraw = function(e) {
	var event = new Event(e);
	event.cancelBubble();
	
	drawing._mouseupDraw();
};

Drawing.prototype._mouseupDraw = function() {
	DOM.removeEventListener( this.canvas, "mousemove", this.mousemoveDraw );
	DOM.removeEventListener( this.canvas, "mouseup", this.mouseupDraw );
	
	var newOverlayWidth = DOM.parsePx(this.overlay.style.width);
	
	if( newOverlayWidth < 20 ) {
		this.canvas.removeChild( this.overlay );
		
		active.showAll();
		
		this.canvas = '';
		this.overlay = '';
	} else {
		this.canvas.removeChild( this.overlay );
		
		active.addOverlay(this.overlay, this.canvas);

		this.canvas = '';
		this.overlay = '';
	}
	
	this.unlock();
};

Drawing.prototype.mouseoverHide = function(e) {
	drawing._mouseoverHide();
};

Drawing.prototype._mouseoverHide = function() {
	if( !this.locked ) {
		DOM.hide('labels');
	}
};

Drawing.prototype.mouseoverShow = function(e) {
	var event = new Event(e);
	var target = event.getTarget();
	
	drawing._mouseoverShow(target);
};

Drawing.prototype._mouseoverShow = function(target) {
	if( !this.locked ) {
		DOM.show('labels');

		active.processOverlays(target);
	}
};

Drawing.prototype.attachMouseoverListeners = function() {
	
	// clean out existing garbage
	DOM.removeEventListener( 'imageContainer', 'mouseover', this.mouseoverShow );
	DOM.removeEventListener( 'imageContainer', 'mouseout', this.mouseoverHide );
	DOM.removeEventListener( 'labels', 'mouseout', this.mouseoverHide );

	// add it back
	DOM.addEventListener( 'imageContainer', 'mouseover', this.mouseoverShow );
	DOM.addEventListener( 'imageContainer', 'mouseout', this.mouseoverHide );
	DOM.addEventListener( 'labels', 'mouseout', this.mouseoverHide );
};

Drawing.prototype.isCanvas = function(div) {
	return DOM.equalsIgnoreCase(div.id, 'labels');
};

Drawing.prototype.lock = function() {
	this.locked = true;
};

Drawing.prototype.unlock = function() {
	this.locked = false;
};

Drawing.prototype.toggleLock = function() {
	this.locked = !this.locked;
};