var selectedIds = new Array();
var numSelected = 0;

for(i=1;i<=12; i++) {
	selectedIds[i] = 0;
}

function gatherIds() {
	var toReturn = "";
	for(i=1; i<selectedIds.length; i++) {
		if(selectedIds[i]==1) {
			
			if(toReturn=="") {
				toReturn = i;
			} else {
				toReturn = toReturn + ","+i;
			}
			
		}
	}
	return toReturn;
}

function toggleCard(id) {
	var toSet = "card"+id;
	if(selectedIds[id]==0 && numSelected <=3) {
		//$(toSet).style.borderColor = "#f00";
		$(toSet).style.border = "8px solid #f00";
		selectedIds[id] = 1;
		numSelected++;
	} else if(selectedIds[id]==1 && numSelected > 0) {
		$(toSet).style.border = "0";
		selectedIds[id] = 0;
		numSelected--;
	}
	//  cards with each design.
	
	if(numSelected!=0 && numSelected!=3) {
		$("showPerCard").style.display = "block";
		var perCard = 20 / numSelected;
		if(perCard != 20) { perCard = ", "+perCard +" cards with each design" } else { perCard = ""; }
		$("perCard").innerHTML = perCard;
		$("selectedCards").value = gatherIds();
	} else {
		$("showPerCard").style.display = "none";
	}
}