function ui(element) {
	
	var height = 26;
	
	// buttons
	element.getElements('.ui-button').each(function(el) {
		
		var inner = new Element('span', {'class': 'ui-inner-button'});
		inner.wraps(el);
		
		var outer = new Element('span', {'class': 'ui-outer-button'});
		outer.wraps(inner);
		
		el.addEvents({
			'mouseenter': function() {
				this.getParent('span.ui-inner-button').setStyle('backgroundPosition', 'left -' + height + 'px');
				this.getParent('span.ui-outer-button').setStyle('backgroundPosition', 'right -' + height + 'px');
			},
			'mouseleave': function() {
				this.getParent('span.ui-inner-button').setStyle('backgroundPosition', 'left 0px');
				this.getParent('span.ui-outer-button').setStyle('backgroundPosition', 'right 0px');
			},
			'mousedown': function() {
				this.getParent('span.ui-inner-button').setStyle('backgroundPosition', 'left -' + (height*2) + 'px');
				this.getParent('span.ui-outer-button').setStyle('backgroundPosition', 'right -' + (height*2) + 'px');
			},
			'mouseup': function() {
				this.getParent('span.ui-inner-button').setStyle('backgroundPosition', 'left -' + height + 'px');
				this.getParent('span.ui-outer-button').setStyle('backgroundPosition', 'right -' + height + 'px');
			},
			'focus': function() {
				this.blur();
			}
		});
	});
}

window.addEvent('domready', function() {
	ui($(document.body));
});