Initial commit of the Homescreen appsubmit/tizen/20140307.001019submit/tizen/20140307.000212accepted/tizen/ivi/20140307.010814

Change-Id: If1057f57109faac93ab1d9b1c28e7a9da800146a

24 files changed, 1685 insertions, 0 deletions

diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..95c9382
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,20 @@
+PROJECT = html5UIHomescreen
+
+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 config.xml css icon.png index.html js
+
+install:
+	@echo "Installing Homescreen, stand by..."
+	mkdir -p $(INSTALL_DIR)/
+	cp $(PROJECT).wgt $(INSTALL_DIR)/
+
+dist:
+	tar czf ../$(PACKAGE).tar.bz2 .
diff --git a/config.xml b/config.xml
new file mode 100644
index 0000000..0b574c1
--- /dev/null
+++ b/config.xml
@@ -0,0 +1,23 @@
+<?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/homescreen" version="1.0.0" viewmodes="fullscreen">
+	<access origin="*" subdomains="true"></access>
+	<tizen:application id="html5POC05.Homescreen"
+		package="html5POC05" required_version="2.1" />
+	<content src="index.html" />
+	<icon src="icon.png" />
+	<name>Home Screen</name>
+	<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/fullscreen" />
+	<tizen:privilege name="http://tizen.org/privilege/content.read" />
+        <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" />
+        <tizen:privilege name="http://tizen.org/privilege/speech" />
+	<tizen:privilege name="http://tizen.org/privilege/vehicle" />
+	<tizen:setting screen-orientation="portrait"
+		context-menu="enable" background-support="disable" encryption="disable"
+		install-location="auto" hwkey-event="enable" />
+</widget>
diff --git a/css/images/dashboard_selector.png b/css/images/dashboard_selector.png
new file mode 100644
index 0000000..57a75e5
--- /dev/null
+++ b/css/images/dashboard_selector.png
diff --git a/css/images/default_icon.png b/css/images/default_icon.png
new file mode 100644
index 0000000..1335774
--- /dev/null
+++ b/css/images/default_icon.png
diff --git a/css/images/icon_direction_left.png b/css/images/icon_direction_left.png
new file mode 100644
index 0000000..d35b355
--- /dev/null
+++ b/css/images/icon_direction_left.png
diff --git a/css/images/icon_facebook.png b/css/images/icon_facebook.png
new file mode 100644
index 0000000..bcd6322
--- /dev/null
+++ b/css/images/icon_facebook.png
diff --git a/css/images/icon_speedmeter.png b/css/images/icon_speedmeter.png
new file mode 100644
index 0000000..7aeb804
--- /dev/null
+++ b/css/images/icon_speedmeter.png
diff --git a/css/images/icon_twitter.png b/css/images/icon_twitter.png
new file mode 100644
index 0000000..62f6991
--- /dev/null
+++ b/css/images/icon_twitter.png
diff --git a/css/images/music_selector.png b/css/images/music_selector.png
new file mode 100644
index 0000000..7bdaccd
--- /dev/null
+++ b/css/images/music_selector.png
diff --git a/css/images/navigation_selector.png b/css/images/navigation_selector.png
new file mode 100644
index 0000000..3742f7e
--- /dev/null
+++ b/css/images/navigation_selector.png
diff --git a/css/images/phone_selector.png b/css/images/phone_selector.png
new file mode 100644
index 0000000..e21edac
--- /dev/null
+++ b/css/images/phone_selector.png
diff --git a/css/images/radio_selector.png b/css/images/radio_selector.png
new file mode 100644
index 0000000..ea24db2
--- /dev/null
+++ b/css/images/radio_selector.png
diff --git a/css/images/social_selector.png b/css/images/social_selector.png
new file mode 100644
index 0000000..a563eff
--- /dev/null
+++ b/css/images/social_selector.png
diff --git a/css/images/video_selector.png b/css/images/video_selector.png
new file mode 100644
index 0000000..9ef9900
--- /dev/null
+++ b/css/images/video_selector.png
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..09c5b7b
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,519 @@
+.wrapper {
+	width: 720px;
+	height: 1280px;
+	overflow: hidden;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.wrapper .backGround {
+	position: absolute;
+	width: 720px;
+	height: 1280px;
+	top: 0;
+	left: 0;
+	-webkit-perspective: 1000;
+	-webkit-transition: -webkit-transform, opacity 1000ms ease-out;
+	-webkit-transition-duration: 500ms;
+	opacity: 0;
+}
+
+.wrapper .live {
+	-webkit-transition: -webkit-transform, opacity 2000ms ease-out;
+}
+
+.dateTime {
+	top: 0;
+	opacity: 0.3;
+	z-index: 2;
+	-webkit-transform: translate3d(0px, -200px, 0);
+	transform: translate3d(0px, -200px, 0);
+}
+
+.showDT {
+	opacity: 1;
+	-webkit-transform: translate3d(0px, 0px, 0);
+	transform: translate3d(0px, 0px, 0);
+	-webkit-transition: -webkit-transform 400ms ease-out, opacity 400ms
+		ease-in;
+}
+
+.topBarIcons {
+	opacity: 0.3;
+	z-index: 4;
+	-webkit-transform: translate3d(0px, -200px, 0);
+	transform: translate3d(0px, -200px, 0);
+	-webkit-transition: -webkit-transform 400ms ease-out, opacity 400ms
+		ease-in;
+}
+
+.showTBI {
+	opacity: 1;
+	-webkit-transform: translate3d(0px, 0px, 0);
+	transform: translate3d(0px, 0px, 0);
+}
+
+.indSize {
+	position: absolute;
+	width: 200px;
+	height: 200px;
+}
+
+.indicator {
+	-webkit-transition: -webkit-transform 300ms ease-out, opacity 500ms;
+	-webkit-transform: translate3d(260px, 575px, 0) scale(0);
+	transform: translate3d(260px, 575px, 0) scale(0);
+	-webkit-perspective: 10000;
+	float: left;
+	opacity: 0;
+	z-index: 2;
+}
+
+.showI {
+	-webkit-transform: translate3d(260px, 575px, 0) scale(1);
+	transform: translate3d(260px, 575px, 0) scale(1);
+	opacity: 1;
+}
+
+.centerIco {
+	position: absolute;
+	top: 60px;
+	left: 60px;
+	width: 80px;
+	height: 80px;
+	display: block;
+}
+
+.corpus {
+	-webkit-perspective: 1000;
+	-webkit-transition: -webkit-transform;
+	-webkit-transform: translate3d(0px, 0px, 0);
+	transform: translate3d(0px, 0px, 0);
+	-webkit-transition-duration: 1500ms;
+}
+
+.item {
+	position: absolute;
+	-webkit-transition: -webkit-transform 400ms ease-out, opacity 700ms
+		ease-out;
+	/*	-webkit-transform: translate3d(0px,0px,0);*/
+	-webkit-perspective: 1000;
+	opacity: 0;
+	height: 535px;
+	width: 528px;
+	text-transform: uppercase;
+}
+
+.abs {
+	position: absolute;
+}
+
+.item.selected img {
+	opacity: 0.8;
+	-webkit-transition: opacity 300ms ease-in
+}
+
+.item img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity : 0;
+	-webkit-transition: opacity 500ms ease-out;
+}
+
+.sector1 {
+	-webkit-transform: translate3d(110px, 148px, 0px);
+	transform: translate3d(110px, 148px, 0px);
+}
+
+.sector1icon {
+	top: 110px;
+	left: 120px;
+	width: 44px;
+	height: 33px;
+}
+
+.sector1street {
+	top: 110px;
+	left: 180px;
+	width: 280px;
+	overflow: hidden;
+	text-align: left;
+}
+
+.sector1distance {
+	top: 140px;
+	left: 180px;
+}
+
+.sector2 {
+	-webkit-transform: translate3d(392px, 324px, 0px);
+	transform: translate3d(392px, 324px, 0px);
+	text-align: center;
+}
+
+.sector2valInterior {
+	top: 120px;
+	left: 160px;
+	width: 150px;
+	overflow: hidden;
+}
+
+.sector2Interior {
+	top: 170px;
+	left: 160px;
+	width: 150px;
+}
+
+.sector2valExterior {
+	top: 210px;
+	left: 100px;
+	width: 150px;
+	overflow: hidden;
+}
+
+.sector2Exterior {
+	top: 260px;
+	left: 100px;
+	width: 150px;
+}
+
+.sector3 {
+	-webkit-transform: translate3d(402px, 630px, 0px);
+	transform: translate3d(402px, 630px, 0px);
+	overflow: hidden;
+	text-align: center;
+}
+
+.sector3header {
+	top: 65px;
+	left: 65px;
+	width: 250px;
+}
+
+.sector3title {
+	top: 85px;
+	left: 65px;
+	width: 250px;
+}
+
+.sector3subHeader {
+	top: 115px;
+	left: 90px;
+	width: 200px;
+}
+
+.sector4 {
+/*	-webkit-transform: translate3d(314px, 724px, 0px);
+	transform: translate3d(314px, 724px, 0px);
+*/	-webkit-transform: translate3d(340px, 703px, 0px) rotateZ(-5deg);
+	transform: translate3d(340px, 703px, 0px) rotateZ(-5deg);
+}
+
+.sector4name {
+	top: 200px;
+	left: 60px;
+	width: 150px;
+	height: 80px;
+	text-align: left;
+	overflow: hidden;
+}
+
+.sector5 {
+	-webkit-transform: translate3d(44px, 702px, 0px);
+	transform: translate3d(44px, 702px, 0px);
+}
+
+.sector6 {
+	-webkit-transform: translate3d(0px, 590px, 0px);
+	transform: translate3d(0px, 590px, 0px);
+}
+
+.sector6postsWrapper {
+	top: 70px;
+	left: 25px;
+	width: 205px;
+	height: 90px;
+}
+
+.sector6row {
+	width: 100%;
+	height: 18px;
+	overflow: hidden;
+	text-align: left;
+}
+
+.sector6icon {
+	top: 1px;
+	width: 15px;
+	height: 15px;
+	float: left;
+}
+
+.sector6time {
+	width: 65px;
+	float: left;
+	margin-right: 5px;
+	text-align: right;
+}
+
+.sector6text {
+	float: left;
+	text-align: right;
+}
+
+.sector7 {
+	-webkit-transform: translate3d(0px, 316px, 0px);
+	transform: translate3d(0px, 316px, 0px);
+}
+
+.sector7iconSpeed {
+	top: 135px;
+	left: 10px;
+	width: 37px;
+	height: 35px;
+}
+
+.sector7valSpeed {
+	top: 115px;
+	right: 390px;
+	text-align: right;
+}
+
+.sector7SpeedUnits {
+	top: 155px;
+	left: 145px;
+	text-transform: lowercase;
+}
+
+.sector7iconBattery {
+	top: 200px;
+	left: 10px;
+	width: 37px;
+	height: 23px;
+}
+
+.sector7valBatteryPerc {
+	top: 197px;
+	left: 50px;
+	width: 70px;
+	text-align: right;
+}
+
+.sector7valRange {
+	top: 197px;
+	left: 125px;
+}
+
+.bottomPanel {
+	opacity: 0.3;
+	z-index: 4;
+	-webkit-transform: translate3d(0px, 200px, 0);
+	transform: translate3d(0px, 200px, 0);
+}
+
+.showBP {
+	opacity: 1;
+	-webkit-transform: translate3d(0px, 0px, 0);
+	transform: translate3d(0px, 0px, 0);
+	-webkit-transition: -webkit-transform 400ms ease-out, opacity 400ms
+		ease-in;
+}
+
+.volumeControl {
+	z-index: 4;
+	position: absolute;
+	top: 100px;
+	left: 450px;
+	width: 240px;
+	height: 50px;
+}
+
+.audioButtons {
+	position: absolute;
+	top: 110px;
+	left: 53px;
+}
+
+.controlsBtn {
+	z-index: 4;
+	position: absolute;
+	width: 28px;
+	height: 28px;
+}
+
+.previousBtn {
+	opacity: 1;
+}
+
+.prevBtnInactive {
+	opacity: 0.5;
+}
+
+.previousBtnActive {
+	opacity: 1;
+}
+
+.pauseBtn {
+	opacity: 1;
+	left: 96px;
+}
+
+.playBtn {
+	opacity: 1;
+	left: 96px;
+}
+
+.nextBtn {
+	opacity: 1;
+	left: 191px;
+}
+
+.nextBtnInactive {
+	opacity: 0.5;
+	left: 191px;
+}
+
+.nextBtnActive {
+	opacity: 1;
+	left: 191px;
+}
+
+.actionsCatcher {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 3;
+	opacity: 0;
+}
+
+.homeScrAppGridView {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 654px;
+	height: 1214px;
+	z-index: 5;
+	padding: 33px;
+	display: none;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+
+.HSAGWHeading {
+	text-transform: uppercase;
+	margin: 0 0 25px 0;
+}
+
+.homeScrAppGridFrame {
+	width: 212px;
+	height: 212px;
+	background-color: rgb(0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.2);
+	float: left;
+	margin: 3px;
+	text-align: center;
+}
+
+.homeScrAppGridText {
+	background-color: rgb(0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.4);
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 80px;
+}
+
+.homeScrAppGridView .exitButton {
+	position: absolute;
+	top: 25px;
+	right: 25px;
+	width: 42px;
+	height: 42px;
+}
+
+.homeScrAppGridTitle {
+	position: absolute;
+	bottom: 29px;
+	right: 0;
+	left: 0;
+	text-transform: uppercase;
+	line-height: 25px;
+}
+
+.homeScrAppGridCategory {
+	font-weight: normal;
+	line-height: 25px;
+	font-size: 16px;
+	display: none;
+}
+
+.homeScrAppGridImg img {
+	margin: 0 auto;
+	width: 120px;
+	height: 120px;
+}
+
+/* ICONS */
+.iconSpeed {
+	background-image: url("./images/icon_speedmeter.png");
+}
+
+.iconLeftImg {
+	background-image: url("./images/icon_direction_left.png");
+}
+
+.iconFacebook {
+	background-image: url("images/icon_facebook.png");
+}
+
+.iconTwitter {
+	background-image: url("images/icon_twitter.png");
+}
+
+/* Animations */
+.rollRight {
+    -webkit-animation-name: rotateR;
+    -webkit-animation-duration: 10s;
+    -webkit-animation-delay: 0s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: 1;/*infinite;*/
+}
+
+.rollLeft {
+    -webkit-animation-name: rotateL;
+    -webkit-animation-duration: 10s;
+    -webkit-animation-delay: 0s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: 1;/*infinite;*/
+}
+
+.liveBg {
+    -webkit-animation-name: live;
+    -webkit-animation-duration: 7s;
+    -webkit-animation-delay: 0s;
+    -webkit-animation-timing-function: ease-out;
+    -webkit-animation-iteration-count: 1;
+    -webkit-transition: opacity 500ms ease-out;
+}
+
+@-webkit-keyframes rotateR {
+    0%		{-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
+    50%		{-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);}
+    100%	{-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
+}
+
+@-webkit-keyframes rotateL {
+    0%		{-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
+    50%		{-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);}
+    100%	{-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
+}
+
+@-webkit-keyframes live {
+	0%		{opacity: 0.4;}
+	15%		{opacity: 1;}
+	55%		{opacity: 0.4;}
+	100%	{opacity: 0.4;}
+}
\ No newline at end of file
diff --git a/icon.png b/icon.png
new file mode 100644
index 0000000..0d1719e
--- /dev/null
+++ b/icon.png
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..50dd8df
--- /dev/null
+++ b/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>HOMESCREEN</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/car/components/incomingCall/incomingCall.css" />
+
+<link rel="stylesheet" href="./css/car/components/dateTime/dateTime.css" />
+<link rel="stylesheet" href="./css/car/components/progressBar/progressBar.css" />
+<link rel="stylesheet" href="./css/car/components/topBarIcons/topBarIcons.css" />
+<link rel="stylesheet" href="./css/style.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/components/jsViews/jsrender.js"></script>
+<script type="text/javascript" src="./css/car/components/jsViews/template.js"></script>
+<script type="text/javascript" src="./css/car/car.js"></script>
+
+<script type='text/javascript' src='./js/services/bootstrap.js'></script>
+
+<script type="text/javascript" src="./css/car/components/bottomPanel/bottomPanel.js"></script>
+<script type="text/javascript" src="./css/car/components/progressBar/progressBar.js"></script>
+<script type="text/javascript" src="./css/car/components/buttonControls/buttonControls.js"></script>
+<script type="text/javascript" src="./css/car/components/audioPlayer/audioPlayer.js"></script>
+<script type="text/javascript" src="./css/car/components/topBarIcons/topBarIcons.js"></script>
+<script type="text/javascript" src="./css/car/components/dateTime/dateTime.js"></script>
+
+<script type="text/javascript" src="./js/predefAppModel.js"></script>
+<script type="text/javascript" src="./js/installedApps.js"></script>
+<script type="text/javascript" src="./js/keyControl.js"></script>
+<script type="text/javascript" src="./js/actionCatcher.js"></script>
+<script type="text/javascript" src="./js/main.js"></script>
+
+
+</head>
+
+<body class="homeScr_body">
+	<div id="wrapper" class="wrapper">
+		<div id="topBarIcons" class="topBarIcons"></div>
+		<div id="actionsCatcher" class="actionsCatcher" onmouseup="actionCatcher.touchEnd();" onmousedown="actionCatcher.touchStart();" onmousemove="actionCatcher.over();">
+		</div>
+
+		<div id="homeScrAppGridView" class="homeScrAppGridView pageBgColorNormalTransparent">
+			<div class="HSAGWHeading fontColorNormal fontSizeLarger ">Apps</div>
+			<div class="exitButton tabsCloseButton"></div>
+		</div>
+		<div id="dateTime" class="dateTime"></div>
+		<div id="viewPort">
+			<div id="corpus" class="corpus">
+				<ul id="content_ul">
+					<li class="item sector1 fontWeightBold fontColorNormal">
+						<div class="sector1icon iconLeftImg abs"></div>
+						<div class="sector1street abs fontSizeLarge">45 south ave</div>
+						<div class="sector1distance abs fontSizeXSmall">600 ft</div>
+						<img src="./css/images/navigation_selector.png"></img>
+					</li>
+					<li class="item sector2 fontWeightBold fontColorNormal">
+						<div id="fanStatus" class="sector2valInterior abs fontSizeXXLarge">0°C</div>
+						<div class="sector2Interior abs fontSizeXSmall">interior</div>
+						<div id="weatherStatus" class="sector2valExterior abs fontSizeXXLarge fontColorDark">0°F</div>
+						<div class="sector2Exterior abs fontSizeXSmall fontColorDark">exterior</div>
+						<img src="./css/images/music_selector.png"></img>
+					</li>
+					<li class="item sector3 fontWeightBold fontColorNormal">
+						<div id="audioHeader" class="sector3header abs fontSizeNormal">author</div>
+						<div id="audioTitle" class="sector3title abs fontSizeLarge">title</div>
+						<div id="audioAlbum"class="sector3subHeader abs fontSizeXSmall fontColorDark">album</div>
+						<img src="./css/images/radio_selector.png"></img>
+					</li>
+					<li class="item sector4 fontWeightBold fontColorNormal">
+						<!-- <div class="sector4name abs fontSizeXSmall">Smart Device Link</div> -->
+						<img src="./css/images/video_selector.png"></img>
+					</li>
+					<li class="item sector5 fontWeightBold fontColorNormal">
+						<img src="./css/images/social_selector.png"></img>
+					</li>
+					<li class="item sector6 fontWeightBold fontColorNormal">
+<!-- 						<div class="sector6postsWrapper abs">
+							<div class="sector6row">
+								<div class="sector6icon iconFacebook"></div>
+								<div class="sector6time">9:23 AM</div>
+								<div class="sector6text"></div>
+							</div>
+							<div class="sector6row">
+								<div class="sector6icon iconFacebook"></div>
+								<div class="sector6time">9:45 AM</div>
+								<div class="sector6text">Cheryl Johnson</div>
+							</div>
+							<div class="sector6row">
+								<div class="sector6icon iconTwitter"></div>
+								<div class="sector6time">10:01 AM</div>
+								<div class="sector6text">CNN</div>
+							</div>
+						</div>
+ -->						<img src="./css/images/phone_selector.png"></img>
+					</li>
+					<li class="item sector7 fontWeightBold fontColorNormal">
+						<div class="sector7iconSpeed abs iconSpeed"></div>
+						<div id="homeScrSpeed" class="sector7valSpeed fontSizeXXXLarge abs">0</div>
+						<div id="sector7SpeedUnits" class="sector7SpeedUnits fontSizeXSmall abs">mph</div>
+						<div class="sector7iconBattery abs batteryImage"></div>
+						<div id="batteryStatus" class="sector7valBatteryPerc abs fontSizeLarge">0%</div>
+						<div id="batteryRange" class="sector7valRange abs fontSizeLarge">0 mi</div>
+						<img src="./css/images/dashboard_selector.png"></img>
+					</li>
+				</ul>
+			</div>
+			<div id="indicator" class="indicator indSize colorBasic fontSizeNormal fontWeightBold">
+				<div id="centerIco" class="centerIco"></div>
+				<div id="innerRing" class="innerRing indSize rollLeft"></div>
+				<div id="outerRing" class="outerRing indSize rollRight"></div>
+			</div>
+		</div>
+		<div id="bottomPanel" class="bottomPanel bottomPanelImg"></div>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/actionCatcher.js b/js/actionCatcher.js
new file mode 100644
index 0000000..21c5028
--- /dev/null
+++ b/js/actionCatcher.js
@@ -0,0 +1,155 @@
+/*global  areasDefinitions, onFrameClick, centerPoint */
+
+/**
+ * @module HomescreenApplication
+ **/
+
+/**
+ * Compute distance between two points in 2D.
+ * @method pointsDistance
+ * @for window
+ * @private
+ * @param pointA {object} Contains X and Y coordinate of first point.
+ * @param pointB {object} Contains X and Y coordinate of second point.
+ * @return float distance in points
+ **/
+var pointsDistance = function (pointA, pointB) {
+	"use strict";
+	return Math.sqrt(Math.pow(Math.abs(pointA.y - pointB.y), 2) + Math.pow(Math.abs(pointA.x - pointB.x), 2));
+};
+
+/**
+ * Compute angle of click point from  zero angle (zero angle has a line, which is horizontal and starts in the center point).
+ * @method pointAngle
+ * @for window
+ * @private
+ * @param point {object} Contains X and Y coordinate of clicked/touched point.
+ * @param centerPoint {object} Contains X and Y coordinate of center point.
+ * @return float angle in degrees
+ **/
+var pointAngle = function (point, centerPoint) {
+	"use strict";
+	var tmpPoint = {};
+	tmpPoint.x = centerPoint.x + 200; //to define zero vector
+	tmpPoint.y = centerPoint.y;
+	var u1 = tmpPoint.x - centerPoint.x,
+		u2 = tmpPoint.y - centerPoint.y,
+		v1 = point.x - centerPoint.x,
+		v2 = point.y - centerPoint.y,
+		su = pointsDistance(centerPoint, tmpPoint),
+		sv = pointsDistance(centerPoint, point),
+		angle = Math.acos((u1 * v1 + u2 * v2) / (su * sv)) * (180 / Math.PI);
+	if (point.y > centerPoint.y) {
+		angle = 360 - angle;
+	}
+	return angle;
+};
+
+/**
+ * Gets app sector from click based on predefAppModel, clickDistance from center and click angle.
+ * @method getClickedItem
+ * @for window
+ * @private
+ * @param touchPoint {object} Contains X and Y coordinate of clicked/touched point.
+ **/
+var getClickedItem = function (touchPoint) {
+	"use strict";
+	var dst = pointsDistance(touchPoint, centerPoint),
+		angle = pointAngle(touchPoint, centerPoint),
+		i = 0;
+	for (i = 0; i < areasDefinitions.length; i++) {
+		switch (areasDefinitions[i].shape) {
+		case 'cenerCircle':
+			if (dst < areasDefinitions[i].lc) {
+				return areasDefinitions[i];
+			}
+			break;
+		case 'pieWithoutCenter':
+			if ((areasDefinitions[i].sc < dst) && (areasDefinitions[i].lc > dst) && (areasDefinitions[i].sa < angle) && (areasDefinitions[i].la > angle)) {
+				return areasDefinitions[i];
+			}
+			break;
+		}
+	}
+	return null;
+};
+
+
+/**
+ * Provides functions for catching mouse events and translating them to correct calls for launching applications displayed in radial menu. Applications and locations
+ * which should be displayed are defined in class [predefAppModel](../classes/predefAppModel.html). Reading applications from Tizen system is handled by class
+ * [installedApps](../classes/installedApps.html). As alternative method to launching applicatins with mouse events applications can be launched by key events which are
+ * processed by class [keyControl](../classes/keyControl.html).
+ * @class actionCatcher
+ * @static
+ **/
+var actionCatcher = {
+	/**
+	 * Holds clicked item Object.
+	 * @property clickedItem
+	 * @type Object
+	 * @default null
+	 **/
+	clickedItem: null,
+	/**
+	 * Indicates if mouse button is pressed.
+	 * @property mouseDown
+	 * @type bool
+	 * @default false
+	 **/
+	mouseDown: false,
+
+	/**
+	 * Provides highlighting sectors if mouse cursor is over.
+	 * @method over
+	 **/
+	over: function () {
+		"use strict";
+		var i = 0;
+		if (!actionCatcher.mouseDown) {
+			var mousePosition = {x: window.event.pageX, y: window.event.pageY};
+			var overItem = getClickedItem(mousePosition);
+			if (overItem !== actionCatcher.clickedItem) {
+				for (i = 0; i < areasDefinitions.length; i++) {
+					if (areasDefinitions[i].sectorId !== null) {
+						$('.sector' + areasDefinitions[i].sectorId).removeClass('selected');
+					}
+				}
+				if (overItem !== null) {
+					$('.sector' + overItem.sectorId).addClass('selected');
+				}
+				actionCatcher.clickedItem = overItem;
+			}
+		}
+	},
+	/**
+	 * Sets mouseDown property to true and sets clickedItem property if click to some sector.
+	 * @method touchStart
+	 **/
+	touchStart: function () {
+		"use strict";
+		actionCatcher.mouseDown = true;
+		var mousePosition = {x: window.event.pageX, y: window.event.pageY};
+		actionCatcher.clickedItem = getClickedItem(mousePosition);
+	},
+	/**
+	 * Sets mouseDown property to false and starts app if click to some sector.
+	 * @method touchEnd
+	 **/
+	touchEnd: function () {
+		"use strict";
+		actionCatcher.mouseDown = false;
+		if (actionCatcher.clickedItem !== null) {
+			switch (actionCatcher.clickedItem.shape) {
+			case 'cenerCircle':
+				actionCatcher.clickedItem.action();
+				break;
+			case 'pieWithoutCenter':
+				if (actionCatcher.clickedItem.id !== null) {
+					onFrameClick(actionCatcher.clickedItem);
+				}
+				break;
+			}
+		}
+	}
+};
\ No newline at end of file
diff --git a/js/installedApps.js b/js/installedApps.js
new file mode 100644
index 0000000..f5a656d
--- /dev/null
+++ b/js/installedApps.js
@@ -0,0 +1,265 @@
+/*global ThemeKeyColor, Settings, loadScript */
+
+/**
+ * @module HomescreenApplication
+ **/
+/**
+ * Retrieves list of installed apps from [Tizen Application API](https://developer.tizen.org/dev-guide/2.2.0/org.tizen.web.device.apireference/tizen/application.html)
+ * and manages displaing it in app grid view. Class also provides launching of installed app by clicking on app representation in grid view.
+ * @class installedApps
+ * @static
+ **/
+/**
+ * Global variable which holds the list component in the UI
+ * @property appList
+ * @type array
+ **/
+var appList = [];
+/**
+ * Global variable which holds the identifier of the application information event listener
+ * @property listenerID
+ * @type string
+ * @default null
+ **/
+var listenerID = null;
+/**
+ * Global variable which holds the current index of last element in appList
+ * @property index
+ * @type int
+ * @default 0
+ **/
+var index = 0;
+
+/**
+ * Provides hiding installed app grid afted click out of app cells.
+ * @method $
+ * @static
+ **/
+$(function() {
+	"use strict";
+	$("#homeScrAppGridView").live("click", function() {
+		$(this).fadeOut();
+	});
+});
+
+/**
+ * Provide logging of app launch success.
+ * @method onLaunchSuccess
+ * @static
+ **/
+function onLaunchSuccess() {
+	"use strict";
+	console.log("App launched...");
+}
+
+/**
+ * Provide logging of app launch error.
+ * @method onError
+ * @param err {string} Error message.
+ * @static
+ **/
+function onError(err) {
+	"use strict";
+	console.error(err.message);
+}
+
+/**
+ * Provide launch of application.
+ * @method onFrameClick
+ * @param appData {object} Contains Object of specific app.
+ * @static
+ **/
+function onFrameClick(appData) {
+	"use strict";
+	//launch application
+	var i;
+	try {
+		var scriptCallback = function(path, status) {
+			if (status === "ok") {
+				Settings.init();
+			}
+		};
+
+		for (i = 0; i < appList.length; ++i) {
+			if (appList[i].id === appData.id) {
+				if (appData.id === "http://com.intel.tizen/intelPocSettings") {
+					if (typeof Settings === 'undefined') {
+						loadScript('./css/car/components/settings/js/settings.js', scriptCallback);
+					} else {
+						Settings.show();
+					}
+				} else {
+					tizen.application.launch(appData.id, onLaunchSuccess, onError);
+				}
+				break;
+			}
+		}
+	} catch (exc) {
+		console.error(exc.message);
+	}
+}
+
+/**
+ * Create app grid view based on appList.
+ * @method insertAppFrame
+ * @param appFrame {object} Contains Object of specific app from appList property.
+ * @static
+ **/
+function insertAppFrame(appFrame) {
+	"use strict";
+	var rootDiv = $("<div></div>").addClass("homeScrAppGridFrame boxShadow3").data("app-data", appFrame).click(function() {
+		onFrameClick($(this).data("app-data"));
+	});
+
+	var innerDiv = $("<div></div>").addClass("homeScrAppGridImg").appendTo(rootDiv);
+	$("<img />").data("src", appFrame.iconPath).appendTo(innerDiv);
+	var textDiv = $("<div />").addClass("homeScrAppGridText").appendTo(rootDiv);
+	$("<div />").addClass("homeScrAppGridTitle fontColorNormal fontSizeSmaller fontWeightBold").text(appFrame.appName).appendTo(textDiv);
+	$("<div />").addClass("homeScrAppGridCategory").text(appFrame.appName).appendTo(textDiv);
+
+	$('#homeScrAppGridView').append(rootDiv);
+
+	var img = new Image();
+	var ctx = document.createElement('canvas').getContext('2d');
+
+	img.onload = function() {
+		var w = ctx.canvas.width = img.width;
+		var h = ctx.canvas.height = img.height;
+
+		// Change icon only in case of Intel POC apps
+		if (appFrame.id.indexOf("html5POC") >= 0) {
+			ctx.fillStyle = ThemeKeyColor;
+			ctx.fillRect(0, 0, w, h);
+			ctx.globalCompositeOperation = 'destination-in';
+		}
+		ctx.drawImage(img, 0, 0);
+
+		$("div.homeScrAppGridImg img").each(function() {
+			if ($(this).data("src") === appFrame.iconPath) {
+				$(this)[0].src = ctx.canvas.toDataURL();
+			}
+		});
+	};
+
+	img.onerror = img.onabort = function() {
+		$("div.homeScrAppGridImg img").each(function() {
+			if ($(this).data("src") === appFrame.iconPath) {
+				$(this).attr("src", "./css/images/default_icon.png");
+			}
+		});
+	};
+
+	img.src = appFrame.iconPath;
+
+	index++;
+	appList.push(appFrame);
+}
+
+var evalInstalledApps = null;
+
+/**
+ * Callback method for getting and resorting appList array for Homescreen app using.
+ * @method onAppInfoSuccess
+ * @param list {array} Contains Objects of apps from evalInstalledApps listener.
+ * @static
+ **/
+function onAppInfoSuccess(list) {
+	"use strict";
+	var i = 0;
+	try {
+		index = 0;
+		var applications = [];
+
+		applications.push({
+			id: "http://com.intel.tizen/intelPocSettings",
+			appName: "Settings",
+			show: true,
+			iconPath: "./css/car/components/settings/icon.png"
+		});
+
+		list.sort(function(x, y) {
+			return x.appName > y.appName ? 1 : -1;
+		});
+
+		for (i = 0; i < list.length; i++) {
+
+			var app = list[i];
+			var newApp = {
+				id: app.id,
+				appName: app.name,
+				style: "background-image: url('file://" + app.iconPath + "');",
+				iconPath: app.iconPath,
+				css: "app_" + app.id.replace(/\./g, "_").replace(/\ /g, "_"),
+				installed: true
+			};
+			applications.push(newApp);
+		}
+		var equals = applications.length === appList.length;
+
+		if (equals) {
+			for (var j = 0; j < applications.length; j++) {
+				equals = applications[j].id === appList[j].id ? equals : false;
+				equals = applications[j].appName === appList[j].appName ? equals : false;
+				equals = applications[j].css === appList[j].css ? equals : false;
+				equals = applications[j].iconPath === appList[j].iconPath ? equals : false;
+			}
+		}
+
+		if (!equals) {
+			appList = [];
+			$('#homeScrAppGridView .homeScrAppGridFrame').remove();
+
+			for (i = 0; i < applications.length; i++) {
+				insertAppFrame(applications[i]);
+			}
+		}
+	} catch (exc) {
+		console.log(exc.message);
+	} finally {
+		//Workaround due to https://bugs.tizen.org/jira/browse/TIVI-2018
+		window.setTimeout(function() {
+			evalInstalledApps();
+		}, 1000);
+
+		if (null === listenerID) {
+			listenerID = tizen.application.addAppInfoEventListener({
+				oninstalled: function(appInfo) {
+					console.log('The application ' + appInfo.name + ' is installed');
+					evalInstalledApps();
+				},
+				onupdated: function(appInfo) {
+					console.log('The application ' + appInfo.name + ' is updated');
+					evalInstalledApps();
+				},
+				onuninstalled: function(appid) {
+					console.log('The application ' + appid + ' is uninstalled');
+					evalInstalledApps();
+				}
+			});
+		}
+	}
+}
+
+/**
+ * Listener for installed apps events.
+ * @method evalInstalledApps
+ * @static
+ **/
+evalInstalledApps = function() {
+	"use strict";
+	if (typeof tizen !== 'undefined') {
+		try {
+			// get the installed applications list
+			tizen.application.getAppsInfo(onAppInfoSuccess, function(err) {
+				// Workaround due to https://bugs.tizen.org/jira/browse/TIVI-2018
+				window.setTimeout(function() {
+					evalInstalledApps();
+				}, 1000);
+
+				onError(err);
+			});
+		} catch (exc) {
+			console.error(exc.message);
+		}
+	}
+};
diff --git a/js/keyControl.js b/js/keyControl.js
new file mode 100644
index 0000000..220d76f
--- /dev/null
+++ b/js/keyControl.js
@@ -0,0 +1,154 @@
+/*global areasDefinitions, onFrameClick */
+
+/**
+ * @module HomescreenApplication
+ **/
+/**
+ * Allows to select radial menu items and start selected application by keyboard. Following keys are intecepted:
+ * * A - Previous application
+ * * D - Next application
+ * * Enter - Launch application
+ * * 1 - 7 - Launch application 1-7 from radial menu starting from 12 o'clock application in clockwise direction
+ * @class keyControl
+ * @static
+ **/
+var KeyControl = {
+	/**
+	 * Define selected sector (pie, app).
+	 * @property homeScreenselectedIndex
+	 * @type int
+	 * @default 1
+	 **/
+	homeScreenselectedIndex: 1,
+	/**
+	 * Indicate if some sector is selected.
+	 * @property sectionHighlited
+	 * @type bool
+	 * @default false
+	 **/
+	sectionHighlited: false,
+	/**
+	 * Timer for reset highlited pie after predefined timer interval in timerInteval property.
+	 * @property timer
+	 * @type Object
+	 * @default null
+	 **/
+	timer: null,
+	/**
+	 * Define interval for unhighlight and unselect selected sector if keyboard is inactive more than defined interval.
+	 * @property timerIterval
+	 * @type int
+	 * @default 5000 (ms)
+	 **/
+	timerIterval: 5000,
+	/**
+	 * Provides changing of selected sector, highlights it and unhighlight previous higlighted. Also provides setting of timer.
+	 * @method changeIndex
+	 * @param direction {string} Could be 'prev', 'next' for change highigting for prev or next sector and 'null' only for unhighligting sector
+	 **/
+	changeIndex: function (direction) {
+		"use strict";
+		var i = 0;
+		for (i = 0; i < areasDefinitions.length; i++) {
+			if (areasDefinitions[i].sectorId !== null) {
+				$('.sector' + areasDefinitions[i].sectorId).removeClass('selected');
+			}
+		}
+		if (direction !== null) {
+			if (KeyControl.sectionHighlited) {
+				clearTimeout(KeyControl.timer);
+				KeyControl.timer = setTimeout(function() { KeyControl.changeIndex(); }, KeyControl.timerIterval);
+				switch (direction) {
+				case 'prev':
+					KeyControl.prevIndex();
+					break;
+				case 'next':
+					KeyControl.nextIndex();
+					break;
+				}
+				$('.sector' + KeyControl.homeScreenselectedIndex).addClass('selected');
+			} else {
+				KeyControl.sectionHighlited = true;
+				$('.sector' + KeyControl.homeScreenselectedIndex).addClass('selected');
+				KeyControl.timer = setTimeout(function() { KeyControl.changeIndex(); }, KeyControl.timerIterval);
+			}
+		} else {
+			KeyControl.sectionHighlited = false;
+		}
+	},
+	/**
+	 * Provides changing index of selected sector to next one in circle.
+	 * @method nextIndex
+	 * **/
+	nextIndex: function () {
+		"use strict";
+		KeyControl.homeScreenselectedIndex++;
+		if (KeyControl.homeScreenselectedIndex > 7) {
+			KeyControl.homeScreenselectedIndex = 1;
+		}
+	},
+	/**
+	 * Provides changing index of selected sector to previous one in circle.
+	 * @method prevIndex
+	 **/
+	prevIndex: function () {
+		"use strict";
+		KeyControl.homeScreenselectedIndex--;
+		if (KeyControl.homeScreenselectedIndex < 1) {
+			KeyControl.homeScreenselectedIndex = 7;
+		}
+	},
+	/**
+	 * Provides start of app by confirmation of selected sector with keyboard.
+	 * @method prevIndex
+	 **/
+	confirmed: function () {
+		"use strict";
+		if (KeyControl.sectionHighlited) {
+			switch (KeyControl.homeScreenselectedIndex) {
+			case 1:
+				onFrameClick(areasDefinitions[1]);
+				break;//maps
+			case 2:
+				onFrameClick(areasDefinitions[2]);
+				break;//maps
+			case 3:
+				onFrameClick(areasDefinitions[3]);
+				break;//musicPlayer
+			case 4:
+				onFrameClick(areasDefinitions[4]);
+				break;//sdl
+			case 5:
+				onFrameClick(areasDefinitions[5]);
+				break;//phone
+			case 6:
+				onFrameClick(areasDefinitions[6]);
+				break;//store
+			case 7:
+				onFrameClick(areasDefinitions[7]);
+				break;//dashboard
+			}
+		}
+	}
+};
+
+/**
+ * Provides catching and sorting of keyboard events.
+ * @method $(document).keypress
+ * @param callback {function} For calling functions on specific key press.
+ * @static
+ **/
+$(document).keypress(function (event) {
+	"use strict";
+	switch (event.keyCode) {
+	case 97:
+		KeyControl.changeIndex('prev'); // a
+		break;
+	case 100:
+		KeyControl.changeIndex('next');  // d
+		break;
+	case 13:
+		KeyControl.confirmed();
+		break;
+	}
+});
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..1c397c6
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,236 @@
+/*global Bootstrap, evalInstalledApps, appList:true, wrapper, viewPort */
+
+/**
+ * Home screen application is launched after system is completely booted up and provides access to available applications as well as to selected information from
+ * car CAN bus (via {{#crossLink "Bootstrap/carIndicator:property"}}{{/crossLink}} object). Hover and click on elements in images below to navigate to components of Home screen application.
+ *
+ * <img id="Image-Maps_1201312180420487" src="../assets/img/homescreen.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="0,159,644,961" href="../classes/actionCatcher.html" alt="Action catcher" title="Action catcher" />
+ *     <area shape="rect" coords="573,1,644,76" href="../modules/Settings.html" alt="Settings" title="Settings"    />
+ *   </map>
+ * @module HomescreenApplication
+ * @main HomescreenApplication
+ **/
+
+/**
+ * Provides inicialization of application and startup animations.
+ * @class main
+ * @static
+ **/
+
+var isPc = true,
+    audioVolumeService,
+    audioObj;
+
+var bootstrap;
+
+if (typeof tizen !== 'undefined') {
+    isPc = false;
+}
+//main
+if (!window.intelIVI) {
+    window.intelIVI = {};
+}
+var animationOngoing = false;
+
+/**
+ * Initialize plugins, register events for Homescreen app.
+ * @method init
+ * @static
+ **/
+var init = function() {
+    "use strict";
+
+    bootstrap = new Bootstrap(function(status) {
+        $('#dateTime').ClockPlugin('init', 60);
+        $('#dateTime').ClockPlugin('startTimer');
+
+        $('#bottomPanel').bottomPanel('init', true);
+        $("#topBarIcons").topBarIconsPlugin('init', 'dashboard');
+
+        evalInstalledApps();
+        window.intelIVI.main.init();
+
+        bootstrap.carIndicator.addListener({
+            onBatteryStatusChanged: function(newValue) {
+                var newBatteryStatus = newValue.toString() + "%";
+                $('#batteryStatus').html(newBatteryStatus);
+                var newBatteryRange = "~" + Math.round(((newValue / 100) * bootstrap.carIndicator.status.fullBatteryRange)).toString() + " MI";
+                $('#batteryRange').html(newBatteryRange);
+            },
+            onOutsideTempChanged: function(newValue) {
+                $("#weatherStatus").html(newValue + "°C");
+            },
+            onInsideTempChanged: function(newValue) {
+                $("#fanStatus").html(newValue + "°C");
+            },
+            onSpeedChanged: function(newValue) {
+                $("#homeScrSpeed").html(newValue);
+            },
+            onFullBatteryRange: function() {
+
+            }
+        });
+        bootstrap.themeEngine.addStatusListener(function() {
+            appList = [];
+            evalInstalledApps();
+        });
+
+    });
+
+    /* fixed webkit animation bugs */
+    window.setTimeout(function() {
+        window.setInterval(function() {
+            $("#innerRing").removeClass("rollLeft");
+            $("#outerRing").removeClass("rollRight");
+            window.setTimeout(function() {
+                $("#innerRing").addClass("rollLeft");
+                $("#outerRing").addClass("rollRight");
+            }, 50);
+
+        }, 10000);
+   }, 1000);
+    window.setTimeout(function() {
+        window.setInterval(function() {
+          $('#wrapper .step9').removeClass('liveBg');
+            window.setTimeout(function() {
+                $('#wrapper .step9').addClass('liveBg');
+            }, 50);
+
+        }, 7000);
+    }, 500);
+    /* end fixed webkit animation bugs */
+};
+
+$(function() {
+    "use strict";
+    // debug mode - window.setTimeout("init()", 20000);
+    init();
+});
+
+/**
+ * Store state of audio plugin before application closing.
+ * @method window.onbeforeunload
+ * @static
+ **/
+window.onbeforeunload = function() {
+    "use strict";
+    $('#audioPlayer').audioAPI('setStatusAll');
+};
+
+/**
+ * Provides inicialization of application content and starts animation.
+ * @class intelIVI.main
+ * @static
+ **/
+window.intelIVI.main = (window.intelIVI.main || {
+
+    /**
+     * Calls initialization of content.
+     * @method init
+     **/
+
+    init: function() {
+        "use strict";
+        var viewPort = window.intelIVI.corpus.init();
+        document.body.appendChild(viewPort);
+        window.intelIVI.utility.startAnimation(1);
+    },
+    /**
+     * Provides reloading of content.
+     * @method counterEnd
+     **/
+
+    counterEnd: function() {
+        "use strict";
+        window.location.reload();
+    }
+});
+
+function untouchable(param) {
+    "use strict";
+
+    setTimeout(function() {
+        animationOngoing = false;
+    }, param);
+}
+
+/**
+ * Provides initialization of animated application components.
+ * @class intelIVI.utility
+ * @static
+ **/
+window.intelIVI.utility = (window.intelIVI.utility || {
+    /**
+     * Starts initial animations on Homescreen.
+     * @method startAnimation
+     **/
+
+    startAnimation: function(index) {
+        "use strict";
+        $('#wrapper .step' + (index - 2)).css('opacity', '0');
+        $('#wrapper .step' + index).css('opacity', '0.4');
+        if (index === 10) {
+            $('#indicator').addClass('showI');
+            window.intelIVI.utility.showContent(1);
+            return;
+        }
+        var time = 40;
+        setTimeout(function() {
+            index++;
+            window.intelIVI.utility.startAnimation(index);
+        }, time);
+    },
+    /**
+     * Shows animated content pies one by one.
+     * @method showContent
+     **/
+
+    showContent: function(index) {
+        "use strict";
+        $('#content_ul .sector' + index).css('opacity', '1');
+        if (index === 4) {
+            $('#bottomPanel').addClass('showBP');
+            $('#dateTime').addClass('showDT');
+            $('#topBarIcons').addClass('showTBI');
+        }
+        if (index === 8) {
+            $('#wrapper .step9').css('opacity', '0.4');
+            $('#wrapper .step9').addClass('liveBg');
+            return;
+        }
+        setTimeout(function() {
+            index++;
+            window.intelIVI.utility.showContent(index);
+        }, 80);
+    }
+});
+
+/**
+ * Provides initialization of pie.
+ * @class intelIVI.corpus
+ * @static
+ **/
+window.intelIVI.corpus = (window.intelIVI.corpus || {
+    /**
+     * Create HTML elements of pie.
+     * @method init
+     **/
+    init: function() {
+        "use strict";
+        var i;
+        for (i = 1; i < 10; i++) {
+            var viewPortBg = document.createElement('div');
+            viewPortBg.className = "backGround step" + i;
+            /*global wrapper*/
+            wrapper.appendChild(viewPortBg);
+        }
+        /* global viewPort*/
+        wrapper.appendChild(viewPort);
+        return wrapper;
+    }
+});
\ No newline at end of file
diff --git a/js/predefAppModel.js b/js/predefAppModel.js
new file mode 100644
index 0000000..c4ab6be
--- /dev/null
+++ b/js/predefAppModel.js
@@ -0,0 +1,152 @@
+/**
+ * Contains area definitions for applications radial menu and apps definitions.
+ * @class predefAppModel
+ * @module HomescreenApplication
+ **/
+/**
+ * Define center point of radial menu
+ * @property centerPoint
+ * @type Object
+ * @default {x: 360, y: 675}
+ * @static
+ **/
+var centerPoint = {x: 360, y: 675};
+
+/**
+ * Definitions of radial pie.
+ * Possible properties in contained Objects:
+ * name, id, action, sectorID, iconPath, shape, sc, lc, sa, la
+ * @property areasDefinitions
+ * @type Array
+ **/
+/**
+ * Name of an application
+ * @property name
+ * @type string
+ **/
+/**
+ * Id of an application
+ * @property id
+ * @type string
+ **/
+/**
+ * Action after click to defined area.
+ * @property action
+ * @type function
+ **/
+/**
+ * Sector id in context to homescreen pie sectors
+ * @property sectorID
+ * @type int
+ **/
+/**
+ * Path to app icon
+ * @property iconPath
+ * @type string
+ **/
+/**
+ * Define shape of clicking area
+ * @property shape
+ * @type string
+ **/
+/**
+ * Small circle - define distance from center, where pie sector starts (influence only if shape is pieWithoutCenter)
+ * @property sc
+ * @type int
+ **/
+/**
+ * Large circle - define distance from center, where pie sector ends
+ * @property lc
+ * @type int
+ **/
+/**
+ * Start angle - define starting ange of pie sector. Angle is based on zero angle(zero angle has a line, which is horizontal and starts in the center point) (influence only if shape is pieWithoutCenter).
+ * @property sa
+ * @type int
+ **/
+/**
+ * End angle - define ending angle of pie sector (influence only if shape is pieWithoutCenter).
+ * @property la
+ * @type int
+ **/
+var areasDefinitions = [ {
+	name: 'center',
+	id: null,
+	action: function () {
+		"use strict";
+		$("#homeScrAppGridView").fadeIn();
+	},
+	sectorId: 0,
+	lc: 70,
+	shape: 'cenerCircle'
+}, {
+	name: 'navigation',
+	id: 'intelPoc11.navigation',
+	iconPath: '../navigation/icon.png',
+	sectorId: 1,
+	sc: 104,
+	lc: 497,
+	sa:	61,
+	la:	117,
+	shape: 'pieWithoutCenter'
+}, {
+	name: "airconditioning",
+	id: 'intelPoc16.HVAC',
+	iconPath: '../dashboard/icon.png',
+	sectorId: 2,
+	sc: 94,		//small circle border
+	lc: 437,	//large circle border
+	sa:	11,		//smaller angle based on horizontal line which starts in center and continue right (right border)
+	la:	55,		//larger angle (left border)
+	shape: 'pieWithoutCenter'
+}, {
+	name: 'MultimediaPlayer',
+	id: 'intelPoc14.MultimediaPlayer',
+	iconPath: '../musicplayer/icon.png',
+	sectorId: 3,
+	sc: 80,
+	lc: 392,
+	sa:	321,
+	la:	359.9,
+	shape: 'pieWithoutCenter'
+}, {
+	name: 'SmartDeviceLink',
+	id: 'intelPoc17.SDL',
+	iconPath: '../smartdevicelink/icon.png',
+	sectorId: 4,
+	sc: 80,
+	lc: 384,
+	sa:	268,
+	la:	306,
+	shape: 'pieWithoutCenter'
+}, {
+	name: 'phone',
+	id: 'intelPoc15.phone',
+	iconPath: '../phone/icon.png',
+	sectorId: 5,
+	sc: 82,
+	lc: 364,
+	sa:	217,
+	la:	264,
+	shape: 'pieWithoutCenter'
+}, {
+	name: 'store',
+	id: 'intelPoc13.Store',
+	iconPath: '../store/icon.png',
+	sectorId: 6,
+	sc: 82,
+	lc: 364,
+	sa:	170,
+	la:	212,
+	shape: 'pieWithoutCenter'
+}, {
+	name: 'dashboard',
+	id: 'intelPoc12.Dashboard',
+	iconPath: '../dashboard/icon.png',
+	sectorId: 7,
+	sc: 105,
+	lc: 433,
+	sa:	126,
+	la:	160,
+	shape: 'pieWithoutCenter'
+} ];
\ No newline at end of file
diff --git a/packaging/html5-ui-homescreen.changes b/packaging/html5-ui-homescreen.changes
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/packaging/html5-ui-homescreen.changes
@@ -0,0 +1 @@
+
diff --git a/packaging/html5-ui-homescreen.spec b/packaging/html5-ui-homescreen.spec
new file mode 100644
index 0000000..c18cd90
--- /dev/null
+++ b/packaging/html5-ui-homescreen.spec
@@ -0,0 +1,36 @@
+Name:       html5_UI_Homescreen
+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/html5UIHomescreen.wgt;
+
+%postun
+    wrt-installer -un html5POC05.Homescreen
+
+%files
+%defattr(-,root,root,-)
+/opt/usr/apps/.preinstallWidgets/html5UIHomescreen.wgt