Initial commit of the Desktop appsubmit/tizen/20140307.001105submit/tizen/20140307.000320accepted/tizen/ivi/20140307.011013

Change-Id: I9b31a8e141d2e6ba30b28d42deeda56b1ae20a9a

11 files changed, 1527 insertions, 0 deletions

diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..54f8753
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,20 @@
+PROJECT = html5UIDashboard
+
+VERSION := 0.0.1
+PACKAGE = $(PROJECT)-$(VERSION)
+
+INSTALL_FILES = $(PROJECT).wgt
+INSTALL_DIR = ${DESTDIR}/opt/usr/apps/.preinstallWidgets
+
+wgtPkg:
+	cp -r ${DESTDIR}/opt/usr/apps/_common/js/services js/
+	cp -r ${DESTDIR}/opt/usr/apps/_common/css/* css/
+	zip -r $(PROJECT).wgt components config.xml css icon.png index.html js
+
+install:
+	@echo "Installing Dashboard, stand by..."
+	mkdir -p $(INSTALL_DIR)/
+	cp $(PROJECT).wgt $(INSTALL_DIR)/
+
+dist:
+	tar czf ../$(PACKAGE).tar.bz2 .
diff --git a/components/statusBox/statusBox.css b/components/statusBox/statusBox.css
new file mode 100644
index 0000000..312a3a1
--- /dev/null
+++ b/components/statusBox/statusBox.css
@@ -0,0 +1,59 @@
+.statusIndicatorClass{
+	width:180px;
+	height:85px;
+}
+.statusIndicatorClass .boxIconText{
+	position: absolute;
+	top: 8px;
+	left: 15px;
+}
+.statusBox .textIndicator{
+	position: absolute;
+	left:15px;
+	top:30px
+}
+.statusBox .statusIndicator{
+	position: absolute;
+	left:15px;
+	top:60px;
+}
+.corner{
+	width:7px;
+	height:7px;
+}
+.leftTopCorner{
+	position: absolute;
+	left:0;
+	top:0;
+}
+.leftBottomCorner{
+	position: absolute;
+	left:0;
+	bottom:0;
+	-webkit-transform:rotate(270deg);
+	-moz-transform:rotate(270deg);
+	-ms-transform:rotate(270deg);
+	-o-transform:rotate(270deg);
+	transform:rotate(270deg);
+}
+.rightTopCorner{
+	position: absolute;
+	right:0;
+	top:0;
+	-webkit-transform:rotate(90deg);
+	-moz-transform:rotate(90deg);
+	-ms-transform:rotate(90deg);
+	-o-transform:rotate(90deg);
+	transform:rotate(90deg);
+
+}
+.rightBottomCorner{
+	position: absolute;
+	right:0;
+	bottom:0;
+	-webkit-transform:rotate(180deg);
+	-moz-transform:rotate(180deg);
+	-ms-transform:rotate(180deg);
+	-o-transform:rotate(180deg);
+	transform:rotate(180deg);
+}
\ No newline at end of file
diff --git a/components/statusBox/statusBox.js b/components/statusBox/statusBox.js
new file mode 100644
index 0000000..903cea1
--- /dev/null
+++ b/components/statusBox/statusBox.js
@@ -0,0 +1,50 @@
+/**
+ * @module DashboardApplication
+ */
+
+(function ($) {
+	"use strict";
+	/**
+	 * Class which provides methods to fill content of status box for JQuery plugin.
+	 * @class statusBoxPluginObj
+	 * @static
+	 */
+	var statusBoxPluginObj = {
+			/**
+			 * Method is initializing bottom panel.
+			 * @method init
+			 * @param caption {String} Caption of status box.
+			 * @param title {String} Title of status box.
+			 * @param status {String} Status info of status box.
+			 */
+			init: function (caption, title, status) {
+				this.empty();
+				var appendText = '<div id="leftTopCorner" class="corner leftTopCorner"></div>';
+				appendText += '<div id="leftBottomCorner" class="corner leftBottomCorner"></div>';
+				appendText += '<div id="rightTopCorner" class="corner rightTopCorner"></div>';
+				appendText += '<div id="rightBottomCorner" class="corner rightBottomCorner"></div>';
+				appendText += '<div id="captionIndicator' + this[0].id + '" class="boxIconText captionIndicator"></div>';
+				appendText += '<div id="textIndicator" class="fontSizeSmall fontWeightBold fontColorNormal textIndicator">' + title.toUpperCase() + '</div>';
+				appendText += '<div id="statusIndicator" class="fontSizeXSmall fontWeightBold fontColorDimmed statusIndicator">' + status.toUpperCase() + '</div>';
+				this.append(appendText);
+				$("#captionIndicator" + this[0].id).boxCaptionPlugin('initSmall', caption);
+			}
+		};
+	/**
+	 * Class which provides acces to {{#crossLink "statusBoxPluginObj"}}{{/crossLink}} methods.
+	 * @class statusBoxPlugin
+	 * @constructor
+	 * @param method {Object} Identificator (name) of method.
+	 * @return Result of called method.
+	 */
+	$.fn.statusBoxPlugin = function (method) {
+		// Method calling logic
+		if (statusBoxPluginObj[method]) {
+			return statusBoxPluginObj[method].apply(this, Array.prototype.slice.call(arguments, 1));
+		} else if (typeof method === 'object' || !method) {
+			return statusBoxPluginObj.init.apply(this, arguments);
+		} else {
+			$.error('Method ' + method + ' does not exist on jQuery.boxCaptionPlugin ');
+		}
+	};
+}(jQuery));
diff --git a/config.xml b/config.xml
new file mode 100644
index 0000000..27f50a1
--- /dev/null
+++ b/config.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://com.intel.tizen/dashboard" version="0.5.0" viewmodes="fullscreen">
+	<access origin="*" subdomains="true"/>
+    <tizen:application id="html5POC04.Dashboard" package="html5POC04" required_version="2.1"/>
+    <content src="index.html"/>
+	<tizen:privilege name="http://tizen.org/privilege/tizen"/>
+    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
+    <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
+    <tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
+    <tizen:privilege name="http://tizen.org/privilege/vehicle"/>
+    <tizen:privilege name="http://tizen.org/privilege/content.read" />
+    <tizen:privilege name="http://tizen.org/privilege/speech" />
+    <tizen:privilege name="http://tizen.org/privilege/bluetooth.admin" />
+    <tizen:privilege name="http://tizen.org/privilege/bluetooth.spp" />
+    <tizen:privilege name="http://tizen.org/privilege/bluetooth.gap" />
+	<icon src="icon.png"/>
+	<name>Dashboard</name>
+    <tizen:setting screen-orientation="portrait"/>
+
+</widget>
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..5d37a02
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,549 @@
+.randomizer{
+	position: absolute;
+	left: 396px;
+	top: 564px;
+	opacity: 0.0;
+	width: 110px;
+	height: 110px;
+
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 1s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 1s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 1s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 1s
+
+}
+.dashboardBackGround {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 720px;
+	height: 1280px;
+}
+
+.dashboardCircleAll {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 720px;
+	height: 1280px;
+}
+.whelImage{
+	width: 65px;
+	height: 105px;
+	/*-webkit-transition: 0.1s;*/
+	-webkit-transition-timing-function: linear;
+
+	/*-moz-transition:0.1s;
+	-moz-transition-timing-function:linear;
+
+	-ms-transition:0.1s;
+	-ms-transition-timing-function:linear;
+
+	-o-transition:0.1s;
+	-o-transition-timing-function:linear;*/
+
+
+}
+.leftWhell{
+	position: absolute;
+	left: 225px;
+	top: 430px;
+}
+.rightWhell{
+	position: absolute;
+	left: 430px;
+	top: 430px;
+}
+
+.carImage {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 720px;
+	height: 1280px;
+}
+
+.batteryLevelCaption {
+	position: absolute;
+	left: 15px;
+	top: 200px;
+}
+
+.weatherCaption {
+	position: absolute;
+	left: 545px;
+	top: 200px;
+}
+
+.dashboardLineLong {
+	width: 120px;
+	height: 10px;
+}
+
+.leftFrontPressure {
+	position: absolute;
+	left: 30px;
+	top: 370px;
+}
+
+.leftFrontLine {
+	position: absolute;
+	left: 130px;
+	top: 462px;
+	-webkit-transform: rotate(20deg);
+	-ms-transform: rotate(20deg);
+	-moz-transform: rotate(20deg);
+	-o-transform: rotate(20deg);
+	transform: rotate(20deg);
+}
+
+.rightFrontPressure {
+	position: absolute;
+	left: 500px;
+	top: 340px;
+}
+
+.rightFrontLine {
+	position: absolute;
+	left: 470px;
+	top: 445px;
+
+	-webkit-transform: rotate(150deg);
+	-moz-transform: rotate(150deg);
+	-ms-transform: rotate(150deg);
+	-o-transform: rotate(150deg);
+	transform: rotate(150deg);
+
+}
+
+.engineStatus {
+	position: absolute;
+	left: 520px;
+	top: 540px;
+}
+
+.engineStatus .gearboxStatus {
+	position: absolute;
+	left: 110px;
+	top: 22px;
+}
+
+.engineStatus .textIndicator {
+	position: absolute;
+	top: 32px;
+	right: 92px;
+
+	white-space: nowrap;
+	text-align: right;
+}
+
+.engineStatus .statusIndicator {
+	position: absolute;
+	top: 62px;
+	right: 92px;
+	white-space: nowrap;
+	text-align: right;
+}
+
+.leftRearPressure {
+	position: absolute;
+	left: 20px;
+	top: 750px;
+}
+
+.leftRearLine {
+	position: absolute;
+	left: 115px;
+	top: 842px;
+
+	-webkit-transform: rotate(15deg);
+	-moz-transform: rotate(15deg);
+	-ms-transform: rotate(15deg);
+	-o-transform: rotate(15deg);
+	transform: rotate(15deg);
+}
+
+.rightRearPressure {
+	position: absolute;
+	left: 510px;
+	top: 750px;
+}
+
+.rightRearLine {
+	position: absolute;
+	left: 480px;
+	top: 842px;
+
+	-webkit-transform: rotate(165deg);
+	-moz-transform: rotate(165deg);
+	-ms-transform: rotate(165deg);
+	-o-transform: rotate(165deg);
+	transform: rotate(165deg);
+}
+
+.avgEConsumption {
+	position: absolute;
+	left: 15px;
+	top: 960px;
+}
+
+.rearLDisplay {
+	position: absolute;
+	left: 280px;
+	top: 960px;
+}
+.rearRDisplay {
+	position: absolute;
+	left: 500px;
+	top: 960px;
+}
+
+.batteryImage {
+	width: 37px;
+	height: 23px;
+}
+.batteryProgressBar{
+	position: absolute;
+	left: -9px;
+	top: 205px;
+	width: 395px;
+	height: 50px;
+}
+.exteriorBrightnessElement{
+	position: absolute;
+	right: 30px;
+	top: 150px;
+}
+.exteriorBrightnessProgressBar{
+	position: absolute;
+	left: -25px;
+	top: 0;
+	width: 280px;
+	height: 50px;
+}
+.dayNightElement{
+	position: absolute;
+	top: 150px;
+	left: 30px;
+	width: 65px;
+	height: 65px;
+}
+.batteryElement{
+	position: absolute;
+	left: 15px;
+	top: 25px;
+	width: 300px;
+	height: 200px;
+}
+.batteryElement .batteryImage {
+	position: absolute;
+	left: 15px;
+	top: 260px;
+}
+
+.batteryElement	.batteryStatus {
+	position: absolute;
+	left: 65px;
+	top: 253px;
+}
+
+.batteryElement	.batteryRange {
+	position: absolute;
+	left: 150px;
+	top: 253px;
+}
+
+.weatherElement .weatherStatus {
+	position: absolute;
+	right: 30px;
+	top: 227px;
+}
+
+.weatherElement .weatherCity {
+	position: absolute;
+	right: 30px;
+	top: 275px;
+}
+
+.avgConsumptionElement .batteryImage {
+	position: absolute;
+	left: 15px;
+	top: 990px;
+}
+
+.avgConsumptionElement .avgConsumptionCaption {
+	position: absolute;
+	left: 65px;
+	top: 990px;
+}
+
+.avgConsumptionElement .avgConsumptionStatus {
+	position: absolute;
+	left: 15px;
+	top: 1020px;
+}
+
+.dashboardButton {
+	width: 90px;
+	height: 55px;
+}
+
+.dashboardButtonOpacity {
+	opacity: 0.5;
+}
+
+.dashboardButton .dashboardButtonText {
+	position: relative;
+	text-align: center;
+	top: -45px
+}
+
+.rearLButton {
+	position: absolute;
+	left: 280px;
+	top: 990px;
+}
+
+.rearRButton {
+	position: absolute;
+	left: 500px;
+	top: 990px;
+}
+
+.padlocInactive {
+	width: 45px;
+	height: 45px;
+}
+
+.padlocActive {
+	width: 45px;
+	height: 45px;
+}
+
+.leftPadlock {
+	position: absolute;
+	left: 200px;
+	top: 700px;
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 2s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 2s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 2s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 2s
+}
+
+.rightPadlock {
+	position: absolute;
+	left: 480px;
+	top: 700px;
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 2s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 2s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 2s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 2s;
+}
+
+.childLock {
+	position: absolute;
+	left: 45px;
+	top: 625px;
+	width: 150px;
+	height: 70px;
+}
+
+.childLockText {
+	position: absolute;
+	left: 0;
+	top: 10px;
+	width: 150px;
+	height: 80px;
+	text-align: center;
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 1s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 1s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 1s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 1s;
+}
+
+.dashboardLineShort {
+	width: 95px;
+	height: 11px;
+}
+
+.childLockLine {
+	position: absolute;
+	left: 75px;
+	top: 80px;
+
+	-webkit-transform: rotate(15deg);
+	-moz-transform: rotate(15deg);
+	-ms-transform: rotate(15deg);
+	-o-transform: rotate(15deg);
+	transform: rotate(15deg);
+}
+
+.dashboardCircle {
+	width: 110px;
+	height: 110px;
+}
+
+.frontLightsButton {
+	position: absolute;
+	left: 254px;
+	top: 313px;
+	opacity: 0.0;
+	width: 110px;
+	height: 110px;
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 1s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 1s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 1s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 1s;
+}
+
+.rearLightsButton {
+	position: absolute;
+	left: 230px;
+	top: 880px;
+	opacity: 0.0;
+	width: 110px;
+	height: 110px;
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 1s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 1s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 1s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 1s;
+}
+.dashboardFrontLightsActive {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 720px;
+	height: 1280px;
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 1s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 1s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 1s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 1s;
+
+}
+.dashboardRearLightsActive {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 720px;
+	height: 1280px;
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 1s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 1s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 1s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 1s;
+
+	}
+.dashboardBreakLightsActive {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 720px;
+	height: 1280px;
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 1s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 1s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 1s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 1s;
+
+	}
+.rearLightsImage {
+	opacity: 0;
+}
+
+.frontLightsImage {
+	opacity: 0;
+}
+.dashBoardWeatherSun{
+	width: 110px;
+	height: 110px;
+}
+.dashBoardWeatherCloudy{
+	width: 110px;
+	height: 110px;
+}
+.dashBoardWeatherThunder{
+	width: 110px;
+	height: 110px;
+}
+.dashBoardWeatherIcon{
+	position: absolute;
+	left: 425px;
+	top: 165px;
+}
+.dayNight{
+	width:100%;
+	height: 100%;
+	-webkit-transition-timing-function: linear;
+	-webkit-transition: 1s;
+
+	-moz-transition-timing-function: linear;
+	-moz-transition: 1s;
+
+	-ms-transition-timing-function: linear;
+	-ms-transition: 1s;
+
+	-o-transition-timing-function: linear;
+	-o-transition: 1s
+}
+
diff --git a/icon.png b/icon.png
new file mode 100644
index 0000000..eb77439
--- /dev/null
+++ b/icon.png
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ae7f5c5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+<head>
+<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>DASHBOARD</title>
+<meta name="keywords" content="" />
+<meta name="description" content="" />
+<!-- <meta name = "viewport" content = "width = device-width,height = device-height, user-scalable = no"> -->
+<meta name="viewport" content="width=720, height=1280, user-scalable=no" />
+
+
+<link rel="stylesheet" href="./css/car/car.css" />
+<link rel="stylesheet" href="./css/style.css" />
+<link rel="stylesheet" href="./css/car/components/incomingCall/incomingCall.css" />
+
+<script type="text/javascript" src="./css/car/components/jQuery/jquery-1.8.2.js"></script>
+<script type="text/javascript" src="./css/car/components/knockout/knockout.js"></script>
+<script type='text/javascript' src='./css/car/car.js'></script>
+<!-- <script type='text/javascript' src='./css/user/blue/user.js'></script> -->
+<script type='text/javascript' src='./js/services/bootstrap.js'></script>
+
+<!-- jsRender Library Import -->
+<script type="text/javascript" src="./css/car/components/jsViews/jsrender.js"></script>
+<script type="text/javascript" src="./css/car/components/jsViews/template.js"></script>
+
+<!-- Components -->
+<script type='text/javascript' src='./css/car/components/dateTime/dateTime.js'></script>
+
+<link rel="stylesheet" href="./css/car/components/dateTime/dateTime.css" />
+
+<script type='text/javascript' src='./css/car/components/boxCaption/boxCaption.js'></script>
+<link rel="stylesheet" href="./css/car/components/boxCaption/boxCaption.css" />
+
+<script type='text/javascript' src='./css/car/components/topBarIcons/topBarIcons.js'></script>
+<link rel="stylesheet" href="./css/car/components/topBarIcons/topBarIcons.css" />
+
+<script type='text/javascript' src='./css/car/components/progressBar/progressBar.js'></script>
+<link rel="stylesheet" href="./css/car/components/progressBar/progressBar.css" />
+
+<script type="text/javascript" src="./css/car/components/bottomPanel/bottomPanel.js"></script>
+
+<script type='text/javascript' src='./components/statusBox/statusBox.js'></script>
+<link rel="stylesheet" href="./components/statusBox/statusBox.css" />
+<!-- end Components -->
+<script type='text/javascript' src='./js/dashboardControler.js'></script>
+<script type='text/javascript' src='./js/main.js'></script>
+
+</head>
+
+<body >
+	<div class="dashboardBackGround">
+		<div id="error" class="fontColorNormal fontSizeMedium" style="z-index: 100;"></div>
+		<div class="carImage"></div>
+		<!-- <div class="dashboardCircleAll"></div> -->
+		<div id="frontLightsImage" class="dashboardFrontLightsActive frontLightsImage"></div>
+		<div id="rearLightsImage" class="dashboardRearLightsActive rearLightsImage"></div>
+		<div id="breakLightsImage" class="dashboardBreakLightsActive rearLightsImage"></div>
+		<div id="clockElement"></div>
+		<div id="leftWhell" class="whelImage leftWhell"></div>
+		<div id="rightWhell" class="whelImage rightWhell"></div>
+		<div id="dayNightElement" class="dayNightElement">
+			<div id="dayNight" class="dashboardSunElement dayNight"></div>
+		</div>
+		<div id="batteryElement" class = "batteryElement">
+			<div id="batteryLevelCaption" class="boxIconText batteryLevelCaption"></div>
+			<div id="batteryProgressBar" class = "batteryProgressBar"></div>
+			<div class="batteryImage"></div>
+			<div id="batteryStatus"
+				class="fontSizeLarger fontWeightBold fontColorNormal batteryStatus">82%</div>
+			<div id="batteryRange"
+				class="fontSizeLarger fontWeightBold fontColorTheme batteryRange">~215MI</div>
+		</div>
+		<div id="weatherElement" class = "weatherElement">
+			<div id="dashBoardWeatherIcon" class="dashBoardWeatherThunder dashBoardWeatherIcon"></div>
+			<div id="weatherCaption" class="boxIconText weatherCaption"></div>
+			<div id="weatherStatus"
+				class="fontSizeXXLarge fontWeightBold fontColorNormal weatherStatus">15.20°C</div>
+			<div id="weatherCity" class="fontSizeLarge fontColorDimmed weatherCity">SAN
+				FRANCISCO</div>
+		</div>
+
+		<div id="leftFrontPressure" class="statusIndicatorClass leftFrontPressure statusBox"></div>
+		<div id="leftFrontLine" class="dashboardLineLong leftFrontLine"></div>
+
+		<div id="rightFrontPressure" class="statusIndicatorClass rightFrontPressure statusBox"></div>
+		<div id="rightFrontLine" class="dashboardLineLong rightFrontLine"></div>
+
+		<div id="leftRearPressure" class="statusIndicatorClass leftRearPressure statusBox"></div>
+		<div id="leftRearLine" class="dashboardLineLong leftRearLine"></div>
+
+		<div id="engineStatus" class="statusIndicatorClass engineStatus">
+			<div id="leftTopCorner" class="corner leftTopCorner"></div>
+			<div id="leftBottomCorner" class="corner leftBottomCorner"></div>
+			<div id="rightTopCorner" class="corner rightTopCorner"></div>
+			<div id="rightBottomCorner" class="corner rightBottomCorner"></div>
+			<div class="boxIconText">
+				<div class="boxIconRectangleSmall bgColorTheme"></div>
+				<div class="boxIconCaptionSmall fontSizeXXSmall fontWeightBold fontColorLight">ENGINE STATUS</div>
+			</div>
+			<div id="gearboxStatus" class="fontSizeXXXLarge fontWeightBold fontColorNormal gearboxStatus">D</div>
+			<div id="textIndicator" class="fontSizeSmall fontWeightBold fontColorNormal textIndicator">65 mph</div>
+			<div id="statusIndicator" class="fontSizeXSmall fontWeightBold fontColorDimmed statusIndicator">78.123 mi</div>
+		</div>
+
+		<div id="rightRearPressure" class="statusIndicatorClass rightRearPressure statusBox"></div>
+		<div id="rightRearLine" class="dashboardLineLong rightRearLine"></div>
+		<div id="leftPadlock" class="padlocInactive leftPadlock"></div>
+		<div id="rightPadlock" class="padlocInactive rightPadlock"></div>
+		<div id="randomizer" class="dashboardCircle randomizer" ></div>
+
+		<div id="childLock" class="childLock">
+
+			<div id="leftTopCorner" class="corner leftTopCorner"></div>
+			<div id="leftBottomCorner" class="corner leftBottomCorner"></div>
+			<div id="rightTopCorner" class="corner rightTopCorner"></div>
+			<div id="rightBottomCorner" class="corner rightBottomCorner"></div>
+
+			<div id="childLockText"
+				class="fontColorNormal fontSizeSmall  fontWeightBold childLockText">CHILD
+				LOCK ACTIVATED</div>
+			<div id="childLockLine" class="dashboardLineShort childLockLine"></div>
+		</div>
+		<div id="frontLightsButton" class="dashboardCircle frontLightsButton"></div>
+		<div id="rearLightsButton" class="dashboardCircle rearLightsButton"></div>
+
+		<div id="avgConsumptionElement" class = "avgConsumptionElement">
+			<div id="avgEConsumption" class = "avgEConsumption"></div>
+			<div class="batteryImage"></div>
+			<div id="avgConsumptionCaption"
+				class="fontColorNormal  fontSizeSmall  fontWeightBold avgConsumptionCaption">0.28
+				KW-H / MI</div>
+			<div id="avgConsumptionStatus"
+				class="fontColorDimmed  fontSizeXSmall fontWeightBold avgConsumptionStatus">~350 MI
+				/ FULL CHARGE</div>
+		</div>
+		<div id="rearLElement">
+			<div id="rearLDisplay" class = "rearLDisplay"></div>
+			<div id="rearLButton" class="dashboardButton rearLButton"
+				onClick="dashBoardIndicator.onRearLDisplayClick();">
+
+				<div
+					class="bgColorThemeTransparent boxShadowInset dashboardButton dashboardButtonOpacity"></div>
+
+				<div id="rearLButtonText"
+					class="dashboardButtonText fontColorNormal fontSizeMedium fontWeightBold">OFF</div>
+			</div>
+		</div>
+		<div id="rearRElement">
+			<div id="rearRDisplay" class = "rearRDisplay"></div>
+			<div id="rearRButton" class="dashboardButton rearRButton"
+				onClick="dashBoardIndicator.onRearRDisplayClick();">
+				<div
+					class="bgColorThemeTransparent boxShadowInset dashboardButton dashboardButtonOpacity"></div>
+				<div id="rearRButtonText"
+					class="dashboardButtonText fontColorNormal fontSizeMedium fontWeightBold">OFF</div>
+			</div>
+		</div>
+		<div id="exteriorBrightnessElement" class = "exteriorBrightnessElement">
+			<div id="exteriorBrightnessCaption" class="boxIconText exteriorBrightnessCaption"></div>
+			<div id="exteriorBrightnessProgressBar" class = "exteriorBrightnessProgressBar"></div>
+		</div>
+		<div id="topBarIcons"></div>
+		<div id="bottomPanel" class="bottomPanel bottomPanelImg"></div>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/dashboardControler.js b/js/dashboardControler.js
new file mode 100644
index 0000000..6d58288
--- /dev/null
+++ b/js/dashboardControler.js
@@ -0,0 +1,449 @@
+/**
+ * @module DashboardApplication
+ */
+
+/**
+ * Class which provides methods to fill content of dashboard's UI.
+ * @class dashBoardControler
+ * @static
+ */
+
+var dashBoardControler = function() {
+	"use strict";
+	this.initInfos();
+};
+
+/**
+ * Method handles click event on rear left indicator.
+ * @method onRearLDisplayClick
+ */
+dashBoardControler.prototype.onRearLDisplayClick = function() {
+	"use strict";
+	if (this.RearLDispaly) {
+		$('#rearLButtonText').removeClass("fontColorSelected");
+		$('#rearLButtonText').addClass("fontColorNormal");
+		$('#rearLButtonText').empty();
+		$('#rearLButtonText').append("OFF");
+		this.RearLDispaly = false;
+	} else {
+		$('#rearLButtonText').removeClass("fontColorNormal");
+		$('#rearLButtonText').addClass("fontColorSelected");
+		$('#rearLButtonText').empty();
+		$('#rearLButtonText').append("ON");
+		this.RearLDispaly = true;
+	}
+};
+
+/**
+ * Method handles click event on rear right indicator.
+ * @method onRearRDisplayClick
+ */
+dashBoardControler.prototype.onRearRDisplayClick = function() {
+	"use strict";
+	if (this.RearRDispaly) {
+		$('#rearRButtonText').removeClass("fontColorSelected");
+		$('#rearRButtonText').addClass("fontColorNormal");
+		$('#rearRButtonText').empty();
+		$('#rearRButtonText').append("OFF");
+		this.RearRDispaly = false;
+	} else {
+		$('#rearRButtonText').removeClass("fontColorNormal");
+		$('#rearRButtonText').addClass("fontColorSelected");
+		$('#rearRButtonText').empty();
+		$('#rearRButtonText').append("ON");
+		this.RearRDispaly = true;
+	}
+};
+
+/**
+ * Method is setting status of child lock.
+ * @method onChildLockChanged
+ * @param newStatus {Boolean} New status of child lock of the car.
+ */
+dashBoardControler.prototype.onChildLockChanged = function(newStatus) {
+	"use strict";
+	if (newStatus === false || newStatus === "false") {
+		$('#leftPadlock').removeClass("padlocActive");
+		$('#leftPadlock').addClass("padlocInactive");
+		$('#rightPadlock').removeClass("padlocActive");
+		$('#rightPadlock').addClass("padlocInactive");
+		$('#childLockText').removeClass("fontColorSelected");
+		$('#childLockText').addClass("fontColorNormal");
+		$('#childLockText').empty();
+		$('#childLockText').append("CHILD LOCK DEACTIVATED");
+	} else {
+		$('#leftPadlock').removeClass("padlocInactive");
+		$('#leftPadlock').addClass("padlocActive");
+		$('#rightPadlock').removeClass("padlocInactive");
+		$('#rightPadlock').addClass("padlocActive");
+		$('#childLockText').removeClass("fontColorNormal");
+		$('#childLockText').addClass("fontColorSelected");
+		$('#childLockText').empty();
+		$('#childLockText').append("CHILD LOCK ACTIVATED");
+	}
+};
+
+/**
+ * Method is setting status of front lights of the car.
+ * @method onFrontLightsChanged
+ * @param newStatus {Boolean} New status of front lights of car.
+ */
+dashBoardControler.prototype.onFrontLightsChanged = function(newStatus) {
+	"use strict";
+	if (newStatus === false || newStatus === "false") {
+		$('#frontLightsButton').css("opacity", "0");
+		$("#frontLightsImage").css("opacity", "0");
+	} else {
+		$('#frontLightsButton').css("opacity", "1");
+		$("#frontLightsImage").css("opacity", "1");
+	}
+};
+
+/**
+ * Method is setting value of trasmission gear of the car.
+ * @method onGearChanged
+ * @param newStatus {String} New status value for trasmission gear.
+ */
+dashBoardControler.prototype.onGearChanged = function(newStatus) {
+	"use strict";
+	$("#engineStatus #gearboxStatus").text(newStatus);
+};
+
+/**
+ * Method is setting value of speed of the car.
+ * @method onSpeedChanged
+ * @param newStatus {Number} New value for the speed.
+ */
+dashBoardControler.prototype.onSpeedChanged = function(newStatus) {
+	"use strict";
+	$("#engineStatus #textIndicator").text(newStatus + " mph");
+};
+
+/**
+ * Method is setting value of odometer of the car.
+ * @method onOdoMeterChanged
+ * @param newStatus {Number} New value for the odoMeter.
+ */
+dashBoardControler.prototype.onOdoMeterChanged = function(newStatus) {
+	"use strict";
+	$("#engineStatus #statusIndicator").text(newStatus + " mi");
+};
+
+/**
+ * Method  is setting status of rear lights of the car.
+ * @method onRearLightsChanged
+ * @param newStatus {Boolean} New status of rear lights of car.
+ */
+dashBoardControler.prototype.onRearLightsChanged = function(newStatus) {
+	"use strict";
+	if (newStatus === false || newStatus === "false") {
+		$('#rearLightsButton').css("opacity", "0");
+		$("#rearLightsImage").css("opacity", "0");
+	} else {
+		$('#rearLightsButton').css("opacity", "1");
+		$("#rearLightsImage").css("opacity", "1");
+	}
+};
+/**
+ * Method  is setting status of break lights of the car.
+ * @method onBreakLightsChanged
+ * @param newStatus {Boolean} New status of break lights of car.
+ */
+dashBoardControler.prototype.onBreakLightsChanged = function(newStatus) {
+	"use strict";
+	if (newStatus === false || newStatus === "false") {
+		$("#breakLightsImage").css("opacity", "0");
+	} else {
+		$("#breakLightsImage").css("opacity", "1");
+	}
+};
+/**
+ * Method  is setting status of fan in the car.
+ * @method onFanChanged
+ * @param newStatus {Boolean} New status of fan in the car.
+ */
+dashBoardControler.prototype.onFanChanged = function(newStatus) {
+	"use strict";
+	if (newStatus === false || newStatus === "false") {
+		$('#fanCircle').css("opacity", "0");
+		$("#fanIcon").css("opacity", "0");
+		$("#fanIcon").css("-webkit-transform", "rotate(0deg)");
+		$("#fanIcon").css("-moz-transform", "rotate(0deg)");
+		$("#fanIcon").css("-ms-transform", "rotate(0deg)");
+		$("#fanIcon").css("-o-transform", "rotate(0deg)");
+		$('#fanStatus').removeClass("fontColorSelected");
+		$('#fanStatus').addClass("fontColorNormal");
+	} else {
+		$('#fanCircle').css("opacity", "1");
+		$("#fanIcon").css("opacity", "1");
+		$("#fanIcon").css("-webkit-transform", "rotate(720deg)");
+		$("#fanIcon").css("-moz-transform", "rotate(720deg)");
+		$("#fanIcon").css("-ms-transform", "rotate(720deg)");
+		$("#fanIcon").css("-o-transform", "rotate(720deg)");
+		$('#fanStatus').removeClass("fontColorNormal");
+		$('#fanStatus').addClass("fontColorSelected");
+	}
+};
+
+/**
+ * Method is setting status of exterior brightness .
+ * @method onExteriorBrightnessChanged
+ * @param newStatus {Boolean} New exterior brightness value.
+ */
+dashBoardControler.prototype.onExteriorBrightnessChanged = function(newValue) {
+	"use strict";
+	var newValueP = (Math.abs(newValue) / 5000) * 100;
+	if (newValueP > 100) {
+		newValueP = 100;
+	}
+	$("#exteriorBrightnessProgressBar").progressBarPlugin('setPosition', newValueP);
+};
+
+/**
+ * Method is setting new value of battery status.
+ * @method onBatteryStatusChanged
+ * @param newValue {Integer} New battery status value.
+ * @param status {bootstrap.carIndicator.status} Current status object.
+ */
+dashBoardControler.prototype.onBatteryStatusChanged = function(newValue, status) {
+	"use strict";
+	$("#batteryProgressBar").progressBarPlugin('setPosition', newValue);
+	var newBatteryStatus = newValue.toString() + "%";
+	$('#batteryStatus').empty();
+	$('#batteryStatus').append(newBatteryStatus);
+	var newBatteryRange = "~" + Math.round(((newValue / 100) * status.fullBatteryRange)).toString() + " MI";
+	$('#batteryRange').empty();
+	$('#batteryRange').append(newBatteryRange);
+};
+
+/**
+ * Method is setting new value of full battery range.
+ * @method onBatteryRangeChanged
+ * @param newValue {Integer} New full battery range value.
+ * @param status {bootstrap.carIndicator.status} Current status object.
+ */
+dashBoardControler.prototype.onBatteryRangeChanged = function(newValue, status) {
+	"use strict";
+	var self = this;
+
+	$('#batteryStatus').empty();
+
+	$('#batteryStatus').append(newValue);
+	var newBatteryRange = "~" + Math.round(((status.batteryStatus / 100) * newValue)).toString() + " MI";
+	$('#batteryRange').empty();
+	$('#batteryRange').append(newBatteryRange);
+};
+
+/**
+ * Method is setting new value of outside temperature.
+ * @method onOutsiteTempChanged
+ * @param newValue {Number} New outside temperature status value.
+ */
+dashBoardControler.prototype.onOutsiteTempChanged = function(newValue) {
+	"use strict";
+	var newOutsiteTemp = newValue + "°C";
+	$("#weatherStatus").empty();
+	$("#weatherStatus").append(newOutsiteTemp);
+};
+
+/**
+ * Method is setting new value of Avg KW.
+ * @method onAvgKWChanged
+ * @param newValue {Number} New Avg KW status value.
+ */
+dashBoardControler.prototype.onAvgKWChanged = function(newValue) {
+	"use strict";
+	var newAvgKW = newValue + " KW-H / MI";
+	$("#avgConsumptionCaption").empty();
+	$("#avgConsumptionCaption").append(newAvgKW);
+};
+
+/**
+ * Method is setting new value of night mode indicator .
+ * @method onNightModeChanged
+ * @param newValue {Boolean} New value of day/night mode .
+ */
+dashBoardControler.prototype.onNightModeChanged = function(newValue) {
+	"use strict";
+	if (newValue) {
+		$("#dayNight").removeClass("dashboardSunElement");
+		$("#dayNight").addClass("dashboardMoonElement");
+	} else {
+		$("#dayNight").removeClass("dashboardMoonElement");
+		$("#dayNight").addClass("dashboardSunElement");
+	}
+
+};
+
+/**
+ * Method is setting new value of inside temperature.
+ * @method onInsideTempChanged
+ * @param newValue {Number} New inside temperature status value.
+ */
+dashBoardControler.prototype.onInsideTempChanged = function(newValue) {
+	"use strict";
+	var newInsiteTemp = newValue + "°F";
+	$("#fanStatus").empty();
+	$("#fanStatus").append(newInsiteTemp);
+};
+
+/**
+ * Method is setting new value of weather. Weather is coded to following values:
+ *
+ * * 1 - Cloudy weather
+ * * 2 - Sunny weather
+ * * 3 - Stormy weather
+ *
+ * @method onWeatherChanged
+ * @param newWeater {Integer} New weather status value.
+ */
+dashBoardControler.prototype.onWeatherChanged = function(newValue) {
+	"use strict";
+	if (newValue === 1) {
+		$("#dashBoardWeatherIcon").removeClass("dashBoardWeatherSun");
+		$("#dashBoardWeatherIcon").removeClass("dashBoardWeatherCloudy");
+		$("#dashBoardWeatherIcon").removeClass("dashBoardWeatherThunder");
+		$("#dashBoardWeatherIcon").addClass("dashBoardWeatherCloudy");
+
+	} else if (newValue === 2) {
+		$("#dashBoardWeatherIcon").removeClass("dashBoardWeatherSun");
+		$("#dashBoardWeatherIcon").removeClass("dashBoardWeatherCloudy");
+		$("#dashBoardWeatherIcon").removeClass("dashBoardWeatherThunder");
+		$("#dashBoardWeatherIcon").addClass("dashBoardWeatherSun");
+
+	} else {
+		$("#dashBoardWeatherIcon").removeClass("dashBoardWeatherSun");
+		$("#dashBoardWeatherIcon").removeClass("dashBoardWeatherCloudy");
+		$("#dashBoardWeatherIcon").removeClass("dashBoardWeatherThunder");
+		$("#dashBoardWeatherIcon").addClass("dashBoardWeatherThunder");
+	}
+};
+
+/**
+ * Method is setting new value of angle of front wheels.
+ * @method onWheelAngleChanged
+ * @param newAngle {Integer} New angle status value for wheels.
+ */
+dashBoardControler.prototype.onWheelAngleChanged = function(newAngle) {
+	"use strict";
+	var maxAngle = 30;
+	if (newAngle > 30) {
+		newAngle = (-1 * (360 - newAngle));
+	}
+	if (newAngle > maxAngle) {
+		newAngle = maxAngle;
+	} else if (newAngle < (-maxAngle)) {
+		newAngle = -maxAngle;
+	} else if (newAngle === "") {
+		newAngle = 0;
+	}
+
+	var newDuration = Math.round(Math.abs(newAngle) / 10);
+	if (newDuration === 0) {
+		newDuration = 0.1;
+	}
+	newDuration = 0;
+	$("#leftWhell").css("-webkit-transition", newDuration + "s");
+	$("#leftWhell").css("-webkit-transform", "rotate(" + newAngle + "deg)");
+	$("#rightWhell").css("-webkit-transition", newDuration + "s");
+	$("#rightWhell").css("-webkit-transform", "rotate(" + newAngle + "deg)");
+
+	$("#leftWhell").css("-moz-transition", newDuration + "s");
+	$("#leftWhell").css("-moz-transform", "rotate(" + newAngle + "deg)");
+	$("#rightWhell").css("-moz-transition", newDuration + "s");
+	$("#rightWhell").css("-moz-transform", "rotate(" + newAngle + "deg)");
+
+	$("#leftWhell").css("-ms-transition", newDuration + "s");
+	$("#leftWhell").css("-ms-transform", "rotate(" + newAngle + "deg)");
+	$("#rightWhell").css("-ms-transition", newDuration + "s");
+	$("#rightWhell").css("-ms-transform", "rotate(" + newAngle + "deg)");
+
+	$("#leftWhell").css("-o-transition", newDuration + "s");
+	$("#leftWhell").css("-o-transform", "rotate(" + newAngle + "deg)");
+	$("#rightWhell").css("-o-transition", newDuration + "s");
+	$("#rightWhell").css("-o-transform", "rotate(" + newAngle + "deg)");
+};
+
+/**
+ * Method is setting new value of randomizer.
+ * @method onRandomizerChanged
+ * @param newStatus {Boolean} New randomizer status.
+ */
+dashBoardControler.prototype.onRandomizerChanged = function(newStatus) {
+	"use strict";
+	if (newStatus === false || newStatus === "false") {
+		$('#randomizer').css("opacity", "0");
+		$("#randomizer").css("opacity", "0");
+	} else {
+		$('#randomizer').css("opacity", "1");
+		$("#randomizer").css("opacity", "1");
+	}
+};
+
+/**
+ * Method initialize info status on HTML and jQuery plugins.
+ * @method initInfos
+ */
+dashBoardControler.prototype.initInfos = function() {
+	"use strict";
+	$("#weatherCaption").boxCaptionPlugin('init', 'weather');
+
+	$("#exteriorBrightnessCaption").boxCaptionPlugin('init', 'Exterior Brightness');
+
+	$("#exteriorBrightnessProgressBar").progressBarPlugin('init', 'progressBar');
+	$("#exteriorBrightnessProgressBar").progressBarPlugin('setPosition', 30);
+
+	$("#batteryLevelCaption").boxCaptionPlugin('init', 'Battery level');
+
+	$("#batteryProgressBar").progressBarPlugin('init', 'progressBar');
+	$("#batteryProgressBar").progressBarPlugin('setPosition', 82);
+
+	$("#avgEConsumption").boxCaptionPlugin('init', 'avg e-consumtion');
+	$("#rearLDisplay").boxCaptionPlugin('init', 'Rear l Display');
+	$("#rearRDisplay").boxCaptionPlugin('init', 'Rear r Display');
+
+	$('#bottomPanel').bottomPanel('init');
+
+	$("#leftFrontPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'L FRONT TIRE', 'OK');
+	$("#rightFrontPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'R FRONT TIRE', 'ok');
+
+	$("#leftRearPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'L Rear TIRE', 'OK');
+	$("#rightRearPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'R Rear TIRE', 'ok');
+
+};
+/**
+ * Method is setting new value of left front tire pressure.
+ * @method onTirePressureLeftFrontChanged
+ * @param newValue {FLoat} new tire pressure status. If is status between 1.8 and 2.2 new status value is string "OK".
+ */
+dashBoardControler.prototype.onTirePressureLeftFrontChanged = function(newValue) {
+	"use strict";
+	$("#leftFrontPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'L FRONT TIRE', newValue);
+};
+/**
+ * Method is setting new value of right front tire pressure.
+ * @method onTirePressureRightFrontChanged
+ * @param newValue {FLoat} new tire pressure status. If is status between 1.8 and 2.2 new status value is string "OK".
+ */
+dashBoardControler.prototype.onTirePressureRightFrontChanged = function(newValue) {
+	"use strict";
+	$("#rightFrontPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'R FRONT TIRE', newValue);
+};
+/**
+ * Method is setting new value of left rear tire pressure.
+ * @method onTirePressureLeftRearChanged
+ * @param newValue {FLoat} new tire pressure status. If is status between 1.8 and 2.2 new status value is string "OK".
+ */
+dashBoardControler.prototype.onTirePressureLeftRearChanged = function(newValue) {
+	"use strict";
+	$("#leftRearPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'L Rear TIRE', newValue);
+};
+/**
+ * Method is setting new value of right rear tire pressure.
+ * @method onTirePressureRightRearChanged
+ * @param newValue {FLoat} new tire pressure status. If is status between 1.8 and 2.2 new status value is string "OK".
+ */
+dashBoardControler.prototype.onTirePressureRightRearChanged = function(newValue) {
+	"use strict";
+	$("#rightRearPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'R Rear TIRE', newValue);
+};
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..45dff1d
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,173 @@
+/*global Bootstrap, dashBoardControler */
+
+/**
+ * DashBoard application show information about vehicle from [tizen.vehicle API](https://raw.github.com/otcshare/automotive-message-broker/master/docs/amb.idl).
+ * Uses mainly {{#crossLink "CarIndicator"}}{{/crossLink}} module from {{#crossLink "Bootstrap/carIndicator:property"}}{{/crossLink}}. Dashboard application uses following
+ * AMB properties to show car data in display only mode:
+ *
+ * * SteeringWheelAngle
+ *   * SteeringWheelAngle
+ * * WheelBrake
+ *   * Engaged
+ * * TirePressure
+ *   * leftFront
+ *   * rightFront
+ *   * leftRear
+ *   * rightRear
+ * * DoorStatus
+ *   * ChildLockStatus
+ * * LightStatus
+ *   * Hazard
+ *   * Head
+ *   * Parking
+ * * BatteryStatus
+ * * FullBatteryRange
+ * * ExteriorTemperature
+ *   * Exterior
+ * * InteriorTemperature
+ *   * Interior
+ * * WheelInformation
+ *   * FrontWheelRadius
+ * * AvgKW
+ *   * AvgKW
+ * * VehicleSpeed
+ * * Odometer
+ * * Transmission
+ *   * ShiftPosition
+ * * ExteriorBrightness
+ * * NightMode
+ *
+ *
+ * Hover and click on elements in images below to navigate to components of Home screen application.
+ *
+ * <img id="Image-Maps_1201312180420487" src="../assets/img/dashboard.png" usemap="#Image-Maps_1201312180420487" border="0" width="649" height="1152" alt="" />
+ *   <map id="_Image-Maps_1201312180420487" name="Image-Maps_1201312180420487">
+ *     <area shape="rect" coords="0,0,573,78" href="../classes/TopBarIcons.html" alt="top bar icons" title="Top bar icons" />
+ *     <area shape="rect" coords="0,77,644,132" href="../classes/Clock.html" alt="clock" title="Clock"    />
+ *     <area shape="rect" coords="0,994,644,1147" href="../classes/BottomPanel.html" alt="bottom panel" title="Bottom panel" />
+ *     <area shape="rect" coords="573,1,644,76" href="../modules/Settings.html" alt="Settings" title="Settings" />
+ *     <area  shape="rect" coords="21,132,90,194" alt="Day/Night mode" title="Day/Night mode" target="_self" href="../classes/dashBoardControler.html#method_onNightModeChanged"     >
+ *     <area  shape="rect" coords="415,128,648,173" alt="Exterior Brightness" title="Exterior Brightness" target="_self" href="../classes/dashBoardControler.html#method_onExteriorBrightnessChanged"     >
+ *     <area  shape="rect" coords="372,173,638,279" alt="Weather" title="Weather" target="_self" href="../classes/dashBoardControler.html#method_onWeatherChanged"     >
+ *     <area  shape="rect" coords="21,196,348,292" alt="Battery Level" title="Battery Level" target="_self" href="../classes/dashBoardControler.html#method_onBatteryStatusChanged"     >
+ *     <area  shape="rect" coords="193,395,451,477" alt="Wheel radius" title="Wheel radius" target="_self" href="../classes/dashBoardControler.html#method_onWheelAngleChanged"     >
+ *     <area  shape="rect" coords="224,320,425,398" alt="Front lights status" title="Front lights status" target="_self" href="../classes/dashBoardControler.html#method_onFrontLightsChanged"     >
+ *     <area  shape="rect" coords="472,509,557,541" alt="Speed" title="Speed" target="_self" href="../classes/dashBoardControler.html#method_onSpeedChanged"     >
+ *     <area  shape="rect" coords="556,509,613,558" alt="Transmission Gear" title="Transmission Gear" target="_self" href="../classes/dashBoardControler.html#method_onGearChanged"     >
+ *     <area  shape="rect" coords="34,564,215,664" alt="Child lock status" title="Child lock status" target="_self" href="../classes/dashBoardControler.html#method_onChildLockChanged"     >
+ *     <area  shape="rect" coords="9,904,212,940" alt="Average KW" title="Average KW" target="_self" href="..//classes/dashBoardControler.html#method_onAvgKWChanged"     >
+ *     <area  shape="rect" coords="11,937,200,962" alt="Battery range" title="Battery range" target="_self" href="../classes/dashBoardControler.html#method_onBatteryRangeChanged"     >
+ *     <area  shape="rect" coords="477,540,556,562" alt="Odometer" title="Odometer" target="_self" href="../classes/dashBoardControler.html#method_onOdoMeterChanged"     >
+ *     <area  shape="rect" coords="204,767,441,805" alt="Rear lights" title="Rear lights" target="_self" href="../classes/dashBoardControler.html#method_onRearLightsChanged"     >
+ *     <area  shape="rect" coords="205,823,442,861" alt="Break lights" title="Break lights" target="_self" href="../classes/dashBoardControler.html#method_onBreakLightsChanged"     >
+ *     <area  shape="rect" coords="27,332,188,410" alt="Left front tire pressure" title="Left front tire pressure" target="_self" href="../classes/dashBoardControler.html#method_onTirePressureLeftFrontChanged"     >
+ *     <area  shape="rect" coords="447,304,608,382" alt="Right front tire pressure" title="Right front tire pressure" target="_self" href="../classes/dashBoardControler.html#method_onTirePressureRightFrontChanged"     >
+ *     <area  shape="rect" coords="18,676,179,754" alt="Left rear tire pressure" title="Left rear tire pressure" target="_self" href="../classes/dashBoardControler.html#method_onTirePressureLeftRearChanged"     >
+ *     <area  shape="rect" coords="458,677,621,752" alt="Right rear tire pressure" title="Right rear tire pressure" target="_self" href="../classes/dashBoardControler.html#method_onTirePressureRightRearChanged"     >
+ *   </map>
+ * @module DashboardApplication
+ * @main DashboardApplication
+ * @class Dashboard
+ */
+
+/**
+ * Reference to instance of dashBoardIndicator this class manage graphics elements on dasboard
+ * @property dashBoardIndicator {dashBoardIndicator}
+ */
+var dashBoardIndicator;
+
+/**
+ * Reference to instance of bootstrap class this class help booting  theme , config and carIndicator
+ * @property bootstrap {Bootstrap}
+ * @private
+ */
+var bootstrap;
+
+/**
+ * Method initializes user interface and create events listeners for status indicators.
+ * @method init
+ */
+var init = function () {
+    "use strict";
+    dashBoardIndicator = new dashBoardControler();
+    bootstrap = new Bootstrap(function (status) {
+        $('#clockElement').ClockPlugin('init', 60);
+        $('#clockElement').ClockPlugin('startTimer');
+
+        $('#bottomPanel').bottomPanel('init', 'withoutBack');
+        $("#topBarIcons").topBarIconsPlugin('init');
+
+        bootstrap.carIndicator.addListener({
+            /* this si for steeringWheel game controler */
+            onSteeringWheelAngleChanged : function(newValue){
+                dashBoardIndicator.onWheelAngleChanged(newValue,bootstrap.carIndicator.status);
+            },
+            onWheelBrakeChanged : function(newValue){
+                dashBoardIndicator.onBreakLightsChanged(newValue);
+            },
+            /* end steeringWheel game controler*/
+            onTirePressureLeftFrontChanged : function (newValue){
+                dashBoardIndicator.onTirePressureLeftFrontChanged(newValue);
+            },
+            onTirePressureRightFrontChanged : function (newValue){
+                dashBoardIndicator.onTirePressureRightFrontChanged(newValue);
+            },
+            onTirePressureLeftRearChanged : function (newValue){
+                dashBoardIndicator.onTirePressureLeftRearChanged(newValue);
+            },
+            onTirePressureRightRearChanged : function (newValue){
+                dashBoardIndicator.onTirePressureRightRearChanged(newValue);
+            },
+            onChildLockChanged : function(newValue){
+                dashBoardIndicator.onChildLockChanged(newValue);
+            },
+            onFrontLightsChanged : function(newValue){
+                dashBoardIndicator.onFrontLightsChanged(newValue);
+            },
+            onRearLightsChanged : function(newValue){
+                dashBoardIndicator.onRearLightsChanged(newValue);
+            },
+            onBatteryStatusChanged : function(newValue) {
+                dashBoardIndicator.onBatteryStatusChanged(newValue,bootstrap.carIndicator.status);
+            },
+            onFullBatteryRange : function(newValue) {
+                dashBoardIndicator.onBatteryRangeChanged(newValue,bootstrap.carIndicator.status);
+            },
+            onOutsideTempChanged : function(newValue) {
+               dashBoardIndicator.onOutsiteTempChanged(newValue);
+            },
+            onInsideTempChanged : function(newValue) {
+                dashBoardIndicator.onInsideTempChanged(newValue);
+            },
+            onWheelAngleChanged : function(newValue){
+                dashBoardIndicator.onWheelAngleChanged(newValue,bootstrap.carIndicator.status);
+            },
+            onWeatherChanged : function(newValue){
+                dashBoardIndicator.onWeatherChanged(newValue);
+            },
+            onSpeedChanged : function(newValue) {
+                dashBoardIndicator.onSpeedChanged(newValue);
+            },
+            onOdoMeterChanged : function(newValue){
+                dashBoardIndicator.onOdoMeterChanged(newValue);
+            },
+            onGearChanged : function(newValue){
+                dashBoardIndicator.onGearChanged(newValue);
+            },
+            onRandomizeChanged : function(newValue) {
+                dashBoardIndicator.onRandomizerChanged(newValue);
+            },
+            onNightModeChanged : function(newValue) {
+                dashBoardIndicator.onNightModeChanged(newValue);
+            },
+            onExteriorBrightnessChanged : function(newValue) {
+                dashBoardIndicator.onExteriorBrightnessChanged(newValue);
+            },
+            onAvgKWChanged : function(newValue) {
+                dashBoardIndicator.onAvgKWChanged(newValue);
+            }
+        });
+    });
+};
+
+$(document).ready(init);
\ No newline at end of file
diff --git a/packaging/html5-ui-dashboard.changes b/packaging/html5-ui-dashboard.changes
new file mode 100644
index 0000000..6dc0496
--- /dev/null
+++ b/packaging/html5-ui-dashboard.changes
@@ -0,0 +1,4 @@
+* Thu Mar 06 2014 brianjjones <brian.j.jones@intel.com> e90b1c4
+- Initial commit of the Desktop app
+
+
diff --git a/packaging/html5-ui-dashboard.spec b/packaging/html5-ui-dashboard.spec
new file mode 100644
index 0000000..4993768
--- /dev/null
+++ b/packaging/html5-ui-dashboard.spec
@@ -0,0 +1,36 @@
+Name:       html5_UI_Dashboard
+Summary:    A proof of concept pure html5 UI
+Version:    0.0.1
+Release:    1
+Group:      Applications/System
+License:    Apache 2.0
+URL:        http://www.tizen.org
+Source0:    %{name}-%{version}.tar.bz2
+BuildRequires:  zip
+BuildRequires:  html5_UI_Common
+Requires:   wrt-installer
+Requires:   wrt-plugins-ivi
+
+%description
+A proof of concept pure html5 UI
+
+%prep
+%setup -q -n %{name}-%{version}
+
+%build
+
+make wgtPkg
+
+%install
+rm -rf %{buildroot}
+%make_install
+
+%post
+    wrt-installer -i /opt/usr/apps/.preinstallWidgets/html5UIDashboard.wgt;
+
+%postun
+    wrt-installer -un html5POC04.Dashboard
+
+%files
+%defattr(-,root,root,-)
+/opt/usr/apps/.preinstallWidgets/html5UIDashboard.wgt