/*
This code is for replacing <input> with <button>.
It actually just hides the <input>, so the effect of the <input> can still be used.
It adds a <button> immediately after the <input> in the DOM, and binds the click event to the <input>'s click event.

Use it like this:

<script type="text/javascript" src="../js/input_to_button.js"></script>

<style type="text/css">

button.buttonStyle {
	// put your style here
}

</style>
....

<input type="submit" name="submit" id="submit" value="Submit" class="input2button buttonStyle" />
....
<script type="text/javascript">
replaceInputsWithButtons();
</script>


You just have to ensure that the <input> has a class="input2button" 
(and also any classes you want copied to the <button>) and that it 
has an id.

In the example above, you will get an element added like this:-

<button type="button" id="submit_button" class="input2button buttonStyle" title="Submit">
	<span class="hide">Submit</span>
</button>

with the click event calling click on the <input>.

*/

// this function escapes strings for use in specifying IDs in jQuery expressions
function inputToButton_escapeID(s) {
	var togo = "";
	for (var i = 0; i < s.length; i += 1) {
		var c = s.charAt(i);
		if (c==':' || c=='.' || c=='[' || c==']') {
			togo += '\\';
		}
		togo += c;
	}
	return togo;
}


/* Replaces an input with a button.
This function hides the specified input, and adds a button element after the input element.
The button element is just a push button, whose onclick is set to click the input.
The button's class is set to the input's class value.
*/
function replaceInputWithButton(input_id, button_class, button_content, button_title) {
	var button_id = input_id + '_button';
	var input_control = $('#' + inputToButton_escapeID(input_id));
	input_control.after(
		'<button type="button" id="' + button_id + 
		'" class="' + button_class + 
		'" title="' + button_title + 
		'">' + button_content + 
		'</button>');
	$('#' + inputToButton_escapeID(button_id)).click(function () {
		input_control.click();
	});
	input_control.hide();
}

/* Replaces all inputs with the 'input2button' class with button elements. */
function replaceInputsWithButtons() {
	$('input.input2button').each(function (i) {
		replaceInputWithButton(this.id, this.className, '<span class="hide">' + this.value + '</span>', this.value);
	});
}