added ajax loading for streams

static/main.css

@@ -20,11 +20,11 @@ h1 {
 }
 
 form {
-	padding: 5px;
 	text-align: center;
+	display: inline;
 }
 
-input {
+input, button {
 	background-color: #666;
 	border: 1px solid #999;
 	border-radius: 5px;
@@ -34,6 +34,21 @@ input {
 	vertical-align: middle;
 }
 
+button {
+	margin: 5px;
+}
+
+button:hover {
+        background-color: #999;
+        border: 1px solid #666;
+}
+
+button:active {
+        background-color: #999;
+        border: 1px solid #666;	
+	color: #000;
+}
+
 label {
 	vertical-align: middle;
 }

static/main.js

@@ -101,6 +101,10 @@ function resetSearch() {
 	searchfield.focus();
 }
 
+function playStream(){
+	var streamUrl = document.querySelector("#streaming-url").value;
+	ajaxRequest("/?video="+encodeURI(streamUrl));	
+}
 
 function hideSections() {
 	var sections = document.querySelectorAll("section");

templates/index.html

@@ -42,15 +42,14 @@
 				{% endfor %}
 			</section>
 			<section id="streams" style="display:none;">
-				<form action="/" method="GET">
-					<label for="video">Stream URL</label>
-					<input type="text" name="video" />
-					<input type="submit" value="Play" />
-				</form>
-				<form action="/" method="GET">
-					<input type="hidden" name="killvideo" value="yes" />
-					<input type="submit" name="submit" value="Terminate videos" />
-				</form>
+				<div>
+					<form>
+						<label for="video">Stream URL</label>
+						<input id="streaming-url" type="text" name="video" placeholder="paste stream url here..." />
+					</form>
+					<button onclick="playStream();">Play!</button>
+				</div>
+				<button name="submit" onclick="ajaxRequest('/?killvideo=yes');">Terminate videos</button>
 			</section>
 			<section id="voice" style="display:none;">
 				<form action="/say/" method="POST">