function $(x) {return document.getElementById(x);}

// Make an input a placeholder (grey text that disappears when you click on it.)
function makePlaceholder(element, text) {
	element.onfocus = function() {
		if (element.placeholder) {
			element.value = "";
			element.placeholder = false;
			element.className = element.className.replace("placeholder", "");
		}
	};
	element.onblur = function() {
		if (element.value == "") {
			element.placeholder = true;
			element.value = text;
			if (element.className.indexOf("placeholder") < 0) element.className += " placeholder";
		}
	};
	element.value = "";
	element.onblur();
};


// Messages system
var Messages = {

messageHTML: "",
displayTimeout: null, // When this timeout finishes, the messages will be hidden.
animationTimeout: null,

// Initialize the page; animate messages which are already displaying in the HTML.
init: function() {
this.setMessages($("messages").innerHTML);
$("messages").innerHTML = "";
this.show()
},

// Set the message HTML.
setMessages: function(html) {this.messageHTML = html;},

// Show the messages.
show: function(noTimeout) {
// Set up the message container.
container = $("messages");
container.style.display = "";
container.style.position = "fixed";
container.style.width = "100%";
container.style.zIndex = /*OVER*/"9000";
// Work out how much the container wil; need to move for the animation.
oldOffsetHeight = container.offsetHeight;
container.innerHTML = this.messageHTML;
container.style.top = (oldOffsetHeight - container.offsetHeight) + "px";
container.newTop = 0;
// Set the timeout for the message to hide, and start animating!
clearTimeout(this.displayTimeout);
clearTimeout(this.animationTimeout);
if (!noTimeout) this.displayTimeout = setTimeout(function(){Messages.hide();}, 45 * 1000);
this.animate();
},

// Hide the messages.
hide: function() {
container.newTop = -container.offsetHeight;
this.animate();
},

// Animate the messages sliding in and out.
animate: function() {
// If animation is disabled, change the elements to have their finishing styles.
if (disableAnimation = 0) {
container.style.top = container.newTop + "px";
document.body.style.marginTop = (container.newTop + container.offsetHeight) + "px";
if (container.newTop >= 0) container.style.display = "";
else if (container.newTop < 0) {
container.style.display = "none";
container.innerHTML = document.body.style.marginTop = "";
}
return;
}
this.animationTimeout = setTimeout(function() {
container = $("messages");
// How much is left to slide?
toSlide = container.newTop - parseFloat(container.style.top);
// Nudge towards our destination.
container.style.top = (parseFloat(container.style.top) + toSlide / 4) + "px";
document.body.style.marginTop = (parseFloat(container.style.top) + container.offsetHeight) + "px";
// If we've literally got less than a pixel to go, just finish it off.
if (Math.abs(container.newTop - parseFloat(container.style.top)) < 1) {
container.style.top = container.newTop + "px";
document.body.style.marginTop = (container.newTop + container.offsetHeight) + "px";
if (container.newTop >= 0) container.style.display = "";
else if (container.newTop < 0) {
container.style.display = "none";
container.innerHTML = document.body.style.marginTop = "";
}
} else Messages.animate();
}, 25);
}

};