var counter = 0;

function toggleSelected(id) {
	element = $(id);
	toggleInput(element, "new_my_prediction", "input_" + $(id).id);
}

function toggleClass(element, value) {
	if(!element.className) {
		element.className = value;
	} else {
		element.className = "";
	}
}

function toggleInput(element, form, formElement) {
	if ($(formElement)) {
		var oldInput = $(formElement);
		$(form).removeChild(oldInput);
		
		toggleClass(element, "selected");
		decrementCounter();
	} else {
		if (counter < 10) {
			var newInput = document.createElement('input');
			var newInputId = formElement;
			var newInputName = 'my_prediction[chart_entry_attributes][][id]';
			newInput.setAttribute('id',newInputId);
			newInput.setAttribute('name',newInputName);
			newInput.setAttribute('type','hidden');
			newInput.value = parseFloat(element.id);
			$(form).appendChild(newInput);
			
			toggleClass(element, "selected");
			incrementCounter();
		} else {
			alert("Sorry, You've already selected 10 for the next stage.\n\nIf you'd like to amend your choice click on one or more of the selected items to deselect it.");
		}
	}
}

function incrementCounter() {
	counter++;
}

function decrementCounter() {
	counter--;
}