$(function() {
    var $target = Ox.Element()
            .css({
                position: 'absolute',
                width: '256px',
                top: 0,
                bottom: 0,
                background: 'rgb(255, 0, 0)'
            })
            .html('Click here')
            .appendTo(Ox.UI.$body),
        $clear = Ox.Element()
            .css({
                position: 'absolute',
                left: '256px',
                right: 0,
                height: '16px',
                background: 'rgb(192, 192, 192)'
            })
            .html('Clear log')
            .click(function() {
                $log.empty();
            })
            .appendTo(Ox.UI.$body);
        $log = Ox.Element()
            .css({
                position: 'absolute',
                left: '256px',
                right: 0,
                top: '16px',
                bottom: 0,
                overflowY: 'auto'
            })
            .appendTo(Ox.UI.$body);
    [
        'anyclick', 'singleclick', 'doubleclick', 'mouserepeat',
        'dragstart', 'drag', 'dragpause', 'dragend'
    ].forEach(function(event) {
        $target.bindEvent(event, function(foo, e) {
            var date = new Date();
            $('<div>')
                .html(
                    Ox.formatDate(date, '%H:%M:%S') + '.' + (Ox.pad(date % 1000, 3)) +
                    ' <span style="font-weight: bold">' + event + '</span> ' +
                    JSON.stringify(Ox.extend(e.clientX ? {
                        clientX: e.clientX,
                        clientY: e.clientY,
                    } : {}, e.clientDX ? {
                        clientDX: e.clientDX,
                        clientDY: e.clientDY
                    } : {}))
                )
                .prependTo($log.$element);
            event == 'anyclick' && Ox.print(e);
        });
    });
});