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 class="floor-unit-title">
	<h3><%= @floor.title %></h3>
</div>
<% if @floor.layout == nil %>
	<div id="full-layout-canvas">
		<img id="layout-image" src="<%= @floor.layout_image.url %>" />
		<div class="image-cover"></div>
	</div>
<% else %>
	<%= @floor.layout.html_safe %>
<% end %>
<div class="bottomnav clearfix">
  <div class="action pull-right">
    <button id="save-floor-layout-btn" class="btn btn-primary"><%= t("space.save_floor_layout") %></button>
  </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 + 60)) + "px",
		floorUnits = <%= @floor.floor_units.asc(:title).collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>,
		formDisplay = false,
		changesMade = 0,
		floor = <%= {"id" => @floor.id.to_s, "title" => @floor.title, "html" => @floor.layout}.to_json.html_safe %>,
 		tmpImg = new Image();

	canvas.height(windowHeight);
	layoutImage.height(windowHeight);

    tmpImg.src = layoutImage.attr('src') ;
    tmpImg.onload = 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' for='temp_unit_id_" + dragAreaCount + "'><i class='fa fa-times'></i></button>"),
			btnHolder = $("<div class='selection-box-btn-holder'></div>");
		btnHolder.append(deleteBtn);
		currentDragBox.append(btnHolder);
		currentDragBox.css({
			"width" : (currentDragBox.width() * 100 / cover.width()) + "%",
			"height" : (currentDragBox.height() * 100 / cover.height()) + "%"
		})
		currentDragBox.append(makeNewForm(currentDragBox));
		currentDragBox.attr("data-unit-id","temp_unit_id_" + dragAreaCount);
		dragBoxes.push(currentDragBox);
		dragAreaCount++;
		changesMade++;
		currentDragBox = null;
		event.stopPropagation();
	}

	var makeNewForm = function(box,edit){
		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 = 0; index < floorUnits.length; index++){
				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 = (edit ? "existing" : "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 class='form-action-btn-holder'><button class='btn btn-small btn-primary'>Save</button></div>");
		submitBtn.find("button").on("click",function(){
			if(type == "existing"){
				var id = form.find("select").val(),
					unit = floorUnits.filter(function(x){return x.id == id})
				box.attr("data-unit-id",id);
				box.find(".selection-box-delete-btn").attr("for",id);
				if(box.find(".selection-box-label").length == 0){
					box.append("<div class='selection-box-label'>" + unit[0].title + "</div>");
				}else{
					box.find(".selection-box-label").text(unit[0].title);
				}
				if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){
					box.find(".selection-box-btn-holder").append("<button class='selection-box-edit-btn btn btn-small' for='" + id + "'>E</button>")
				}else{
					box.find(".selection-box-btn-holder button.selection-box-edit-btn").prop("disabled",false).attr("for",id);
					box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",id);
				}
				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);
						box.find(".selection-box-delete-btn").attr("for",data.unit.id);
						floorUnits.push(data.unit);
						formDisplay = false;
						formWrapper.remove();
						if(box.find(".selection-box-label").length == 0){
							box.append("<div class='selection-box-label'>" + data.unit.title + "</div>");
						}else{
							box.find(".selection-box-label").text(data.unit.title);
						}
						if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){
							box.find(".selection-box-btn-holder").append("<button class='selection-box-edit-btn btn btn-small' for='" + data.unit.id + "'>E</button>")
						}else{
							box.find(".selection-box-btn-holder button.selection-box-edit-btn").prop("disabled",false).attr("for",data.unit.id);
							box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",data.unit.id);
						}
					})
				}
			}
			return false;
		})
		form.append(field);
		form.append(checkbox);
		form.append(submitBtn);
		formWrapper.append(form);
		return formWrapper;
	}

	$("body").on("click",".selection-box-delete-btn",function(){
		var id = $(this).attr("for"),
			box = $(this).parents(".selection-box[data-unit-id=" + id + "]");
		if(box.find(".selection-form-wrapper").length > 0){
			formDisplay = false;
		}
		changesMade++;
		box.remove();
	})

	$("body").on("click",".selection-box-edit-btn",function(){
		var el = $(this),
			id = el.attr("for"),
			box = el.parents(".selection-box[data-unit-id=" + id + "]"),
			form = makeNewForm(box,true),
			cancelBtn = $("<button class='cancel-button btn btn-small'>Cancel</button>");

		cancelBtn.one("click",function(){
			el.prop("disabled",false);
			box.find(".selection-form-wrapper").remove();
			formDisplay = false;
			changesMade--;
		})

		el.prop("disabled",true);
		changesMade++;
		form.find(".form-action-btn-holder").append(cancelBtn);
		form.find("#toggle-select-text").prop("checked",true);
		form.find(".form-unit-title input[type=text]").hide();
		form.find(".form-unit-title select").val(id).show();
		box.append(form);
	})

	$("#save-floor-layout-btn").on("click",function(){
		if(formDisplay){
			alert("Please save the selected area or delete it.");
		}else{
			$(".selection-box.hover").removeClass("hover");
			var htmlToSave = canvas.toHtml(),
				el = $(this);
			el.prop("disabled",true);
			$.ajax({
				url : "/admin/space/save_floor_layout",
				data : {"layout_html" : htmlToSave, "floor_id" : floor.id},
				dataType : "json",
				type : "post"
			}).done(function(){
				el.prop("disabled",false);
				changesMade = 0;
			})
		}
		return false;
	})

	window.onbeforeunload = function(e){
		if(changesMade > 0){
			return "Please make sure to save the layout before leaving this page.";
		}
	}

	var cleanUpArea = function(){
		var shoudSave = false;
		$(".selection-box").each(function(){
			var el = $(this),
				id = el.data("unit-id"),
				unit = floorUnits.find(function(x){return x.id == id});

			if(unit == undefined){
				el.remove();
				shoudSave = true;
			}
		})
		if(shoudSave){
			var htmlToSave = canvas.toHtml();
			$.ajax({
				url : "/admin/space/save_floor_layout",
				data : {"layout_html" : htmlToSave, "floor_id" : floor.id},
				dataType : "json",
				type : "post"
			}).done(function(){
				changesMade = 0;
			})
		}
	}
</script>
<% if !@floor.layout.nil? %>
	<script type="text/javascript">
		cleanUpArea();
	</script>
<% end %>