Use Selectable to Color a Grid

Use Selectable to Color a Grid


I am trying to create a grid where the user can paint cells different
colors. They would basically choose a color from a palatte then use
the jQuery.selectable to choose a bunch of cells and then voila, those
cells would be the color from the palatte.
Right now I have the selection working, but I can seem to intercept
the event after the user has chosen the cells so that I can set all
the cells to my own custom css classname (matching the color from the
palatte they chose). The cells always revert to the ".ui-selected"
class.
Any advice?
Here's the relevant code:
<script>
$(document).ready(function() {
$("#selectable").selectable({
selected: function(event, ui) { alert($(ui)); }
});
});
</script>
<style type="text/css">
.ui-state-default { border: 1px solid #d3d3d3; background:
#e6e6e6; font-weight: normal; color: #555555; outline: none; }
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: red; }
    #selectable .ui-selected { background: blue; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; }
    #selectable li { margin: 0px; padding: 0px; float: left; width: 10px;
height: 18px; font-size: 1em; text-align: center; }
.holiday { background: pink; }
    </style>
</head>
<body>
<div class="demo">
<ol id="selectable">
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>


    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default"></li>


</ol>