From e917eb6c7237913cfad2599df2f6201c3504225c Mon Sep 17 00:00:00 2001
From: Pawel Sierszen <p.sierszen@samsung.com>
Date: Mon, 2 Jun 2014 14:51:51 +0200
Subject: [PATCH] Updated application sources

Change-Id: I92eb14ff956cf1475a089cc5183cf53db7610ae6
Signed-off-by: Pawel Sierszen <p.sierszen@samsung.com>
---
 project/.project      |  108 ++---
 project/config.xml    |   37 +-
 project/css/style.css |   47 +--
 project/index.html    |   86 ++--
 project/js/main.js    | 1045 +++++++++++++++++++++++++------------------------
 5 files changed, 692 insertions(+), 631 deletions(-)

diff --git a/project/.project b/project/.project
index 7f6d88c..67124b8 100644
--- a/project/.project
+++ b/project/.project
@@ -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>
diff --git a/project/config.xml b/project/config.xml
index 6ba265a..6ba5c97 100644
--- a/project/config.xml
+++ b/project/config.xml
@@ -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>
diff --git a/project/css/style.css b/project/css/style.css
index 9146e9b..708c3e0 100644
--- a/project/css/style.css
+++ b/project/css/style.css
@@ -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;
 }
diff --git a/project/index.html b/project/index.html
index 56db864..549f13a 100644
--- a/project/index.html
+++ b/project/index.html
@@ -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>
diff --git a/project/js/main.js b/project/js/main.js
index df5b632..7c5d8ca 100644
--- a/project/js/main.js
+++ b/project/js/main.js
@@ -14,519 +14,550 @@
  *      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();
 });
-- 
2.7.4