update look and feel of demo, add/remove event listeners

demo/www/css/index.css

@@ -41,22 +41,13 @@ body {
     height:100%;
     margin:0px;
     padding:0px;
-    text-transform:uppercase;
+    padding-top:20px;
     width:100%;
 }
 
 /* Portrait layout (default) */
 .app {
-    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
-    position:absolute;             /* position in the center of the screen */
-    left:50%;
-    top:50%;
-    height:50px;                   /* text area height */
-    width:225px;                   /* text area width */
     text-align:center;
-    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
-    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
-                                   /* offset horizontal: half of text area width */
 }
 
 /* Landscape layout (with min-width) */
@@ -69,6 +60,19 @@ body {
     }
 }
 
+button {
+    border:solid 1px #946A4b;
+    background:#666;
+    color:#fff;
+    border-radius:4px;
+    -webkit-border-radius:4px;
+    font-size:12px;
+
+    margin:8px;
+    padding:6px;
+    width:128px;
+}
+
 h1 {
     font-size:24px;
     font-weight:normal;

demo/www/index.html

@@ -42,6 +42,7 @@
                 <p class="event listening">Connecting to Device</p>
                 <p class="event received">Device is Ready</p>
             </div>
+            <h4>Set screen.orientation.lock();</h4>
             <div>
                 <button id="btnPortrait">Portrait</button>
                 <button id="btnLandscape">Landscape</button>
@@ -50,9 +51,16 @@
                 <button id="btnPortPrimary">Portrait - Primary</button>
                 <button id="btnLandPrimary">Landscape - Primary</button>
             </div>
+            <div>
                 <button id="btnAny">Unlock</button>
-            <button id="btnOnchange">Onchange</button>
+                <button style="opacity:0;"/>
-            <button id="btnAddEvtListener">Add Event</button>
+            </div>
+
+            <h4>Listen for events</h4>
+            <div>
+                <button id="btnOnchange">assign onchange</button>
+                <button id="btnAddEvtListener">addEventListener</button>
+            </div>
         </div>
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="js/index.js"></script>

demo/www/js/index.js

@@ -66,12 +66,32 @@ var app = {
         btnAny.addEventListener("click", function() {
             screen.orientation.unlock();
         });
-        btnOnchange.addEventListener("click", function() {
-            screen.orientation.onchange = myFunction1();
 
+        var hasOnChange = false;
+        btnOnchange.addEventListener("click", function() {
+            if(hasOnChange) {
+                screen.orientation.onchange = undefined;
+                btnOnchange.innerText = "assign onchange";
+            }
+            else {
+                screen.orientation.onchange = myFunction1;
+                btnOnchange.innerText = "remove onchange";
+            }
+            hasOnChange = !hasOnChange;
         });
+
+        var hasListener = false;
         btnAddEvtListener.addEventListener("click", function() {
-            screen.orientation.addEventListener('change', myFunction2(), true);
+            if(hasListener) {
+                screen.orientation.removeEventListener('change', myFunction2);
+                btnAddEvtListener.innerText = "addEventListener";
+            }
+            else {
+                screen.orientation.addEventListener('change', myFunction2);
+                btnAddEvtListener.innerText = "remEventListener";
+            }
+            hasListener = !hasListener;
+
         });