$(function(){
    var selected_bg = 'url("../img5/bg_chara_back_reg_hl.gif") no-repeat';
    var normal_bg = 'url("../img5/bg_chara_back_reg.gif") no-repeat';

    // initialize
    $("#chara0").css('background', selected_bg);
        $("#charaselect option:first-child").attr({
          selected: "selected"
        });

    $("#chara0").click(function(){
        $(this).css('background', selected_bg);
        $("#charaselect option:first-child").attr({
          selected: "selected"
        });
        $("#chara1").css('background', normal_bg);
        $("#chara2").css('background', normal_bg);
        $("#chara3").css('background', normal_bg);
        $("#chara4").css('background', normal_bg);
        $("#chara5").css('background', normal_bg);
    });

    $("#chara1").click(function(){
        $(this).css('background', selected_bg);
        $("#charaselect option:nth-child(2)").attr({
          selected: "selected"
        });
        $("#chara0").css('background', normal_bg);
        $("#chara2").css('background', normal_bg);
        $("#chara3").css('background', normal_bg);
        $("#chara4").css('background', normal_bg);
        $("#chara5").css('background', normal_bg);
    });

    $("#chara2").click(function(){
        $(this).css('background', selected_bg);;
        $("#charaselect option:nth-child(3)").attr({
          selected: "selected"
        });
        $("#chara0").css('background', normal_bg);
        $("#chara1").css('background', normal_bg);
        $("#chara3").css('background', normal_bg);
        $("#chara4").css('background', normal_bg);
        $("#chara5").css('background', normal_bg);
    });

    $("#chara3").click(function(){
        $(this).css('background', selected_bg);;
        $("#charaselect option:nth-child(4)").attr({
          selected: "selected"
        });
        $("#chara0").css('background', normal_bg);
        $("#chara1").css('background', normal_bg);
        $("#chara2").css('background', normal_bg);
        $("#chara4").css('background', normal_bg);
        $("#chara5").css('background', normal_bg);
    });

    $("#chara4").click(function(){
        $(this).css('background', selected_bg);;
        $("#charaselect option:nth-child(5)").attr({
          selected: "selected"
        });
        $("#chara0").css('background', normal_bg);
        $("#chara1").css('background', normal_bg);
        $("#chara2").css('background', normal_bg);
        $("#chara3").css('background', normal_bg);
        $("#chara5").css('background', normal_bg);
    });

    $("#chara5").click(function(){
        $(this).css('background', selected_bg);;
        $("#charaselect option:nth-child(6)").attr({
          selected: "selected"
        });
        $("#chara0").css('background', normal_bg);
        $("#chara1").css('background', normal_bg);
        $("#chara2").css('background', normal_bg);
        $("#chara3").css('background', normal_bg);
        $("#chara4").css('background', normal_bg);
    });

});