Unnamed

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>
	<script type='text/javascript' src='http://jquery.com/src/jquery-latest.pack.js'></script>
	<script type='text/javascript' src='interface.js'></script>
	<script type='text/javascript'>
		$(document).ready(function(){
		    
		    
		    var $top = parseInt($('#resize').css("top"));
		    var $left = parseInt($('#resize').css("left"));
		    var $width = $('#resize').width();
		    var $height = $('#resize').height();
		    
		    var $right = $left + $width - 10;
		    var $bottom = $top + $height - 10;
		    
		    $('#handle').css({"position": "absolute", top: $bottom, left: $right})
		    
		    $('#resize').Resizable({
                minWidth: 50,
            	minHeight: 50,
            	minTop: 0,
            	minLeft: 0,
            	// maxRight: 700, this should be the browsers width
            	// maxBottom: 350, this should be the browsers height
            	handlers: {	se: '#handle' },
            	onResize: function(){
            	    
            	    var $top = parseInt($('#resize').css("top"));
        		    var $left = parseInt($('#resize').css("left"));
        		    var $width = $('#resize').width();
        		    var $height = $('#resize').height();

        		    var $right = $left + $width - 10;
        		    var $bottom = $top + $height - 10;
            	                	    
            	    $('#handle').css({"position": "absolute", top: $bottom, left: $right});
            	    
            	}     				
            });
            		
            $('#resize').Draggable({
                zIndex: 	1000,
                ghosting:	true,
                opacity: 	0.7,
                onSto: function(){
            	    
            	    var $top = parseInt($('#resize').css("top"));
        		    var $left = parseInt($('#resize').css("left"));
        		    var $width = $('#resize').width();
        		    var $height = $('#resize').height();

        		    var $r = $left + $width - 10;
        		    var $b = $top + $height - 10;
        		    
        		    var $right = $r / 2;
        		    var $bottom = $b / 2;
            	                	    
            	    $('#handle').css({"position": "absolute", top: $bottom, left: $right});
            	            	    
            	}
            });
			
		});
	</script>
</head>
<body>
    
        <div id='resize' style='background-color: black; color: white; display: block; width: 100px; height: 100px; top: 0px; left: 0px; '>
            HELLO!
            <div id='handle' style="height: 10px; width: 10px; display: block; backround-color: white; border: 1px solid white;"></div>
        </div>

</body>
</html>