Adding the code

10 files changed, 521 insertions, 0 deletions

diff --git a/apps/youtube/css/appbase.css b/apps/youtube/css/appbase.css
new file mode 100644
index 0000000..ad45a26
--- /dev/null
+++ b/apps/youtube/css/appbase.css
@@ -0,0 +1,219 @@
+/* CSS Reset + Font */
+body {
+	font-family:Segoe UI;
+	margin:0px;
+	padding:0px;
+}
+img, a {
+	border:none;
+	outline:none;
+}
+/* Splashscreen */
+#splashscreen {
+	position:fixed;
+	top:0;
+	width:100%;
+	height:100%;
+	color:#1E1E1E;	
+	background-image:url('../splashscreen.png');
+	background-position:center;
+	background-color:#1E1E1E;
+	background-repeat:no-repeat;
+	animation:splash 4s;
+	-ms-animation:splash 4s;
+	-webkit-animation:splash 4s;
+	-o-animation:splash 4s;
+	opacity:0;
+	z-index:-1;
+}
+@keyframes splash {
+	from {
+		z-index:6;
+		opacity: 1;
+	}
+	66% {
+		opacity: 1;
+	}
+	to {
+		opacity:0;
+		z-index:1;
+		display:none;
+	}
+}
+@-webkit-keyframes splash {
+	from {
+		z-index:6;
+		opacity: 1;
+	}
+	66% {
+		opacity: 1;
+	}
+	to {
+		opacity:0;
+		z-index:1;
+		display:none;
+	}
+}
+@-ms-keyframes splash {
+	from {
+		z-index:6;
+		opacity: 1;
+	}
+	66% {
+		opacity: 1;
+	}
+	to {
+		opacity:0;
+		z-index:1;
+		display:none;
+	}
+}
+@-o-keyframes splash {
+	from {
+		z-index:2;
+		opacity: 1;
+	}
+	66% {
+		opacity: 1;
+	}
+	to {
+		opacity:0;
+		z-index:1;
+		display:none;
+	}
+}
+/* Charms */
+/* Hover areas */
+#hoverarea {
+	position:fixed;
+	top:0px;
+	right:0px;
+	width:15px;
+	height:15px;
+}
+#bottomhoverarea {
+	position:fixed;
+	bottom:0px;
+	right:0px;
+	width:15px;
+	height:15px;
+}
+#starthoverarea {
+	position:fixed;
+	bottom:0px;
+	left:0px;
+	width:15px;
+	height:15px;
+}
+/* Charms bar */
+#charmsbar {
+	display:none;
+	background-color:#111111;
+	position:fixed;
+	padding:5% 0;
+	top:0px;
+	right:0px;
+	height:100%;
+	width: 86px;
+}
+/* Start button */
+#startbutton {
+	display:none;
+	position:fixed;
+	left:0px;
+	bottom:0px;
+	margin:0;
+	padding:0;
+}
+/* Date and time on charms */
+#datetime {
+	display:none;
+	position:fixed;
+	left:50px;
+	bottom:50px;
+	width:490px;
+	height:139px;
+	background-color: rgba(17,17,17,0.96);
+	color:#FFFFFF;
+}
+#ctime {
+	position:absolute;
+	left:70px;
+	bottom:19px;
+	font-family: Segoe UI Light;
+	font-size: 64pt;
+}
+#date {
+	margin-top:20px;
+	margin-right:20px;
+	float:right;
+	font-size:24pt;
+}
+#iconnetwork {
+	position:absolute;
+	top:35px;
+	left:25px;
+}
+#iconbattery {
+	position:absolute;
+	bottom:35px;
+	left:32px;
+}
+
+/* Text styling on Settings, share charms */
+.charms span {
+	line-height:40px;
+}
+.ch1 {
+	font-family:Segoe UI Semilight;
+	font-size:28px;
+	margin-bottom:25px;
+}
+.ch2 {
+	font-size:11pt;
+	margin-bottom:25px;
+} 
+.ch2d {
+	font-size:11pt;
+	color:#A8A8A8;
+	margin-bottom:25px;
+} 
+.sharing {
+	font-size:14pt;
+}
+/* Close button on settings, share charms */
+.closecharms {
+	float:right;
+	height:32px !important;
+	width:32px !important;
+	box-shadow:none !important;
+	background-image: url(../img/charmsbar/close.png);
+}
+/*.closecharms:hover {
+	background-image: url(../img/charmsbar/close-hover.png);
+}*/
+.closecharms:active {
+	background-image: url(../img/charmsbar/close-active.png);
+}
+/* Charms */
+.charms {
+	z-index:2;
+	background-color:#001E4E;
+	padding : 40px;
+	position:fixed;
+	top:0px;
+	right:0px;
+	height:100%;
+	width: 345px;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	display:none;
+	color:#FFF;
+}
+/* Settings charms */
+#settingscharms {
+
+}
\ No newline at end of file
diff --git a/apps/youtube/css/style.css b/apps/youtube/css/style.css
new file mode 100644
index 0000000..6f70a3c
--- /dev/null
+++ b/apps/youtube/css/style.css
@@ -0,0 +1,120 @@
+body {
+    background-image:url('img/bg.png');
+    background-color:rgb(235, 235, 235);
+    color:#000000;
+    font-family:Segoe UI;
+    margin:0px;
+    padding:0px;
+}
+ 
+.search_input {
+    font-family: Segoe UI;
+    position: relative;
+    overflow: hidden;
+    height: 35px;
+    margin-left:15%;
+    margin-top:15px;
+    padding:8px;
+    width:70%;
+    font-size: 14px;
+    line-height: 30px;
+    background-color: rgb(255, 255, 255);
+    -moz-box-sizing: border-box;
+    border-radius:3px;
+    transition: border-color 0.2s ease 0s;
+    border: 1px solid rgb(204, 204, 204);
+    box-shadow: 0px 1px 2px rgb(238, 238, 238) inset;
+    outline: medium none;
+    display:inline-block;
+    transition:all 1s;
+}
+.search_input:hover {
+    border-color:rgb(185, 185, 185);
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3) inset;
+}
+.search_input:focus {
+    border-color:rgb(28, 98, 185);
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3) inset;
+}
+#hugelogo {
+    margin-top:70px;
+    margin-bottom: 60px;
+    display:block;
+    margin-left:auto;
+    margin-right:auto;
+    width:400px;
+}
+#logo {
+    display: none;
+    position:absolute;
+    margin:10px;
+}
+#input_box {
+    text-align:left;
+}
+#viewer {
+    display:none;
+    position:absolute;
+    background-color:#FFF;
+    bottom:0px;
+    border:none;
+}
+.result {
+    background-color:#000;
+    margin-top:25px;
+    min-height:218px;
+    width:340px;
+    border:solid 10px #ffffff;
+    float:left;
+    margin-left:10px;
+    overflow:hidden;
+    overflow:auto;
+    border-radius:3px;
+}
+.result:hover {
+    box-shadow:0px 1px 2px #CCC;
+}
+.result a {
+    display:inline-block;
+    width:340px;
+    color:#36C;
+    text-decoration:none;
+}
+.result a:hover {
+    text-decoration:underline;
+}
+#video {
+    background-color:#FFFFFF;
+    margin-left:auto;
+    margin-right: auto;
+    width:90%;
+}
+#close {
+    float:right;
+    display:none;
+    margin:1.5%;
+}
+ 
+#title {
+    background-color:#fff;
+    font-size:14px;
+    text-align:left;
+    padding-bottom:8px;
+    height:30px;
+    overflow:hidden;
+}
+#no {
+    margin-top:50px;
+    padding:20px;
+    background-color:#F23838;
+    font-size:25px;
+    font-family: Segoe UI Light;
+    color:#FFF;
+    border:1px solid #C40000;
+    border-radius:3px;
+}
+#tipbox {
+    font-size:10pt;
+    width:600px;
+    margin-top:40px;
+}
\ No newline at end of file
diff --git a/apps/youtube/favicon.ico b/apps/youtube/favicon.ico
new file mode 100644
index 0000000..977887d
--- /dev/null
+++ b/apps/youtube/favicon.ico
diff --git a/apps/youtube/img/bg.png b/apps/youtube/img/bg.png
new file mode 100644
index 0000000..8eee515
--- /dev/null
+++ b/apps/youtube/img/bg.png
diff --git a/apps/youtube/img/close.png b/apps/youtube/img/close.png
new file mode 100644
index 0000000..3ede172
--- /dev/null
+++ b/apps/youtube/img/close.png
diff --git a/apps/youtube/img/hugelogo.png b/apps/youtube/img/hugelogo.png
new file mode 100644
index 0000000..6acbd1e
--- /dev/null
+++ b/apps/youtube/img/hugelogo.png
diff --git a/apps/youtube/img/smalllogo.png b/apps/youtube/img/smalllogo.png
new file mode 100644
index 0000000..be16752
--- /dev/null
+++ b/apps/youtube/img/smalllogo.png
diff --git a/apps/youtube/index.html b/apps/youtube/index.html
new file mode 100644
index 0000000..3caa19d
--- /dev/null
+++ b/apps/youtube/index.html
@@ -0,0 +1,131 @@
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
+<html xmlns="http://www.w3.org/1999/xhtml"> 
+<head> 
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
+    <title>YouTube</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <!--Title of the app -->
+    <title></title>
+
+    <!--Stylesheet that styles the charms bar and the startbutton -->
+    <link rel="stylesheet" href="css/appbase.css"/>
+    <link rel="shortcut icon" href="favicon.ico"/>
+
+    <!--Script that powers the charms bar-->
+    <script>
+    function visibility(visibility , target) {
+        document.getElementById(target).style.display=visibility;
+    }
+    </script>
+    <script>
+    function doublevisibility(visibility , target , target2) {
+        document.getElementById(target).style.display=visibility;
+        document.getElementById(target2).style.display=visibility;
+    }
+    </script>
+	<link rel="stylesheet" href="css/style.css"/>
+	<link rel="stylesheet" href="css/appbase.css"/>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
+    <script src="js/youtubeapi.js"></script> 
+
+    <script>
+    $(document).ready(function() {
+        $(".search_input").keyup(function() {
+            $("#hugelogo").fadeOut();
+            $("#viewer").fadeOut();
+            $("#close").fadeOut();
+            $("#tipbox").fadeOut();
+            $("#logo").fadeIn();
+            $("#video").fadeIn();
+            $("viewer").src='';
+        });
+        $("#close").click(function() {
+            $("#close").fadeOut();
+            $("#viewer").fadeOut();
+            $("#video").fadeIn();
+            $("viewer").src='';
+        });
+    }); 
+    </script>
+    <script>
+    function showframe() {
+    	document.getElementById('viewer').style.display='block';
+    	document.getElementById('close').style.display='block';
+    	document.getElementById('video').style.display='none';
+    }
+    </script>
+</head> 
+<body> 
+<div id="splashscreen"></div>
+<div align="center"> 
+
+    <div id="input_box">
+        <img src="img/hugelogo.png" width="400px" height="161.5px" id="hugelogo"/>
+        <img src="img/smalllogo.png" id="logo"/>
+        <input type="text" class='search_input' placeholder="Search"/>
+        <img src="img/close.png" id="close"/>
+    </div>
+    <div id="tipbox">
+        Welcome to the YouTube App! To start a search, type in the search box. The results should automatically appear. To view a video, click on the video title. To close the video, click on the close button located on the top-right corner. Enjoy!
+    </div>
+
+    <iframe src="" id="viewer" name="viewer" height="90%" width="100%" frameborder="0">Your browser doesn't support iframes.</iframe>
+    <div id="video"> 
+ 
+    </div> 
+
+</div>
+    <!-- CHARMS BAR CODE -->
+<div id="charmsbar" onmouseover="doublevisibility('inline','charmsbar','datetime')" onmouseout="doublevisibility('none','charmsbar','datetime')" >
+    <img src="../../common/img/charmsbar/search.png" onclick="visibility('block','searchcharms')" onmouseover="this.src='../../common/img/charmsbar/search-hover.png'" onmouseout="this.src='../../common/img/charmsbar/search.png'"/><br/>
+    <img src="../../common/img/charmsbar/share.png" onclick="visibility('block','sharecharms')" onmouseover="this.src='../../common/img/charmsbar/share-hover.png'" onmouseout="this.src='../../common/img/charmsbar/share.png'"/><br/>
+    <a href="../../start/index.html"><img src="../../common/img/charmsbar/start.png" onmouseover="this.src='../../common/img/charmsbar/start-hover.png'" onmouseout="this.src='../../common/img/charmsbar/start.png'"/></a><br/>
+    <img src="../../common/img/charmsbar/devices.png" onmouseover="this.src='../../common/img/charmsbar/devices-hover.png'" onmouseout="this.src='../../common/img/charmsbar/devices.png'"/><br/>
+    <img src="../../common/img/charmsbar/settings.png" onclick="visibility('block','settingscharms')" onmouseover="this.src='../../common/img/charmsbar/settings-hover.png'" onmouseout="this.src='../../common/img/charmsbar/settings.png'"/><br/>
+    </div>
+    <div id="datetime">
+    <img src="../../common/img/charmsbar/network.png" id="iconnetwork" height="24px" width="24px"/>
+    <img src="../../common/img/charmsbar/battery.png" id="iconbattery"/>
+    <span id="ctime"></span>
+    <script>
+    function clock() {
+        var digital = new Date();
+        var hours = digital.getHours();
+        var minutes = digital.getMinutes();
+        var seconds = digital.getSeconds();
+        var amOrPm = "AM";
+        if (hours > 11) amOrPm = "PM";
+        if (hours > 12) hours = hours - 12;
+        if (hours == 0) hours = 12;
+        if (minutes <= 9) minutes = "0" + minutes;
+        if (seconds <= 9) seconds = "0" + seconds;
+        dispTime = hours + ":" + minutes ;
+        document.getElementById('ctime').innerHTML = dispTime;
+        setTimeout("clock()", 1000);
+    }
+    window.onload=clock;
+    </script>
+    <div id="date">
+      <script>
+
+ var dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
+
+ var monName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
+
+ var now = new Date
+
+ document.write("" + dayName[now.getDay()] + "<br/>" +"<span id=month>" + monName[now.getMonth()] + " "+now.getDate() +"")
+      </script>
+    </div>
+    </div>
+    <div id="startbutton" onmouseout="visibility('none','startbutton')">
+    <a href="../../start/index.html"><img src="../../common/img/charmsbar/startbutton.png"/></a>
+    </div>
+    <div id="hoverarea" onmouseover="doublevisibility('inline','charmsbar','datetime')" class="hotcorner"></div>
+    <div id="bottomhoverarea" onmouseover="doublevisibility('inline','charmsbar','datetime')" class="hotcorner"></div>
+    <div id="starthoverarea" onmouseover="visibility('inline','startbutton')" class="hotcorner"></div>
+ 
+</body> 
+</html> 
+ 
diff --git a/apps/youtube/js/youtubeapi.js b/apps/youtube/js/youtubeapi.js
new file mode 100644
index 0000000..e2c63e4
--- /dev/null
+++ b/apps/youtube/js/youtubeapi.js
@@ -0,0 +1,51 @@
+$(document).ready(function()
+    {
+    $(".search_input").focus();
+    $(".search_input").keyup(function() 
+    {
+     
+     $("#video").html('');
+    var search_input = $(this).val();
+    var keyword= encodeURIComponent(search_input);
+     
+    var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=12&v=2&alt=jsonc'; 
+     
+     
+    $.ajax({
+    type: "GET",
+    url: yt_url,
+    dataType:"jsonp",
+    success: function(response)
+    {
+    if(response.data.items)
+    {
+     
+     
+     
+    $.each(response.data.items, function(i,data)
+    {
+    var video_id=data.id;
+    var video_title=data.title;
+    var video_viewCount=data.viewCount;
+     
+     
+     
+    var video_frame="<img src='http://i.ytimg.com/vi/"+video_id+"/mqdefault.jpg'/>";
+    var final="<div class='result'><div>"+video_frame+"</div><a href='http://www.youtube.com/embed/"+video_id+"' target='viewer' id='title' onclick='showframe()' title='"+video_title+"'>"+video_title+"</a></div>";
+     
+    $("#video").append(final);
+     
+    });
+     
+     
+    }
+    else
+    {
+    $("#video").html("<div id='no'>No video found.</div>");
+    }
+    }
+     
+    });
+    });    
+    });
+     
\ No newline at end of file
diff --git a/apps/youtube/splashscreen.png b/apps/youtube/splashscreen.png
new file mode 100644
index 0000000..83a9209
--- /dev/null
+++ b/apps/youtube/splashscreen.png