<!doctype html>
<script src="prototype.js"></script>
<script src="domo.js"></script>
<script>
	function opacity(pct) {
    return {opacity: String(pct / 100), filter: "alpha(opacity=" + pct + ")"}
  }
  var O = {
	x: function() {		
		var obj = {};
		$A(arguments).each(function(arg, itt) {
			Object.extend(obj, arg); 
		});
		
		return obj;
	}
  }
 var styleLeft = {style:'text-align:left;'};
  HTML({lang: "en"},
    HEAD(
      TITLE("Welcome to domo"),
      STYLE({type: "text/css"},
        STYLE.on("body", {textAlign: "center", fontSize: 12, fontFamily:'Arial,Helvetica'}),
        STYLE.on("h1", opacity(50), {background: "#000", color: "#fff"})
      )
    ),

    BODY(H1("Welcome to domo"),
	P(O.x({id:'test'},styleLeft),
		"does this work?")
		
  )
  )
  document.observe('dom:loaded', function(){
	$('test').insert('<span>it sure does</span>');
	var elm = $(SPAN('... and does this work?'));
	$('test').insert(elm);
	elm.insert('and maybe this too???');
	elm.insert({after:
		DIV({'id':'bingo',style:'color:green'},'We have a Bingo!')
	});
	var div = $('bingo');
	div.insert.bind(div).delay(3,'bongo');;
  });
</script>