diff --git a/index.html b/index.html
index be1f29a0..21f3e958 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,7 @@
         <script src="src/js/views/outline.js"></script>
         <script src="src/js/views/property.js"></script>
         <script src="src/js/views/palette.js"></script>
+        <script src="src/js/views/eventHandler.js"></script>
         <script src="src/js/views/widget.js"></script>
         <script src="src/js/panel.js"></script>
         <script src="src/js/main.js"></script>
diff --git a/src/css/builder.css b/src/css/builder.css
index 335c39af..2fe41a45 100644
--- a/src/css/builder.css
+++ b/src/css/builder.css
@@ -186,35 +186,39 @@ body.ui-tabs.ui-widget {
 }
 .navbar > ul.ui-tabs-nav {
     display: -webkit-box;
-    border: 0px none transparent;
+    border: 3px solid #1C2229;
     background: none;
+    height: 26px;
+    width: 293px; /* FIXME: ul li width calculate have some issues, it will be broken when zoom in/out. */
     padding: 0px;
     margin: 12px 0px 12px 10px;
-    -webkit-border-top-left-radius: 0px;
-    -webkit-border-top-right-radius: 0px;
-    -webkit-border-bottom-left-radius: 0px;
-    -webkit-border-bottom-right-radius: 0px;
+    border-radius: 8px;
 }
 .navbar > ul.ui-tabs-nav li {
-    -webkit-border-top-left-radius: 0px;
-    -webkit-border-top-right-radius: 0px;
-    -webkit-border-bottom-left-radius: 0px;
-    -webkit-border-bottom-right-radius: 0px;
     top: 0px;
     margin: 0px;
-    border: none;
-    background: none;
+    border-top: 1px solid #95999B;
+    border-right: 1px solid #393C3D;
+    border-bottom: 1px solid #323536;
+    border-left: 1px solid #95999B;
+    border-radius: 0px;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #575D63), color-stop(20%, #737A80));
 }
 .navbar > ul.ui-tabs-nav li:first-child {
-    -webkit-border-top-left-radius: .5em !important;
-    -webkit-border-bottom-left-radius: .5em !important;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
 }
 .navbar > ul.ui-tabs-nav li:last-child {
-    -webkit-border-top-right-radius: .5em !important;
-    -webkit-border-bottom-right-radius: .5em !important;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+.navbar > ul.ui-tabs-nav li:hover {
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #528791), color-stop(20%, #6B9FA9));
+    box-shadow: inset 0 0 10px #446A70;
 }
 .navbar > ul.ui-tabs-nav li.ui-tabs-selected {
     padding-bottom: 0px;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, #366B7E), color-stop(20%, #46889A));
 }
 .navbar .default-tools a:hover {
     /* GRG */
@@ -235,9 +239,18 @@ body.ui-tabs.ui-widget {
 }
 
 .navbar > ul.ui-tabs-nav li a {
-    padding: 0;
-    height: 32px;
+    width: 80px;
+    height: 26px;
+    font-size: 12px;
+    font-family: OpenSans-SB;
+    text-transform: uppercase;
+    text-align: center;
+    text-shadow: -1px -1px 1px #222;
+    line-height: 26px;
+    color: white;
+    padding: 0px;
     border: none;
+    outline:none;
 }
 
 /*
@@ -1495,54 +1508,18 @@ p.title {
 input.screenCoordinate::-webkit-inner-spin-button {
     -webkit-appearance: none
 }
-
 .projectViewButton {
-    background: url("images/homeButton_up.png") no-repeat 0 0;
-    width: 45px;
-}
-.projectViewButton:focus,
-.projectViewButton:hover,
-.projectViewButton:active {
-    background-image: url("images/homeButton_active.png");
-}
-.ui-tabs-selected >.projectViewButton {
-    background-image: url("images/homeButton_down.png");
-}
-.layoutViewButton {
-    background: url("images/layoutButton_up.png") no-repeat 0 0;
-    width: 80px;
-}
-.layoutViewButton:focus,
-.layoutViewButton:hover,
-.layoutViewButton:active {
-    background-image: url("images/layoutButton_active.png");
-}
-.ui-tabs-selected >.layoutViewButton {
-    background-image: url("images/layoutButton_down.png");
+    width: 45px !important; /* Override .navbar > ul.ui-tabs-nav li a settings in line 236 */
+    text-indent: -3000px;
+    background-image: url(images/homeIcon.png);
+    background-position: center;
+    background-repeat: no-repeat;
 }
 .codeViewButton {
-    background: url("images/codeButton_up.png") no-repeat 0 0;
-    width: 71px;
-}
-.codeViewButton:focus,
-.codeViewButton:hover,
-.codeViewButton:active {
-    background-image: url("images/codeButton_active.png");
-}
-.ui-tabs-selected >.codeViewButton {
-    background-image: url("images/codeButton_down.png");
+    width: 70px !important; /* Override .navbar > ul.ui-tabs-nav li a settings in line 236 */
 }
 .liveViewButton {
-    background: url("images/previewButton_up.png") no-repeat 0 0;
-    width: 87px;
-}
-.liveViewButton:focus,
-.liveViewButton:hover,
-.liveViewButton:active {
-    background-image: url("images/previewButton_active.png");
-}
-.ui-tabs-selected >.liveViewButton {
-    background-image: url("images/previewButton_down.png");
+    width: 90px !important; /* Override .navbar > ul.ui-tabs-nav li a settings in line 236 */
 }
 .centerImage {
     margin-top: 8px;
@@ -1563,17 +1540,19 @@ input.screenCoordinate::-webkit-inner-spin-button {
     margin: 0 0.6em;
 }
 
-#eventHandlerDialog {
+.eventHandler {
+    width: 980px !important; /* Override computed style */
+    height: 560px !important; /* Override computed style */
     overflow: hidden;
 }
 
-#eventHandlerDialog .title {
+.eventHandler .title {
     position: relative;
     height: 52px;
     background-color: #E4E5DF;
 }
 
-#eventHandlerDialog .title > label {
+.eventHandler .title > label {
     position: absolute;
     left: 10px;
     top: 16px;
@@ -1583,32 +1562,31 @@ input.screenCoordinate::-webkit-inner-spin-button {
     font-weight: 600; /* semi-bold */
 }
 
-
-#eventHandlerDialog .wrap_left {
+.eventHandler .wrap_left {
     position: relative;
     width: 230px;
     border-right: 1px solid #dededc;
 }
 
-#eventHandlerDialog .wrap_left .container {
+.eventHandler .wrap_left .container {
     position: absolute;
     width: 100%;
     margin: 10px;
 }
 
 
-#eventHandlerDialog .wrap_left .container * {
+.eventHandler .wrap_left .container * {
     display: inline-block;
 }
 
-#eventHandlerDialog .wrap_left .container select {
+.eventHandler .wrap_left .container select {
     position: absolute;
     top: 10px;
     left: 0px;
     width: 270px;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset {
+.eventHandler .wrap_left .container fieldset {
     position: absolute;
     top: 40px;
     width: 244px;
@@ -1616,11 +1594,11 @@ input.screenCoordinate::-webkit-inner-spin-button {
     overflow: auto;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset ul {
+.eventHandler .wrap_left .container fieldset ul {
     margin: 0px;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset li {
+.eventHandler .wrap_left .container fieldset li {
     display: block;
     padding: 8px 8px 8px 8px;
     margin-left: -36px;
@@ -1630,36 +1608,40 @@ input.screenCoordinate::-webkit-inner-spin-button {
     border-bottom: 1px solid #CCC;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset li.ui-selected {
+.eventHandler .wrap_left .container fieldset li.ui-selected {
     background-color: #4AE57B;
 }
 
-#eventHandlerDialog .wrap_left .container fieldset li > a.link {
+.eventHandler .wrap_left .container fieldset li > a.link {
     padding-top: 8px;
     width: 160px;
     height: 34px;
 }
 
-#eventHandlerDialog .wrap_left .container button.doneButton {
+.eventHandler .wrap_left .container fieldset a.ui-button  {
+    margin-top: 0px;
+    float: right;
+}
+
+.eventHandler .wrap_left .container button.doneButton {
     position: absolute;
     top: 440px;
     left: 46px;
     width: 180px;
 }
 
-#eventHandlerDialog .wrap_right {
+.eventHandler .wrap_right {
     width: 630px;
 }
 
-#eventHandlerDialog .wrap_right .container {
+.eventHandler .wrap_right .container {
     overflow: auto;
     resize:  none;
-    height: 600px;
     width: 98%;
     margin: 6px;
 }
 
-#eventHandlerDialog .wrap_right .container .CodeMirror {
+.eventHandler .wrap_right .container .CodeMirror {
     margin: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
@@ -1669,6 +1651,24 @@ input.screenCoordinate::-webkit-inner-spin-button {
     height: 470px;
 }
 
-#eventHandlerDialog .wrap_right .container .CodeMirror .CodeMirror-scroll {
+.eventHandler .wrap_right .container .CodeMirror .CodeMirror-scroll {
     height: 464px;
 }
+
+.eventHandlerIcon {
+    display: inline-block;
+    position: relative;
+    top: 4px;
+    left: 4px;
+    margin-right: 1px;
+    text-indent: -3000px;
+    height: 20px;
+    width: 20px;
+    background-repeat: no-repeat;
+    background-position: left top;
+    background-image: url('images/eventHandlerIcon.png');
+}
+
+.eventHandlerIcon:hover {
+    opacity: 0.8;
+}
diff --git a/src/css/images/eventHandlerIcon.png b/src/css/images/eventHandlerIcon.png
new file mode 100644
index 00000000..ea36a69f
Binary files /dev/null and b/src/css/images/eventHandlerIcon.png differ
diff --git a/src/css/images/homeIcon.png b/src/css/images/homeIcon.png
index b4261a56..bbeec725 100644
Binary files a/src/css/images/homeIcon.png and b/src/css/images/homeIcon.png differ
diff --git a/src/js/jquery-workarounds.js b/src/js/jquery-workarounds.js
index a56196ec..9a46cd94 100644
--- a/src/js/jquery-workarounds.js
+++ b/src/js/jquery-workarounds.js
@@ -373,7 +373,7 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, {
     _contactContainers: function(event) {
 
         // get innermost container that intersects with item
-        var innermostContainer = null, innermostIndex = null, direction, intersection;
+        var innermostContainer = null, innermostIndex = null;
 
 
         for (var i = this.containers.length - 1; i >= 0; i--){
@@ -384,8 +384,7 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, {
                 continue;
 
 
-            if(intersection = this._intersectsWithPointer(this.containers[i].containerCache)) {
-                direction = intersection == 1 ? "down" : "up";
+            if(this._intersectsWithPointer(this.containers[i].containerCache)) {
 
                 // if we've already found a container and it's more "inner" than this, then continue
                 if(innermostContainer && $.ui.contains(this.containers[i].element[0], innermostContainer.element[0]))
@@ -420,17 +419,15 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, {
             for (var j = this.items.length - 1; j >= 0; j--) {
                 if(!$.ui.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) continue;
                 var cur = this.items[j][posProperty];
-                if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base))
+                var nearBottom = false;
+                if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)) {
                     cur += this.items[j][sizeProperty];
+                    nearBottom = true;
+                }
 
                 if(Math.abs(cur - base) < dist) {
                     dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
-                    if(!this._intersectsWithPointer(itemWithLeastDistance) && base != cur)
-                    {
-                        this.direction =  base > cur ? "up": "down";
-                    }
-                    else
-                        this.direction = direction;
+                    this.direction =  nearBottom ? "up": "down";
                 }
             }
 
diff --git a/src/js/main.js b/src/js/main.js
index 98900651..c1f4c249 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -255,10 +255,10 @@
         _constructApp: function(container) {
             var widget = this;
             $('<ul/>').appendTo(container)
-                .append('<li><a class="projectViewButton" href="#projectView"></a></li>')
-                .append('<li><a class="layoutViewButton" href="#layoutView"></a></li>')
-                .append('<li><a class="codeViewButton" href="#codeView"></a></li>')
-                .append('<li><a class="liveViewButton" href="#liveView"></a></li>');
+                .append('<li><a class="projectViewButton" href="#projectView">Projects</a></li>')
+                .append('<li><a class="layoutViewButton" href="#layoutView">Layout</a></li>')
+                .append('<li><a class="codeViewButton" href="#codeView">Code</a></li>')
+                .append('<li><a class="liveViewButton" href="#liveView">Preview</a></li>');
 
             // Add the view plugins
             this.ui.projectView = $('<div/>').appendTo(container)
@@ -315,6 +315,10 @@
                 .addClass('view live flex1');
             this.ui.liveView.append('<div class="stage flex1 vbox">');
 
+            this.ui.eventHandlerView = $('<div/>').appendTo(container)
+                .attr('id', 'eventHandlerView')
+                .addClass('view eventHandler');
+
             $('.pageView').each( function () {
                 $(this).pageView();
                 $(this).pageView('option', 'model', ADM);
@@ -330,6 +334,11 @@
                 $(this).propertyView('option', 'model', ADM);
             });
 
+            $('.eventHandler').each( function() {
+                $(this).eventHandlerView();
+                $(this).eventHandlerView('option', 'model', ADM);
+            })
+
             $('.paletteView').each( function () {
                 $(this).paletteView();
                 widget._bindResizeEvent(this, 'paletteView');
@@ -431,6 +440,7 @@
             this.ui.layoutView = $('.view.layout').eq(0);
             this.ui.codeView = $('.view.code').eq(0);
             this.ui.liveView = $('.view.live').eq(0);
+            this.ui.eventHandlerView = $('.view.eventHandler').eq(0);
             this.ui.tools = $('.tools-primary').eq(0);
             this.ui.extras = $('.tools-secondary').eq(0);
         },
diff --git a/src/js/views/eventHandler.js b/src/js/views/eventHandler.js
new file mode 100644
index 00000000..a93dc569
--- /dev/null
+++ b/src/js/views/eventHandler.js
@@ -0,0 +1,367 @@
+/*
+ * Rapid Interface Builder (RIB) - A simple WYSIWYG HTML5 app creator
+ * Copyright (c) 2011-2012, Intel Corporation.
+ *
+ * This program is licensed under the terms and conditions of the
+ * Apache License, version 2.0.  The full text of the Apache License is at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+"use strict";
+// Event Handler view widget
+
+(function($, undefined) {
+    $.widget('rib.eventHandlerView', $.rib.baseView, {
+        _create: function() {
+            var formContainer, leftPanel, leftPanelContainer,
+                rightPanel, eventElement, eventSelectElement,
+                eventEditorContainer, eventEditor, formElement,
+                jsCode, eventHandlersList,
+                o = this.options, e = this.element, self = this,
+                uniqueIdName = 'id';
+
+            // Chain up to base class _create()
+            $.rib.baseView.prototype._create.call(this);
+
+            /*
+             * Construct the page layout
+             */
+            // Page layout initial
+            formContainer = $('<div class="hbox" />');
+            leftPanel = $('<div class="flex1 vbox wrap_left" />')
+                .appendTo(formContainer)
+            rightPanel =$('<div class="flex1 wrap_right" />')
+                .appendTo(formContainer)
+
+            /*** Left panel contents ***/
+
+            $('<div class="title"><label>Event</label></div>')
+                .appendTo(leftPanel);
+
+            leftPanelContainer = $('<div>')
+                .addClass('container propertyItems')
+                .appendTo(leftPanel);
+
+            // Construct event options elements
+            eventSelectElement = $('<select>')
+                .attr({'name': 'selectedEvent'})
+                .addClass('center')
+                .change(function(e) {
+                    formElement.trigger('submit');
+                })
+                .select()
+                .appendTo(leftPanelContainer);
+
+            // Add a hidden input to store current event name
+            eventElement = $(
+                '<input name="currentEvent" type="hidden" value="" />'
+            ).appendTo(leftPanelContainer);
+
+            // Initial the event handlers list
+            eventHandlersList = $('<fieldset>')
+                .append($('<legend>Event handlers</legend>'))
+                .appendTo(leftPanelContainer);
+
+            // Create the DONE button
+            $('<button>Done</button>')
+                .addClass('buttonStyle doneButton')
+                .click( function (e) {
+                    self.element.dialog('close');
+                })
+                .button()
+                .appendTo(leftPanelContainer);
+
+            /*** Right panel contents ***/
+
+            $('<div class="title"><label>Javascript Code</label></div>')
+                .appendTo(rightPanel);
+
+            // Construct code editor element
+            eventEditorContainer = $('<div/>')
+                .addClass('container')
+                .appendTo(rightPanel);
+            eventEditor = CodeMirror(
+                eventEditorContainer[0],
+                {
+                    mode: "javascript",
+                    readOnly: 'nocursor',
+                }
+            );
+            eventEditorContainer.show();
+
+            /*** Dialog contents ***/
+            formElement = $('<form>')
+                .append(formContainer)
+                .bind('submit', function(e) {
+                    e.preventDefault();
+                    var node = ADM.getSelectedNode(),
+                        formData = $(this).serializeJSON();
+
+                    formData['jsCode'] = eventEditor.getValue();
+
+                    // If ID is blank, generate a unique one.
+                    if(node.getProperty(uniqueIdName) == '') {
+                        node.generateUniqueProperty(
+                            uniqueIdName, true
+                        );
+                    }
+
+                    // Save editor content to ADM property.
+                    if (formData.currentEvent) {
+                        node.setProperty(
+                            formData.currentEvent,
+                            formData.jsCode
+                        );
+                        // Refresh event handlers list.
+                        self.refresh(e, self);
+                    }
+
+                    // Load the jsCode
+                    //
+                    // Checking the event select element changed
+                    //
+                    // If old event is not equal to current event in
+                    // select, it's meaning the select changed not
+                    // the window close, so we need to load the JS
+                    // code from new selected property and change the
+                    // editor content.
+                    if (formData.currentEvent != formData.selectedEvent) {
+                        if (formData.selectedEvent) {
+                            // Load the event property content and set
+                            // the editor content.
+                            jsCode = node.getProperty(
+                                formData.selectedEvent
+                            );
+                            if (typeof(jsCode) != 'string')
+                                jsCode = '';
+                            eventEditor.setOption('readOnly', false);
+                            eventEditor.setValue(jsCode);
+                        } else {
+                            // Check the selection of event, if
+                            // selected blank will clean up the editor
+                            // content and set editor to be read only.
+                            eventEditor.setValue('');
+                            eventEditor.setOption(
+                                'readOnly', 'nocursor'
+                            );
+                        }
+
+                        // Set currentEvent element to selctedEvent.
+                        eventElement.val(formData.selectedEvent);
+                    };
+                });
+
+                this.formElement = formElement;
+                this.eventElement = eventElement;
+                this.eventSelectElement = eventSelectElement;
+                this.eventHandlersList = eventHandlersList;
+                this.eventEditor = eventEditor;
+                this.element.append(formElement);
+                this.element.dialog({
+                    modal: true,
+                    width: 980,
+                    height: 560,
+                    resizable: false,
+                    autoOpen: false
+                })
+                .bind('dialogopen', function(e) {
+                    if (eventSelectElement.val() == '')
+                        self._initialEditorContent(self);
+                })
+                .bind('dialogclose', function(e) {
+                    self.formElement.trigger('submit');
+                });
+
+            return this;
+        },
+
+        _setOption: function(key, value) {
+            // Chain up to base class _setOptions()
+            // FIXME: In jquery UI 1.9 and above, instead use
+            //    this._super('_setOption', key, value)
+            $.rib.baseView.prototype._setOption.apply(this, arguments);
+
+            switch (key) {
+                case 'model':
+                    this.refresh(null, this);
+                    break;
+                default:
+                    break;
+            }
+        },
+
+        refresh: function(event, widget) {
+            widget = widget || this;
+            var matchedProps,
+                eventElement = widget.element.find('input[name="currentEvent"]'),
+                eventSelectElement = widget.element.find('select'),
+                eventHandlersList = widget.element.find('fieldset'),
+                node = ADM.getSelectedNode(), id = node.getProperty('id');
+
+            // Restore the select element to be blank
+            if (event && event.name == 'selectionChanged')
+                widget._initialEditorContent(widget);
+
+            // Update dialog title.
+            widget.element.dialog({
+                title: "Event Handlers - "
+                    + BWidget.getDisplayLabel(node.getType())
+                    + (id ? ' (' + id + ')' : '' ),
+            })
+
+            // Regenerate event select options/list.
+            matchedProps = node.getMatchingProperties({'type': 'event'});
+            widget._generateEventSelectElement(
+                widget, eventSelectElement, node, matchedProps
+            );
+            widget._generateEventHandlersList(
+              widget, eventSelectElement, node, matchedProps
+            ).replaceAll(eventHandlersList);
+        },
+
+        // Private functions
+        _createPrimaryTools: function() {
+            return $(null);
+        },
+
+        _createSecondaryTools: function() {
+            return $(null);
+        },
+
+        _selectionChangedHandler: function(event, widget) {
+            widget = widget || this;
+            widget.refresh(event, widget);
+        },
+
+        _initialEditorContent: function(widget) {
+            widget = widget || this;
+            widget.eventSelectElement.val('');
+            widget.eventElement.val('');
+            // Clean up the editor contents and restore it to be read only.
+            widget.eventEditor.setValue('');
+            widget.eventEditor.setOption('readOnly', 'nocursor');
+        },
+
+        /*
+         * Elements construction functions.
+         */
+
+        // Generate the event property select options.
+        _generateEventSelectElement: function(widget, eventSelectElement, node, matchedProps) {
+            var selected, newSelectElement, result,
+                optionElement, eventName, optionsGroup;
+
+            // If eventSelectElement is not exist then create one, otherwise
+            // restore it to initial.
+            if (eventSelectElement.length == 0) {
+                eventSelectElement = $('<select name="selectedEvent" class="center"></select>');
+            } else {
+                selected = eventSelectElement.val();
+                eventSelectElement.empty();
+            }
+
+            // Added a initial blank option;
+            $('<option value="">[Select an event handler]</option>')
+                .addClass('cm-inactive')
+                .appendTo(eventSelectElement);
+
+            // TODO: Classify the events and use optgroup to
+            //        genereate it.
+            /*
+            optionsGroup = $(
+                '<optgroup label="[Select an event handler]"></optgroup>'
+            )
+                .appendTo(eventSelectElement);
+            */
+
+            // Generate event select options.
+            for (eventName in matchedProps) {
+                optionElement = $('<option>')
+                    .attr('value', eventName)
+                    .html(eventName)
+                    .appendTo(eventSelectElement);
+
+                // If the event is selcted, then check it to be
+                // selected again.
+                if (eventName === selected)
+                    optionElement.attr('selected', 'selected');
+
+                // If the event have codes, then highlight it.
+                if (typeof(matchedProps[eventName]) !== 'string')
+                    continue;
+                if (matchedProps[eventName].trim() === '')
+                    continue;
+                optionElement.addClass('cm-active');
+                optionElement.html(optionElement.html() + ' *');
+            }
+            return eventSelectElement;
+        },
+
+        // Generate the event event handler that had codes list area.
+        _generateEventHandlersList: function(widget, eventSelectElement, node, matchedProps) {
+            var selected, ulElement, liElement, aElement,
+                removeElement, result, eventName, eventHandlersList,
+                self = this;
+            var switchEventHandler = function(e) {
+                e.preventDefault();
+                var self = $(this), parent = self.parent(),
+                    eventName = self.parent().attr('rel');
+                // Highlight current line.
+                parent.parent().find('.ui-selected').removeClass('ui-selected');
+                parent.addClass('ui-selected');
+                // Set the event handler editor.
+                widget.eventSelectElement.val(eventName);
+                widget.eventSelectElement.trigger('change');
+            },
+            removeEventHandler = function(e) {
+                e.preventDefault();
+                var eventName = $(this).parent().attr('rel');
+                $.rib.confirm(
+                    'Are you sure you want to delete the '
+                        + eventName
+                        + ' event handler?',
+                    function() {
+                        node.setProperty(eventName, '');
+                        if (widget.eventElement.val() == eventName) {
+                            widget.eventSelectElement.val('');
+                            widget.eventEditor.setValue('');
+                        }
+                        widget.formElement.trigger('submit');
+                    }
+                );
+            };
+            // Store the old selected event.
+            selected = eventSelectElement.val();
+
+            // Generate event handlers list.
+            eventHandlersList = $('<fieldset>')
+                .append($('<legend>Event handlers</legend>'))
+
+            ulElement = $('<ul>').appendTo(eventHandlersList);
+            for (eventName in matchedProps) {
+                if (typeof(matchedProps[eventName]) !== 'string')
+                    continue;
+                if (matchedProps[eventName].trim() === '')
+                    continue;
+                aElement = $('<a>')
+                    .addClass('link')
+                    .html(eventName)
+                    .click(switchEventHandler);
+                liElement = $('<li>')
+                    .attr('rel', eventName)
+                    // FIXME: Strange behavior here
+                    //        removeElement only appended to
+                    //        last liElement
+                    // .append(removeElement);
+                    .append(aElement)
+                    .appendTo(ulElement);
+                if (selected == eventName)
+                    liElement.addClass('ui-selected');
+            }
+            removeElement = $('<div class="delete button">Delete</div>')
+                .click(removeEventHandler);
+            ulElement.find('li').append(removeElement);
+            return eventHandlersList;
+        }
+    })
+})(jQuery);
diff --git a/src/js/views/outline.js b/src/js/views/outline.js
index 765b39e9..300c7f32 100644
--- a/src/js/views/outline.js
+++ b/src/js/views/outline.js
@@ -160,7 +160,10 @@
                 return null;
             return model.getSelectedNode() || model.getActivePage();
         },
-        _renderPageNode: function (domNode, node) {
+        _renderSpecialNode: function (domNode, node) {
+            var id, titleNode, element, icon;
+
+            // Display ID when type is Page.
             if (node.getType() === "Page") {
                 //set page id
                 var id = node.getProperty('id'),
@@ -170,6 +173,16 @@
                         .appendTo(domNode.find("> a"));
                 titleNode.text(' (' + id + ')');
             }
+
+            // Add event handler icon to outline view.
+            if (node.hasEventHandlers()) {
+                element = domNode.find('a');
+                icon  = $('<a class="eventHandlerIcon" title="Open event handler.">Event Handler</a>')
+                    .click(function(e) {
+                        $(':rib-eventHandlerView').dialog('open');
+                    });
+                element.append(icon);
+            }
         },
         _render: function (domNode, data) {
             var labelFunc, parentNode = data.getParent(), newTopLevelNode;
@@ -187,7 +200,7 @@
                     $('<li class="label">' + label + '</li>')
                         .insertBefore(domNode).data('adm-node', parentNode);
             }
-            this._renderPageNode(domNode, data);
+            this._renderSpecialNode(domNode, data);
         },
         _nodeSelected: function (treeModelNode, data) {
             this.options.model.setSelected(data.getUid());
diff --git a/src/js/views/property.js b/src/js/views/property.js
index 9e04f303..e2f9631c 100644
--- a/src/js/views/property.js
+++ b/src/js/views/property.js
@@ -622,325 +622,7 @@
                 .attr('id', "eventHandlerElement")
                 .appendTo(buttonsContainer)
                 .bind('click', function(e) {
-                    var generateEventSelectElement, generateEventHandlersList,
-                        removeEventHandler, eventLinkClicked;
-                    var formContainer, leftPanel, leftPanelContainer,
-                        rightPanel, eventElement, eventSelectElement,
-                        eventEditorContainer, eventEditor, formElement,
-                        jsCode, eventHandlersList, id,
-                        uniqueIdName = 'id';
-
-                    // If node have no ID property, then return directly.
-                    if(typeof(BWidget.propertyExists(node.getType(), uniqueIdName)) == 'undefined') {
-                        alert('Event handler must be using with the element have ID property.');
-                        return false;
-                    };
-
-                    /*
-                     * Call back functions.
-                     */
-
-                    // Remove event handler
-                    removeEventHandler = function(e) {
-                        e.preventDefault();
-                        var eventName = $(this).parent().attr('rel');
-                        $.rib.confirm(
-                            'Are you sure you want to delete the '
-                                + eventName
-                                + ' event handler?',
-                            function() {
-                                node.setProperty(eventName, '');
-                                if (eventElement.val() == eventName) {
-                                    eventEditor.setValue('');
-                                    formElement.trigger('submit');
-                                } else {
-                                    formElement.trigger('refresh');
-                                }
-                            }
-                        );
-                    }
-
-                    // Event link clicked callback
-                    eventLinkClicked = function(e) {
-                        e.preventDefault();
-                        var eventName = $(this).parent().attr('rel');
-                        eventSelectElement.val(eventName);
-                        formElement.trigger('submit');
-                    }
-
-                    /*
-                     * Elements generation functions.
-                     */
-
-                    // Generate the event property select options.
-                    generateEventSelectElement = function(selectElement, matchedProps) {
-                        var selected, newSelectElement, result, matchedProps,
-                        optionElement, eventName, optionsGroup;
-
-                        // Store the old selected event.
-                        selected = selectElement.val();
-
-                        // Clean up the origin options.
-                        selectElement.find('option').remove();
-
-                        // Search event properties
-                        if (!matchedProps)
-                            matchedProps = node.getMatchingProperties(
-                                {'type': 'event'}
-                            );
-
-                        // Added a initial blank option;
-                        $('<option value="">[Select an event handler]</option>')
-                            .addClass('cm-inactive')
-                            .appendTo(selectElement);
-
-                        // TODO: Classify the events and use optgroup to
-                        //        genereate it.
-                        /*
-                        optionsGroup = $(
-                            '<optgroup label="[Select an event handler]"></optgroup>'
-                        )
-                            .appendTo(selectElement);
-                        */
-
-                        // Generate event select options.
-                        for (eventName in matchedProps) {
-                            optionElement = $('<option>')
-                                .attr('value', eventName)
-                                .html(node.getPropertyDisplayName(eventName))
-                                .appendTo(selectElement);
-
-                            // If the event is selcted, then check it to be
-                            // selected again.
-                            if (eventName == selected)
-                                optionElement.attr('selected', 'selected');
-
-                            // If the event have codes, then highlight it.
-                            if (typeof(matchedProps[eventName]) != 'string')
-                                continue;
-                            if (matchedProps[eventName].trim() == '')
-                                continue;
-                            optionElement.addClass('cm-active');
-                            optionElement.html(optionElement.html() + ' *');
-                        }
-                    }
-
-                    // Generate the event event handler that had codes list area.
-                    generateEventHandlersList = function(selectElement, matchedProps) {
-                        var selected, ulElement, liElement, aElement,
-                            removeElement, result, matchedProps, eventName;
-
-                        // Store the old selected event.
-                        selected = selectElement.val();
-
-                        // Search event properties
-                        if (!matchedProps)
-                            matchedProps = node.getMatchingProperties(
-                                {'type': 'event'}
-                            );
-
-                        // Generate event handlers list.
-                        eventHandlersList = $('<fieldset>')
-                            .append($('<legend>Event handlers</legend>'))
-
-                        ulElement = $('<ul>').appendTo(eventHandlersList);
-                        removeElement = $('<div class="delete button">Delete</div>')
-                            .click(removeEventHandler);
-
-                        for (eventName in matchedProps) {
-                            if (typeof(matchedProps[eventName]) != 'string')
-                                continue;
-                            if (matchedProps[eventName].trim() == '')
-                                continue;
-                            aElement = $('<a>')
-                                .addClass('link')
-                                .html(eventName)
-                                .click(eventLinkClicked);
-                            liElement = $('<li>')
-                                .attr('rel', eventName)
-                                // FIXME: Strange behavior here
-                                //        removeElement only appended to
-                                //        last liElement
-                                // .append(removeElement);
-                                .append(aElement)
-                                .appendTo(ulElement);
-                        }
-                        ulElement.find('li').append(removeElement);
-                        return eventHandlersList;
-                    }
-
-                    /*
-                     * Construct the page layout
-                     */
-
-                    // Page layout initial
-                    formContainer = $('<div class="hbox" />');
-                    leftPanel = $('<div class="flex1 vbox wrap_left" />')
-                        .appendTo(formContainer)
-                    rightPanel =$('<div class="flex1 wrap_right" />')
-                        .appendTo(formContainer)
-
-                    /*** Left panel contents ***/
-
-                    $('<div class="title"><label>Event</label></div>')
-                        .appendTo(leftPanel);
-
-                    leftPanelContainer = $('<div>')
-                        .addClass('container propertyItems')
-                        .appendTo(leftPanel);
-
-                    // Construct event options elements
-                    eventSelectElement = $('<select>')
-                        .attr({'name': 'selectedEvent'})
-                        .addClass('center')
-                        .change(function(e) {
-                            formElement.trigger('submit');
-                        })
-                        .select()
-                        .appendTo(leftPanelContainer);
-
-                    // Add a hidden input to store current event name
-                    eventElement = $(
-                        '<input name="currentEvent" type="hidden" value="" />'
-                    ).appendTo(leftPanelContainer);
-
-                    // Initial the event handlers list
-                    eventHandlersList = $('<fieldset>')
-                        .append($('<legend>Event handlers</legend>'))
-                        .appendTo(leftPanelContainer);
-
-                    // Create the DONE button
-                    $('<button>Done</button>')
-                        .addClass('buttonStyle doneButton')
-                        .click( function (e) {
-                            formElement.dialog('close');
-                        })
-                        .button()
-                        .appendTo(leftPanelContainer);
-
-                    /*** Right panel contents ***/
-
-                    $('<div class="title"><label>Javascript Code</label></div>')
-                        .appendTo(rightPanel);
-
-                    // Construct code editor element
-                    eventEditorContainer = $('<div/>')
-                        .addClass('container')
-                        .appendTo(rightPanel);
-                    eventEditor = CodeMirror(
-                        eventEditorContainer[0],
-                        {
-                            mode: "javascript",
-                            readOnly: 'nocursor',
-                        }
-                    );
-                    eventEditorContainer.show();
-
-                    /*** Dialog contents ***/
-                    id = node.getProperty('id');
-                    formElement = $('<form>')
-                        .attr('id', 'eventHandlerDialog')
-                        .append(formContainer)
-                        .dialog({
-                            title: "Event Handlers - "
-                                + BWidget.getDisplayLabel(type)
-                                + (id ? ' (' + id + ')' : '' ),
-                            modal: true,
-                            width: 980,
-                            height: 600,
-                            resizable: false
-                         })
-                        .bind('refresh', function(e, matchedProps) {
-                            if (!matchedProps)
-                                matchedProps = node.getMatchingProperties(
-                                    {'type': 'event'}
-                                );
-
-                            // Regenerate event select options.
-                            generateEventSelectElement(
-                                eventSelectElement, matchedProps
-                            );
-
-                            // Regenerate the event handlers list.
-                            eventHandlersList.replaceWith(
-                                generateEventHandlersList(
-                                    eventSelectElement,matchedProps
-                                )
-                            );
-                        })
-                        .bind('dialogclose', function(e) {
-                            $(this).trigger('submit');
-                        })
-                        .bind('submit', function(e) {
-                            e.preventDefault();
-
-                            // Serialize the form data to JSON.
-                            var formData = $(this).serializeJSON();
-                            formData['jsCode'] = eventEditor.getValue();
-
-                            // If ID is blank, generate a unique one.
-                            if(node.getProperty(uniqueIdName) == '') {
-                                node.generateUniqueProperty(
-                                    uniqueIdName, true
-                                );
-                            }
-
-                            // Save editor content to ADM property.
-                            if (formData.currentEvent) {
-                                node.setProperty(
-                                    formData.currentEvent,
-                                    formData.jsCode
-                                );
-                                // Refresh event handlers list.
-                                $(this).trigger('refresh');
-                            }
-
-                            // Load the jsCode
-                            //
-                            // Checking the event select element changed
-                            //
-                            // If old event is not equal to current event in
-                            // select, it's meaning the select changed not
-                            // the window close, so we need to load the JS
-                            // code from new selected property and change the
-                            // editor content.
-                            if (formData.currentEvent != formData.selectedEvent) {
-                                if (formData.selectedEvent) {
-                                    // Load the event property content and set
-                                    // the editor content.
-                                    jsCode = node.getProperty(
-                                        formData.selectedEvent
-                                    );
-                                    if (typeof(jsCode) != 'string')
-                                        jsCode = '';
-                                    eventEditor.setOption('readOnly', false);
-                                    eventEditor.setValue(jsCode);
-
-                                    // Hightlight current event in event
-                                    // handlers
-                                    eventHandlersList
-                                        .find('li.ui-selected')
-                                        .removeClass('ui-selected');
-                                    eventHandlersList
-                                        .find('li[rel="' + formData.selectedEvent + '"]')
-                                        .addClass('ui-selected');
-                                } else {
-                                    // Check the selection of event, if
-                                    // selected blank will clean up the editor
-                                    // content and set editor to be read only.
-                                    eventEditor.setValue('');
-                                    eventEditor.setOption(
-                                        'readOnly', 'nocursor'
-                                    );
-                                }
-
-                                // Set currentEvent element to selctedEvent.
-                                eventElement.val(formData.selectedEvent);
-                            };
-                        });
-
-                        // Initial event handlers list.
-                        formElement.trigger('refresh');
+                    $(':rib-eventHandlerView').dialog('open');
                 });
 
             // add delete element button