diff --git a/static/css/home.css b/static/css/home.css
index 156f42b..1343f38 100644
--- a/static/css/home.css
+++ b/static/css/home.css
@@ -141,6 +141,9 @@ p {
   padding: 36px;
   background: #ffffff;
 }
+.inline-dialog .dialog-body.fixed-width {
+  width: 460px;
+}
 .inline-dialog label {
   display: block;
   font-size: 24px;
@@ -167,6 +170,12 @@ p {
 .inline-dialog input {
   height: 55px;
 }
+.inline-dialog input.confirm {
+  background-color: #65d850;
+  border-color: #efefef;
+  color: #ffffff;
+  box-shadow: none;
+}
 .inline-dialog textarea {
   resize: none;
   height: 140px;
@@ -182,6 +191,9 @@ p {
 .inline-dialog textarea + .button {
   margin-top: 0;
 }
+.inline-dialog .ui-slider {
+  margin-bottom: 32px;
+}
 .login-form p {
   display: block;
   margin-top: -16px;
@@ -317,3 +329,11 @@ a.button.confirm {
   text-align: center;
   margin-bottom: 72px;
 }
+#minbeds {
+  display: none;
+}
+#project-description {
+  padding-bottom: 36px;
+  border-bottom: 2px solid #e2e2e2;
+  margin-bottom: 36px;
+}
diff --git a/static/css/home.less b/static/css/home.less
index f68f286..b62a6ec 100644
--- a/static/css/home.less
+++ b/static/css/home.less
@@ -17,7 +17,7 @@ body {
 
 h2 {
 	font-size: 32px;
-	margin-bottom: 32px;
+	margin-bottom: @control-margin-bottom;
 }
 
 h2 {
@@ -138,7 +138,7 @@ p {
 
 	h2 {
 		padding-left: 0;
-		margin-bottom: 32px;
+		margin-bottom: @control-margin-bottom;
 	}
 
 	.dialog-body {
@@ -150,6 +150,10 @@ p {
 		padding: 36px;
 
 		background: @white;
+
+		&.fixed-width {
+			width: 460px;
+		}
 	}
 
 	label {
@@ -167,7 +171,7 @@ p {
 		font-size: 28px;
 		background-color: @input-grey;
 		padding-left: 10px;
-		margin-bottom: 32px;
+		margin-bottom: @control-margin-bottom;
 
 		border: none;
 		border-radius: 6px;
@@ -179,6 +183,12 @@ p {
 	}
 	input {
 		height: 55px;
+		&.confirm {
+			background-color: rgb(101, 216, 80);
+			border-color: rgb(239, 239, 239);
+			color: @white;
+			box-shadow: none;
+		}
 	}
 	textarea {
 		resize: none;
@@ -197,6 +207,10 @@ p {
 	textarea + .button {
 		margin-top: 0;
 	}
+
+	.ui-slider {
+		margin-bottom: @control-margin-bottom;
+	}
 }
 
 .login-form {
@@ -363,4 +377,14 @@ a.button {
 .footer {
 	text-align: center;
 	margin-bottom: 72px;
+}
+
+#minbeds {
+	display: none;
+}
+
+#project-description {
+	padding-bottom: 36px;
+	border-bottom: 2px solid @input-grey;
+	margin-bottom: 36px;
 }
\ No newline at end of file
diff --git a/static/css/localcode-scheme.less b/static/css/localcode-scheme.less
index b5f6463..ef99252 100644
--- a/static/css/localcode-scheme.less
+++ b/static/css/localcode-scheme.less
@@ -20,6 +20,7 @@
 @input-grey: rgb(226, 226, 226);
 
 @project-width: 400px;
+@control-margin-bottom: 32px;
 
 // Typography
 @sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
diff --git a/templates/reblock/steps.html b/templates/reblock/steps.html
index b1c46ac..b6974ef 100644
--- a/templates/reblock/steps.html
+++ b/templates/reblock/steps.html
@@ -1,289 +1,288 @@
 {% extends 'reblock/review.html' %}
 {% load static %}
 
-
 {% block css %}
-        <link rel="stylesheet" href="{% get_static_prefix %}css/home.css" type="text/css"/>
-        <link rel="stylesheet" href="{% get_static_prefix %}css/layers.css" type="text/css"/>
-          <link rel="stylesheet" href="/resources/demos/style.css">
-  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
-{% endblock %}
-
-
-{% block subtitle %}
-    Build Site Configurations
+	{{ block.super }}
+	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
+	<link rel="stylesheet" href="/resources/demos/style.css">
+	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 {% endblock %}
 
-
 {% block content %}
-  <head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
-</head>
-
-<body>
-<div id = "update">
-<div id="preload" style="height:500px;width:500px;border:1px solid black;background-color:grey;"> Map is loading...</div>
-</div>
-
-<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
-<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
-<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
-
-<form id="layerconfigure" action="/reblock/compute/" method="POST" enctype="multipart/form-data">
-                {% csrf_token %}
-                {{ formset.management_form }}
-    <input type="submit" value="Check" />
-    <div> Project Index: <input type="text" name="projindex"/></div>
-
-<div id = "update3">
-</div>
-<div id = 'bt1'>
-</div>
-<div id = 'bt2'>
-</div>
-<div id = 'bt3'>
-</div>
-<div id = 'zipbt'>
-</div>
-</form>
+	<div class="inline-dialog">
+		<h2 id="project-name">Loading...</h2>
+		<form id="layerconfigure" action="/reblock/compute/" method="POST" enctype="multipart/form-data" class="dialog-body fixed-width">
+			{% csrf_token %}
+			{{ formset.management_form }}
+			<!--
+			<input type="submit" value="Check" />
+			<div>Project Index: <input type="text" name="projindex"/></div>
+			-->
+
+			<div id="project-description" class="project">
+			</div>
+
+			<div id = "update3">
+			</div>
+			<div id = 'bt1'>
+			</div>
+			<div id = 'bt2'>
+			</div>
+			<div id = 'bt3'>
+			</div>
+			<div id = 'zipbt'>
+			</div>
+		</form>
+	</div>
+
+	<div class="map-container">
+		<div id="update">
+			<div id="preload"><p>Loading...</p></div>
+		</div>
+	</div>
 {% endblock %}
 
 
 {% block scripts %}
-<script>
-
-
-var initjson = function(json){
-//the function to process json file
-return ((json).replace(/&(l|g|quo)t;/g, function(a,b){
-                return {
-                    l   : '<',
-                    g   : '>',
-                    quo : '"'
-                }[b];
-            }));
-}
-
-var loadmap = function(ori,road, inter){
-//the function to load map according to the input json file
-var oriJSONList = initjson(ori);
-var oriData = JSON.parse( oriJSONList );
-
-var roadJSONList = initjson(road);
-var roadData = JSON.parse( roadJSONList );
-
-var interJSONList = initjson(inter);
-var interData = JSON.parse( interJSONList );
-
-var orilayer = L.geoJson(oriData, {
-            weight: 1.5,
-            color: "#FFA500",
-            opacity: 0.8,
-            fillColor: "#B0DE5C",
-            fillOpacity: 0.8,
-            dashArray: '4',
-		});
-
-var interlayer = L.geoJson(interData, {
-            weight: 2.5,
-            color: "#FFA500",
-            opacity: 0.8,
-            fillColor: "#blue",
-            fillOpacity: 0.8
-		});
-
-var roadlayer = L.geoJson(roadData, {
-            weight: 2.5,
-            color: "#2F4F4F",
-            opacity: 0.8,
-            fillColor: "#B0DE5C",
-            fillOpacity: 0.8
-		});
-
-marker.push(orilayer);
-marker.push(interlayer);
-marker.push(roadlayer);
-
-for(var i=0;i<marker.length;i++) {
-    map.addLayer(marker[i]);
-    }  
-
-map.fitBounds(marker[0].getBounds());
-}
-
-var marker = new Array();//markers to store geojson objects to overlay
-var map = null;
-var setup = 1;
-var inter = 3000;//time interval to reload
-var refreshID = null;//setinterval object
-var slider_A = '<form id="reservation"><label for="minbeds">Step Selected</label><select name="minbeds" id="minbeds">'
-var slider_B = '</select></form>'
-var refreshID = setInterval(function(){update();},inter);//reload function
-var steps = null;//the total intermediate steps
-
-var update = function(){
-//reload map
-        reloadstep();
-        console.log("second");
-}
-
-function reloadall(){
-//query the final computation result
-$.getJSON("/reblock/reload/", {pr_id: "{{project_id}}"}, function(json){
-//remove previous markers
-for(var i=0;i<marker.length;i++) {
-    map.removeLayer(marker[i]);
-    }
-marker = new Array();
-//load new geojson
-loadmap(json["ori"],json["rd"], json["int"]);
-//load total steps amount
-steps = json["stepnumber"]+1;
-//load zipped path for shapefiles
-var zippath = json["zip"];
-
-//process geojson for download
-var innerdata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["int"]).replace(/\\/g, ''));
-var oridata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["ori"]).replace(/\\/g, ''));
-var rddata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["rd"]).replace(/\\/g, ''));
-
-//prepare download button for geojsons
-var bt1_link= '"data:' + innerdata + '" download="data.json"'
-var bt1stri = '<form action='+bt1_link+' id = "removebt1"><input type="submit" value="Interial parcels"></form>'
-var bt2_link= '"data:' + oridata + '" download="data.json"'
-var bt2stri = '<form action='+bt2_link+' id = "removebt2"><input type="submit" value="Original parcels"></form>'
-var bt3_link= '"data:' + rddata + '" download="data.json"'
-var bt3stri = '<form action='+bt3_link+' id = "removebt3"><input type="submit" value="Roads"></form>'
-
-//prepare download button for zipped file
-data = {path : zippath}
-var zipstr = "<form id = 'removezip' action = '/reblock/download?"+$.param(data)+"' method='POST'><div><input type='submit' value='Download shp'></div>{% csrf_token %}</form>"
-
-//add download links to buttons
-$("#bt1").append(bt1stri);
-$("#bt2").append(bt2stri);
-$("#bt3").append(bt3stri);
-$("#zipbt").append(zipstr);
-    
-//function for sliders, remove previous, and update option according to steps
-//everytime the slider condition is changed, will remove old marker and add new one according to the step sent to query
-        $(function() {
-    $( "#minbeds" ).remove();
-    
-    //slider string created, will update slider's option number
-    var slider = slider_A;
-    for (var i = 0;i<steps.valueOf();i++){
-    slider += '<option>' + i + '</option>';
-}
-    slider += slider_B;
-    $("#update3").append(slider);
-    
-    
-    var select = $( "#minbeds" );
-    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
-      min: 1,
-      max: steps,
-      range: "min",
-      value: select[ 0 ].selectedIndex + 1,
-      slide: function( event, ui ) {
-        select[ 0 ].selectedIndex = ui.value - 1;
-        //update the geojson overlay on the map
-        checkstep(select[ 0 ].selectedIndex);
-      }
-    });
-    $( "#minbeds" ).change(function() {
-      slider.slider( "value", this.selectedIndex + 1 );
-
-    });
-  });  
-  });  
-}
-
-function checkstep(step_index){
-    //query the specific step geojson
-    $.getJSON("/reblock/check_step/", {pr_id: "{{project_id}}", step: step_index}, function(json){
-for(var i=0;i<marker.length;i++) {
-    map.removeLayer(marker[i]);
-    }
-    marker = new Array();
-    loadmap(json["ori"],json["rd"], json["int"]);
-    steps = json["stepnumber"];
-    
-//remove previous button
-$("#removebt1").remove();
-$("#removebt2").remove();
-$("#removebt3").remove();
-$("#removezip").remove();
-
-//download buttons for geojson
-var innerdata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["int"]).replace(/\\/g, ''));
-var oridata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["ori"]).replace(/\\/g, ''));
-var rddata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["rd"]).replace(/\\/g, ''));
-
-var bt1_link= '"data:' + innerdata + '" download="data.json"'
-var bt1stri = '<form action='+bt1_link+' id = "removebt1"><input type="submit" value="Interial parcels"></form>'
-var bt2_link= '"data:' + oridata + '" download="data.json"'
-var bt2stri = '<form action='+bt2_link+' id = "removebt2"><input type="submit" value="Original parcels"></form>'
-var bt3_link= '"data:' + rddata + '" download="data.json"'
-var bt3stri = '<form action='+bt3_link+' id = "removebt3"><input type="submit" value="Roads"></form>'
-
-$("#bt1").append(bt1stri);
-$("#bt2").append(bt2stri);
-$("#bt3").append(bt3stri);
-  });
-}
-
-
-function reloadstep(){
-//query the latest intermediate step geojson
-//if the calculation is done, will call the reloadall function
-    $.getJSON("/reblock/reload_step/", {pr_id: "{{project_id}}"}, function(json){
-    if (json["start"]){
-        if (json["step"]){
-            
-            if (setup){
-            $("#preload").remove();
-            $("#update").append('<div style="width:500px; height:500px" id="map"></div>')
-            map = L.map('map');
-            
-            L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
-			maxZoom: 18,
-			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
-				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
-				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
-			id: 'examples.map-20v6611k'
-		}).addTo(map);
-        setup = 0;
-}
-            
-            if (json["finish"] ){//calculation is finished, will call reloadall function for the final result
-        clearInterval(refreshID);
-        reloadall();
-        
-
-    }else{//calculation is not done, will call loadmap function for latest calculation status
-        for(var i=0;i<marker.length;i++) {
-    map.removeLayer(marker[i]);
-    }   
-        marker = new Array();
-      loadmap(json["ori"],json["rd"], json["int"]);
-
-}
-             
-        }else{
-$("#preload").remove();
-           $("#update").append('<div id="preload" style="height:500px;width:500px;border:1px solid black;background-color:grey;"> Making graph...</div>'); 
-        }
-}
-  }
-);
-}
-
-</script>
-{% endblock %}
-
-
-
+	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
+	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
+	<script>
+
+		var initjson = function(json){
+			//the function to process json file
+			return ((json).replace(/&(l|g|quo)t;/g, function(a,b){
+				return {
+					l   : '<',
+					g   : '>',
+					quo : '"'
+				}[b];
+			}));
+		}
+
+		var loadmap = function(ori,road, inter){
+			//the function to load map according to the input json file
+			var oriJSONList = initjson(ori);
+			var oriData = JSON.parse( oriJSONList );
+
+			var roadJSONList = initjson(road);
+			var roadData = JSON.parse( roadJSONList );
+
+			var interJSONList = initjson(inter);
+			var interData = JSON.parse( interJSONList );
+
+			var orilayer = L.geoJson(oriData, {
+				weight: 1.5,
+				color: "#FFA500",
+				opacity: 0.8,
+				fillColor: "#B0DE5C",
+				fillOpacity: 0.8,
+				dashArray: '4',
+			});
+
+			var interlayer = L.geoJson(interData, {
+				weight: 2.5,
+				color: "#FFA500",
+				opacity: 0.8,
+				fillColor: "#blue",
+				fillOpacity: 0.8
+			});
+
+			var roadlayer = L.geoJson(roadData, {
+				weight: 2.5,
+				color: "#2F4F4F",
+				opacity: 0.8,
+				fillColor: "#B0DE5C",
+				fillOpacity: 0.8
+			});
+
+			marker.push(orilayer);
+			marker.push(interlayer);
+			marker.push(roadlayer);
+
+			for(var i=0;i<marker.length;i++) {
+				map.addLayer(marker[i]);
+			}  
+
+			map.fitBounds(marker[0].getBounds());
+		}
+
+		var marker = new Array();//markers to store geojson objects to overlay
+		var map = null;
+		var setup = 1;
+		var inter = 3000;//time interval to reload
+		var refreshID = null;//setinterval object
+		var slider_A = '<form id="reservation"><label for="minbeds">Path Width (Meters)</label><select name="minbeds" id="minbeds">'
+		var slider_B = '</select></form>'
+		var refreshID = setInterval(function(){update();},inter);//reload function
+		var steps = null;//the total intermediate steps
+
+		var update = function(){
+			//reload map
+			reloadstep();
+			console.log("second");
+		}
+
+		function reloadall(){
+			//query the final computation result
+			$.getJSON("/reblock/reload/", {pr_id: "{{project_id}}"}, function(json){
+				//remove previous markers
+				for(var i=0;i<marker.length;i++) {
+					map.removeLayer(marker[i]);
+				}
+				marker = new Array();
+				//load new geojson
+				loadmap(json["ori"],json["rd"], json["int"]);
+				//load total steps amount
+				steps = json["stepnumber"]+1;
+				//load zipped path for shapefiles
+				var zippath = json["zip"];
+
+				//process geojson for download
+				var innerdata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["int"]).replace(/\\/g, ''));
+				var oridata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["ori"]).replace(/\\/g, ''));
+				var rddata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["rd"]).replace(/\\/g, ''));
+
+				//prepare download button for geojsons
+				var bt1_link= '"data:' + innerdata + '" download="data.json"'
+				var bt1stri = '<form action='+bt1_link+' id = "removebt1"><input type="submit" value="Interial parcels"></form>'
+				var bt2_link= '"data:' + oridata + '" download="data.json"'
+				var bt2stri = '<form action='+bt2_link+' id = "removebt2"><input type="submit" value="Original parcels"></form>'
+				var bt3_link= '"data:' + rddata + '" download="data.json"'
+				var bt3stri = '<form action='+bt3_link+' id = "removebt3"><input type="submit" value="Roads"></form>'
+
+				//prepare download button for zipped file
+				data = {path : zippath}
+				var zipstr = "<form id = 'removezip' action = '/reblock/download?"+$.param(data)+"' method='POST'><div><input class='confirm' type='submit' value='Download'></div>{% csrf_token %}</form>"
+
+				//add download links to buttons
+				$("#bt1").append(bt1stri);
+				$("#bt2").append(bt2stri);
+				$("#bt3").append(bt3stri);
+				$("#zipbt").append(zipstr);
+
+				// TODO: these values are not currently available.
+				// Send them down to the template from Django.
+				var projectName = "Project Name";
+				var projectLocation = "Project Location";
+				var projectDescription = "Project Description will go here once the server provides the data to the template.";
+				$("#project-name").text(projectName);
+				$("#project-description").append('<h3 class="project-location">' + projectLocation + '</h3><p class="project-description">' + projectDescription + '</p>');
+
+				//function for sliders, remove previous, and update option according to steps
+				//everytime the slider condition is changed, will remove old marker and add new one according to the step sent to query
+				$(function() {
+					$( "#minbeds" ).remove();
+					
+					//slider string created, will update slider's option number
+					var slider = slider_A;
+					for (var i = 0;i<steps.valueOf();i++){
+						slider += '<option>' + i + '</option>';
+					}
+					slider += slider_B;
+					$("#update3").append(slider);
+					
+					
+					var select = $( "#minbeds" );
+					var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
+							min: 1,
+							max: steps,
+							range: "min",
+							value: select[ 0 ].selectedIndex + 1,
+							slide: function( event, ui ) {
+									select[ 0 ].selectedIndex = ui.value - 1;
+								//update the geojson overlay on the map
+								checkstep(select[ 0 ].selectedIndex);
+							}
+						});
+
+					$( "#minbeds" ).change(function() {
+						slider.slider( "value", this.selectedIndex + 1 );
+					});
+				});
+			});
+		}
+
+		function checkstep(step_index){
+			//query the specific step geojson
+			$.getJSON("/reblock/check_step/", {pr_id: "{{project_id}}", step: step_index}, function(json){
+				for(var i=0;i<marker.length;i++) {
+					map.removeLayer(marker[i]);
+				}
+				marker = new Array();
+				loadmap(json["ori"],json["rd"], json["int"]);
+				steps = json["stepnumber"];
+
+				//remove previous button
+				$("#removebt1").remove();
+				$("#removebt2").remove();
+				$("#removebt3").remove();
+				$("#removezip").remove();
+
+				//download buttons for geojson
+				var innerdata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["int"]).replace(/\\/g, ''));
+				var oridata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["ori"]).replace(/\\/g, ''));
+				var rddata = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json["rd"]).replace(/\\/g, ''));
+
+				var bt1_link= '"data:' + innerdata + '" download="data.json"'
+				var bt1stri = '<form action='+bt1_link+' id = "removebt1"><input type="submit" value="Interial parcels"></form>'
+				var bt2_link= '"data:' + oridata + '" download="data.json"'
+				var bt2stri = '<form action='+bt2_link+' id = "removebt2"><input type="submit" value="Original parcels"></form>'
+				var bt3_link= '"data:' + rddata + '" download="data.json"'
+				var bt3stri = '<form action='+bt3_link+' id = "removebt3"><input type="submit" value="Roads"></form>'
+
+				$("#bt1").append(bt1stri);
+				$("#bt2").append(bt2stri);
+				$("#bt3").append(bt3stri);
+			});
+		}
+
+		function reloadstep(){
+			//query the latest intermediate step geojson
+			//if the calculation is done, will call the reloadall function
+			$.getJSON("/reblock/reload_step/", {pr_id: "{{project_id}}"}, function(json){
+				if (json["start"]){
+
+					if (json["step"]){
+						
+						if (setup){
+							$("#preload").remove();
+							$("#update").append('<div style="width:500px; height:500px" id="map"></div>')
+							map = L.map('map');
+
+							L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
+								maxZoom: 18,
+								attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+								'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+								'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+								id: 'examples.map-20v6611k'
+							}).addTo(map);
+							setup = 0;
+						}
+						
+						if (json["finish"] ){//calculation is finished, will call reloadall function for the final result
+							clearInterval(refreshID);
+							reloadall();
+
+
+						} else {//calculation is not done, will call loadmap function for latest calculation status
+							for(var i=0;i<marker.length;i++) {
+								map.removeLayer(marker[i]);
+							}   
+							marker = new Array();
+							loadmap(json["ori"],json["rd"], json["int"]);
+
+						}
+
+					} else {
+						$("#preload").remove();
+						$("#update").append('<div id="preload"><p>Making graph...</p></div>'); 
+					}
+
+				}
+			});
+		}
+
+	</script>
 
+{% endblock %}
