Scrubbing a wheel and turning a pot with Edge Animate!

Question

Hi all!
With the wonderful Edge Animate and the external JQuery Ui library (for the drag), I've made a wheel that you can move with a scrubber-bar.
The original, super-useful code from wich I started is made by JackPister in this thread: http://forums.adobe.com/message/4752554#4752554.
I've used Jquery Ui for dragging so I've simplified the code.
Here's a  prototype: http://www.terredainventare.it/edge/wheel/Wheel.html.
Here are the Edge project files: http://www.terredainventare.it/edge/wheel/Wheel.zip
Now, (almost) all is working, but I have two question for the Forum readers and the Edge Animate experts and staff:
1) do you see that when I hover with the mouse on the scrubber, the wheel moves? Why this?
2) What if I would (and I want!) build a circular scrubber that moves together with the wheel? I'm more explicit with these picture. It would be like a pot that you move dragging the handle!!
Many thanks for your help!!!
Davide

Answer 1

Thanks for you quick feedback, Jack!
1) Yes, your/Darrel's solution it's sure more elegant but I need to use JQuery Ui library so I can use the handle-option to build the handle of the pot.... Any hint about the use of JQuery Ui for dragging without this tedious "over" effetct?
2) Here http://threedubmedia.com/code/event/drag I've found this code:
<script type="text/javascript">
jQuery(function($){
   $('.drag')
      .drag('start',function( ev, dd ){
         if ( !$.data( this, 'circle' ) )
            $.data( this, 'circle', {
               radius: 160,
               centerX: dd.originalX + 160 + 30,
               centerY: dd.originalY + 30
      .drag(function( ev, dd ){
         var data = $.data( this, 'circle' ),
         angle = Math.atan2( ev.pageX - data.centerX, ev.pageY - data.centerY );
         $( this ).css({
            top: data.centerY + Math.cos( angle ) * data.radius - 30,
            left: data.centerX + Math.sin( angle ) * data.radius - 30
</script>
<h1>Circular Drag Demo</h1>
<p>Drag the boxes around the page, they only move along a circular path.</p>
<div class="drag" style="left:60px;">&bull;</div>
<div class="drag" style="left:170px;">&bull;</div>
<div class="drag" style="left:280px;">&bull;</div>
<style type="text/css">
body {
   background: #FFF url("http://threedubmedia.com/inc/img/circles.gif") no-repeat 0px 0px;
.drag {
   position: absolute;
   border: 1px solid #89B;
   background: #BCE;
   height: 58px;
   width: 58px;
   top: 180px;
   cursor: move;
   text-align: center;
   font: 24px/62px "Courier New", Courier, monospace;
   filter: alpha(opacity=75);
   -moz-opacity: 0.75;
   opacity: 0.75;
</style>
Do you think can be useful?
Many many thanks!!!
Davide