[jQuery] Drag screws with my mouseup event

[Jeremy]

I am trying to reproduce a calendar selector. Basically, I want the
boxes to turn red when I have the mouse depressed only. Works great so
far except that the drag event seems to be hiding the mouse up event
(try it out, you'll see it happen), and then the logic is backwards
until the mouse is depressed again.

Any suggestion on how to fix this?  Would be great if I could check to
see if the mouse is depressed.

Example:

http://173.8.140.234/admin_available_times_edit.php

Here's my code:

 $(document).ready(function() {
        depressed=0;
        $('.selectgrid').mousedown(function(){
                        if(depressed==0){
                                depressed=1;
                                $(this).addClass('red').removeClass('green');
                        }
                        else{
                                depressed=0;
                        }
        });

        $('.selectgrid').mouseup(function(){
                depressed=0;
        });

        $('.selectgrid').mouseover(function(){
                if(depressed==1){
                        $(this).addClass('red').removeClass('green');
                }
        });
 });