Dynamic change page theme

by KELVIN LEE

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css">
<div data-role="page" id="home" data-theme="a"> 
    <div data-role="content">
        <div class="content-primary">             
            <p>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <legend>Choose a Theme:</legend>
                        <input type="radio" name="theme-options" id="theme-option-a" value="a" checked="checked" data-theme="a" />
                        <label for="theme-option-a" data-theme="a">Theme A</label>
                        
                        <input type="radio" name="theme-options" id="theme-option-b" value="b" data-theme="b" />
                        <label for="theme-option-b" data-theme="b">Theme B</label>
                        
                        <input type="radio" name="theme-options" id="theme-option-c" value="c" data-theme="c" />
                        <label for="theme-option-c" data-theme="c">Theme C</label>
                        
                        <input type="radio" name="theme-options" id="theme-option-d" value="d" data-theme="d" />
                        <label for="theme-option-d" data-theme="d">Theme D</label>
                        
                        <input type="radio" name="theme-options" id="theme-option-e" value="e" data-theme="e" />
                        <label for="theme-option-e" data-theme="e">Theme E</label>
                    </fieldset>
                </div>
            </p>
            
            <form action="#" method="get"> 
                
                <h2>Form elements</h2> 
                
                <div data-role="fieldcontain"> 
                    <label for="name">Text Input:</label> 
                    <input type="text" name="name" id="name" value=""  /> 
                </div> 
                
                <div data-role="fieldcontain"> 
                   ...

JavaScript

$('input[name=theme-options]').change(function() {
    var currentTheme = $('#home').attr('data-theme');
    var selectedTheme = $(this).val();
    
    alert('CT '+currentTheme+' ST '+selectedTheme);

    $('.ui-body-' + currentTheme).each(function(){
        $(this).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme);    
    });
    
    $('.ui-btn-up-' + currentTheme).each(function(){
        $(this).removeClass('ui-btn-up-' + currentTheme).addClass('ui-btn-up-' + selectedTheme);    
    });
    
    $('.ui-btn-down-' + currentTheme).each(function(){
        $(this).removeClass('ui-btn-down-' + currentTheme).addClass('ui-btn-down-' + selectedTheme);    
    });
    
    $('#home').find('*[data-theme]').each(function(index){
        $(this).attr('data-theme',selectedTheme);
    });
    
    $('#home').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');
});

//ui-btn-up-a
//ui-btn-down-a

//ui-slider-label-a
//ui-slider-label-b