// #require mootools.js
function initSearchBox (input, options) {
	options = options || {};
	input = $(input);
	var placeholder = (options.placeholder ? options.placeholder : '');
	if (window.webkit) {
		input.setAttribute('type', 'search');
		input.setAttribute('placeholder', placeholder);
	} else {
		var width = input.offsetWidth;
		var searchbox_left = new Element('span', {
			'class': 'searchbox_left'
		});
		var searchbox_right = new Element('span', {
			'class': 'searchbox_right'
		});
		var searchbox_wrapper = new Element('div', {
			'class': 'searchbox_wrapper',
			'styles': {
				'width': width
			}
		});
		input.setStyles({
			'margin-left': 22,
			'margin-right': 10,
			'width': width - 22 - 10,
			'background-position': (input.value == '') ? '0 0' : '-100px 0'
		});
		searchbox_wrapper.injectAfter(input);
		$$([searchbox_left, input, searchbox_right]).inject(searchbox_wrapper);
		if (window.ie) {
			input.setStyle('margin-top', -1);
//			$$([searchbox_left, input, searchbox_right]).setStyle('border', '1px solid blue');
		}
		//
		input.addEvent('focus', function() {
			input.setStyle('background-position', '-100px 0');
		}).addEvent('blur', function() {
			input.setStyle('background-position', input.value == '' ? '0 0' : '-100px 0');
		});
	}
}
window.addEvent('domready', function () {
	var ss_searchtext = $('ss-searchtext');
	if (!ss_searchtext)	return;
	var options = {};
	if(ss_searchtext.getParent().getTag() == 'label') {
		var placeholderText = "";
		var labelElement = ss_searchtext.getParent().getElementsByClassName('ss-placeholder')[0];
		//either grab text in a classed element
		if(labelElement) {
			placeholderText = labelElement.innerHTML;
		//or grab text from right inside the label
		} else {
			placeholderText = ss_searchtext.parentNode.firstChild.nodeValue;
			ss_searchtext.parentNode.firstChild.nodeValue = '';
		}
		placeholderText = placeholderText.split('\n')[0];
		options.placeholder = placeholderText;
	}
	initSearchBox(ss_searchtext, options);
});

