mason.ElementContainer = draw2d.shape.basic.Rectangle
		.extend({

			NAME : "mason.ElementContainer",

			DEFAULT_COLOR : new draw2d.util.Color("#FFFFFF"),
			BACKGROUND_COLOR : new draw2d.util.Color("#FFFFFF"),

			DEFAULT_COLOR : new draw2d.util.Color("#0000FF"),

			label : null,

			init : function() {
				this._super();

				var port1 = this.createPort("hybrid",
						new draw2d.layout.locator.TopLocator(this));
				var port2 = this.createPort("hybrid",
						new draw2d.layout.locator.RightLocator(this));
				var port3 = this.createPort("hybrid",
						new draw2d.layout.locator.BottomLocator(this));
				var port4 = this.createPort("hybrid",
						new draw2d.layout.locator.LeftLocator(this));

				this.setDimension(1, 1);
				this.setBackgroundColor(this.DEFAULT_COLOR);
				this.setColor(this.DEFAULT_COLOR.darker());

				if (typeof height === "undefined") {
					this.setDimension(1, 1);
				}

				this.setColor(this.DEFAULT_COLOR.darker());
				this.setBackgroundColor(this.BACKGROUND_COLOR);

			},

			/**
			 * @method Change the corner radius if the user clicks on the
			 *         element. quite simple....
			 * 
			 */
			onDoubleClick : function() {
				var this_ = this;
				jQuery.ajax({
					type : "GET",
					dataType : "json",
					url : '/json/access/element/' + this_.umlElement,
					success : function(data, statusText) {
						if ( data == 1 ) {
							this_.modify();
						}
					},
					error : function(xhr, ajaxOptions, thrownError) {
						console.log('FOUT: Send change text');
					}
				});
			}, 
			
			modify : function() {

				this.setDeleteable(false);

				this.commitCallback = $.proxy(this.commit, this);

				// commit the editor if the user clicks anywhere in the document
				//
				$("body").bind("click", this.commitCallback);

				// append the input field to the document and register
				// the ENTER and ESC key for commit /cancel the operation
				//
				this.html = $('<textarea style="font-family: arial; font-size:12; " id="inplaceeditor">');
				this.html.val(this.label.getText());
				this.html.hide();

				$("body").append(this.html);

				this.html.autoResize({
					animate : false
				});

				this.html.bind("keyup", $.proxy(function(e) {
					if (!e)
						var e = window.event;
					switch (e.which) {
					case 17:
						this.switchControl();
						break;
					case 13:
						if (this.getControlPressed()) {
							this.commit();
						}
						break;
					case 27:
						this.cancel();
						break;
					case 46:
						e.stopPropagation();
						e.preventDefault();
						break;
					}
				}, this));

				this.html.bind("keydown", $.proxy(function(e) {
					switch (e.which) {
					case 17:
						this.switchControl();
						break;
					}
				}, this));

				// avoid commit of the operation if we click inside the editor
				//
				this.html.bind("click", function(e) {
					e.stopPropagation();
					e.preventDefault();
				});
				// avoid commit of the operation if we click inside the editor
				//
				this.html.bind("click", function(e) {
					e.stopPropagation();
					e.preventDefault();
				});
				// avoid commit of the operation if we click inside the editor
				//
				this.html.bind("dblclick", function(e) {
					e.stopPropagation();
					e.preventDefault();
				});

				// Position the INPUT and init the autoresize of the element
				//
				var canvas = this.label.getCanvas();
				var bb = this.label.getBoundingBox();

				bb.setPosition(canvas
						.fromCanvasToDocumentCoordinate(bb.x, bb.y));

				// remove the scroll from the body if we add the canvas directly
				// into the body
				var scrollDiv = canvas.getScrollArea();
				if (scrollDiv.is($("body"))) {
					bb.translate(canvas.getScrollLeft(), canvas.getScrollTop());
				}

				bb.translate(-1, -1);
				bb.resize(2, 2);

				this.html.css({
					position : "absolute",
					top : bb.y,
					left : bb.x,
					"min-width" : this.getWidth() - 6,
					height : this.getHeight() - 7
				});
				this.html.fadeIn($.proxy(function() {
					this.html.focus();
				}, this));
			},

			/**
			 * @method Transfer the data from the editor into the label.<br>
			 *         Remove the editor.<br>
			 * @private
			 */
			switchControl : function() {
				if (this.controlPressed) {
					this.controlPressed = false;
				} else {
					this.controlPressed = true;
				}
			},
			
			setFocus : function(view, focus) {
				if (focus) {
					console.log("focus ligt op een ElementContainer");
				} else {
					console.log("focus weg van ElementContainer");
				}
			},

			/**
			 * @method Transfer the data from the editor into the label.<br>
			 *         Remove the editor.<br>
			 * @private
			 */
			getControlPressed : function() {
				return this.controlPressed;
			},

			commit : function() {
				$("body").unbind("click", this.commitCallback);
				var label = this.html.val();
				this.label.setText(label);
				this.html.remove();
				this.html = null;

				var data = {
					generatedKey : this.umlElement,
					value : label
				};

				var modelId = $('#modelId').text();

				var this_ = this;
				jQuery.ajax({
					type : "POST",
					dataType : "json",
					data : data,
					url : '/json/model/' + modelId + '/element',
					success : function(data, statusText) {
						var reader = new mason.Reader();
						reader.processElement(this_.getCanvas(), data);
						
						this_.removeAccess(this_);
					},
					error : function(xhr, ajaxOptions, thrownError) {
						console.log('FOUT: Send change text');
					}
				});
				this.setDeleteable(true);

				this.fireMoveEvent();
			},

			/**
			 * @method Transfer the data from the editor into the label.<br>
			 *         Remove the editor.<br>
			 * @private
			 */
			cancel : function() {
				$("body").unbind("click", this.commitCallback);
				this.html.remove();
				this.html = null;
				this.setDeleteable(true);
				
				var this_ = this;
				
				removeAccess(this);
				
			},
			
			removeAccess : function(this_) {				
				jQuery.ajax({
					type : "GET",
					dataType : "json",
					url : '/json/access/checkIn/' + this_.umlElement,
					success : function(data, statusText) {
					},
					error : function(xhr, ajaxOptions, thrownError) {
						console.log('FOUT: Send change text');
					}
				});
			},

			/**
			 * @method This value is relevant for the interactive resize of the
			 *         figure.
			 * 
			 * @return {Number} Returns the min. width of this object.
			 */
			setLabel : function() {

				var value = $("#" + this.umlElement).attr("data-text");

				if (typeof value == "undefined") {
					value = "DummyTekst";
				}
				value = value.replace(/\\r/g, "");
				value = value.replace(/\\n/g, "\r\n");

				if (this.label instanceof draw2d.shape.basic.Label) {
					this.label.setText(String(value));
				} else {
					this.label = new draw2d.shape.basic.Label(value);
					this.label.setColor("#0d0d0d");
					this.label.setFontColor("#0d0d0d");
					this.label.setStroke(0);

					this.addFigure(this.label, new mason.InnerLocator(this));
					this.label.setText(String(value));
				}
				
				this.setDimension(this.width, this.height); //repaint van object en ports

			},

			onDragEnter : function(draggedFigure) {
				// redirect the dragEnter handling to the hybrid port
				//
				return this.getHybridPort(0).onDragEnter(draggedFigure);
			},

			onDragEnd : function() {
				// redirect the dragEnter handling to the hybrid port
				//
				this._super();
				
				this.sendUpdate();
			},

			sendUpdate : function() {
				var viewId = $('#viewId').text();
				var this_ = this;

				var data = this_.getPersistentAttributes();

				if (data.generatedKey == -1) {
					delete data.generatedKey;
				}
				
				if (data.elementIdGenerated == -1) {
					alert("FOUT: ElementId is niet ingevuld in ElementContainer");
				} else {

					jQuery.ajax({
						type : "POST",
						dataType : "json",
						data : data,
						url : '/json/view/' + viewId + '/elementContainer',
						success : function(data, statusText) {
							this_.id = data.generatedKey;
						},
						error : function(xhr, ajaxOptions, thrownError) {
							console.log('FOUT: Send size/dimension');
						}
					});

				}

			},

			sendDelete : function() {

				var viewId = $('#viewId').text();
				var this_ = this;

				jQuery.ajax({
					type : "DELETE",
					dataType : "json",
					url : '/json/view/' + viewId + '/elementContainer/'
							+ this_.id,
					success : function(data, statusText) {
						// ok
					},
					error : function(xhr, ajaxOptions, thrownError) {
						console.log('FOUT: Send delete');
					}
				});

			},

			createCommand : function(request) {
				
				var this_ = this;

				if (request.getPolicy() === draw2d.command.CommandType.DELETE) {
					if (this.isDeleteable()) {
						this_.sendDelete();
					}
				}

				return this._super(request);
			},

			/**
			 * @inheritdoc
			 * 
			 * @param attributes
			 */
			repaint : function(attributes) {
				if (this.repaintBlocked === true || this.shape === null) {
					return;
				}

				if (typeof attributes === "undefined") {
					attributes = {};
				}

				// set some good defaults if the parent didn't
				if (typeof attributes.fill === "undefined") {
					attributes.fill = "90-" + this.bgColor.hash() + ":5-"
							+ this.bgColor.lighter(0.3).hash() + ":95";
				}

				this._super(attributes);
			},

			getPersistentAttributes : function() {

				var memento = this._super();

				// add all decorations to the memento
				//

				memento.generatedKey = this.id;

				memento.elementIdGenerated = this.umlElement;

				memento.viewIdGenerated = this.viewId;

				memento.width = Math.round(memento.width);
				memento.height = Math.round(memento.height);

				delete memento.id;

				return memento;
			},

			setPersistentAttributes : function(memento) {
				this._super(memento);

				// remove all decorations created in the constructor of this
				// element
				//
				this.resetChildren();

				// and restore all children of the JSON document instead.
				//
				this.id = memento.generatedKey;

				this.umlElement = memento.elementIdGenerated;
				this.viewId = memento.viewIdGenerated;

				this.setLabel();
			},

			getMinWidth : function() {
				if (this.label instanceof draw2d.shape.basic.Label) {
					return this.label.getMinWidth() + 10;
				}
				return 0;
			},

			getMinHeight : function() {
				if (this.label instanceof draw2d.shape.basic.Label) {
					return this.label.getMinHeight() + 10;
				}
				return 0;
			},

			getWidth : function() {
				if (this.getMinWidth() > this._super()) {
					return this.getMinWidth();
				}
				return this._super();
			},

			getHeight : function() {
				if (this.getMinHeight() > this._super()) {
					return this.getMinHeight();
				}
				return this._super();
			}

		});
