jquery tweets

HTML

<script src="http://github.com/kerberoS/jQuery-Tweets/raw/master/js/jquery.tweets.0.1.js"></script>
<table border="1" id="tbl">
  <tr>
      <td ></td>
      <td  bgcolor=#000000 ></td>
      <td class="items  p1 p3"><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Red-icon.png"/></td>      
  </tr>
 
  <tr>      
      <td bgcolor=#000000 ></td>
      <td class="items  p1"></td>
      <td class="items p3" bgcolor=#000000 ></td>
  </tr>
    
    <tr>      
      <td class="piece" id="p1" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" /></td>
      <td bgcolor=#000000 ></td>
        <td class="piece" id="p3" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" /></td>
  </tr>

</table>

CSS

#tbl td { width:32px; height:32px;}
.over { background-color: red; }
.yellow {
  background-color:yellow !important; 
  
}

JavaScript

var imgs = $('img'); 

imgs.draggable({  });

$('#tbl td').droppable({
    hoverClass: 'over',
    drop: function(event, ui) {
        var cell = $(this); 
        var img = ui.draggable;
      
        if (cell.hasClass("yellow")) {      
          cell.children('img').remove();
          img.appendTo(cell).css({
            'left': '0',
            'top': '0'
          });
          img.draggable('disable');
        } else {                     
          img.draggable('option','revert',true);      
        }
        
        $('.yellow').removeClass('yellow');  
      
        setUpHover(); 
    }
});

imgs.click(function(){
  //the image we just clicked on
  var img = $(this); 
  //The cells we can move our image to.
  var cells = $("." + img.parent().attr('id'));
  
  //disable dragging of other images while this one is in focus
  imgs.not(img).draggable('disable');
  //disable the hover event so that we don't lose our highlighted cells
  imgs.unbind('hover'); 
  //add a dynamic click event to the cells we're allowed to click on. 
  cells.click(function(){
    //re-enable dragging for all images
    imgs.draggable('enable'); 
    //remove the dynamic click event and remove the yellow background
    cells.unbind('click').removeClass('yellow'); 
    //add the image to the cell. 
    $(this).html(img); 
    //re-bind the hover event.
    setUpHover(); 
  }); 
}); 

function setUpHover(){
  imgs.unbind('hover').hover(function() {
    var id = $(this).parent().attr('id');
    $("."+id).addClass("yellow");
  }, function() {
    var id = $(this).parent().attr('id');
    $("."+id).removeClass("yellow");       
  });
} 
setUpHover();