sri · October 14, 2010 01:36
diff --git a/gistfile1.html b/gistfile1.html
 <!-- Simple Paint in plain HTML -->
 <html>
 <style>
 html, body { margin:0; padding:0; }
 #undo {
 background: #666;
 color: #fff;
 cursor: pointer;
 padding:0;
 }
 </style>
 <script>
 function id(x) { return document.getElementById(x) }
 function rgb() { return Math.floor(Math.random() * 256) }
 function rand_color() {
  return '#' + rgb().toString(16) + rgb().toString(16) + rgb().toString(16)
 }

 var drag = false
 var painted = []

 function p(i) {
  var div = document.createElement('div')
  div.className = 'p'
  div.id = 'div-' + i
  div.style.padding = '0'
  div.style.margin = '0'
  div.style.background = '#000'
  div.style.width = '20px'
  div.style.height = '20px'
  div.style.display = 'inline'
  div.style.float = 'left'
  div.style.cursor = 'pointer'
  div.onmousedown = function() { drag = true }
  div.onmouseup = function() { drag = false }
  div.onmousemove = function() { 
    if (!drag) return
    painted.push(div)
    div.style.background = '#257f54'
  }
  return div
 }

 var painted_n = 0

 function redo() {
  if (painted_n >= painted.length) {
    painted_n = 0
    undo()
  } else {
    painted[painted_n].style.background = '#257f54'
    painted_n += 1
    setTimeout(redo, 15)     
  }
 }

 function undo() {
  if (painted_n >= painted.length) {
    painted_n = 0
    redo()
  } else {
    painted[painted_n].style.background = '#000'
    painted_n += 1
    setTimeout(undo, 15) 
  }
 }

 window.onload = function() {
 for (var i=0; i <= 1000; i++) {
    document.body.appendChild(p(i))
  }
 }
 </script>
 <body>
 <div id="undo" onclick="undo()">run</div>
 </body>
 </html>
	<!-- Simple Paint in plain HTML -->
	<html>
	<style>
	html, body { margin:0; padding:0; }
	#undo {
	background: #666;
	color: #fff;
	cursor: pointer;
	padding:0;
	}
	</style>
	<script>
	function id(x) { return document.getElementById(x) }
	function rgb() { return Math.floor(Math.random() * 256) }
	function rand_color() {
	return '#' + rgb().toString(16) + rgb().toString(16) + rgb().toString(16)
	}

	var drag = false
	var painted = []

	function p(i) {
	var div = document.createElement('div')
	div.className = 'p'
	div.id = 'div-' + i
	div.style.padding = '0'
	div.style.margin = '0'
	div.style.background = '#000'
	div.style.width = '20px'
	div.style.height = '20px'
	div.style.display = 'inline'
	div.style.float = 'left'
	div.style.cursor = 'pointer'
	div.onmousedown = function() { drag = true }
	div.onmouseup = function() { drag = false }
	div.onmousemove = function() {
	if (!drag) return
	painted.push(div)
	div.style.background = '#257f54'
	}
	return div
	}

	var painted_n = 0

	function redo() {
	if (painted_n >= painted.length) {
	painted_n = 0
	undo()
	} else {
	painted[painted_n].style.background = '#257f54'
	painted_n += 1
	setTimeout(redo, 15)
	}
	}

	function undo() {
	if (painted_n >= painted.length) {
	painted_n = 0
	redo()
	} else {
	painted[painted_n].style.background = '#000'
	painted_n += 1
	setTimeout(undo, 15)
	}
	}

	window.onload = function() {
	for (var i=0; i <= 1000; i++) {
	document.body.appendChild(p(i))
	}
	}
	</script>
	<body>
	<div id="undo" onclick="undo()">run</div>
	</body>
	</html>