1 files changed, 104 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html
new file mode 100755
index 0000000..f396ed4
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
+<script language="javascript" type="text/javascript" src="Server.js"></script>
+<script language="javascript" type="text/javascript" src="Data.js"></script>
+<script>
+$(document).ready(function(){
+	var state = 'rec'; // Rec
+	
+	Server.init();
+
+	Server.dataReceivedCallback = function() {
+		console.log("Loaded");
+		$("#anchor").append(Data.createJQMDomTree()).trigger('create');
+		$.mobile.loading('hide');
+		//http://jquerymobile.com/
+		
+		// end of dataReceivedCallBack
+		};
+	Server.errorCallback = function (msg) {
+		alert (msg);
+                buttonHandler('rec');
+	};
+
+	$.mobile.loading('show');
+	Server.setSort(true);
+	Server.fetchVideoList("/recordings.xml?mode=nodesc");
+
+	removeDomTree = function () {
+	// parent should not be deleted.
+		$("#anchor").children().remove();
+	};
+		
+	buttonHandler = function(btn) {
+		console.log("Click: " + btn);
+		if (state == btn) {
+			console.log("No Change");
+		};
+		$.mobile.loading('show');
+		Data.reset();
+		removeDomTree();
+		switch (btn) {
+		case 'rec':
+			state = 'rec';
+			$('#recbtn').addClass('ui-btn-active');
+			$('#medbtn').removeClass('ui-btn-active');
+			$('#chnbtn').removeClass('ui-btn-active');
+			Server.setSort(true);
+			Server.fetchVideoList("/recordings.xml?mode=nodesc");
+			break;
+		case 'med':
+			state = 'med';
+			$('#medbtn').addClass('ui-btn-active');
+			$('#recbtn').removeClass('ui-btn-active');
+			$('#chnbtn').removeClass('ui-btn-active');
+			Server.setSort(true);
+			Server.fetchVideoList("/media.xml");
+			break;
+		case 'chn':
+			state = 'chn';
+			$('#chnbtn').addClass('ui-btn-active');
+			$('#medbtn').removeClass('ui-btn-active');
+			$('#recbtn').removeClass('ui-btn-active');
+			Server.setSort(false);
+			Server.fetchVideoList("/channels.xml?mode=nodesc");
+			break;
+		};
+	};
+	
+});
+</script>
+<style type="text/css" >
+h2 { margin:1.2em 0 .4em 0; }
+ }
+</style>
+</head>
+
+<body>
+	<div data-role="page" class="type-interior">
+
+		<div data-role="header" data-theme="b">
+			<h1>Recordings</h1>
+		</div> <!-- /header -->
+
+		<div data-role="content">
+			<div class="content-primary" >	
+
+			<div data-role="controlgroup" data-type="horizontal" data-mini="true">
+				<a href="#" id="recbtn" data-role="button" data-transition="fade" class="ui-btn-active" onclick="return buttonHandler('rec')">Recordings</a>
+				<a href="#" id="medbtn" data-role="button" data-transition="fade" onclick="return buttonHandler('med')">Media</a>
+				<a href="#" id="chnbtn" data-role="button" data-transition="fade" onclick="return buttonHandler('chn')">Channels</a>
+			</div>	
+
+			<div id="anchor"/>
+			</div> 
+	</div> 
+</div>
+	</body>
+</html>
+