var cardLinks = $$('#cardimage a');
var cardBoxes = $$('#cardimage .card-img-box');

var cakeLinks = $$('#cakeimage a');
var cakeBoxes = $$('#cakeimage .card-img-box');

hideAllExcept(0, cardBoxes);
hideAllExcept(0, cakeBoxes);

cardLinks.addEvent('click', function() {
    var index = cardLinks.indexOf(this);
	hideAllExcept(index, cardBoxes);
});

cakeLinks.addEvent('click', function() {
    var index = cakeLinks.indexOf(this);
	hideAllExcept(index, cakeBoxes);
});

// Add setting of fields to all card/cake images
$$('.card-img-box img').addEvent('click', setField);

// Add remove event to cake image
$('cakeimageid-choice').getFirst().addEvent('click', function() {
	this.setStyle('display', 'none');
	$('cakeimageid').value = 0;
});

///////////////////////////////////////////////////////////

function hideAllExcept(index, boxList)
{
	boxList.forEach(hideBox);
	displayBox(boxList[index]);
}

function hideBox(box)
{
    $(box).setStyle('display', 'none');
}

function displayBox(box)
{
    $(box).setStyle('display', '');
}

function setField()
{
    var image = this;
    
//    $(image).getParent().getChildren().setStyle('border', '');
//    $(image).setStyle('border', '1px solid #d7d7d7');
    
    var field = image.id.split('-', 2);
    $(field[0]).value = field[1];
    
    // The image in the div ending with -choice displays the image.
    var targetImage = $(field[0] + '-choice').getFirst();
    
    targetImage.src = image.src;
    targetImage.setStyle('display', '');
}

///////////////////////////////////////////////////////////