search works

2 files changed, 127 insertions, 3 deletions

diff --git a/static/base.css b/static/base.css
index df3d295..656d8ef 100644
--- a/static/base.css
+++ b/static/base.css
@@ -1,7 +1,10 @@
 body {
 	background-color: #000;
 	color: #ccc;
+}
+body, input {
 	font-family: 'Cantarell', sans-serif;
+	font-size: 16px;
 }
 a:link, a:visited {
 	color: #08a;
@@ -15,16 +18,95 @@ img {
 	border-style: none;
 	vertical-align: middle;
 }
+form {
+	display: inline;
+	text-align: center;
+}
+input, button {
+	background-color: #050505;
+	border: 1px solid #aaa;
+	color: #eee;
+	padding: 2px 5px;
+}
+input:focus {
+	border: 1px solid #38a;
+}
+input[type="submit"] {
+	background-color: #111;
+	padding: 2px 5px;
+}
+label {
+	cursor: pointer;
+}
 
 header, article {
 	width: 900px;
 	margin: 20px auto;
+	clear: both;
 }
 
 img.aa {
+	float: left;
 	opacity: 0.9;
 }
 
+header {
+	position: relative; /* for #results */
+}
+header label, header input {
+	position: absolute;
+}
+header label[for="user"] {
+	left: 480px;
+	top: 5px;
+}
+header input#user {
+	left: 570px;
+}
+header label[for="song"] {
+	left: 300px;
+	top: 55px;
+}
+header input#song {
+	left: 390px;
+	top: 50px;
+	text-align: center;
+}
+header input[type="submit"] {
+	left: 830px;
+	top: 50px;
+}
+div#results {
+	display: none;
+	position: absolute;
+	width: 428px;
+	height: 560px;
+	left: 392px;
+	top: 82px;
+	background-color: #111;
+	border: 1px solid #aaa;
+	z-index: 1;
+}
+div#results ul {
+	margin: 5px 10px;
+	padding: 0;
+}
+div#results ul li {
+	list-style: none;
+	display: block;
+	height: 50px;
+	margin: 5px 0;
+}
+div#results ul li:hover {
+	background-color: #024;
+}
+div#results ul li img {
+	height: 50px;
+	width: 66px;
+	float: left;
+	margin-right: 10px;
+}
+
 object#player {
 	position: absolute;
 	left: -1px;
@@ -35,6 +117,7 @@ section.song {
 	background-color: #111;
 	padding: 15px 20px;
 	margin-top: 10px;
+	position: relative; /* for remove */
 }
 section.song div.info {
 	margin-bottom: 10px;
@@ -43,6 +126,13 @@ section.song div.info {
 section.song div.user {
 	float: right;
 }
+section.song div.remove {
+	position: absolute;
+	top: 0px;
+	right: 5px;
+	font-weight: bold;
+	cursor: pointer;
+}
 section.song div.thumb {
 	float: left;
 	width: 150px;
diff --git a/static/script.js b/static/script.js
index 1a10f88..c55aff6 100644
--- a/static/script.js
+++ b/static/script.js
@@ -2,9 +2,16 @@ var player;
 var litColor = '#eee';
 var dimmedColor = '#555';
 var interval;
-for (var i = 0; i < ids.length; i++) {
-	drawBar(ids[i]);
-}
+$(document).ready(function () {
+	$('body').click(function (e) {
+		if (e.target.id !== 'results') {
+			$('#results').slideUp(100);
+		}
+	});
+	for (var i = 0; i < ids.length; i++) {
+		drawBar(ids[i]);
+	}
+});
 
 function drawBar(id) {
 	var canvas = document.getElementById(id);
@@ -98,3 +105,30 @@ function showPause(yid) {
 	pause.style.display = 'inline';
 	play.style.display = 'none';
 }
+
+function search(query) {
+	params = {
+		'q': query,
+		'max-results': 10,
+		'v': 2,
+		'strict': true,
+		'alt': 'json',
+		'fields': 'entry(title,media:group(yt:videoid))',
+		'safeSearch': 'none',
+		'key': 'AI39si7SaaRqtvAZTa8lePOq6XC5r7S5Xzp3AB6oYPfeCArPbA4dIq7tSVeuIDwAkcFFDeI3rzNmYxkyN_fg8X_7w800pIvVOA'
+	}
+	$.getJSON('https://gdata.youtube.com/feeds/api/videos', params,
+		function(data) {
+			var entries = data.feed.entry;
+			var items = [];
+			for (var i = 0; i < entries.length; i++) {
+				var title = entries[i].title.$t;
+				var id = entries[i].media$group.yt$videoid.$t;
+				items.push('<li id="r_' + id + '"><img src="http://i.ytimg.com/vi/' + id  + '/1.jpg" alt="' + id + '">' + title + '</li>');
+			}
+			var results = $('#results ul').html(items.join('\n'));
+			$('#results').slideDown(100);
+		}
+	);
+	return false;
+}