jQM - Table radio selector plugin

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<script src="http://timeago.yarp.com/jquery.timeago.js"></script>
<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>
            
            <div data-role="content">
                <a href="#table" data-transition="slide" data-role="button">Go to Table</a>               
    </div>
        </div>    
                
        <div data-role="page" id="table">
            <div data-theme="b" data-role="header">
                <a href="#index" class="ui-btn-left">Back</a>
                <h1>Index page</h1>
            </div>
            
            <div data-role="content">
                <input type='text' id='test'/>
                <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
                    <thead>
                        <tr>                        
                            <th data-priority="1">Movie Title</th>                            
                            <th data-priority="2">Rank</th>
                            <th data-priority="4">Year</th>
                            <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                            <th data-priority="5">Reviews</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>                            
                            <td>1</td>
                            <td>1941</td>
                            <td>100%</td>
                            <td>74</td>
                        </tr>
                    ...

JavaScript

$(document).on('pagebeforeshow', '.ui-page', function(){ 
    alterTablePopup('table-column-toggle', 0);
    alterTablePopup('table-alt',0);    
});

function alterTablePopup(tableID, showColumnID) {    
    if($.mobile.activePage.find('#'+tableID).length > 0) {
        // First unsellect everything, we must trigger click event so table look could change  
        cleanTableColumns(showColumnID, tableID);
        
        $(document).on('popupafteropen', '#' + tableID + '-popup',function(event, ui) {
            var popup = $(this);        
            
            //Hide old fieldset
            popup.find('fieldset').hide();
            $.mobile.activePage.find('#radio-fieldset').remove();
            
            $('<fieldset>').attr({'data-role':'controlgroup','id':'radio-fieldset'}).appendTo(popup);
            popup.find('input').each(function(i){            
                (i === showColumnID) ?   $('<input>').attr({'name': tableID+'-radio','id': tableID+'-radio-'+i,'type':'radio','value':'v'+i,'checked':'checked','class':tableID+'-radio'}).appendTo('#radio-fieldset') :  $('<input>').attr({'name':tableID+'-radio','id':tableID+'-radio-'+i,'type':'radio','value':'v'+i}).appendTo('#' + tableID + '-popup #radio-fieldset');           
                
                $('<label>').attr({'for':tableID+'-radio-'+i}).text($(this).prev().find('.ui-btn-text').text()).appendTo('#' + tableID + '-popup #radio-fieldset'); 
            }); 
            $('[type="radio"]').checkboxradio();
            $.mobile.activePage.trigger('create');
        }); 
        
        $(document).on('popupafterclose', '#' + tableID + '-popup',function(event, ui) {
            var popup = $(this);  
            
            $.mobile.activePage.find('#radio-fieldset').remove();
            popup.find('fieldset').show();        
        });
        
        $(document).on('vmouseup', '#' + tableID + '-popup #radio-fieldset .ui-controlgroup-controls .ui-radio', function(e){ 
           ...