CANID / Yote-0.0972 / yote_root / html / test.html 
<HTML>
  <HEAD>
    
    <title>Yote</title>
    <script src="/yote/js/jquery-latest.js"></script>
    <script src="/yote/js/jquery.dumper.js"></script>
    <script src="/yote/js/jquery.cookie.js"></script>
    <script src="/yote/js/jquery.base64.min.js"></script>
    <script src="/yote/js/json2.js"></script>
    <script src="/yote/js/yote.js"></script>
    <script src="/yote/js/UIMaster.js"></script>
    <script>
$().ready(function() {


    $( '#main' ).append( 'Blue Box <span style=background-color:lightblue id=bb></span><BR>' );
    $( '#main' ).append( 'Green Box <span style=background-color:lightgreen  id=gb></span><BR><BR>' );
    $( '#main' ).append( 'Move the boxes below from one list to the other, or to different positions in the list.<br>' );
    UIMaster.init( '#main' );

    var bluebox = UIMaster.make_list_box( [ "A", "C" ] );
    bluebox.selector().css('background-color','lightblue').height( 150 ).width( 115 ).offset( { top:150, left:5 } );
    bluebox.update_sprites_super = bluebox.update_sprites;
    bluebox.update_sprites = function() {
	this.update_sprites_super();
	$( '#bb' ).empty();
	this.sprites.map( function( s ) { $( '#bb' ).append( s.title + ',' ) } );
    }
    bluebox.update_sprites();
    
    
    console.log( bluebox );
    
    var greenbox = UIMaster.make_list_box( [ "B" ] );
    greenbox.selector().css('background-color','lightgreen').height( 150 ).width( 115 ).offset( { left:130, top:150 } );
    greenbox.update_sprites_super = greenbox.update_sprites;
    greenbox.update_sprites = function() {
	this.update_sprites_super();
	$( '#gb' ).empty();
	this.sprites.map( function( s ) { $( '#gb' ).append( s.title + ',' ) } );
    }
    greenbox.update_sprites();


} );
</script>
</head>
  
  <body>
    <div id=main></div>
</body></html>