function wizard_details (){

    $('#details_gender a').click(function(){
        $('#details_gender a').removeClass('selected');
        $('#details_race a').removeClass('selected');
        $('#details_class a').removeClass('selected');
        $(this).addClass('selected');        
    });
    
    $('#details_race a').click(function(){
        $('#details_race a').removeClass('selected');
        $(this).addClass('selected');        
    });
    
    $('#details_class a').click(function(){
        $('#details_class a').removeClass('selected');
        $(this).addClass('selected');
        
        $('#details_race a').removeClass('fadein');
        $('#details_race a').addClass('fadeout');
        if($(this).hasClass('human')){
            $('#details_race .human').addClass('fadein');}
        if($(this).hasClass('ork')){
            $('#details_race .ork').addClass('fadein');}
        if($(this).hasClass('dwarf')){
            $('#details_race .dwarf').addClass('fadein');}
        if($(this).hasClass('undead')){
            $('#details_race .undead').addClass('fadein');}
        if($(this).hasClass('nightelf')){
            $('#details_race .nightelf').addClass('fadein');}
        if($(this).hasClass('tauren')){
            $('#details_race .tauren').addClass('fadein');}
        if($(this).hasClass('gnome')){
            $('#details_race .gnome').addClass('fadein');}
        if($(this).hasClass('troll')){
            $('#details_race .troll').addClass('fadein');}
        
        if(!$('#details_race .selected').hasClass('fadein')){
            $('#details_race .selected').removeClass('selected');
        }
    });

    $('#content .male').click(function (){
        male ();
    });
    $('#content .female').click(function (){
        female ();
    });
    $('#details_race .human').click(function (){
         wowrace('human');
    });
    $('#details_race .ork').click(function (){
         wowrace('ork');
    });
    $('#details_race .dwarf').click(function (){
         wowrace('dwarf');
    });
    $('#details_race .undead').click(function (){
         wowrace('undead');
    });
    $('#details_race .nightelf').click(function (){
         wowrace('nightelf');
    });
    $('#details_race .tauren').click(function (){
         wowrace('tauren');
    });
    $('#details_race .gnome').click(function (){
         wowrace('gnome');
    });
    $('#details_race .troll').click(function (){
         wowrace('troll');
    });
}

function male (){
    $('#content .male').removeClass('fadeout');
    $('#content .male').addClass('fadein');
    
    $('#content .female').removeClass('fadein');
    $('#content .female').addClass('fadeout');
    
    $('#details_gender .female').removeClass('fadein');
    $('#details_gender .male').removeClass('fadein');    
    
    $('#details_gender .male').addClass('selected');
    $('#details_gender .female').removeClass('selected');
}

function female (){
    $('#content .female').removeClass('fadeout');
    $('#content .female').addClass('fadein');
    
    $('#content .male').removeClass('fadein');
    $('#content .male').addClass('fadeout');
    
    $('#details_gender .female').removeClass('fadein');
    $('#details_gender .male').removeClass('fadein');
    
    $('#details_gender .female').addClass('selected');
    $('#details_gender .male').removeClass('selected');
}

function wowrace (cls){
    $('#details_class a').removeClass('fadein');
    $('#details_class a').addClass ('fadeout');
    
    $('#details_class .'+cls).removeClass ('fadeout');
    $('#details_class .'+cls).addClass ('fadein');
    
    if(!$('#details_class .selected').hasClass('fadein')){
        $('#details_class .selected').removeClass('selected');
    }
}