Fire JS Bin - Cubescape

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

var GRID_SPACING = 10;
var SELECTION_OFFSET_X = 5;
var SELECTION_OFFSET_Y = 11;

var cubes = [];
var order = [];
var cubeId = 0;
var canvasLock = false;
var replayMarker = 0;
var replaying = false;
var animateReplayTimer = null;

function init() { /* Selecting a colour */
  if (document.getElementById("colourSelect") == null) {
    $("body").append('<div id="colourSelect"></div>');
  }

var currentlySelected = $("#colours .on");

if (currentlySelected.length > 0) {
    var offset = currentlySelected.offset();
    $("#colourSelect").css("left", offset.left).css("top", offset.top);

selectedColour = currentlySelected[0].id;
  }

$("#colours a").click(function () {
    $("#colours li").removeClass("on");

var offset = $(this).offset();
    var anchor = this;

$("#colourSelect").animate({
      "left": offset.left,
      "top": offset.top
    }, 600);

$("#sizes").fadeOut(400, function () {
      $("#sizes").removeClass().addClass(anchor.parentNode.id).fadeIn(400);
    });

selectedColour = this.parentNode.id;
    $(this.parentNode).addClass("on");

this.blur();

$("#draw a").click();

return false;
  });

$("a", currentlySelected).click();

/* Canvas resizing */
  resizeCanvas();

$(window).bind("resize", resizeCanvas);

function resizeCanvas() {
    var window = $("body");
    var canvasContainer = $("#canvasContainer");
    var canvas = $("#canvas");

var width = window.width();
    var height = window.height() - $("#header").height();

canvasContainer.css("height", height);
    canvas.css("width", width).css("height", height);
  };

$("#toolbar a").mouseover(function () {
    if ($(this).parents("li")[0].id != "save") {
      if (document.getElementById("toolbarTooltip") == null) {
        var tooltip = $('<div id="toolbarTooltip"></div>');
        tooltip.appendTo("#header");
      }

$("#toolbarTooltip").text(this.title)

this.oldTitle = this.title;
      this.title = "";
    }
  }).mouseout(function () {
    if ($(this).parents("li")[0].id != "save") {
      this.title = this.oldTitle;

$("#toolbarTooltip").remove();
    }
  })

/* Draw */
  $("#draw a").click(function () {
    if (replaying) {
      return false;
    }

var erase = $("#erase");
    var replay = $("#replay");

erase.removeClass("buttonDown");
    $("#gridSelect").removeClass("erase");
    $(".cube").unbind();
    $(".vShadow").unbind();

replay.removeClass("buttonDown");

$("#draw").addClass("buttonDown");

return false;
  }).click();

/* Erase cubes */
  $("#erase a").click(function () {
    if (replaying) {
      return false;
    }

var draw = $("#draw");
    var erase = $("#erase");

draw.removeClass("buttonDown");

if (!erase.hasClass("buttonDown")) {
      erase.addClass("buttonDown");

$("#gridSelect").addClass("erase");

$(".cube").click(function () {
        var cube = $(this);

cube.unbind();

var id = this.id.replace(/cube/, "");
        var row = this.row;
        var col = this.col;

order[order.length] = {
          "id": id,
          "row": row,
          "col": col,
          "colour": "delete"
        };

var exploder = $('<div class="exploder"><div class="left"></div><div class="right"></div></div>');

if (cubes[row][col][cubes[row][col].length - 1].id == this.id) {
          exploder.append('<div class="top"></div>');
        }

exploder.css("left", cube.css("left")).css("top", cube.css("top")).css("zIndex", cube.css("zIndex"))

cube.after(exploder);
        cube.remove();

explosion(exploder);

$("#vShadow" + id).remove();

$("#shadow" + id).animate({
          "opacity": 0
        }, 400, function () {
          $(this).remove();
        });

for (var i = 0; i < cubes[row][col].length; i++) {
          if (cubes[row][col][i].id == "cube" + id) {
            cubes[row][col].splice(i, 1);

break;
          }
        }

var old = i;

for (; i < cubes[row][col].length; i++) {
          id = cubes[row][col][i].id.replace(/cube/, "");

$("#" + cubes[row][col][i].id).animate({
            "top": parseInt($("#" + cubes[row][col][i].id).css("top")) - 5 - 5 * (i - old)
          }, 100 + 20 * (i - old), "easeOutQuart", function (index) {
            return function () {
              $("#" + cubes[row][col][index].id).animate({
                "top": (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y - index * GRID_SPACING
              }, 300, "easeInQuart", function () {
                if (index == cubes[row][col].length - 1) {
                  checkShadows(row, false);
                }
              });
            }
          }(i));

$("#vShadow" + id).animate({
            "top": parseInt($("#" + cubes[row][col][i].id).css("top")) - 5 - 5 * (i - old) + 5
          }, 100 + 20 * (i - old), "easeOutQuart", function (id, index) {
            return function () {
              $("#vShadow" + id).animate({
                "top": (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y - index * GRID_SPACING + 5
              }, 300, "easeInQuart");
            }
          }(id, i));

var shadow = $("#shadow" + id);
          shadow.animate({
            "left": parseInt(shadow.css("left")) + 5 + 5 * (i - old),
            "top": parseInt(shadow.css("top")) - 3 - parseInt(2.5 * (i - old))
          }, 100 + 20 * (i - old), "easeOutQuart", function (id, index) {
            return function () {
              var shadow = $("#shadow" + id);
              shadow.animate({
                "left": row * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X + index * GRID_SPACING + GRID_SPACING,
                "top": (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y - index * GRID_SPACING + 6 + index * GRID_SPACING / 2
              }, 300, "easeInQuart");

}
          }(id, i));
        }
      });

$(".cube").mouseover(function () {
        $(this).addClass("cubeErase");
      }).mouseout(function () {
        $(this).removeClass("cubeErase");
      })

$(".vShadow").mouseover(function () {
        $("#cube" + this.id.replace(/vShadow/, "")).mouseover();
      }).mouseout(function () {
        $("#cube" + this.id.replace(/vShadow/, "")).mouseout();
      }).click(function () {
        $("#cube" + this.id.replace(/vShadow/, "")).click();
      })
    }

return false;
  });

function explosion(exploder) {
    switch (true) {
    case exploder.hasClass("exploder9"):
      exploder.remove();

return;

break;

case exploder.hasClass("exploder8"):
      exploder.removeClass("exploder8");
      exploder.addClass("exploder9");

break;

case exploder.hasClass("exploder7"):
      exploder.removeClass("exploder7");
      exploder.addClass("exploder8");

break;

case exploder.hasClass("exploder6"):
      exploder.removeClass("exploder6");
      exploder.addClass("exploder7");

break;

case exploder.hasClass("exploder5"):
      exploder.removeClass("exploder5");
      exploder.addClass("exploder6");

break;

case exploder.hasClass("exploder4"):
      exploder.removeClass("exploder4");
      exploder.addClass("exploder5");

break;

case exploder.hasClass("exploder3"):
      exploder.removeClass("exploder3");
      exploder.addClass("exploder4");

break;

case exploder.hasClass("exploder2"):
      exploder.removeClass("exploder2");
      exploder.addClass("exploder3");

break;

case exploder.hasClass("exploder1"):
      exploder.removeClass("exploder1");
      exploder.addClass("exploder2");

break;

case exploder.hasClass("exploder0"):
      exploder.removeClass("exploder1");
      exploder.addClass("exploder1");

break;

default:
      exploder.addClass("exploder0");

break;
    }

setTimeout(function () {
      explosion(exploder);
    }, 50);
  };

/* Replay cubescape */
  $("#replay").click(clickReplay)

function clickReplay() {
    if (replaying) {
      return false;
    }

var draw = $("#draw");
    var erase = $("#erase");

draw.removeClass("buttonDown");
    erase.removeClass("buttonDown");

$(this).addClass("buttonDown");

$(".cube").remove();
    $(".shadow").remove();
    cubes = [];

animateReplay();

return false;
  }

if (order.length > 0) {
    var data = cubes;

var label = $('<div id="label">' + meta.title + '<br /><em>by ' + meta.creator + '</em></div>').appendTo("body");
    var createOrSkip = $('<div id="createOrSkip"><ul><li class="button"><div class="buttonInner">  <a href="new.php">Create your own cubescape</a></div></li><li id="skip" class="button"><div class="buttonInner">  <a href="#">Skip the animation</a></div></li></ul></div>').appendTo("body");

$("#skip").click(function () {
      function skipPlaceCube(row, col, stack, selectedColour) {
        var MAX_CUBE_HEIGHT = 21;

var targetX = row * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X;
        var targetY = (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y;

var stackHeight = stack * GRID_SPACING;

var shadowHTML = "";

if (selectedColour != "coloursTransparent") {
          shadowHTML = '<div class="shadow" style="left: ' + (targetX + stackHeight + GRID_SPACING) + 'px; top: ' + (parseInt(targetY + 6 - stackHeight / 2)) + 'px;"></div>';
        }

return {
          cubeHTML: '<div class="cube cube' + selectedColour + '" style="left: ' + targetX + 'px; top: ' + (targetY - stackHeight) + 'px; z-index: ' + (row * 100 - col) + ';"></div>',
          shadowHTML: shadowHTML
        };
      };

function skipCheckShadows(row, rowNum, canvas) {
        var minCol = 0;

for (var col in row) {
          if (parseInt(col) < minCol) {
            minCol = parseInt(col);
          }
        }

for (var col in row) {
          col = parseInt(col);

for (var height = 0; height < row[col].length; height++) {
            var unshadowed = true;

/* Items that shadow it */
            for (var i = col - 2, j = height + 2; i >= minCol; j++, i--) {
              if (typeof row[i] != "undefined" && row[i].length >= j && !$("#" + row[i][j - 1].id).hasClass("cubecoloursTransparent") && (typeof row[col - 1] == "undefined" || row[col - 1].length < height)) {
                unshadowed = false;

if ($(".row" + rowNum + "col" + col, canvas).length == 0) {
                  var rowElement = $('<div class="row row' + rowNum + 'col' + col + '"></div>');
                  rowElement.prependTo(canvas).css("zIndex", rowNum * 100 + col + 1)
                }

if ($("vShadow" + row[col][height].id.replace(/cube/, ""), canvas).length == 0) {
                  var verticalShadow = $('<div class="shadow vShadow vShadow' + row[col][height].id.replace(/cube/, "") + '"></div>');

verticalShadow.appendTo($(".row" + rowNum + "col" + col, canvas)).css("left", rowNum * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X).css("top", (rowNum * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - 6 - ((height) * GRID_SPACING)).css("opacity", 0.99)
                }

break;
              }
            }

if (unshadowed) {
              $(".vShadow" + row[col][height].id.replace(/cube/, ""), canvas).remove();
            }
          }
        }
      };

if (animateReplayTimer != null) {
        clearTimeout(animateReplayTimer);
      }

var canvas = $("#canvas");
      $(".cube", canvas).remove();
      $(".row", canvas).remove();

var shadows = $("#shadows").html("");

var cubesHTML = "";
      var shadowsHTML = "";

for (var row = 0; row < data.length; row++) {
        if (typeof data[row] != "undefined") {
          for (var col in data[row]) {
            for (var stack = 0; stack < data[row][col].length; stack++) {
              col = parseInt(col);

var cubePlacement = skipPlaceCube(row, col, stack, data[row][col][stack].colour);
              cubesHTML += cubePlacement.cubeHTML;
              shadowsHTML += cubePlacement.shadowHTML;
            }
          }
        }

skipCheckShadows(data[row], row, canvas);
      }
      console.log(shadows, shadowsHTML);

canvas.append(cubesHTML);
      shadows.html(shadowsHTML);

return false;
    });

$("#replay").click();
  }
  else {
    var startArrow = $('<div id="startArrow">Click somewhere around here to start dropping cubes<span id="arrow"></span></div>').appendTo("body");

function arrowUp() {
      $("#arrow").animate({
        "marginTop": 15
      }, 750, arrowDown);
    }

function arrowDown() {
      $("#arrow").animate({
        "marginTop": 0
      }, 750, arrowUp);
    }

arrowDown();
  }

function animateReplay() {
    replaying = true;

if (replayMarker >= order.length) {
      replaying = false;

replayMarker = 0;

$("#draw a").click();

return;
    }

if (order[replayMarker].colour == "delete") {
      var id = order[replayMarker].id;
      var row = order[replayMarker].row;
      var col = order[replayMarker].col;
      var cube = $("#cube" + id);

$("#vShadow" + id).remove();
      $("#shadow" + id).remove();

for (var i = 0; i < cubes[row][col].length; i++) {
        if (cubes[row][col][i].id == "cube" + id) {
          cubes[row][col].splice(i, 1);

for (; i < cubes[row][col].length; i++) {
            var top = parseInt($("#" + cubes[row][col][i].id).css("top"));

$("#" + cubes[row][col][i].id).css("top", top + GRID_SPACING);

$("#shadow" + cubes[row][col][i].id.replace(/cube/, "")).css("left", row * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X + i * GRID_SPACING + GRID_SPACING).css("top", (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y - i * GRID_SPACING + 6 + i * GRID_SPACING / 2)

$("#vShadow" + cubes[row][col][i].id.replace(/cube/, "")).css("top", (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y - i * GRID_SPACING + 5)
          }

break;
        }
      }

cube.remove();

checkShadows(row, true);
    }
    else {
      placeCube(order[replayMarker].row, order[replayMarker].col, order[replayMarker].colour, order[replayMarker].id);
    }

replayMarker++;

animateReplayTimer = setTimeout(animateReplay, 25);
  };

/* Show selection on canvas */
  $(document).mousemove(showSelection)

function showSelection(event) {
    if (typeof showTopIndicatorTimer != "undefined") {
      clearTimeout(showTopIndicatorTimer);
    }

var GRID_STAGGER = 5;
    var SELECTION_OFFSET_X = 11;
    var SELECTION_OFFSET_Y = 3;

var offset = $("#canvas").offset();

if (event.clientY > offset.top + GRID_SPACING) {
      if (document.getElementById("gridSelect") == null) {
        $("#canvas").append('<div id="gridSelect"></div>');

if ($("#erase").hasClass("buttonDown")) {
          $("#gridSelect").addClass("erase");
        }
      }

if (parseInt(event.clientX / GRID_SPACING) % 2 == 0) {
        var row = Math.floor((event.clientY - offset.top) / GRID_SPACING) + Math.floor(event.clientX / (2 * GRID_SPACING));
        var col = -Math.floor((event.clientY - offset.top) / GRID_SPACING) + Math.floor((event.clientX + GRID_SPACING) / (2 * GRID_SPACING));
      }
      else {
        var row = Math.floor((event.clientY + GRID_SPACING / 2 - offset.top) / GRID_SPACING) + Math.floor(event.clientX / (2 * GRID_SPACING));
        var col = -Math.floor((event.clientY + GRID_SPACING / 2 - offset.top) / GRID_SPACING) + Math.floor((event.clientX + GRID_SPACING) / (2 * GRID_SPACING));
      }

$("#gridSelect").css("left", row * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X);

$("#gridSelect").css("top", (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y);

if (!$("#erase").hasClass("buttonDown") && typeof cubes[row] != "undefined" && typeof cubes[row][col] != "undefined") {
        function topIndicatorFlashUp() {
          var topIndicator = $("#topIndicator");

if (topIndicator.length > 0) {
            topIndicator.animate({
              "opacity": 0.9
            }, 500, "linear", topIndicatorFlashDown)
          }
        }

function topIndicatorFlashDown() {
          var topIndicator = $("#topIndicator");

if (topIndicator.length > 0) {
            topIndicator.animate({
              "opacity": 0
            }, 500, "linear", topIndicatorFlashUp)
          }
        }

var topIndicator = $("#topIndicator");

if (topIndicator.length <= 0) {
          topIndicator = $('<div id="topIndicator"></div>');
          topIndicator.css("opacity", 0);

setTimeout(topIndicatorFlashUp, 1);
        }

topIndicator.css("zIndex", $("#" + cubes[row][col][cubes[row][col].length - 1].id).css("zIndex"));
        topIndicator.css("left", row * GRID_SPACING + col * GRID_SPACING - GRID_STAGGER);
        topIndicator.css("top", (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - 1 - cubes[row][col].length * GRID_SPACING);

topIndicator.appendTo("#canvas");
      }
      else {
        $("#topIndicator").remove();
      }

/* Trap double clicks */
      $("#gridSelect").mousedown(function () {
        return false;
      });
    }
  }

/* Place block on canvas */
  $(document).click(clickCanvas);

function clickCanvas(event) {
/*
    $("#startArrow").animate(
      {
        "opacity": 0
      },
      250,
      function()
      {
        $(this).remove();
      }
    );
*/

$("#startArrow").remove();

if ($("#draw").hasClass("buttonDown")) {
      var offset = $("#canvas").offset();

if (event.clientY > offset.top + SELECTION_OFFSET_Y) {
        $(document).unbind("mousemove").mousemove(function () {
          $(document).unbind("mousemove").mousemove(showSelection);
        });

if (parseInt(event.clientX / GRID_SPACING) % 2 == 0) {
          var row = Math.floor((event.clientY - offset.top) / GRID_SPACING) + Math.floor(event.clientX / (2 * GRID_SPACING));
          var col = -Math.floor((event.clientY - offset.top) / GRID_SPACING) + Math.floor((event.clientX + GRID_SPACING) / (2 * GRID_SPACING));
        }
        else {
          var row = Math.floor((event.clientY + GRID_SPACING / 2 - offset.top) / GRID_SPACING) + Math.floor(event.clientX / (2 * GRID_SPACING));
          var col = -Math.floor((event.clientY + GRID_SPACING / 2 - offset.top) / GRID_SPACING) + Math.floor((event.clientX + GRID_SPACING) / (2 * GRID_SPACING));
        }

placeCube(row, col, selectedColour);

if (typeof showTopIndicatorTimer != "undefined") {
          clearTimeout(showTopIndicatorTimer);
        }

showTopIndicatorTimer = setTimeout(function () {
          showSelection(event);
        }, 2000);

return false;
      }
    }
  };

function placeCube(row, col, selectedColour, id) {
    $("#topIndicator").remove();

var MAX_CUBE_HEIGHT = 21;
    var DROP_TIME = 1;
    var EASING = "linear";
    var REPLAY = true;

if (typeof id == "undefined") {
      id = cubeId;
      cubeId++;
      DROP_TIME = 750;
      EASING = "easeOutBounce";
      REPLAY = false;

order[order.length] = {
        "id": id,
        "row": row,
        "col": col,
        "colour": selectedColour
      };
    }

var cube = $('<div id="cube' + id + '" class="cube cube' + selectedColour + '"></div>');

cube[0].row = row;
    cube[0].col = col;

if (typeof cubes[row] == "undefined") {
      cubes[row] = [];
    }

if (typeof cubes[row][col] == "undefined") {
      cubes[row][col] = [];
    }

var targetX = row * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X;
    var targetY = (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y;

var stackHeight = cubes[row][col].length * GRID_SPACING;

cubes[row][col][cubes[row][col].length] = {
      id: "cube" + id,
      colour: selectedColour
    };

var canvasRows = Math.ceil($("#canvas").height() / GRID_SPACING);

if (selectedColour != "coloursTransparent") {
      var shadow = $('<div id="shadow' + id + '" class="shadow"></div>');
      shadow.appendTo("#shadows").css("left", targetX + canvasRows * GRID_SPACING + stackHeight).css("top", targetY - (canvasRows * (GRID_SPACING / 2)) - stackHeight / 2 + GRID_SPACING).css("opacity", 0).animate({
        "left": targetX + stackHeight + GRID_SPACING,
        "top": parseInt(targetY + 6 - stackHeight / 2),
        "opacity": 0.99
      }, DROP_TIME, EASING)
    }

cube.css("zIndex", row * $("#canvas").width() - col).appendTo("#canvas").css("left", targetX).css("top", targetY - canvasRows * GRID_SPACING).animate({
      "top": targetY - stackHeight
    }, DROP_TIME, EASING, function (col, height) {
      showTopIndicator = true;

checkShadows(row, REPLAY);
    })
  };

function checkShadows(row, replay) {
    var DURATION = 1000;

if (replay) {
      DURATION = 1;
    }

var canvasRows = Math.ceil($("#canvas").height() / GRID_SPACING);

for (var col in cubes[row]) {
      for (var height = 0; height < cubes[row][col].length; height++) {
        var unshadowed = true;

/* Items that shadow it */
        for (var i = col - 2, j = height + 2; i > -canvasRows; j++, i--) {
          if (typeof cubes[row][i] != "undefined" && cubes[row][i].length >= j && !$("#" + cubes[row][i][j - 1].id).hasClass("cubecoloursTransparent")) {
            unshadowed = false;

if (document.getElementById("row" + row + "col" + col) == null) {
              var rowElement = $('<div id="row' + row + 'col' + col + '" class="row"></div>');
              rowElement.prependTo($("#canvas")).css("zIndex", row * $("#canvas").width() - col + 1)
            }

if (document.getElementById("vShadow" + cubes[row][col][height].id.replace(/cube/, "")) == null) {
              var verticalShadow = $('<div id="vShadow' + cubes[row][col][height].id.replace(/cube/, "") + '" class="shadow vShadow"></div>');

verticalShadow.appendTo($("#row" + row + "col" + col)).css("left", row * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X).css("top", (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - 6 - ((height) * GRID_SPACING)).css("opacity", 0).animate({
                "opacity": 0.99
              }, DURATION)
            }

break;
          }
        }

if (unshadowed) {
          $("#vShadow" + cubes[row][col][height].id.replace(/cube/, "")).remove();
        }
      }
    }
  }

$("#save").click(function () {
    alert("Unfortunately we've had to permanently disable the ability to save");

return false;
/*
      var $this = $(this);
      
      var mask = $('<div id="mask"></div>');
      mask.appendTo("body");
      mask.animate(
        {
          "height": $("body").height() - parseInt(mask.css("top"))
        },
        1000,
        "easeOutBounce",
        function()
        {
          $(document).unbind("mousemove")
          $(document).unbind("click");
          $("#replay").unbind("click");
          
          var saveForm = $("#saveForm");
          saveForm
            .addClass("visible")
            .submit(function()
              {
                if ($("#name").get(0).value == "")
                {
                  alert("You have to enter your name");

$("#name").focus();

return false;
                }
                if ($("#title").get(0).value == "")
                {
                  alert("You have to enter a title for your 'scape");

$("#title").focus();

return false;
                }
                if (cubes.length < 1)
                {
                  alert("You have to drop at least one cube");

$("#title").focus();

return false;
                }
              }
            )
            .animate(
              {
                opacity: 1
              },
              1000,
              function()
              {
                var serialisedOrder = "[";
                
                for (var i = 0; i < order.length; i++)
                {
                  if (i > 0)
                  {
                    serialisedOrder += ",";
                  }
                  
                  serialisedOrder += "{";
                  serialisedOrder += "id:" + order[i].id;
                  serialisedOrder += ",row:" + order[i].row;
                  serialisedOrder += ",col:" + order[i].col;
                  serialisedOrder += ',colour:"' + order[i].colour + '"';
                  serialisedOrder += "}"
                }
                
                serialisedOrder += "]";
                
                $("#order").get(0).value = serialisedOrder;
                
                var serialisedCubes = "[";
                
                for (var row = 0; row < cubes.length; row++)
                {
                  if (row > 0)
                  {
                    serialisedCubes += ", ";
                  }
                  
                  if (typeof cubes[row] != "undefined")
                  {
                    serialisedCubes += "{";
                    
                    var first = true;
                    
                    for (var col in cubes[row])
                    {
                      if (!first)
                      {
                        serialisedCubes += ", ";
                      }
                      
                      first = false;
                      
                      serialisedCubes += '"' + col +'":[';
  
                      for (var stack = 0; stack < cubes[row][col].length; stack++)
                      {
                        if (stack > 0)
                        {
                          serialisedCubes += ", "
                        }
                        
                        serialisedCubes += '{id:"' + cubes[row][col][stack].id + '"';
                        serialisedCubes += ', colour:"' + cubes[row][col][stack].colour + '"';
                        serialisedCubes += "}";
                      }
                      
                      serialisedCubes += "]";
                    }
                    
                    serialisedCubes += "}";
                  }
                }
                
                serialisedCubes += "]";
                
                $("#cubes").get(0).value = serialisedCubes;
                
                $("#name").focus();
                
                $("#saveForm a").click(function()
                  {
                    $("#saveForm")
                      .css("opacity", 0)
                      .removeClass("visible")
                      
                    mask.animate(
                      {
                        "height": 0
                      },
                      500,
                      "linear",
                      function()
                      {
                        mask.remove();

$(document).mousemove(showSelection)
                        $(document).click(clickCanvas);
                        
                        $("#replay").click(clickReplay);
                      }
                    );
                    
                    return false;
                  }
                );
              }
            );
        }
      );
      
      return false;
*/
  });
}

$(init);

var meta = {creator: "", title: ""};
var cubes = [];
var order = [];

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  
  <head>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>
    <title>Cubescape</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="author" content="The Man in Blue" />
    <meta name="robots" content="all" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
        <script type="text/javascript" src="/assets/js/jquery.easing.1.3.js"></script>
  </head>
  
  <body>
    <div id="header">
      <h1><a href="index.php">Cubescape</a></h1>
      <div id="colours">
        <ol>
          <li id="coloursRed"><a href="#">Red</a></li>
          <li id="coloursOrange"><a href="#">Orange</a></li>
          <li id="coloursYellow"><a href="#">Yellow</a></li>
          <li id="coloursLightGreen"><a href="#">Light Green</a></li>
          <li id="coloursGreen"><a href="#">Green</a></li>
          <li id="coloursTeal"><a href="#">Teal</a></li>
          <li id="coloursCyan"><a href="#">Cyan</a></li>
          <li id="coloursBlue" class="on"><a href="#">Blue</a></li>
          <li id="coloursIndigo"><a href="#">Indigo</a></li>
          <li id="coloursPurple"><a href="#">Purple</a></li>
          <li id="coloursPink"><a href="#">Pink</a></li>
          <li id="coloursRose"><a href="#">Rose</a></li>
          <li id="coloursWhite"><a href="#">White</a></li>
          <li id="coloursBlack"><a href="#">Black</a></li>
          <li id="coloursTransparent"><a href="#">Transparent</a></li>
        </ol>
      </div>
      
      <ul id="toolbar">
        <li id="draw" class="button">
          <a href="#" title="Draw some cubes">Draw</a>
        </li>
        <li id="erase" class="button">
          <a href="#" title="Blow up some cubes">Erase</a>
        </li>
        <li id="replay" class="button">
          <div class="buttonInner">
            <a href="#" title="Replay construction so far">Replay</a>
          </div>
        </li>
        <li id="save" class="button">
          <div class="buttonInner">
            <a href="#" title="Unfortunately we've had to permanently disable the ability to save">We've disabled saving</a>
          </div>
        </li>
      </ul>
    </div>
    
    <div id="canvasContainer"><div id="canvas"><div id="shadows"></div></div></div>
    
    <form id="saveForm" method="POST" action="save.php">
      <fieldset>
        <ol>
          <li>
            <label>Your name</label>
            <input id="name" name="name" class="text" type="text" />
          </li>
          <li>
            <label>Title of your 'scape</label>
            <input id="title" name="title" class="text" type="text" />
          </li>
          <li class="submit">
            <input id="cubes" name="cubes" type="hidden" value="" />
            <input id="order" name="order" type="hidden" value="" />
            <input type="submit" class="submit" value="Save it" />
          </li>
        </ol>
      </fieldset>
      <p><a href="#">Nah, I'll go back to editing</a></p>
    </form>
  </body>

</html>

/* GENERAL ------------------------------------------------------------------ */
/* Zero default margin & padding around common elements */ body, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul { margin:0; border:0 none #FFFFFF; padding:0; }
html { height:100%; }
body { min-width:960px; height:100%; overflow:hidden; background-color:#FFFFFF; color:#000000; line-height:1.4; font-family:Helvetica, Arial, sans-serif; font-size:80%; text-align:left; }
a { color:#0066CC; text-decoration:underline; }
a:visited { color:#0066CC; }
a:hover { text-decoration:none; }
img { border:0 none transparent; }
input, select, table, textarea { font-size:100%; font-family:Arial, Helvetica, sans-serif; }
#top { position:absolute; left:-9999px; top: -9999px; }
/* HEADER ------------------------------------------------------------------- */
#header { height:120px; background-color:#222222; }
h1 { display:inline; float:left; width:120px; height:120px; }
h1 a { display:block; width:120px; height:120px; background-image:url(/assets/cubescape/logo.gif); background-repeat:no-repeat; text-indent:-9999px; }
#colours { position:absolute; left:204px; top:38px; z-index:20; }
#colours ol { list-style:none; }
#colours li { position:absolute; width:21px; height:21px; background-image:url(/assets/cubescape/cubes.gif); background-repeat:no-repeat; }
#colours a { display:block; width:21px; height:21px; overflow:hidden; text-indent:-9999px; highlight:none; }
#coloursRed { left:-16px; top:25px; background-position:0 0; }
#coloursOrange { left:0; top:0; background-position:-100px 0; }
#coloursYellow { left:16px; top:25px; background-position:-200px 0; }
#coloursLightGreen { left:32px; top:0; background-position:-300px 0; }
#coloursGreen { left:48px; top:25px; background-position:-400px 0; }
#coloursTeal { left:64px; top:0; background-position:-500px 0; }
#coloursCyan { left:80px; top:25px; background-position:-600px 0; }
#coloursBlue { left:96px; top:0; background-position:-700px 0; }
#coloursIndigo { left:112px; top:25px; background-position:-800px 0; }
#coloursPurple { left:128px; top:0; background-position:-900px 0; }
#coloursPink { left:144px; top:25px; background-position:-1000px 0; }
#coloursRose { left:160px; top:0; background-position:-1100px 0; }
#coloursWhite { left:176px; top:25px; background-position:-1200px 0; }
#coloursBlack { left:192px; top:0; background-position:-1300px 0; }
#coloursTransparent { left:208px; top:25px; background-position:-1400px 0; }
#colourSelect { position:absolute; z-index:10; width:21px; height:21px; margin:-3px 0 0 -3px; padding:3px; background-image:url(/assets/cubescape/selection_s.gif); background-repeat:no-repeat; }
.button { display:inline; float:left; min-width:50px; height:37px; overflow:hidden; background-image:url(/assets/cubescape/button_left.gif); background-repeat:no-repeat; }
.buttonDown { background-position:0 -37px; }
.button .buttonInner { display:inline; float:left; min-width:50px; height:37px; overflow:hidden; background-image:url(/assets/cubescape/button_right.gif); background-repeat:no-repeat; background-position:100% 0; }
.buttonDown .buttonInner { background-position:100% -37px; }
#toolbar { position:absolute; left:480px; top:43px; color:#7F7F7F; }
#draw .buttonInner { background-image:none; }
#draw a { display:inline; float:left; width:50px; height:37px; border-right:1px solid #000000; background-image:url(/assets/cubescape/icon_drop.png); background-repeat:no-repeat; background-position:17px 6px; text-indent:-9999px; }
#erase { border-right:1px solid #000000; border-left:1px solid #6e6e6e; background-position:-10px 0; }
#erase.buttonDown { border-left-color:#000000; background-position:-10px -37px; }
#erase a { display:inline; float:left; width:50px; height:37px; background-image:url(/assets/cubescape/icon_bomb.png); background-repeat:no-repeat; background-position:14px 9px; text-indent:-9999px; }
#replay { border-left:1px solid #6e6e6e; background-position:-10px 0; }
#replay.buttonDown { border-left-color:#000000; background-position:-10px -37px; }
#replay a { display:inline; float:left; width:50px; height:37px; background-image:url(/assets/cubescape/icon_film.png); background-repeat:no-repeat; background-position:14px 7px; text-indent:-9999px; }
#save { margin-left:45px; }
#save a { display:inline; float:left; height:37px; padding:0 20px 0 20px; color:#FFFFFF; text-decoration:none; line-height:38px; font-weight:bold; }
#toolbarTooltip { position:absolute; left:555px; top:90px; width:15em; margin-left:-7.5em; color:#FFFFFF; text-align:center; }
#createOrSkip { position:absolute; left:120px; top:0; z-index:100; width:100%; height:120px; background-color:#222222; }
#createOrSkip ul { position:absolute; left:0; top:41px; margin-left:20px; list-style:none; }
#createOrSkip .button { margin-right:20px; }
#createOrSkip .button a { display:inline; float:left; height:37px; padding:0 20px 0 20px; color:#FFFFFF; text-decoration:none; line-height:38px; font-weight: bold; }
/* CONTENT ------------------------------------------------------------------ */
#startArrow { position:absolute; left:50%; top:50%; z-index:1000; width:150px; margin:0 0 0 -75px; padding:44px 0 0 0; text-align:center; }
#startArrow #arrow { position:absolute; left:50%; top:0; width:23px; height:29px; margin:0 0 0 -11px; background-image:url(/assets/cubescape/start_arrow.png); background-repeat:no-repeat; }
#canvasContainer { width:100%; overflow:auto; }
#canvas { position:relative; z-index:1; height:500px; overflow:hidden; background-color:#CCCCCC; background-image:url(/assets/cubescape/grid.gif); background-position:4px -1px; }
#gridSelect { position:absolute; width:32px; height:15px; left:0; top:0; z-index:999999; background-image:url(/assets/cubescape/grid_select_s.gif); background-repeat:no-repeat; }
#gridSelect.erase { z-index:1; background-position:0 -15px; }
#topIndicator { position:absolute; width:21px; height:11px; left:0; top:0; z-index:999999; background-image:url(/assets/cubescape/top_indicator.gif); background-repeat:no-repeat; }
.cube { position:absolute; width:21px; height:21px; background-image:url(/assets/cubescape/cubes.gif); background-repeat:no-repeat; }
.cubecoloursRed { background-position:0 0; }
.cubecoloursOrange { background-position:-100px 0; }
.cubecoloursYellow { background-position:-200px 0; }
.cubecoloursLightGreen { background-position:-300px 0; }
.cubecoloursGreen { background-position:-400px 0; }
.cubecoloursTeal { background-position:-500px 0; }
.cubecoloursCyan { background-position:-600px 0; }
.cubecoloursBlue { background-position:-700px 0; }
.cubecoloursIndigo { background-position:-800px 0; }
.cubecoloursPurple { background-position:-900px 0; }
.cubecoloursPink { background-position:-1000px 0; }
.cubecoloursRose { background-position:-1100px 0; }
.cubecoloursWhite { background-position:-1200px 0; }
.cubecoloursBlack { background-position:-1300px 0; }
.cubecoloursTransparent { background-position:-1400px 0; }
.cubeErase { background-position:0 -21px; }
#shadows { position:relative; z-index:0; height:100%; opacity:0.35; filter:alpha(opacity=35); }
.shadow { position:absolute; width:20px; height:9px; background-image:url(/assets/cubescape/shadow.gif); background-repeat:no-repeat; }
.row { position:absolute; left:0; top:0; opacity:0.35; filter:alpha(opacity=35); }
.row .shadow { width:10px; height:15px; background-image:url(/assets/cubescape/shadow_vertical.gif); }
.exploder { position:absolute; }
.exploder div { position:absolute; background-repeat:no-repeat; }
.exploder .left { left:0; top:5px; width:11px; height:16px; background-image:url(/assets/cubescape/cube_grey_left.gif); }
.exploder .right { left:10px; top:5px; width:11px; height:16px; background-image:url(/assets/cubescape/cube_grey_right.gif); }
.exploder .top { left:0; top:0; width:21px; height:11px; background-image:url(/assets/cubescape/cube_grey_top.gif); }
.exploder1 { opacity:0.9; filter:alpha(opacity=90); }
.exploder1 .left { margin:2px 0 0 -4px; }
.exploder1 .right { margin:2px 0 0 4px; }
.exploder1 .top { margin:-3px 0 0 0; }
.exploder2 { opacity:0.8; filter:alpha(opacity=80); }
.exploder2 .left { margin:4px 0 0 -8px; }
.exploder2 .right { margin:4px 0 0 8px; }
.exploder2 .top { margin:-6px 0 0 0; }
.exploder3 { opacity:0.7; filter:alpha(opacity=70); }
.exploder3 .left { margin:6px 0 0 -12px; }
.exploder3 .right { margin:6px 0 0 12px; }
.exploder3 .top { margin:-9px 0 0 0; }
.exploder4 { opacity:0.6; filter:alpha(opacity=60); }
.exploder4 .left { margin:8px 0 0 -16px; }
.exploder4 .right { margin:8px 0 0 16px; }
.exploder4 .top { margin:-12px 0 0 0; }
.exploder5 { opacity:0.5; filter:alpha(opacity=50); }
.exploder5 .left { margin:10px 0 0 -20px; }
.exploder5 .right { margin:10px 0 0 20px; }
.exploder5 .top { margin:-15px 0 0 0; }
.exploder6 { opacity:0.4; filter:alpha(opacity=40); }
.exploder6 .left { margin:12px 0 0 -24px; }
.exploder6 .right { margin:12px 0 0 24px; }
.exploder6 .top { margin:-18px 0 0 0; }
.exploder7 { opacity:0.3; filter:alpha(opacity=30); }
.exploder7 .left { margin:14px 0 0 -28px; }
.exploder7 .right { margin:14px 0 0 28px; }
.exploder7 .top { margin:-21px 0 0 0; }
.exploder8 { opacity:0.2; filter:alpha(opacity=20); }
.exploder8 .left { margin:16px 0 0 -32px; }
.exploder8 .right { margin:16px 0 0 32px; }
.exploder8 .top { margin:-24px 0 0 0; }
.exploder9 { opacity:0.1; filter:alpha(opacity=10); }
.exploder9 .left { margin:18px 0 0 -36px; }
.exploder9 .right { margin:18px 0 0 36px; }
.exploder9 .top { margin:-27px 0 0 0; }
#label { position:absolute; right:10px; bottom:10px; z-index:1000; font-size:200%; opacity:0.8; filter:alpha(opacity=80); text-align:right; }
#label em { font-style:normal; opacity:0.5; filter:alpha(opacity=50); }
#mask { position:absolute; top:120px; z-index:100; width:100%; height:0; background-color:#000000; opacity:0.8; filter:alpha(opacity=80); }
#saveForm { position:absolute; left:-9999px; top:-9999px; z-index:110; min-width:27em; margin:-1.4em 0 0 -13.5em; opacity:0; filter:alpha(opacity=0); font-size:200%; }
#saveForm.visible { left:50%; top:50%; }
#saveForm ol { list-style:none; }
#saveForm li { display:inline; float:left; margin:0 1em 0 0; }
#saveForm label { display:block; color:#FFFFFF; }
#saveForm input { width:10em; }
#saveForm input.submit { position:relative; top:1.4em; width:5em; }
#saveForm p { clear:both; padding:4em 0 0 0; font-size:50%; text-align:center; }
#saveForm a { color: #FFFFFF; }

Pop out