var fpe =
{
    init: function()
    {
        fpe.addEvent( window, 'mousedown', fpe.mouseDown );
    },

    getXY: function( el )
    {
        var left = 0;
        var top = 0;
        var width = el.offsetWidth;
        var height = el.offsetHeight;

        if ( document.documentElement.getBoundingClientRect )
        {
            // IE 5+, Opera 9.5+
            var rect = el.getBoundingClientRect();
            left = rect.left + Math.max( document.documentElement.scrollLeft, document.body.scrollLeft );
            top = rect.top + Math.max( document.documentElement.scrollTop, document.body.scrollTop );
        }
        else
        {
            // W3C
            var currentElement = el;
            while ( currentElement )
            {
                left += currentElement.offsetLeft;
                top += currentElement.offsetTop;
                currentElement = currentElement.offsetParent;
            }
        }

        return [left,top,width,height];
    },

    addEvent: function( obj, evType, fn )
    {
        if ( obj.addEventListener )
        {
            obj.addEventListener( evType, fn, false );
            return true;
        }
        else if ( obj.attachEvent )
        {
            return obj.attachEvent( 'on' + evType, fn );
        }
        else
        {
            return false;
        }
    },

    mouseDown: function( ev )
    {
        if ( !ev )
        {
            ev = window.event;
        }

        if ( !ev.shiftKey || !ev.ctrlKey )
        {
            return true;
        }

        var target = ( ev.target )? ev.target: ev.srcElement;
        var zIndex = 9999; var html = '';
        while ( target )
        {
            if ( target.className && /.*/.test( target.className ) )
            {
                // process...
                var pos = fpe.getXY( target );
                //alert( 'pos=' + pos );
                // DEBUG:
                html += '<div style="position: absolute; z-index: '+(zIndex--)+'; left:'+pos[0]+'px; top:'+pos[1]+'px; width:'+pos[2]+'px; height:'+pos[3]+'px; background: #00ff00;" onmouseover="this.style.background=\'#ff0000\'; this.style.opacity=0.5" onmouseout="this.style.background=\'#00ff00\'; this.style.opacity=0"></div>';
            }
            target = target.parentNode;
        }

        document.body.innerHTML += html;

    }
}

fpe.init();