space/app/views/admin/spaces/floor_layout.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
  <%= stylesheet_link_tag "space" %>
<% end %>
<% content_for :page_specific_javascript do %>
	<%= javascript_include_tag "attrchange" %>
<% end %>

<div id="full-layout-canvas">
	<img id="layout-image" src="<%= @floor.layout_image.url %>" />
	<div class="image-cover"></div>
</div>
<script type="text/javascript">
	var canvas = $("#full-layout-canvas"),
		layoutImage = $("#layout-image"),
		cover = canvas.find(".image-cover"),
		dragAreaCount = 0,
		windowHeight = ($(window).height() - (36 + 46 + 75)) + "px",
		floorUnits = <%= @floor.floor_units.collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>,
		formDisplay = false,
		floor = <%= {"id" => @floor.id.to_s, "title" => @floor.title}.to_json.html_safe %>;
	canvas.height(windowHeight);
	layoutImage.height(windowHeight);
	layoutImage.on("load",function(){
		cover.width(layoutImage.width());
		// cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%");
	})

	var dragBoxes = [],
		offsetX = 0,
		offsetY = 0,
		diffX = 0,
		diffY = 0,
		currentDragBox = null,
		isDragging = false;
	cover.on("mousedown",function(e){
		if($(".selection-box.hover").length == 0 && !formDisplay){
			if(currentDragBox != null){
				currentDragBox.remove();
				currentDragBox = null;
				$(".make-box-permanent").remove();
			}
			var dragBox = $("<div class='selection-box'></div>"),
				xpercent = ((e.offsetX * 100) / cover.width()) + "%",
				ypercent = ((e.offsetY * 100) / cover.height()) + "%";
			dragBox.css({
				"left" : xpercent,
				"top" : ypercent
			})
			offsetX = e.offsetX;
			offsetY = e.offsetY;
			isDragging = true;
			currentDragBox = dragBox;
			cover.append(dragBox);
		}
	})

	cover.on("mousemove",function(e){
		if(isDragging){
			diffX = e.offsetX - offsetX;
			diffY = e.offsetY - offsetY;
			currentDragBox.css({
				width : diffX + "px",
				height : diffY + "px"
			})
		}
	})

	cover.on("mouseup",function(){
		if(isDragging){
			isDragging = false;
			if(currentDragBox.width() > 20 && currentDragBox.height() > 20){
				var offset = currentDragBox.offset(),
					btn = $("<button class='make-box-permanent btn btn-primary btn-small'><i class='fa fa-check'></i> Ok</button>");
				btn.on("click",selectAreaOkBtnHandler);
				currentDragBox.append(btn);
				currentDragBox.hover(function(){
					$(this).addClass("hover");
				},function(){
					$(this).removeClass("hover");
				})
			}else{
				currentDragBox.remove();
			}
		}
	})

	var selectAreaOkBtnHandler = function(event){
		$(this).remove();
		var deleteBtn = $("<button class='btn btn-small btn-danger selection-box-delete-btn'><i class='fa fa-times'></i> Delete</button>");
		deleteBtn.on("click",function(ev){});
		currentDragBox.append(deleteBtn)
		currentDragBox.append(makeNewForm(currentDragBox));
		dragBoxes.push(currentDragBox);
		dragAreaCount++;
		currentDragBox = null;
		event.stopPropagation();
	}

	var makeNewForm = function(box){
		formDisplay = true;
		var formWrapper = $("<div class='selection-form-wrapper' />"),
			form = $("<form class='selection-box-form form-horizontal' />"),
			field = "<div class='control-group'> <label calss='control-label muted' for='floor_unit_title'>Unit name : </label><img src='/assets/preloader.gif' style='width:50px; height:50px;display:none;' /><div class='form-unit-title'><input id='floor_unit_title' type='text' name='floor_unit[title]' placeholder='New unit title' /><select style='display:none;'>";

			for(index in floorUnits){
				var unit = floorUnits[index];
				field += "<option value='" + unit.id + "'>" + unit.title + "</option>";
			}

			field += "</select></div></div>";
		var checkbox = $("<div class='control-group'><div><input type='checkbox' id='toggle-select-text' /> Select existing units</div></div>"),
			type = "new";
		checkbox.find("input[type=checkbox]").on("click",function(){
			if($(this).is(":checked")){
				form.find("select").show();
				form.find("input[type=text]").hide();
				type = "existing";
			}else{
				form.find("select").hide();
				form.find("input[type=text]").show();
				type = "new";
			}
		})

		var submitBtn = $("<div class='control-group'><div><button class='btn btn-small btn-primary'>Save</button></div>");
		submitBtn.find("button").on("click",function(){
			if(type == "existing"){
				box.attr("data-unit-id",form.find("select").val());
				formDisplay = false;
				formWrapper.remove();
			}else if(type == "new"){
				var input = form.find("input[type=text]");
				if(input.val() != ""){
					form.find("img").show();
					input.hide();
					form.find("select").hide();
					$.ajax({
						url : "/admin/space/create_floor_unit",
						data : {"floor_unit[title]" : input.val(), "floor_unit[floor_id]" : floor.id},
						type : "post",
						dataType : "json"
					}).done(function(data){
						box.attr("data-unit-id",data.unit.id);
						formDisplay = false;
						formWrapper.remove();
					})
				}
				return false;
			}
			
		})
		form.append(field);
		form.append(checkbox);
		form.append(submitBtn);
		formWrapper.append(form);
		return formWrapper;
	}

</script>