diff --git a/demos/image/index.html b/demos/image/index.html
deleted file mode 100644
index 145df159..00000000
--- a/demos/image/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>OxJS Image Demo</title
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-        <script type="text/javascript" src="../../dev/Ox.js"></script>
-        <script type="text/javascript" src="js/image.js"></script>
-    </head>
-    <body></body>
-</html>
\ No newline at end of file
diff --git a/demos/image/js/image.js b/demos/image/js/image.js
deleted file mode 100644
index 6b9164f8..00000000
--- a/demos/image/js/image.js
+++ /dev/null
@@ -1,71 +0,0 @@
-Ox.load('Image', function() {
-
-    // see http://en.wikipedia.org/wiki/Lenna
-
-    Ox.Image('png/lenna256.png', function(image) {
-        var body = Ox.element('body'),
-            select = Ox.element('<select>').appendTo(body);
-        [
-            'Method...', 'src("png/lenna256.png")',
-            'blur(1)', 'blur(5)',
-            'channel("r")', 'channel("g")', 'channel("b")', 'channel("a")',
-            'channel("h")', 'channel("s")', 'channel("l")',
-            'contour()',
-            'depth(1)', 'depth(2)', 'depth(4)',
-            'drawCircle([128, 128], 64, {"fill": "rgba(0, 0, 0, 0.5)"})',
-            'drawLine([[64, 64], [192, 192]], {"color": "red", "width": 2})',
-            'drawPath([[64, 64], [192, 64], [64, 192]], {"close": true, "fill": "rgba(0, 0, 0, 0.5)", "width": 2})',
-            'drawRectangle([64, 64], [128, 128], {"fill": "rgba(0, 0, 0, 0.5)"})',
-            'drawText("?", [128, 160], {"font": "64px Arial", "outline": "2px white"})',
-            'edges()', 'emboss()',
-            'encode("secret")', 'decode()',
-            'encode("secret", false)', 'decode(false)',
-            'encode("secret", 1)', 'decode(1)',
-            'encode("secret", false, 15)', 'decode(false, 15)',
-            'encode("secret", 127)', 'decode(127)',
-            'hue(-60)', 'hue(60)',
-            'invert()',
-            'lightness(-0.5)', 'lightness(0.5)',
-            'mosaic(4)', 'motionBlur()', 'photocopy()', 'posterize()',
-            'resize(256, 256)', 'resize(512, 512)',
-            'saturation(-0.5)', 'saturation(0.5)',
-            'scale(0.5, -1)',
-            'sharpen()', 'solarize()'
-        ].forEach(function(filter) {
-            Ox.element('<option>').html(filter).appendTo(select);
-        });
-        select[0].onchange = function() {
-            if (select[0].value[0] == select[0].value[0].toLowerCase()) {
-                //Ox.print(select[0].value.match(/^(\w+)\((.+)\)$/))
-                var match = select[0].value.match(/^(\w+)\((.*?)\)$/),
-                    fn = match[1],
-                    args = JSON.parse('[' + match[2] + ']');
-                //Ox.print('??', fn, args, image.drawLine)
-                if (fn == 'encode' || fn == 'src') {
-                    image[fn].apply(null, Ox.merge(args, function(image) {
-                        Ox.element('#image').attr({
-                            src: image.src()
-                        });
-                    }));
-                } else if (fn == 'decode') {
-                    image[fn].apply(null, Ox.merge(args, function(str) {
-                        alert(str);
-                    }));
-                } else {
-                    Ox.element('#image').attr({
-                        src: image[fn].apply(null, args).src()
-                    });
-                    Ox.print('DONE')
-                }
-                select[0].selectedIndex = 0;
-            }
-        }
-        Ox.element('<br>').appendTo(body);
-        Ox.element('<img>').attr({
-            id: 'image',
-            src: image.src()
-        }).appendTo(body);        
-        //Ox.element('<img>').attr({src: image.saturation(0.5).blur().url()}).appendTo(Ox.element('body'));
-    });
-
-});
\ No newline at end of file
diff --git a/demos/image/png/Netherlandish Proverbs.png b/demos/image/png/Netherlandish Proverbs.png
deleted file mode 100644
index 5148cfe7..00000000
Binary files a/demos/image/png/Netherlandish Proverbs.png and /dev/null differ
diff --git a/demos/image2/index.html b/demos/image2/index.html
deleted file mode 100644
index 86630991..00000000
--- a/demos/image2/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>OxJS Image Encode Demo</title
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-        <script type="text/javascript" src="../../build/Ox.js"></script>
-        <script>
-Ox.load('Image', function() {
-    var fixmeOxelement;
-    var body = Ox.element('body'),
-        button = Ox.element('<input>').attr({type: 'button', value: 'Encode'}).click(function() {
-            button.attr({disabled: 'disabled'})
-            if (button.attr('value') == 'Encode') {
-                button.attr({value: 'Encoding...'});
-                encode(function(image) {
-                    fixmeOxelement = image;
-                    button.removeAttr('disabled').attr({value: 'Decode'});
-                });                
-            } else {
-                button.attr({value: 'Decoding...'});
-                setTimeout(function() {
-                    decode(fixmeOxelement, function() {
-                        button.attr({value: 'Done'})
-                    });
-                }, 0);
-            }
-        }).appendTo(body);
-    Ox.element('<br>').appendTo(body);
-    function encode(callback) {
-        var lines = [
-            'The first image he told me about was of three children on a road in Iceland in 1965.',
-            'He said for him it was the image of happiness, and that he had often tried to link it to other images, but it had never worked.'
-        ];
-        Ox.Image('png/vietnam.png', function(vietnam) {
-            vietnam.encode(lines[1], false, 1, function(vietnam) {
-                Ox.Image('png/iceland.png', function(iceland){
-                    iceland.encode(lines[0], false, 1, function(iceland) {
-                        Ox.print('src.length', vietnam.src().length)
-                        iceland.encode(vietnam.src(), -1, function(image) {
-                            Ox.element('<img>').attr({src: image.src()}).appendTo(body);
-                            callback(image);
-                        });
-                    });
-                });
-            });
-        });
-    }
-    function decode(iceland, callback) {
-        iceland.decode(false, 1, function(str) {
-            Ox.element('<div>').html(str).appendTo(body);
-            iceland.decode(-1, function(src) {
-                Ox.element('<img>').attr({src: src}).appendTo(body);
-                Ox.Image(src, function(vietnam) {
-                    vietnam.decode(false, 1, function(str) {
-                        Ox.element('<div>').html(str).appendTo(body);
-                        callback();
-                    });
-                });
-            });
-        });
-    }
-});
-        </script>
-    </head>
-    <body></body>
-</html>
\ No newline at end of file
diff --git a/demos/image2/png/iceland.png b/demos/image2/png/iceland.png
deleted file mode 100644
index 414ae86a..00000000
Binary files a/demos/image2/png/iceland.png and /dev/null differ
diff --git a/demos/image2/png/vietnam.png b/demos/image2/png/vietnam.png
deleted file mode 100644
index 7c68cb39..00000000
Binary files a/demos/image2/png/vietnam.png and /dev/null differ
diff --git a/demos/mouse/index.html b/demos/mouse/index.html
deleted file mode 100644
index 71352de8..00000000
--- a/demos/mouse/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-    <head>
-        <title>OxJS Mouse Events Demo</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-        <script type="text/javascript" src="../../dev/Ox.js"></script>
-        <script type="text/javascript" src="js/mouse.js"></script>
-    </head>
-    <body></body>
-</html>
diff --git a/demos/mouse/js/mouse.js b/demos/mouse/js/mouse.js
deleted file mode 100644
index 2198a531..00000000
--- a/demos/mouse/js/mouse.js
+++ /dev/null
@@ -1,64 +0,0 @@
-Ox.load('UI', {
-    debug: true
-}, 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', 'mousedown', 'mouserepeat',
-        'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend'
-    ].forEach(function(event) {
-        $target.bindEvent(event, function(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
-                        } : {})
-                    )
-                    .replace(/"/g, '')
-                    .replace(/:/g, ': ')
-                    .replace(/,/g, ', ')
-                )
-                .prependTo($log.$element);
-            event == 'anyclick' && Ox.print(e);
-        });
-    });
-});
diff --git a/examples/lenna/js/example.js b/examples/lenna/js/example.js
index 2435064f..dc446d72 100644
--- a/examples/lenna/js/example.js
+++ b/examples/lenna/js/example.js
@@ -4,7 +4,7 @@ Load the image module.
 Ox.load('Image', function() {
 
     /*
-    Load our image (about which you can read more on
+    Load a sample image (about which you can read more on
     <a href="see http://en.wikipedia.org/wiki/Lenna">Wikipedia</a>).
     */
     Ox.Image('png/lenna256.png', function(image) {
diff --git a/examples/mouse_events/css/example.css b/examples/mouse_events/css/example.css
new file mode 100644
index 00000000..7df03944
--- /dev/null
+++ b/examples/mouse_events/css/example.css
@@ -0,0 +1,26 @@
+#clear {
+    position: absolute;
+    left: 256px;
+    right: 0px;
+    height: 16px;
+    padding-left: 2px;
+    background: rgb(224, 224, 224);
+}
+#log {
+    position: absolute;
+    left: 256px;
+    top: 16px;
+    right: 0;
+    bottom: 0;
+    background: rgb(255, 255, 255);
+    overflow-y: auto;
+}
+#target {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 256px;
+    padding-left: 2px;
+    background: rgb(192, 192, 192);
+}
\ No newline at end of file
diff --git a/examples/mouse_events/index.html b/examples/mouse_events/index.html
new file mode 100644
index 00000000..93189a45
--- /dev/null
+++ b/examples/mouse_events/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Mouse Events</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
+        <link rel="stylesheet" type="text/css" href="css/example.css"/>
+        <script type="text/javascript" src="../../dev/Ox.js"></script>
+        <script type="text/javascript" src="js/example.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
\ No newline at end of file
diff --git a/examples/mouse_events/js/example.js b/examples/mouse_events/js/example.js
new file mode 100644
index 00000000..8bd3f463
--- /dev/null
+++ b/examples/mouse_events/js/example.js
@@ -0,0 +1,44 @@
+Ox.load({UI: {theme: 'classic'}}, function() {
+
+    var $target = Ox.Element()
+            .attr({id: 'target'})
+            .html('click/hold/drag here')
+            .appendTo(Ox.$body),
+        $log = Ox.Element()
+            .attr({id: 'log'})
+            .appendTo(Ox.$body),
+        $clear = Ox.Element()
+            .attr({id: 'clear'})
+            .html('clear log')
+            .bind({click: function() {
+                $log.empty();
+            }})
+            .appendTo(Ox.$body);
+    [
+        'anyclick', 'singleclick', 'doubleclick', 'mousedown', 'mouserepeat',
+        'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend'
+    ].forEach(function(event) {
+        $target.bindEvent(event, function(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
+                        } : {})
+                    )
+                    .replace(/"/g, '')
+                    .replace(/,/g, ', ')
+                    .replace(/:/g, ': ')
+                )
+                .prependTo($log);
+        });
+    });
+});
