function removeStyleClass(sender, className) {
	if (hasStyleClass(sender, className)) {
		sender.className = sender.className.replace(className, "");
	}
}
function addStyleClass(sender, className) {
	if (!hasStyleClass(sender, className)) {
		sender.className += (sender.className.length ? " " + className : className);
	}
}
function hasStyleClass(sender, className) {
	return sender.className.indexOf(className) !== -1;
}

function addEvent(sender, event, func) {
	try {
		return sender.addEventListener(event, func, false); 
	} catch (err){
		return sender.attachEvent('on' + event, func);
	}
}
function removeEvent(sender, event, func) {
	try {
		return sender.removeEventListener(event, func, false);
	} catch (err) {
		return sender.detachEvent('on' + event, func);
	}
}

function createEmptySpan(className) {
	var left = document.createElement('span');
	left.className = className;
	return left;
}

function clearSearch(search) {
	if(search != null) {
		search.value = '';
	}
}

var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++) {
	var input = inputs[i];
	
	if(hasStyleClass(input, 'search')) {
		setupSearchField(input);
	} else if(input.type == 'text' && !hasStyleClass(input, 'plain')) {
		setupTextField(input);
	}  else if(input.type == 'submit' || hasStyleClass(input, 'button')) {
		setupSubmitButton(input);
	}
}

var buttons = document.getElementsByTagName('a');
for(var i=0; i<buttons.length; i++) {
	var button = buttons[i];
	
	if(hasStyleClass(button, 'button')) {
		setupButton(button);
	}
}

var areas = document.getElementsByTagName('textarea');
for(var i=0; i < areas.length; i++) {
	var area = areas[i];
	if (!hasStyleClass(area, 'no-style')) {
		setupTextArea(area);
	}
}

function createWrapper(node, className, isBlock) {
	addStyleClass(node, className);
	
	var wrapper = document.createElement(isBlock ? 'div' : 'span');
	wrapper.className = className + ' border-wrapper ';
	if(node.value != null) {
		if(node.value.length == 0) {
			addStyleClass(wrapper, 'empty');
		}
		addEvent(wrapper, 'click', function() {node.focus();});
		
		addEvent(node, 'focus', function() {
			removeStyleClass(wrapper, 'empty');
			addStyleClass(wrapper, 'focus');
		});
		addEvent(node, 'blur', function() {
			if(node.value.length < 1) {
				addStyleClass(wrapper, 'empty');
			}
			removeStyleClass(wrapper, 'focus');
		});
	}
	
	wrapper.appendChild(createEmptySpan(className+' border-left'));
	wrapper.appendChild(createEmptySpan(className+' border-right'));
	wrapper.appendChild(createEmptySpan(className+' border-center'));
	
	node.parentNode.insertBefore(wrapper, node);
	wrapper.appendChild(node);
	
	node.wrapper = wrapper;
}

function setupSearchField(input) {
	createWrapper(input, 'search', false);
	
	var clear = createEmptySpan('clear-button');
	addEvent(clear, 'click', function() {
		clearSearch(input);
	});
	input.wrapper.appendChild(clear);
}

function setupTextField(input) {
	var width = input.clientWidth;
	
	createWrapper(input, 'text-field', false);
	
	input.wrapper.style.width = width + 'px';
	
	if(input.id == '') {
		input.id = input.name; 
	}
}

function setupTextArea(area) {
	createWrapper(area, 'text-area', true);
	
	if(area.id == '') {
		area.id = area.name; 
	}
}

function setupSubmitButton(button) {
	createWrapper(button, 'submit-button', false);
	
	var text = createEmptySpan('submit-button label');
	text.appendChild(document.createTextNode(button.value));
	button.wrapper.appendChild(text);
	
	addEvent(button.wrapper, 'click', function() {button.click();});
}

function setupButton(button) {
	var title = button.innerHTML;
	button.innerHTML = '';
	var subButton = document.createElement('span');
	button.appendChild(subButton);
	
	createWrapper(subButton, 'submit-button', false);
	
	var text = createEmptySpan('submit-button label');
	text.appendChild(document.createTextNode(title));
	subButton.wrapper.appendChild(text);
	
	//addEvent(button.wrapper, 'click', function() {button.click();});
}