$(document).ready(function() {
    $("img[src$='.png']").pngfix();
    bindPaymentMethod();
    bindCards();
});

function bindPaymentMethod() {
    $("select[name=payment_method]").bind("change", function() {
        var payment = $(this).val();
        changePayment(payment);
    });
}

function changePayment(payment) {
    $("div#creditcard").hide();
    $("div#cheque").hide();

    $("div#" + payment).show();
    $("select[name=payment_method]").val(payment);
}

function bindCards() {
    $(".cards img.card").bind("click", function() {
        var card = $(this).attr("alt").toLowerCase();
        changeCard(card);
    });

    $(".cards input").bind("click", function() {
        var card = $(this).val();
        changeCard(card);
    });
}

function changeCard(card) {
    $(".cards .dim").removeClass("dim");
    $(".cards label[for=" + card + "]").find("img.card").addClass("dim");

    $(".cards input[type=checkbox]").attr("checked", "");
    $(".cards input[id=" + card + "]").attr("checked", "checked");
}