
function beautify_search_inputs() {
	isSafari = (navigator.userAgent.indexOf("Safari") > 0);
	elements = document.getElementsByClassName('search', null, 'input');
	for (var i = 0; i < elements.length; i++) {
		if (isSafari) { 
			make_search_input(elements[i]);
		} else { 
			fake_search_input(elements[i]);
		}
	}
}

function make_search_input(element) {
	element.type = 'search';
	element.setAttribute('placeholder', element.value);
	element.setAttribute('autosave', 'my.domain.name'); // change this to your own domain name or whatever else 
	element.setAttribute('results', '5');
}

function fake_search_input(element) {
	Event.observe(element, 'click', function() { if (element.value == 'Search') element.value = '' });
	Event.observe(element, 'focus', function() { element.parentNode.className = 'search-container search-active' });
	Event.observe(element, 'blur',  function() { element.parentNode.className = 'search-container' });
	
	container = document.createElement('div');
	container.className = 'search-container';
	container.style.width = element.clientWidth + 'px';
	left = document.createElement('div');
	left.className = 'search-left';
	right = document.createElement('div');
	right.className = 'search-right';
	
	element.parentNode.insertBefore(container, element);
	element.parentNode.removeChild(element);
	container.appendChild(left);
	container.appendChild(right);
	container.appendChild(element);
}

Event.observe(window, 'load', beautify_search_inputs, false);