panning / scrolling a div

Hi everyone

I have a div which is 500x500 pixels, inside, the contents will be bigger than that, therefore a scrolling bar will be required.

What I wanted to do is, when the user moves the mouse around, the div contents would follow the mouse to achieve a panning effect, kind of like when you pan the googlemaps maps around.

No idea how to achieve this, I've googled but nothing much has surfaced, I've found only a mootols demo: http://demos111.mootools.net/Scroller but cannot get it to work, and also I'd like to keep away from using ajax frameworks because I've had problems with javascript conflicts already and really want to avoid that.

Thanks!

Are the contents of the <div> interactive at all (form inputs, buttons, links, etc), or just something to look at (images, video, etc) ?

Hmm, there is a form... but it can be removed if its an issue.

Well if there's interactive content, it would be best to start/end the movement with the mousedown/mouseup events meaning the visitor would drag the content around within the box by holding down the mouse button.
However if it's just visuals the movement could be started/stopped with the mouseover/mouseout events meaning movement would start as soon as the mouse touhed the box and follow the movement from there.

im not knowledgeable at all when it comes to javascript though, i dont even know where to begin, usually i rely on ready-made scripts, i'm that helpless hehe... i dont know how to refer to the mouse position and how to tell the div to scroll "that way"... hmm..