function procMOUSEMOVE(e) {
    /*
    document.Output.MouseX.value = e.pointerX();
    document.Output.MouseY.value = e.pointerY();
    document.Output.Parent.value = isMouseHover(spiral_menu.parent, e) +" " + spiral_menu.parent.positionedOffset().left;
    document.Output.Child.value = isMouseHover(spiral_menu.child, e);
    */
    if(spiral_menu.child && (isMouseHover(spiral_menu.parent, e) == false && isMouseHover(spiral_menu.child, e) == false)){
        spiral_menu.child.hide();
        spiral_menu.child = null;	
        
        $(document).stopObserving('mousemove')
    }
    return false
}

function isMouseHover(element, evt) {
    if(element == null || evt == null) {
        return false;
    }
    var left = element.positionedOffset().left;
    var top = element.positionedOffset().top;
    var bottom = element.getHeight() + top;
    var right = element.getWidth() + left;
	
	
    var x = evt.pointerX();
    var y = evt.pointerY();
	
    return (x >= left) && (x <= right) && (y >= top) && (y <= bottom)
}



var spiral_menu = {
    'parent': null, 
    'child': null
}

/*
 * display <child> under the <parent> element 
 * can optionally put an offset, 
 * if not
 * the the <child>.top = <parent>.bottom
 * <child>.left = <parent>.left
 * there are 2 classes needed show | hide
 */
function __showChildAroundParent(parentID, childID, posOffset){

    var parent = $(parentID);
    var child = $(childID);
    
    if(spiral_menu.child) {
        spiral_menu.child.hide();
    }
    
    spiral_menu.parent = parent;
    spiral_menu.child = child;
	
    if(parent == null || child == null) return;
    var offset = posOffset ||  {'left': 0, 'top': parent.getHeight()-1};
	
    child.style.left = parent.positionedOffset().left + offset.left + 'px';
    child.style.top = parent.positionedOffset().top + offset.top + 'px';
    
    child.show();
    $(document).observe("mousemove", procMOUSEMOVE);
    //function ob() {$(document).observe("mousemove", procMOUSEMOVE);}
    
    //ob.delay(0.5)
    
	
}