mason.Toolbar = Class
		.extend({

			init : function(elementId, app, view) {
				var this_ = this;

				this.html = $("#" + elementId);
				this.view = view;
				this.app = app;

				this.refreshViewButton = $('<button>Refresh</button>');
				this.html.append(this.refreshViewButton);
				this.refreshViewButton.button().click($.proxy(function() {
					this_.getViews(this_.key, true);
				}, this));
				this.viewText = $("<span class=\"text\">View:</span>");
				this.html.append(this.viewText);

				if (this.viewList == null) {
					this.viewList = $('<select id="viewList" style="width:120px; margin:0px; margin-right:5px;"></select>');
					this.html.append(this.viewList);

					this.viewList.select().change($.proxy(function() {
						this.app.layout();
						$('#viewId').html(this_.getSelectedView());
						this.view.loadView(this_.getSelectedView());
					}, this));
				}

				this.editViewButton = $("<button id=\"editViewButton\">Edit</button>");
				this.html.append(this.editViewButton);
				this.editViewButton.button().click($.proxy(function() {
					this.updateView(this);
				}, this));
				this.editViewButton.hide();

				this.deleteViewButton = $("<button id=\"deleteViewButton\">Delete</button>");
				this.html.append(this.deleteViewButton);
				this.deleteViewButton.button().click($.proxy(function() {
					this.deleteView(this);
				}, this));
				this.deleteViewButton.hide();

				this.addViewButton = $("<button id=\"addViewButton\">New</button>");
				this.html.append(this.addViewButton);
				this.addViewButton.button().click($.proxy(function() {
					this.addView(this);
				}, this));

				this.zoomText = $("<span class=\"text\">Zoom:</span>");
				this.html.append(this.zoomText);

				this.zoomOutButton = $("<button>-</button>");
				this.html.append(this.zoomOutButton);
				this.zoomOutButton.button().click($.proxy(function() {
					this.view.setZoom(this.view.getZoom() * 1.1);
					this.app.layout();
				}, this));

				this.resetButton = $("<button>1:1</button>");
				this.html.append(this.resetButton);
				this.resetButton.button().click($.proxy(function() {
					this.view.setZoom(1.0);
					this.appLayout.layout();
				}, this));

				this.zoomInButton = $("<button>+</button>");
				this.html.append(this.zoomInButton);
				this.zoomInButton.button().click($.proxy(function() {
					this.view.setZoom(this.view.getZoom() * 0.9);
					this.app.layout();
				}, this));

				// Relationship controls
				this.relationText = $("<span id=\"relationshipTypeTextLabel\" class=\"text\">Relation:</span>");
				this.html.append(this.relationText);

				if (this.relationTypeList == null) {
					this.relationTypeList = $('<select id="relationTypeList" style="width:120px; margin:0px; margin-right:5px;"></select>');
					this.html.append(this.relationTypeList);
					this.addRelationType("generalization", "Generalization");
					this.addRelationType("association", "Association");
					this.addRelationType("aggregation", "Aggregation");
					this.addRelationType("composition", "Composition");

					this.relationTypeList
							.select()
							.change(
									$
											.proxy(
													function() {

														var figure = this_.view
																.getCurrentSelection();

														if (figure.NAME == "Relationship") {
															figure
																	.setKind(
																			$(
																					"#relationTypeList option:selected")
																					.val(),
																			true);
														}
													}, this));
				}

				this.relationshipSwitchButton = $("<button id=\"relationSwitchButton\"><span style=\"padding:0px;\"><-></span></button>");
				this.html.append(this.relationshipSwitchButton);

				this.relationshipSwitchButton.button().click(
						$.proxy(function() {

							var figure = this_.view.getCurrentSelection();

							if (figure.NAME == "Relationship") {
								figure.switchTargetSource();
							}

						}, this));

				$('#relationshipTypeTextLabel').hide();
				$('#relationTypeList').hide();
				$('#relationSwitchButton').hide();
			},

			addRelationType : function(key, value) {
				$('#relationTypeList').append($('<option>', {
					value : key
				}).text(value));
			},

			getSelectedView : function() {
				if ($("#viewList option:selected").val() == undefined && $("#viewList").has('option').length > 0 ) {
					$("#viewList option")[0]['selected'] = true;
				}
				$('#viewId').text($("#viewList option:selected").val());
				
				return $("#viewList option:selected").val();
			},

			getViews : function(key, laadElementen) {
				var this_ = this;

				if ((key == undefined) == false) {
					this.key = key;
				}

				var key = "";
				var value = "";

				jQuery.ajax({
					type : "GET",
					dataType : "json",
					url : '/json/model/' + this.key + '/data/all',
					success : function(data, statusText) {
						var reader = new mason.Reader();
						reader.processData(this_, data);
						this_.view.loadView(this_.getSelectedView());
					},
					error : function(xhr, ajaxOptions, thrownError) {
						Console.log('Fout tijdens het ophalen van de views');
					}
				});
			},

			addView : function(this_) {
				var modelId = $('#modelId').text();

				var name = "";
				
				do {
					name = prompt("Kies een naam:", name);
				} while ( name ==! null && name.length < 1);
				
				if (name.length > 0) {
					
					var data = {
						description : name
					};

					jQuery.ajax({
						type : "POST",
						dataType : "json",
						data : data,
						url : '/json/model/' + modelId + '/view',
						success : function(json, statusText) {
							var reader = new mason.Reader();
							reader.processView(this_, json);
						},
						error : function(xhr, ajaxOptions, thrownError) {
							console.log('FOUT: Send new View');
						}
					});
				}
			},

			updateView : function(this_) {
				var modelId = $('#modelId').text();

				var name = $("#viewList option:selected").text();

				do {
					name = prompt("Kies een naam:", name);
				} while (name ==! null && name.length < 1);

				if (name.length > 0) {
					
					var data = {
						description : name
					};

					jQuery.ajax({
						type : "POST",
						dataType : "json",
						data : data,
						url : '/json/model/' + modelId + '/view',
						success : function(json, statusText) {
							var reader = new mason.Reader();
							reader.processView(this_, json);
						},
						error : function(xhr, ajaxOptions, thrownError) {
							console.log('FOUT: Send update View');
						}
					});
				}
			},

			deleteView : function(this_) {
				var viewId = this_.getSelectedView();

				jQuery.ajax({
					type : "DELETE",
					dataType : "json",
					url : '/json/view/' + viewId,
					success : function(json, statusText) {
						$("#viewList option[value='"+viewId+"']").remove();
						this_.view.loadView(this_.getSelectedView());
						if ( $("#viewList").has('option').length == 0 ) {
							this_.view.clear();
							$('#new-element').hide();
							$('#editViewButton').hide();
							$('#deleteViewButton').hide();
						}
					},
					error : function(xhr, ajaxOptions, thrownError) {
						console.log('FOUT: Send delete View');
					}
				});
			}

		});