Updated application sources 71/22371/1
authorPawel Sierszen <p.sierszen@samsung.com>
Mon, 2 Jun 2014 12:51:51 +0000 (14:51 +0200)
committerPawel Sierszen <p.sierszen@samsung.com>
Mon, 2 Jun 2014 12:51:51 +0000 (14:51 +0200)
Change-Id: I92eb14ff956cf1475a089cc5183cf53db7610ae6
Signed-off-by: Pawel Sierszen <p.sierszen@samsung.com>
project/.project
project/config.xml
project/css/style.css
project/index.html
project/js/main.js

index 7f6d88c..67124b8 100644 (file)
@@ -1,57 +1,57 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <projectDescription>
-       <name>SensorBall</name>
-       <comment></comment>
-       <projects>
-       </projects>
-       <buildSpec>
-               <buildCommand>
-                       <name>org.eclipse.wst.common.project.facet.core.builder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>json.validation.builder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.tizen.web.jslint.nature.JSLintBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.tizen.web.css.nature.CSSBuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.eclipse.wst.validation.validationbuilder</name>
-                       <arguments>
-                       </arguments>
-               </buildCommand>
-               <buildCommand>
-                       <name>org.tizen.web.project.builder.WebBuilder</name>
-                       <arguments>
-                               <dictionary>
-                                       <key>usedLibraryType</key>
-                                       <value>WebUIFramework</value>
-                               </dictionary>
-                       </arguments>
-               </buildCommand>
-       </buildSpec>
-       <natures>
-               <nature>json.validation.nature</nature>
-               <nature>org.tizen.web.jslint.nature.JSLintNature</nature>
-               <nature>org.tizen.web.css.nature.CSSNature</nature>
-               <nature>org.eclipse.wst.jsdt.core.jsNature</nature>
-               <nature>org.eclipse.wst.common.project.facet.core.nature</nature>
-               <nature>org.eclipse.wst.common.modulecore.ModuleCoreNature</nature>
-               <nature>org.tizen.web.project.builder.WebNature</nature>
-       </natures>
+    <name>SensorBall</name>
+    <comment></comment>
+    <projects>
+    </projects>
+    <buildSpec>
+        <buildCommand>
+            <name>org.eclipse.wst.common.project.facet.core.builder</name>
+            <arguments>
+            </arguments>
+        </buildCommand>
+        <buildCommand>
+            <name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
+            <arguments>
+            </arguments>
+        </buildCommand>
+        <buildCommand>
+            <name>json.validation.builder</name>
+            <arguments>
+            </arguments>
+        </buildCommand>
+        <buildCommand>
+            <name>org.tizen.web.jslint.nature.JSLintBuilder</name>
+            <arguments>
+            </arguments>
+        </buildCommand>
+        <buildCommand>
+            <name>org.tizen.web.css.nature.CSSBuilder</name>
+            <arguments>
+            </arguments>
+        </buildCommand>
+        <buildCommand>
+            <name>org.eclipse.wst.validation.validationbuilder</name>
+            <arguments>
+            </arguments>
+        </buildCommand>
+        <buildCommand>
+            <name>org.tizen.web.project.builder.WebBuilder</name>
+            <arguments>
+                <dictionary>
+                    <key>usedLibraryType</key>
+                    <value>WebUIFramework</value>
+                </dictionary>
+            </arguments>
+        </buildCommand>
+    </buildSpec>
+    <natures>
+        <nature>json.validation.nature</nature>
+        <nature>org.tizen.web.jslint.nature.JSLintNature</nature>
+        <nature>org.tizen.web.css.nature.CSSNature</nature>
+        <nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+        <nature>org.eclipse.wst.common.project.facet.core.nature</nature>
+        <nature>org.eclipse.wst.common.modulecore.ModuleCoreNature</nature>
+        <nature>org.tizen.web.project.builder.WebNature</nature>
+    </natures>
 </projectDescription>
index 6ba265a..6ba5c97 100644 (file)
@@ -1,10 +1,31 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://sample-web-application.tizen.org/SensorBall" version="2.2.0" viewmodes="fullscreen">
-       <tizen:application id="RiIuG1b0CV.SensorBall" package="RiIuG1b0CV" required_version="2.2"/>
-       <content src="index.html"/>
-       <icon src="icon.png"/>
-       <name>Sensor Ball</name>
-       <feature name="http://tizen.org/feature/screen.size.normal.720.1280"/>
-       <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
-       <tizen:setting screen-orientation="portrait" context-menu="disable" background-support="disable" encryption="disable" install-location="auto"/>
+<widget
+    xmlns="http://www.w3.org/ns/widgets"
+    xmlns:tizen="http://tizen.org/ns/widgets"
+    id="http://sample-web-application.tizen.org/SensorBall"
+    version="2.2.0"
+    viewmodes="fullscreen">
+
+    <tizen:application
+        id="RiIuG1b0CV.SensorBall"
+        package="RiIuG1b0CV"
+        required_version="2.2" />
+
+    <content src="index.html" />
+
+    <icon src="icon.png" />
+
+    <name>Sensor Ball</name>
+
+    <feature name="http://tizen.org/feature/screen.size.normal.720.1280" />
+
+    <tizen:privilege name="http://tizen.org/privilege/application.launch" />
+
+    <tizen:setting
+        screen-orientation="portrait"
+        context-menu="disable"
+        background-support="disable"
+        encryption="disable"
+        install-location="auto" />
+
 </widget>
index 9146e9b..708c3e0 100644 (file)
@@ -1,52 +1,53 @@
 html, body {
-       margin: 0px;
-       padding: 0px;
+    margin: 0px;
+    padding: 0px;
 }
 
 body {
-       overflow: hidden;
+    overflow: hidden;
+    -webkit-user-select: none;
 }
 
 .ui-content{
-       background-size: 100%;
+    background-size: 100%;
 }
 
 .background1 {
-       background-image: url('../images/background1.jpg');
+    background-image: url('../images/background1.jpg');
 }
 
 .background2 {
-       background-image: url('../images/background2.jpg');
+    background-image: url('../images/background2.jpg');
 }
 
 .background3 {
-       background-image: url('../images/background3.jpg');
-       background-color: #000;
-       overflow: hidden;
+    background-image: url('../images/background3.jpg');
+    background-color: #000;
+    overflow: hidden;
 }
 
 .ball {
-       position: absolute;
-       left: 0px;
-       top: 0px;
-       width: 86px;
-       height: 86px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 86px;
+    height: 86px;
 }
 
 .sun {
-       position: absolute;
-       width: 86px;
-       height: 86px;
-       left: 0px;
-       top: 0px;
-       z-index:50;
+    position: absolute;
+    width: 86px;
+    height: 86px;
+    left: 0px;
+    top: 0px;
+    z-index: 50;
 }
 
 #main {
-       width: 100%;
-       height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 .ui-tabbar-margin-back {
-       margin-right:0 !important;
+    margin-right:0 !important;
 }
index 56db864..549f13a 100644 (file)
@@ -1,45 +1,53 @@
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8" />
-<meta name="viewport" content="user-scalable=no" id="viewport_meta" />
-<script type="text/javascript">
-       var viewport_meta = document.getElementById('viewport_meta');
-       var w = screen.availWidth;
-       var h = screen.availHeight;
-       viewport_meta.setAttribute('content', 'width=' + w + ', height=' + h + ',user-scalable=no');
-</script>
-<title>Sensor ball</title>
-<script src="tizen-web-ui-fw/latest/js/jquery.min.js"></script>
-<script
-       src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
-<script
-       src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
-       data-framework-theme="tizen-white"
-       data-framework-viewport-scale="false"></script>
-<link rel="stylesheet" href="./css/style.css" />
-<script type="text/javascript" src="./js/main.js"></script>
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="user-scalable=no" id="viewport_meta" />
+    <script type="text/javascript">
+        var viewport_meta = document.getElementById('viewport_meta'),
+            w = screen.availWidth,
+            h = screen.availHeight;
+        viewport_meta.setAttribute('content', 'width=' + w + ', height=' + h + ',user-scalable=no');
+    </script>
+
+    <title>Sensor ball</title>
+    <meta name="description" content="Sensor ball"/>
+
+    <script src="/usr/share/tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+    <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+    <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js" data-framework-theme="tizen-white" data-framework-viewport-scale="false"></script>
+
+    <script type="text/javascript" src="./js/main.js"></script>
+    <link rel="stylesheet" href="./css/style.css" />
+
 </head>
 <body>
-       <div data-role="page" id="mainPage">
-               <div data-role="header" data-position="fixed">
-                       <h1>Sensor ball</h1>
-               </div>
-               <div data-role="content" class="background background1"
-                       data-scroll="none">
-                       <div id="main">
-                               <img id="image1" class="ball" src="./images/ball1.png" />
-                       </div>
-               </div>
-               <div data-role="footer" data-position="fixed">
-                       <div data-role="tabbar" data-style="toolbar" id="footerControls">
-                               <ul>
-                                       <li><a href="#" id="btnBall" class="ui-btn-active">BALL</a></li>
-                                       <li><a href="#" id="btnSky">SKY</a></li>
-                                       <li><a href="#" id="btnSpace">SPACE</a></li>
-                               </ul>
-                       </div>
-               </div>
-       </div>
+
+    <div data-role="page" id="mainPage">
+
+        <div data-role="header" data-position="fixed">
+            <h1>Sensor ball</h1>
+        </div>
+
+        <div data-role="content" class="background background1"
+            data-scroll="none">
+            <div id="main">
+                <img id="image1" class="ball" src="./images/ball1.png" />
+            </div>
+        </div>
+
+        <div data-role="footer" data-position="fixed">
+            <div data-role="tabbar" data-style="toolbar" id="footerControls">
+                <ul>
+                    <li><a href="#" id="btnBall" class="ui-btn-active">BALL</a></li>
+                    <li><a href="#" id="btnSky">SKY</a></li>
+                    <li><a href="#" id="btnSpace">SPACE</a></li>
+                </ul>
+            </div>
+        </div>
+
+    </div>
+
 </body>
-</html>
\ No newline at end of file
+</html>
index df5b632..7c5d8ca 100644 (file)
  *      limitations under the License.
  */
 
-/*global $: false, tizen: false, navigator: false, app: true*/
+/*jslint devel:true*/
+/*global $: false, tizen: false, navigator: false, window, app: true*/
 
 var app = {
-       sensor: null,
-       R: 2000.0, // // gravity constant * m * M
-
-       gameWidth: 0,
-       gameHeight: 0,
-       ballWidth: 0,
-       ballHeight: 0,
-       sunWidth: 0,
-       sunHeight: 0,
-       ballX: 0,
-       ballY: 0,
-       dX: 0,
-       dY: 0,
-       sunX: 0,
-       sunY: 0,
-
-       backgroundWidth: 0,
-       backgroundHeight: 0,
-       backgroundTop: 0,
-       backgroundLeft: 0,
-
-       resistance: 0.98, // air
-       friction: 0.90, // bounce
-       sideFriction: 0.95,
-       frictionC: 0.002,
-       repulse: 0.6,
-       cdd: -0.3,
-
-       timeout: null,
-       current: 'ball',
-       event: null,
-       animationInterval: 40,
-
-       /**
-        * Draw earth background position
-        * @param {int} x current x earth position
-        * @param {int} y current y earth position
-        */
-       earthUpdateBackgroundPosition: function earthUpdateBackgroundPosition(x, y) {
-               "use strict";
-               var rX, rY,
-                       cX, cY,
-                       tX, tY,
-                       bdX, bdY,
-                       br;
-
-               rX = -30.0;
-               rY = -30.0;
-
-               cX = (this.gameWidth - this.backgroundWidth) / 2;
-               cY = (this.gameHeight - this.backgroundHeight) / 2;
-
-               tX = cX + (-x * rX);
-               tY = cY + (y * rY);
-
-               bdX = tX - this.backgroundLeft;
-               bdY = tY - this.backgroundTop;
-
-               br = 0.2;
-
-               this.backgroundLeft += bdX * br;
-               this.backgroundTop += bdY * br;
-
-               $('.background').css('background-position', (this.backgroundLeft - 330) + 'px ' + (this.backgroundTop - 330) + 'px');
-       },
-
-       /**
-        * Draw sun position
-        * @param {int} x current x earth position
-        * @param {int} y current y earth position
-        */
-       earthUpdateSunPosition: function earthUpdateSunPosition(x, y) {
-               "use strict";
-               var rX, rY,
-                       cX, cY,
-                       tX, tY,
-                       bdX, bdY,
-                       br;
-
-               rX = -8.0;
-               rY = -8.0;
-
-               cX = (this.gameWidth - this.sunWidth) / 2;
-               cY = (this.gameHeight - this.sunHeight) / 2;
-
-               tX = cX + (-x * rX);
-               tY = cY + (y * rY);
-
-               bdX = tX - this.sunX;
-               bdY = tY - this.sunY;
-
-               br = 0.2;
-
-               this.sunX += bdX * br;
-               this.sunY += bdY * br;
-
-               $('#sun').css('left', this.sunX + 'px');
-               $('#sun').css('top', this.sunY + 'px');
-               $('#sun').show();
-       },
-
-       /**
-        * Deceleration - used when the earth leaves the Sun's gravitation
-        */
-       deceleration: function deceleration() {
-               "use strict";
-               this.dX *= 0.6;
-               this.dY *= 0.6;
-       },
-
-       /**
-        * Draw the next animation frame for the 'earth' tab
-        */
-       earthEvents: function earthEvents() {
-               "use strict";
-
-               var event, borderTolerance,
-                       x, y,
-                       dXl, dYl,
-                       d,
-                       d2,
-                       ddx, ddy,
-                       ratio;
-
-               event = this.event;
-               borderTolerance = 30;   // when Earth reach a border, then Earth is "moving"
-
-               x = -event.accelerationIncludingGravity.x;
-               y = -event.accelerationIncludingGravity.y;
-
-               // calculate X and Y distances between the Sun and Earth
-               dXl = (this.sunX + this.sunWidth / 2 - (this.ballX + (this.ballWidth / 2))); // x distance
-               dYl = (this.sunY + this.sunHeight / 2 - (this.ballY + (this.ballHeight / 2))); // y distance
-
-               if (Math.abs(dXl) < 1) {
-                       dXl = dXl < 0 ? -1 : 1; // round to 1 * sign
-               }
-               if (Math.abs(dYl) < 1) {
-                       dYl = dYl < 0 ? -1 : 1; // round to 1 * sign
-               }
-
-               // distance squared
-               d2 = Math.pow(dXl, 2) + Math.pow(dYl, 2);
-               // distance
-               d = Math.sqrt(d2);
-
-               // acceleration is proportional to 1/d2 [a=GM/r^2]
-               // X component is also proportional to dXl / d
-               ddx = (this.R * dXl) / (d2 * d);
-               ddy = (this.R * dYl) / (d2 * d);
-
-               // apply acceleration to speed
-               this.dX += ddx;
-               this.dY += ddy;
-
-               ratio = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2)) / 25; // max speed
-               if (ratio > 1) { // speed limit achieved
-                       this.dX /= ratio;
-                       this.dY /= ratio;
-               }
-
-               // apply speed to Earth position
-               this.ballX += this.dX;
-               this.ballY += this.dY;
-
-               // What do it when the earth leaves gravitation of the Sun?;
-               if (this.ballX > (this.gameWidth + borderTolerance)) {
-                       this.ballX = -borderTolerance; this.deceleration();
-               }
-               if (this.ballY > (this.gameHeight + borderTolerance)) {
-                       this.ballY = -borderTolerance; this.deceleration();
-               }
-               if (this.ballX < -borderTolerance) {
-                       this.ballX = this.gameWidth + borderTolerance; this.deceleration();
-               }
-               if (this.ballY < -borderTolerance) {
-                       this.ballY = this.gameHeight + borderTolerance; this.deceleration();
-               }
-
-               // update Earth position
-               $('.ball').css('left', this.ballX + 'px');
-               $('.ball').css('top', this.ballY + 'px');
-
-               // relative depth Sun / Earth
-               if (this.dY > 0) {
-                       $('.ball').css('z-index', 100);
-               } else {
-                       $('.ball').css('z-index', 20);
-               }
-
-               this.earthUpdateBackgroundPosition(x, y);
-               this.earthUpdateSunPosition(x, y);
-       },
-
-       /**
-        *  Checks if the ball already was on the edge in the previous step
-        *
-        *  If so, this is not a 'real' bounce - the ball is just laying on the edge
-        *  Uses globals: ballX, ballY, ballWidth, ballHeight, gameWidth, gameHeight
-        *
-        *  @return {Object}
-        */
-       shouldVibrateIfHitsEdge: function shouldVibrateIfHitsEdge() {
-               "use strict";
-               var ret = {
-                       x: true,
-                       y: true
-               };
-
-               if (this.ballX <= 0) {
-                       ret.x = false;
-               } else if ((this.ballX + this.ballWidth) >= this.gameWidth) {
-                       ret.x = false;
-               }
-               if (this.ballY <= 0) {
-                       ret.y = false;
-               } else if ((this.ballY + this.ballHeight) >= this.gameHeight) {
-                       ret.y = false;
-               }
-
-               return ret;
-       },
-
-       /**
-        * Draw the next animation frame for the 'ball' tab
-        */
-       ballEvents: function ballEvents() {
-               "use strict";
-               var event,
-                       x,
-                       y,
-                       stickTop = 0,
-                       stickLeft = 0,
-                       stickBottom = 0,
-                       stickRight = 0,
-                       rX,
-                       rY,
-                       ddx,
-                       ddy,
-                       shouldVibrate = null,
-                       isHittingEdge = null;
-
-               event = this.event;
-
-               x = -event.accelerationIncludingGravity.x;
-               y = -event.accelerationIncludingGravity.y;
-
-               stickTop = 0;
-               stickLeft = 0;
-               stickBottom = 0;
-               stickRight = 0;
-
-               rX = this.ballX;
-               rY = this.ballY;
-               ddx = x * -this.cdd;
-               ddy = y * this.cdd;
-               this.dX += ddx;
-               this.dY += ddy;
-               this.dX *= this.resistance;
-               this.dY *= this.resistance;
-
-               shouldVibrate = this.shouldVibrateIfHitsEdge();
-
-               this.ballX += this.dX;
-               this.ballY += this.dY;
-
-               if (this.ballX < 0) {
-                       this.ballX = 0;
-                       this.dX = Math.abs(this.dX) * this.friction - this.frictionC;
-                       this.dY *= this.sideFriction;
-                       stickLeft = 1;
-               } else if ((this.ballX + this.ballWidth) > this.gameWidth) {
-                       this.ballX = this.gameWidth - this.ballWidth;
-                       this.dX = -Math.abs(this.dX) * this.friction + this.frictionC;
-                       this.dY *= this.sideFriction;
-                       stickRight = 1;
-                       if (this.ballX < 0) {
-                               this.ballX = 0;
-                       }
-               }
-
-               if (this.ballY < 0) {
-                       this.ballY = 0;
-                       this.dY = Math.abs(this.dY) * this.friction - this.frictionC;
-                       this.dX *= this.sideFriction;
-                       stickTop = 1;
-               } else if ((this.ballY + this.ballHeight) > this.gameHeight) {
-                       this.ballY = this.gameHeight - this.ballHeight;
-                       this.dY = -Math.abs(this.dY) * this.friction + this.frictionC;
-                       this.dX *= this.sideFriction;
-                       stickBottom = 1;
-                       if (this.ballY < 0) {
-                               this.ballY = 0;
-                       }
-               }
-
-               isHittingEdge = {
-                       x: (stickLeft || stickRight) && Math.abs(this.dX) > 1,
-                       y: (stickTop || stickBottom) && Math.abs(this.dY) > 1
-               };
-
-               // if on the edge and the hitting speed is high enough
-               if ((shouldVibrate.x && isHittingEdge.x) || (shouldVibrate.y && isHittingEdge.y)) {
-                       if (typeof navigator.webkitVibrate === 'function') {
-                               navigator.webkitVibrate(100);
-                       } else {
-                               navigator.vibrate(100);
-                       }
-               }
-
-               $('.ball').css('left', this.ballX + 'px');
-               $('.ball').css('top', this.ballY + 'px');
-
-               rX = this.ballX - rX;
-               rY = this.ballY - rY;
-
-       },
-
-       /**
-        * Draw the next animation frame
-        */
-       fun: function fun() {
-               "use strict";
-               if (this.event) {
-                       switch (this.current) {
-                       case 'ball':
-                               this.ballEvents();
-                               break;
-                       case 'earth':
-                               this.earthEvents();
-                               break;
-                       case 'baloon':
-                               this.ballEvents();
-                               break;
-                       default:
-                               console.warn("Incorrect current mode");
-                               this.ballEvents();
-                       }
-               }
-
-               // animation - go to next step;
-               if (this.timeout !== null) {
-                       clearTimeout(this.timeout);
-               }
-               this.timeout = setTimeout(this.fun.bind(this), this.animationInterval);
-       },
-
-       /**
-        * Switch to the 'ball' tab
-        */
-       startBall: function startBall() {
-               "use strict";
-
-               $('.ui-content').removeClass('background1 background2 background3').addClass('background1');
-               $(':jqmData(role="controlbar")').find('.ui-btn').removeClass('ui-btn-hover-s ui-btn-down-s');
-               this.gameHeight = $('.background').outerHeight();
-
-               this.cdd = -0.3;
-               this.resistance = 0.98;
-               this.friction = 0.90;
-               this.sideFriction = 0.95;
-               this.frictionC = 0.002;
-
-               this.current = 'ball';
-
-               $('#sun').remove();
-               $('.ball').attr('src', './images/ball1.png');
-               $('.ball').css('width', '86px');
-               $('.ball').css('height', '86px');
-
-               $('.background').css('background-position', '0px -90px');
-
-               this.ballWidth = parseInt($('.ball').css('width'), 10);
-               this.ballHeight = parseInt($('.ball').css('height'), 10);
-       },
-
-       /**
-        * Switch to the 'sky' tab
-        */
-       startSky: function startSky() {
-               "use strict";
-               $('.ui-content').removeClass('background1 background2 background3').addClass('background2');
-               $(':jqmData(role="controlbar")').find('.ui-btn').removeClass('ui-btn-hover-s ui-btn-down-s');
-               this.gameHeight = $('.background').outerHeight();
-
-               this.cdd = 0.05;
-               this.resistance = 0.90;
-               this.friction = 0.98;
-               this.sideFriction = 0.95;
-               this.frictionC = 0.002;
-
-               this.current = 'baloon';
-
-               $('#sun').remove();
-               $('.ball').attr('src', './images/balloon.png');
-               $('.ball').css('width', '100px');
-               $('.ball').css('height', '100px');
-
-               $('.background').css('background-position', '0px -80px');
-
-               this.ballWidth = parseInt($('.ball').css('width'), 10);
-               this.ballHeight = parseInt($('.ball').css('height'), 10);
-       },
-
-       /**
-        * Switch to the 'space' tab
-        */
-       startSpace: function startSpace() {
-               "use strict";
-               var backgroundPosition, arrayPos;
-
-               $('.ui-content').removeClass('background1 background2 background3').addClass('background3');
-               $(':jqmData(role="controlbar")').find('.ui-btn').removeClass('ui-btn-hover-s ui-btn-down-s');
-
-               this.gameHeight = $('.background').outerHeight();
-
-               this.friction = 0.60; // bounce
-               this.sideFriction = 0.95;
-               this.frictionC = 0.0;
-
-               this.current = 'earth';
-
-               $('.ball').attr('src', './images/earth.png');
-               $('#main').append('<img id="sun" class="sun" src="./images/sun.png" style="display: none;"></img>');
-
-               this.sunX = (this.gameWidth - parseInt($('#sun').css('width'), 10)) / 2;
-               this.sunY = (this.gameHeight - parseInt($('#sun').css('height'), 10)) / 2;
-               $('.ball').css('width', '50px');
-               $('.ball').css('height', '50px');
-
-               $('.background').css('background-position', '0px 0px');
-
-               this.ballWidth = parseInt($('.ball').css('width'), 10);
-               this.ballHeight = parseInt($('.ball').css('height'), 10);
-               this.sunWidth = parseInt($('#sun').css('width'), 10);
-               this.sunHeight = parseInt($('#sun').css('height'), 10);
-
-               backgroundPosition = $('.background').css('background-position');
-
-               arrayPos = backgroundPosition.split(' ');
-               this.backgroundTop = parseInt(arrayPos[0], 10);
-               this.backgroundLeft = parseInt(arrayPos[1], 10);
-               this.backgroundWidth = parseInt($('.background').css('width'), 10);
-               this.backgroundHeight = parseInt($('.background').css('height'), 10);
-       },
-
-       saveSensorData: function saveSensorData(event) {
-               "use strict";
-               this.event = event;
-       }
+    sensor: null,
+    R: 2000.0, // gravity constant * m * M
+
+    gameWidth: 0,
+    gameHeight: 0,
+    ballWidth: 0,
+    ballHeight: 0,
+    sunWidth: 0,
+    sunHeight: 0,
+    ballX: 0,
+    ballY: 0,
+    dX: 0,
+    dY: 0,
+    sunX: 0,
+    sunY: 0,
+
+    backgroundWidth: 0,
+    backgroundHeight: 0,
+    backgroundTop: 0,
+    backgroundLeft: 0,
+
+    resistance: 0.98, // air
+    friction: 0.90, // bounce
+    sideFriction: 0.95,
+    frictionC: 0.002,
+    repulse: 0.6,
+    cdd: -0.3,
+
+    timeout: null,
+    current: 'ball',
+    event: null,
+    animationInterval: 40,
+
+    /**
+     * Draw earth background position
+     * @param {int} x current x earth position
+     * @param {int} y current y earth position
+     */
+    earthUpdateBackgroundPosition:
+        function earthUpdateBackgroundPosition(x, y) {
+        'use strict';
+        var rX, rY,
+            cX, cY,
+            tX, tY,
+            bdX, bdY,
+            br;
+
+        rX = -30.0;
+        rY = -30.0;
+
+        cX = (this.gameWidth - this.backgroundWidth) / 2;
+        cY = (this.gameHeight - this.backgroundHeight) / 2;
+
+        tX = cX + (-x * rX);
+        tY = cY + (y * rY);
+
+        bdX = tX - this.backgroundLeft;
+        bdY = tY - this.backgroundTop;
+
+        br = 0.2;
+
+        this.backgroundLeft += bdX * br;
+        this.backgroundTop += bdY * br;
+
+        $('.background').css('background-position', (this.backgroundLeft - 330)
+            + 'px ' + (this.backgroundTop - 330) + 'px');
+    },
+
+    /**
+     * Draw sun position
+     * @param {int} x current x earth position
+     * @param {int} y current y earth position
+     */
+    earthUpdateSunPosition: function earthUpdateSunPosition(x, y) {
+        'use strict';
+
+        var rX, rY,
+            cX, cY,
+            tX, tY,
+            bdX, bdY,
+            br;
+
+        rX = -8.0;
+        rY = -8.0;
+
+        cX = (this.gameWidth - this.sunWidth) / 2;
+        cY = (this.gameHeight - this.sunHeight) / 2;
+
+        tX = cX + (-x * rX);
+        tY = cY + (y * rY);
+
+        bdX = tX - this.sunX;
+        bdY = tY - this.sunY;
+
+        br = 0.2;
+
+        this.sunX += bdX * br;
+        this.sunY += bdY * br;
+
+        $('#sun').css('left', this.sunX + 'px');
+        $('#sun').css('top', this.sunY + 'px');
+        $('#sun').show();
+    },
+
+    /**
+     * Deceleration - used when the earth leaves the Sun's gravitation
+     */
+    deceleration: function deceleration() {
+        'use strict';
+
+        this.dX *= 0.6;
+        this.dY *= 0.6;
+    },
+
+    /**
+     * Draw the next animation frame for the 'earth' tab
+     */
+    earthEvents: function earthEvents() {
+        'use strict';
+
+        var event, borderTolerance,
+            x, y,
+            dXl, dYl,
+            d,
+            d2,
+            ddx, ddy,
+            ratio;
+
+        event = this.event;
+        borderTolerance = 30; // when Earth reach a border,
+                              // then Earth is "moving"
+
+        x = -event.accelerationIncludingGravity.x;
+        y = -event.accelerationIncludingGravity.y;
+
+        // calculate X and Y distances between the Sun and Earth
+        dXl = (this.sunX + this.sunWidth / 2
+            - (this.ballX + (this.ballWidth / 2))); // x distance
+        dYl = (this.sunY + this.sunHeight / 2
+            - (this.ballY + (this.ballHeight / 2))); // y distance
+
+        if (Math.abs(dXl) < 1) {
+            dXl = dXl < 0 ? -1 : 1; // round to 1 * sign
+        }
+        if (Math.abs(dYl) < 1) {
+            dYl = dYl < 0 ? -1 : 1; // round to 1 * sign
+        }
+
+        // distance squared
+        d2 = Math.pow(dXl, 2) + Math.pow(dYl, 2);
+        // distance
+        d = Math.sqrt(d2);
+
+        // acceleration is proportional to 1/d2 [a=GM/r^2]
+        // X component is also proportional to dXl / d
+        ddx = (this.R * dXl) / (d2 * d);
+        ddy = (this.R * dYl) / (d2 * d);
+
+        // apply acceleration to speed
+        this.dX += ddx;
+        this.dY += ddy;
+        // max speed
+        ratio = Math.sqrt(Math.pow(this.dX, 2) + Math.pow(this.dY, 2)) / 25;
+        if (ratio > 1) { // speed limit achieved
+            this.dX /= ratio;
+            this.dY /= ratio;
+        }
+
+        // apply speed to Earth position
+        this.ballX += this.dX;
+        this.ballY += this.dY;
+
+        // What do it when the earth leaves gravitation of the Sun?;
+        if (this.ballX > (this.gameWidth + borderTolerance)) {
+            this.ballX = -borderTolerance; this.deceleration();
+        }
+        if (this.ballY > (this.gameHeight + borderTolerance)) {
+            this.ballY = -borderTolerance; this.deceleration();
+        }
+        if (this.ballX < -borderTolerance) {
+            this.ballX = this.gameWidth + borderTolerance; this.deceleration();
+        }
+        if (this.ballY < -borderTolerance) {
+            this.ballY = this.gameHeight + borderTolerance; this.deceleration();
+        }
+
+        // update Earth position
+        $('.ball').css('left', this.ballX + 'px');
+        $('.ball').css('top', this.ballY + 'px');
+
+        // relative depth Sun / Earth
+        if (this.dY > 0) {
+            $('.ball').css('z-index', 100);
+        } else {
+            $('.ball').css('z-index', 20);
+        }
+
+        this.earthUpdateBackgroundPosition(x, y);
+        this.earthUpdateSunPosition(x, y);
+    },
+
+    /**
+     *  Checks if the ball already was on the edge in the previous step
+     *
+     *  If so, this is not a 'real' bounce - the ball is just laying on the edge
+     *  Uses globals: ballX, ballY, ballWidth, ballHeight, gameWidth, gameHeight
+     *
+     *  @return {Object}
+     */
+    shouldVibrateIfHitsEdge: function shouldVibrateIfHitsEdge() {
+        'use strict';
+
+        var ret = {
+            x: true,
+            y: true
+        };
+
+        if (this.ballX <= 0) {
+            ret.x = false;
+        } else if ((this.ballX + this.ballWidth) >= this.gameWidth) {
+            ret.x = false;
+        }
+        if (this.ballY <= 0) {
+            ret.y = false;
+        } else if ((this.ballY + this.ballHeight) >= this.gameHeight) {
+            ret.y = false;
+        }
+
+        return ret;
+    },
+
+    /**
+     * Draw the next animation frame for the 'ball' tab
+     */
+    ballEvents: function ballEvents() {
+        'use strict';
+
+        var event,
+            x,
+            y,
+            stickTop = 0,
+            stickLeft = 0,
+            stickBottom = 0,
+            stickRight = 0,
+            rX,
+            rY,
+            ddx,
+            ddy,
+            shouldVibrate = null,
+            isHittingEdge = null;
+
+        event = this.event;
+
+        x = -event.accelerationIncludingGravity.x;
+        y = -event.accelerationIncludingGravity.y;
+
+        stickTop = 0;
+        stickLeft = 0;
+        stickBottom = 0;
+        stickRight = 0;
+
+        rX = this.ballX;
+        rY = this.ballY;
+        ddx = x * -this.cdd;
+        ddy = y * this.cdd;
+        this.dX += ddx;
+        this.dY += ddy;
+        this.dX *= this.resistance;
+        this.dY *= this.resistance;
+
+        shouldVibrate = this.shouldVibrateIfHitsEdge();
+
+        this.ballX += this.dX;
+        this.ballY += this.dY;
+
+        if (this.ballX < 0) {
+            this.ballX = 0;
+            this.dX = Math.abs(this.dX) * this.friction - this.frictionC;
+            this.dY *= this.sideFriction;
+            stickLeft = 1;
+        } else if ((this.ballX + this.ballWidth) > this.gameWidth) {
+            this.ballX = this.gameWidth - this.ballWidth;
+            this.dX = -Math.abs(this.dX) * this.friction + this.frictionC;
+            this.dY *= this.sideFriction;
+            stickRight = 1;
+            if (this.ballX < 0) {
+                this.ballX = 0;
+            }
+        }
+
+        if (this.ballY < 0) {
+            this.ballY = 0;
+            this.dY = Math.abs(this.dY) * this.friction - this.frictionC;
+            this.dX *= this.sideFriction;
+            stickTop = 1;
+        } else if ((this.ballY + this.ballHeight) > this.gameHeight) {
+            this.ballY = this.gameHeight - this.ballHeight;
+            this.dY = -Math.abs(this.dY) * this.friction + this.frictionC;
+            this.dX *= this.sideFriction;
+            stickBottom = 1;
+            if (this.ballY < 0) {
+                this.ballY = 0;
+            }
+        }
+
+        isHittingEdge = {
+            x: (stickLeft || stickRight) && Math.abs(this.dX) > 1,
+            y: (stickTop || stickBottom) && Math.abs(this.dY) > 1
+        };
+
+        // if on the edge and the hitting speed is high enough
+        if ((shouldVibrate.x && isHittingEdge.x) || (shouldVibrate.y
+            && isHittingEdge.y)) {
+            if (typeof navigator.webkitVibrate === 'function') {
+                navigator.webkitVibrate(100);
+            } else {
+                navigator.vibrate(100);
+            }
+        }
+
+        $('.ball').css('left', this.ballX + 'px');
+        $('.ball').css('top', this.ballY + 'px');
+
+        rX = this.ballX - rX;
+        rY = this.ballY - rY;
+
+    },
+
+    /**
+     * Draw the next animation frame
+     */
+    fun: function fun() {
+        'use strict';
+
+        if (this.event) {
+            switch (this.current) {
+            case 'ball':
+                this.ballEvents();
+                break;
+            case 'earth':
+                this.earthEvents();
+                break;
+            case 'baloon':
+                this.ballEvents();
+                break;
+            default:
+                console.warn('Incorrect current mode');
+                this.ballEvents();
+            }
+        }
+
+        // animation - go to next step;
+        if (this.timeout !== null) {
+            clearTimeout(this.timeout);
+        }
+        this.timeout = setTimeout(this.fun.bind(this), this.animationInterval);
+    },
+
+    /**
+     * Switch to the 'ball' tab
+     */
+    startBall: function startBall() {
+        'use strict';
+
+        $('.ui-content').removeClass('background1 background2 background3')
+            .addClass('background1');
+        $(':jqmData(role="controlbar")').find('.ui-btn')
+            .removeClass('ui-btn-hover-s ui-btn-down-s');
+        this.gameHeight = $('.background').outerHeight();
+
+        this.cdd = -0.3;
+        this.resistance = 0.98;
+        this.friction = 0.90;
+        this.sideFriction = 0.95;
+        this.frictionC = 0.002;
+
+        this.current = 'ball';
+
+        $('#sun').remove();
+        $('.ball').attr('src', './images/ball1.png');
+        $('.ball').css('width', '86px');
+        $('.ball').css('height', '86px');
+
+        $('.background').css('background-position', '0px -90px');
+
+        this.ballWidth = parseInt($('.ball').css('width'), 10);
+        this.ballHeight = parseInt($('.ball').css('height'), 10);
+    },
+
+    /**
+     * Switch to the 'sky' tab
+     */
+    startSky: function startSky() {
+        'use strict';
+
+        $('.ui-content').removeClass('background1 background2 background3')
+            .addClass('background2');
+        $(':jqmData(role="controlbar")').find('.ui-btn')
+            .removeClass('ui-btn-hover-s ui-btn-down-s');
+        this.gameHeight = $('.background').outerHeight();
+
+        this.cdd = 0.05;
+        this.resistance = 0.90;
+        this.friction = 0.98;
+        this.sideFriction = 0.95;
+        this.frictionC = 0.002;
+
+        this.current = 'baloon';
+
+        $('#sun').remove();
+        $('.ball').attr('src', './images/balloon.png');
+        $('.ball').css('width', '100px');
+        $('.ball').css('height', '100px');
+
+        $('.background').css('background-position', '0px -80px');
+
+        this.ballWidth = parseInt($('.ball').css('width'), 10);
+        this.ballHeight = parseInt($('.ball').css('height'), 10);
+    },
+
+    /**
+     * Switch to the 'space' tab
+     */
+    startSpace: function startSpace() {
+        'use strict';
+
+        var backgroundPosition, arrayPos;
+
+        $('.ui-content').removeClass('background1 background2 background3')
+            .addClass('background3');
+        $(':jqmData(role="controlbar")').find('.ui-btn')
+            .removeClass('ui-btn-hover-s ui-btn-down-s');
+
+        this.gameHeight = $('.background').outerHeight();
+
+        this.friction = 0.60; // bounce
+        this.sideFriction = 0.95;
+        this.frictionC = 0.0;
+
+        this.current = 'earth';
+
+        $('.ball').attr('src', './images/earth.png');
+        $('#main').append('<img id="sun" class="sun" src="./images/sun.png"'
+                + ' style="display: none;"></img>');
+
+        this.sunX = (this.gameWidth - parseInt($('#sun').css('width'), 10)) / 2;
+        this.sunY = (this.gameHeight
+            - parseInt($('#sun').css('height'), 10)) / 2;
+        $('.ball').css('width', '50px');
+        $('.ball').css('height', '50px');
+
+        $('.background').css('background-position', '0px 0px');
+
+        this.ballWidth = parseInt($('.ball').css('width'), 10);
+        this.ballHeight = parseInt($('.ball').css('height'), 10);
+        this.sunWidth = parseInt($('#sun').css('width'), 10);
+        this.sunHeight = parseInt($('#sun').css('height'), 10);
+
+        backgroundPosition = $('.background').css('background-position');
+
+        arrayPos = backgroundPosition.split(' ');
+        this.backgroundTop = parseInt(arrayPos[0], 10);
+        this.backgroundLeft = parseInt(arrayPos[1], 10);
+        this.backgroundWidth = parseInt($('.background').css('width'), 10);
+        this.backgroundHeight = parseInt($('.background').css('height'), 10);
+    },
+
+    saveSensorData: function saveSensorData(event) {
+        'use strict';
+
+        this.event = event;
+    }
+
 };
 
 $(document).ready(function () {
-       "use strict";
-       var img,
-               contentHeight = screen.availHeight - $('div[data-role="header"]').outerHeight() - $('div[data-role="footer"]').outerHeight();
-
-       $('div[data-role="content"]').css('height', contentHeight - 33);
-       app.gameWidth = screen.availWidth;
-       app.ballWidth = parseInt($('.ball').css('width'), 10);
-       app.ballHeight = parseInt($('.ball').css('height'), 10);
-
-       window.addEventListener('devicemotion', app.saveSensorData.bind(app), false);
-
-       app.fun();
-
-       $(window).on('tizenhwkey', function (e) {
-               if (e.originalEvent.keyName === "back") {
-                       tizen.application.getCurrentApplication().exit();
-               }
-       });
-
-       $('#btnBall').bind('click', function (event) {
-               preventSecClick(this);
-               app.startBall();
-       });
-
-       $('#btnSky').bind('click', function (event) {
-               preventSecClick(this);
-               app.startSky();
-       });
-
-       $('#btnSpace').bind('click', function () {
-               preventSecClick(this);
-               app.startSpace();
-       });
-
-       function preventSecClick(current) {
-               $('#sun').remove();
-               $("#footerControls li a.ui-disabled").removeClass('ui-disabled');
-               $(current).addClass("ui-disabled");
-       }
-
-       $('#mainPage').on('pageshow', function () {
-               app.startBall();
-       });
-
-       document.addEventListener('webkitvisibilitychange', function (event) {
-               if (document.webkitVisibilityState === 'visible') {
-                       app.fun();
-               }
-       });
-
-       // Preload backgrounds;
-       img = $('<img>').hide();
-       img.attr('src', 'images/background1.png');
+    'use strict';
+
+    var img,
+        contentHeight = screen.availHeight
+            - $('div[data-role="header"]').outerHeight()
+            - $('div[data-role="footer"]').outerHeight();
+
+    $('div[data-role="content"]').css('height', contentHeight);
+    app.gameWidth = screen.availWidth;
+    app.ballWidth = parseInt($('.ball').css('width'), 10);
+    app.ballHeight = parseInt($('.ball').css('height'), 10);
+
+    window
+        .addEventListener('devicemotion', app.saveSensorData.bind(app), false);
+
+    app.fun();
+
+    $(window).on('tizenhwkey', function (e) {
+        if (e.originalEvent.keyName === 'back') {
+            tizen.application.getCurrentApplication().exit();
+        }
+    });
+
+    function preventSecClick(current) {
+        $('#sun').remove();
+        $('#footerControls li a.ui-disabled').removeClass('ui-disabled')
+            .attr('tabIndex', '0');
+        $(current).addClass('ui-disabled').blur().attr('tabIndex', '-1');
+    }
+
+    $('#btnBall').bind('click', function (event) {
+        preventSecClick(this);
+        app.startBall();
+    });
+
+    $('#btnSky').bind('click', function (event) {
+        preventSecClick(this);
+        app.startSky();
+    });
+
+    $('#btnSpace').bind('click', function (event) {
+        preventSecClick(this);
+        app.startSpace();
+    });
+
+    $('#mainPage').on('pageshow', function () {
+        $('#btnBall').trigger('click');
+        app.startBall();
+    });
+
+    document.addEventListener('webkitvisibilitychange', function (event) {
+        if (document.webkitVisibilityState === 'visible') {
+            app.fun();
+        }
+    });
+
+    // Preload backgrounds;
+    img = $('<img>').hide();
+    img.attr('src', 'images/background1.png');
 });
 
 $(window).resize(function () {
-       'use strict';
-       app.gameWidth = screen.availWidth;
-       app.gameHeight = $('.background').outerHeight();
+    'use strict';
+    app.gameWidth = screen.availWidth;
+    app.gameHeight = $('.background').outerHeight();
 });