function old_showId (id, formInputId) {
    // unselect the previous selected roof
    $('#' + formInputId + ' .active').removeClass('active');
    // add a class to the selected id 
    $('#item' + id).addClass('active');
    // set form value
    $('#FI' + formInputId).attr('value', id);
    if ($('#itemData' + id).text()) {
        // move roof data to info spot
        $('#itemData-' + formInputId).html($('#itemData' + id).html());
        // show roof data
        $('.item-description').show();
    }
}

function showSelect (option) {
    $('.option').hide();
    $('.o' + option).show();
}

$(document).ready(function () {
    $('.items .active').each(
        function () {
            id = $(this).attr('id');
            id = id.substr(4);
            formInputId = $(this).parent().attr('id');
            showId(id, formInputId);
        }
    );
});