index.html at WINR - An iTunes Net Remote

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>WINR [Track]</title>
	<link rel="stylesheet" type="text/css" href="styles/style.css" />
	<link rel="icon" href="images/favicon.gif" type="image/x-icon">
	<link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon">
	<script language="Javascript">		
		var secs;
		var timerID = null;
		var timerRunning = false;
	
		function ajaxInit(strURL) {
			var req;
			
			if (window.XMLHttpRequest)  // Not IE
			{
				req = new XMLHttpRequest();
			}
			else if (window.ActiveXObject)  // IE
			{
				req = new ActiveXObject('Microsoft.XMLHTTP');
			}
			
			req.open('GET', strURL, true);
			
			// only required for POST requests
			// req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			return req;
		}
	
		function playPause()
		{
			var req = ajaxInit('scripts/message.php?msg=playPause');
			req.onreadystatechange = function()
			{
				if (req.readyState == 4)
					updateGUI();
			}
			req.send(null);
		}
		
		function previousTrack() 
		{
			var req = ajaxInit('scripts/message.php?msg=previousTrack');
			req.onreadystatechange = function() 
			{
				if (req.readyState == 4) 
					updateGUI();
			}
			req.send(null);
		}
		
		function nextTrack() 
		{
			var req = ajaxInit('scripts/message.php?msg=nextTrack');
			req.onreadystatechange = function() 
			{
				if (req.readyState == 4) 
					updateGUI();
			}
			req.send(null);
		}
		
		function playTrack(track)
		{
			var req = ajaxInit('scripts/message.php?msg=playTrack&args=' + track);
			req.onreadystatechange = function() 
			{
				if (req.readyState == 4) 
					updateGUI();
			}
			req.send(null);
		}
		
		function refresh()
		{
			var req = ajaxInit('scripts/getPlaylist.php');
			req.onreadystatechange = function() 
			{
				if (req.readyState == 4)
				{
					document.getElementById("songs").innerHTML = req.responseText;
//					document.getElementById("consoleR").innerHTML = req.responseText;
				}
			}
			req.send(null);
			
			/*
			var req = ajaxInit('scripts/songs.php?msg=displayPlaylist');
			req.onreadystatechange = function() 
			{
				if (req.readyState == 4)
				{
					document.getElementById("songs").innerHTML = req.responseText;
//					document.getElementById("consoleR").firstChild.data = req.responseText;
				}
			}
			req.send(null);
			*/
		}
		
		function updateGUI()
		{
			var req = ajaxInit('scripts/update.php');
			req.onreadystatechange = function() 
			{
				if (req.readyState == 4)
				{
					// line 0: state(playing/paused)
					// line 1: track
					// line 2: artist
					
					var result = req.responseText.split("\n");
					
					if(result[0] == "playing")
						document.getElementById("playPauseButton").src = "images/pause.png";
					else
						document.getElementById("playPauseButton").src = "images/play.png";
					
					document.getElementById("track").innerHTML = result[1];
					document.getElementById("artist").innerHTML = result[2];
					document.title = "WINR - " + result[1];
					
//					self.setTimeout("updateGUI()", 5000);
				}
			}
			req.send(null);
		}
		
		function goTo(url)
		{
			window.open(url, 'newWindow');
		}
		
		function stopTimer()
		{
			if(timerRunning)
				clearTimeout(timerID);
			timerRunning = false;
		}
		
		function startTimer()
		{
			if (secs==0)
			{
				stopTimer();
				// Here's where you put something useful that's
				// supposed to happen after the allotted time.
				// For example, you could display a message:
				updateGUI();
				resetTimer();
			}
			else
			{
				secs = secs - 1;
//				self.status = secs;
				timerRunning = true;
				timerID = self.setTimeout("startTimer()", 1000);
			}
		}
		
		function resetTimer()
		{
			secs = 12;
			stopTimer();
			startTimer();
		}
		
		function pageInit()
		{
			updateGUI();
			refresh();
			
			resetTimer();
		}
	</script>
	
</head>
<body onLoad="pageInit();">
	<div id="header">
		<div id="status">
			<div id="track">[TRACK]</div>
			<div id="artist">[ARTIST]</div>
		</div>
		<div id="previous" class="toolButton" onClick="previousTrack();">
			<img src="images/previous.png" alt="Previous" />
		</div>
		<div id="playPause" class="toolButton" onClick="playPause();">
			<img id="playPauseButton" src="images/play.png" alt="Play/Pause" />
		</div>
		<div id="next" class="toolButton" onClick="nextTrack();">
			<img src="images/next.png" alt="Next" />
		</div>
		<div id="refresh" class="toolButton" onClick="refresh();">
			<img src="images/refresh.png" alt="Refresh" />
		</div>
		<div id="linkBack" class="toolButton" onClick="goTo('http://winr.sf.net/');">
			<img src="images/logo.png" alt="WINR Homepage" />
		</div>
	</div>
	<div id="playlists">
		<div class="header">Playlists</div>
		<div class="listBox">
			<div class="listItem-even" style="background-color: #A6BCE0;">Current Playlist</div>
			<!--
			<div class="listItem-odd">One</div>
			<div class="listItem-even">Zero</div>
			<div class="listItem-odd">One</div>
			-->
		</div>
	</div>
	<div id="songBox">
		<div class="header">
			<table style="width: 100%; height: 17px;" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td class="column-name">Name</td>
					<td class="column-time" style="border-left: solid 1px #000;">Time</td>
					<td class="column-artist" style="border-left: solid 1px #000;">Artist</td>
					<td class="column-album" style="border-left: solid 1px #000;">Album</td>
				</tr>
			</table>
		</div>
		<div id="songs" class="listBox">
			<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
				<tr class="listItem-even">
					<td class="column-name">Name</td>
					<td class="column-time">Time</td>
					<td class="column-artist">Artist</td>
					<td class="column-album">Album</td>
				</tr>
			</table>
		</div>
	</div>
	
	<!--
	<div id="consoleL">
		hi there left side console
	</div>
	<div id="consoleR">
		hi there right side console
	</div>
	-->
</body>
</html>