var checkboxHeight = "16";
var Custom = {
	init: function() {
		$(".styled[type=checkbox]").each(function(){
			var checkbox = $(this);
			var style = "";
			if (checkbox.is(":checked"))
				style = 'style="backgroundPosition: 0 - ' + (checkboxHeight*2) + 'px"';
			$('<span class="checkbox"></span>').insertBefore(checkbox);
			this.onchange = Custom.clear;
			$(this).prev().bind("mousedown", Custom.pushed);
			$(this).prev().bind("mouseup", Custom.check);
		});
		var selects = $("select.styled");
		selects.each(function(){
			var select = $(this);
			var selectId = select.attr("id");
			var selectedText = $("option:selected", select).html();
			$('<span id="select' + selectId + '" class="select">' + selectedText + '</span>').insertBefore($(this));
			select.change(function(){
				$(this).prev().html($("option:selected", $(this)).html());
			});
		});
		document.onmouseup = Custom.clear;
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			}
			element.checked = true;
		}
	},
	clear: function() {
		$(".styled:checkbox").each(function(){
			var inp = $(this);
			if(inp.is(":checked"))
				inp.prev().css("backgroundPosition", "0 -" + checkboxHeight*2 + "px");
			else
				inp.prev().css("backgroundPosition", "0 0");
		});
	},
	reload: function(){
		$("span.checkbox").remove();
		$("select.styled").each(function(){
			$("#select" + $(this).attr("id")).remove();
		});
		Custom.init();
	}
}
$(document).ready(Custom.init);