Overlapping elements mouseover DrawState

Question

Hi guys!
Soo I'm really desperate and some hints or solution would be really appreciated!
I'm building custom framework for more than a year now that have some classes handling UI elements, since I want to draw elements exactly as I want. I've managed to make some goodies as drawing dashed lines, stack multiple images to build a skin with single element, but I have problems with the event handling.
I came to conclusion that you can override Group element behavior and design it quite nice, but at the moment you add custom .onDraw function, the group stops to receive MouseEvent-s, except in the Bubbling phase from a child element.
Best scenario:
Group 2 has images, borders and so on (custom onDraw) + receives mouse events (mouseover, mouseout, click) - simulates button element, but can have child elements. In this case Group 3 and 4 are children of Group 2 and Group 2 is child of Group 1:
Group 1
Group 2Group 3
Group 4
Closest so far:
Group 3 and Group 4 are children of Group 2. Group 2 and Button 1 are children of Group 1.
Group 1Button 1
Group 2Group 3
Group 4
The problem:
Button 1 does not receive "mouseover" when the mouse is over the Group 2 area. And because Group 2 is not child of Button 1, Button 1 can't have .addEventListener( 'mouseover', handlerFunction, false ) for the bubbling phase.
My workaround and the new problem:
I've decided to simulate "mouseover" event and update the onDraw method of Button 1 using the notify method of the element, but the onDraw method's DrawState always has mouseOver = false no matter what!
Simple code:
buttonOne.onDraw = function( /*DrawState*/ $drawState ){
    $.writeln( $drawState.mouseOver ) // always false except if the mouse is really over the button
function buttonOneMouseover( /*MouseEvent*/ $e ){
    $e.target.notify( 'onDraw' );
function simulateButtonOver( /*MouseEvent*/ $e ){
    var fakeMouseEvent = ScriptUI.events.createEvent('MouseEvent');
    fakeMouseEvent.initMouseEvent( "mouseover", true, true, $e.target.parent.buttonOne, 1, $e.target.window.location[0]+5, $e.target.window.location[1]+5, 1, 1, undefined, undefined, undefined, -1 );
    $e.target.parent.buttonOne.dispatchEvent( fakeMouseEvent );
groupTwo.addEventListener( 'mouseover', simulateButtonOver, false );
buttonOne.addEventListener( 'mouseover', buttonOneMouseover, false );
Any help is REALLY appreciated!
Cheers,
Tony

Answer 1

OK I've managed to hack another solution. I've added customDrawState and removeDrawState methods to my element's controller. They take as argument basic object that must override the original DrawState object that the element receives onDraw( /*DrawState*/ $drawState ). In my case the .mouseOver property of the DrawState object. Also dispatching custom event is useless if you override the draw state so calling the element's notify('onDraw') works like a charm. Beware that Custom elements do not have .relatedTarget for the MouseEvent object if you use addEventListener('mouseover') for instance. You have to use Button class instead in your UI.