var Log = {
	stylesheet: [
		"ul#logger, ul#logger li { margin: 0; padding: 0; list-style: none; }",
		"ul#logger { position: fixed; z-index: 1000000; top: 10px; right: 10px; width: 20%; max-height: 90%; overflow: auto; }",
		"ul#logger { outline: 1px solid #000; background: #fff; color: #000; font-size: 14px; font: 'Myriad Pro', 'Helvetica', Arial, sans-serif; }",
		"ul#logger li { padding: 2px; }",
		"ul#logger li.odd { background: #ddd; }",
		"ul#logger li + li { border-top: 1px solid #ddd; }"
	].join("\n"),
	log: function(){
		this.createConsole()
		this.post($A(arguments).map(function(e){ return Object.inspect(e) }).join(', '))
	},
	waiting: [],
	post: function(s){
		this.waiting.push(s)
	},
	createConsole: function(){
		if (this.console == undefined) {
			var body = $$('body')[0], head = $$('head')[0]
			if (body && head) {
				this.console = new Element('ul', {id: 'logger'})
				body.insert(this.console)

				var style = new Element('style', {type: 'text/css'})
				if (style.styleSheet) {
					style.styleSheet.cssText = this.stylesheet
				} else {
					style.appendChild(document.createTextNode(this.stylesheet))
				}
				head.insert(style)

				this.console.setStyle({opacity: 0.8})

				this.odd = false
				this.post = function(s){
					var message = new Element('li')
					if (this.odd) {
						message.className = 'odd'
					}
					message.update(s.escapeHTML())
					this.console.insert({top: message})
					this.odd = !this.odd
				}
				this.waiting.each(function(post){
					this.post(post)
				}.bind(this))
			} else {
				setTimeout(this.createConsole.bind(this), 50)
			}
		}
	}
}

var log = function(){
	Log.log.apply(Log, arguments)
}