function styleCheckboxesAndRadiobuttons() {
	var elements = document.getElementsByTagName('input');
	for (i = 0; i < elements.length; i++) {
		if (elements[i].type == 'checkbox' || elements[i].type == 'radio') {	
			switch (elements[i].className) {
				// Add other cases here for other symbols. Just remember 
				// to change in your css too.
				// The case is the same as the class you use when calling on the
				// input.
				case 'instock':
					createAlternateCheckboxOrRadiobutton(elements[i], i);
				break;
				case 'nostock':
					createAlternateCheckboxOrRadiobutton(elements[i], i);
				break;
				case 'lowstock':
					createAlternateCheckboxOrRadiobutton(elements[i], i);
				break;				
				}
		}
	}
}

function createAlternateCheckboxOrRadiobutton(element, num) {
	var defaultClass = element.className + '-default';
	// Hide the original checkbox.
	element.style.display='none';
	// creates the new alternate checkbox
	var altElement = document.createElement('div');
	if (element.checked == true) {
		altElement.className = element.className;
	} else {
		altElement.className = defaultClass;
	}
	altElement.id = 'alt-' + element.id;
	element.parentNode.appendChild(altElement);

	// Handles onclick event.

	
	altElement.onclick = selectBox;
	altElement.previousSibling.previousSibling.onclick = selectBox;
	
	function selectBox(){
	    if ( altElement.className != "nostock-default")
	    {
		    if (element.checked != true) {
			    if (element.type == 'radio') {
			      handleOnClickForRadiobuttons(element.name);
			    }
			    altElement.className = element.className;
			    element.checked = true
		    } else {
			    if (element.type == 'radio') {
				    handleOnClickForRadiobuttons(element.name);
			    }
			    altElement.className = defaultClass;
			    element.checked = false;
		    }
		}
	}
}

function handleOnClickForRadiobuttons(name) 
{
	var radiobuttons = document.getElementsByName(name);
	for (i = 0; i < radiobuttons.length; i++) 
	{
		if (radiobuttons[i].type == 'radio') 
		{		    
		    var altRadiobutton = document.getElementById('alt-' + radiobuttons[i].id);
		    if ( altRadiobutton.className != 'nostock-default' )
		        altRadiobutton.className = radiobuttons[i].className + '-default';
		}
	}
}


$(document).ready(styleCheckboxesAndRadiobuttons);