callumj/index.html

## index.html
<html>
  <head>
    <style type="text/css">
      td, th {
        text-align: center;
      }

      .view {
        cursor: pointer;
      }

      td.main {
        border-width: 1px;
        width: 150px;
        height: 150px;
        border-style: inset;
        border-color: gray;
        background-color: white;
        -moz-border-radius: ;
      }

      td table {
        width: 100%;
      }

      tr.save:hover {
        cursor: pointer;
      }
    </style>
    <script type="text/javascript">
      setNotSaving = function(target) {
        var root = target.parentNode.parentNode.parentNode;

        var cln = document.getElementById("contents").firstElementChild.cloneNode(true);
        while (root.firstChild) {
          root.removeChild(root.firstChild);
        }
        root.appendChild(cln);
        bindThings();
      }

      handleSaveClick = function() {
        this.firstElementChild.innerText = "Saving....";
        var that = this;
        window.setTimeout(function() { this.setNotSaving(that) }, 1000);
      }

      handleEditClick = function() {
        var cln = document.getElementById("form").firstElementChild.cloneNode(true);
        while (this.firstChild) {
          this.removeChild(this.firstChild);
        }
        this.appendChild(cln);
        bindThings();
        this.removeEventListener("click", handleEditClick);
      }

      bindThings = function() {
        var objects = document.getElementsByClassName("save");
        for (var i = 0; i < objects.length; i++) {
          objects[i].removeEventListener("click", handleSaveClick);
          objects[i].addEventListener("click", handleSaveClick);
        }

        var objects = document.getElementsByClassName("main");
        for (var i = 0; i < objects.length; i++) {
          objects[i].removeEventListener("click", handleEditClick);
          objects[i].addEventListener("click", handleEditClick);
        }
      };

      document.addEventListener("DOMContentLoaded", function(event) {
        bindThings();
      });

      bindThings();
    </script>
  </head>
  <body>
    <div style="display: none">
      <div id="contents">
        <table class="view"><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table>
      </div>

      <div id="form">
        <table>
          <tbody>
            <tr>
              <td><input value="100" /></td>
            </tr>
            <tr>
              <td><input value="1" style="width: 10px" /> room loaded</td>
            </tr>
            <tr><td style="height: 10px"></td></tr>
            <tr class="save">
              <td style="background-color: rgb(164, 218, 166); padding-top: 10px; padding-bottom: 10px">Save changes</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <table style="width: 1050px;">
      <thead>
      </thead>
      <tbody>
        <tr>
          <th>SUN</th>
          <th>MON</th>
          <th>TUE</th>
          <th>WED</th>
          <th>THU</th>
          <th>FRI</th>
          <th>SAT</th>
        </tr>
        <tr>
          <td class="main">
            <table><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table>
          </td>
          <td class="main"><table class="view"><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$110<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$130<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$150<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
        </tr>
        <tr>
          <td class="main">
            <table><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table>
          </td>
          <td class="main"><table class="view"><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$110<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$130<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
          <td class="main"><table class="view"><tbody><tr><td>$150<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
	<html>
	<head>
	<style type="text/css">
	td, th {
	text-align: center;
	}

	.view {
	cursor: pointer;
	}

	td.main {
	border-width: 1px;
	width: 150px;
	height: 150px;
	border-style: inset;
	border-color: gray;
	background-color: white;
	-moz-border-radius: ;
	}

	td table {
	width: 100%;
	}

	tr.save:hover {
	cursor: pointer;
	}
	</style>
	<script type="text/javascript">
	setNotSaving = function(target) {
	var root = target.parentNode.parentNode.parentNode;

	var cln = document.getElementById("contents").firstElementChild.cloneNode(true);
	while (root.firstChild) {
	root.removeChild(root.firstChild);
	}
	root.appendChild(cln);
	bindThings();
	}

	handleSaveClick = function() {
	this.firstElementChild.innerText = "Saving....";
	var that = this;
	window.setTimeout(function() { this.setNotSaving(that) }, 1000);
	}

	handleEditClick = function() {
	var cln = document.getElementById("form").firstElementChild.cloneNode(true);
	while (this.firstChild) {
	this.removeChild(this.firstChild);
	}
	this.appendChild(cln);
	bindThings();
	this.removeEventListener("click", handleEditClick);
	}

	bindThings = function() {
	var objects = document.getElementsByClassName("save");
	for (var i = 0; i < objects.length; i++) {
	objects[i].removeEventListener("click", handleSaveClick);
	objects[i].addEventListener("click", handleSaveClick);
	}

	var objects = document.getElementsByClassName("main");
	for (var i = 0; i < objects.length; i++) {
	objects[i].removeEventListener("click", handleEditClick);
	objects[i].addEventListener("click", handleEditClick);
	}
	};

	document.addEventListener("DOMContentLoaded", function(event) {
	bindThings();
	});

	bindThings();
	</script>
	</head>
	<body>
	<div style="display: none">
	<div id="contents">
	<table class="view"><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table>
	</div>

	<div id="form">
	<table>
	<tbody>
	<tr>
	<td><input value="100" /></td>
	</tr>
	<tr>
	<td><input value="1" style="width: 10px" /> room loaded</td>
	</tr>
	<tr><td style="height: 10px"></td></tr>
	<tr class="save">
	<td style="background-color: rgb(164, 218, 166); padding-top: 10px; padding-bottom: 10px">Save changes</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	<table style="width: 1050px;">
	<thead>
	</thead>
	<tbody>
	<tr>
	<th>SUN</th>
	<th>MON</th>
	<th>TUE</th>
	<th>WED</th>
	<th>THU</th>
	<th>FRI</th>
	<th>SAT</th>
	</tr>
	<tr>
	<td class="main">
	<table><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table>
	</td>
	<td class="main"><table class="view"><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$110<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$130<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$150<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	</tr>
	<tr>
	<td class="main">
	<table><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table>
	</td>
	<td class="main"><table class="view"><tbody><tr><td>$100<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$110<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$120<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$130<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	<td class="main"><table class="view"><tbody><tr><td>$150<td></tr><tr><td>1 room loaded</td></tr></tbody></table></td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>