summaryrefslogblamecommitdiffstatshomepage
path: root/web/index.html
blob: e21ac49aa887d36d7da92c1a4d0fa692d06bbbfa (plain) (tree)
1
2
3
4
5
6
7
8
9
10
11
12
13


                                                                                                             
                              
                                                     







                                                                            
                                            
                                                      

       
                                                     




































                                                                                  
 

                           

                                                                                                    


                                                                                                                          
   
 








                                                                                    
           




                                                                                                

   


                                 
                         





                                        
                         







                                        
 








                                             

                                                                                                                                                                                                                                                               
             

                                                                                


                                                                                                                                                                                         



                                                                                            
                                                                                     

   










                                                                                    
  
                             
                                                                                                                       
                                                     

                                     
                                                                          

                                            
                                                                       

                                        

                                       




                                           












                                                                                                 
                                                   
                                                                          
                                
                                                                                                              
                         





                                                                      





                                                                                         


                                                                                                         


                                                                                            

         

                                      
                                                                             
      



                              

         
 
                                                                                                        








                                                                                                                                                                  
                                                                                                




                                                                                             
                                                                                          






                                                                                               

                                                                         




































                                                                                                                                                                                                                                     
                                                                                                            

                                     
                                                                                                             









                                                                                                                                       
                                                                                                                           
                                    


                                                                                                                              





                                     
                                                                                                           








                                                                                                                                                                  
                                                                                                




                                                                                             
                                                                                          




















                                                                                                                                         

                                                                                                               

































































                                                                                                                                                          
                                                                                                               
































































                                                                                                                                                          
                




                                                                 
                                                                                                            

                                     
                                                                                                             









                                                                                                                                       
                                                                                                                           
                                    


                                                                                                                                 





                                     
                                                                                                      
                                      
                                           

                                                                                                                                                                  
              
                                                                                                                 


                                                   
                                                                                                

                     
                                                                                             

                     
                                                                                          

                     
                                                                                               



                     
                                                

                                                                 


                                                            
                                                                                                            

                                     
                                                                                                             









                                                                                                                                       

                                                                                                                           


                                                                                                                                

                                     
                     
          
      
 
                                                                                                          








                                                                                                                                                                  
                                                                                                




                                                                                             
                                                                                          













                                                                                               
                                                                                                            

                                     
                                                                                                             









                                                                                                                                       
                                                                                                                           
                                    


                                                                                                                                





                                     













































                                                                                                                                                                  


                                                                                                                                





















                                                                                                                                                                  
                                                                                             




























                                                                                                                                       


                                                                                                                               



































                                                                                                                                                                  
                                                                                             














                                                                                                                                       


                                                                                                                              






































                                                                                                                                                                  
                                                                                             











                                                                                                                                       


                                                                                                                              





                                     
       
       
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="expires" content="-1">  
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>MAME</title>
	<link rel="shortcut icon" href="favicon.ico">  
	<link rel="stylesheet" href="css/jquery.mobile.css">    
	<!-- jQuery and jQuery Mobile -->
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile.js"></script>   
</head>
<body>
<script language="javascript" type="text/javascript">
 
  function updateStatusBar(connectionStatus, isPaused, driverText) {
	if (connectionStatus) {
		// Update every page's connection statusbar.
		$("td#main_statusbar_connectionstatus").html(connectionStatus);
		$("td#command_statusbar_connectionstatus").html(connectionStatus);
		$("td#option_statusbar_connectionstatus").html(connectionStatus);
		$("td#slider_statusbar_connectionstatus").html(connectionStatus);
		$("td#driver_statusbar_connectionstatus").html(connectionStatus);
		$("td#image_statusbar_connectionstatus").html(connectionStatus);
		$("td#info_statusbar_connectionstatus").html(connectionStatus);
		$("td#logs_statusbar_connectionstatus").html(connectionStatus);
	}
	if (isPaused) {
		// Update every page's running/paused statusbar.
		$("td#main_statusbar_ispaused").html(isPaused);
		$("td#command_statusbar_ispaused").html(isPaused);
		$("td#option_statusbar_ispaused").html(isPaused);
		$("td#slider_statusbar_ispaused").html(isPaused);
		$("td#driver_statusbar_ispaused").html(isPaused);
		$("td#image_statusbar_ispaused").html(isPaused);
		$("td#info_statusbar_ispaused").html(isPaused);
		$("td#logs_statusbar_ispaused").html(isPaused);
		}
	if (driverText) {
		// Update every page's running driver statusbar.
		$("td#main_statusbar_runningdriver").html(driverText);
		$("td#command_statusbar_runningdriver").html(driverText);
		$("td#option_statusbar_runningdriver").html(driverText);
		$("td#slider_statusbar_runningdriver").html(driverText);
		$("td#driver_statusbar_runningdriver").html(driverText);
		$("td#image_statusbar_runningdriver").html(driverText);
		$("td#info_statusbar_runningdriver").html(driverText);
		$("td#logs_statusbar_runningdriver").html(driverText);
	}
	
  }

  function takeScreenshot()
  {
    // First, we need to generate a random number to make absolutely sure we bypass browser caching.
	var random=Math.floor(Math.random()*999999999)
	$("#screenshot").html('<img height="240" width="320" src="/screenshot.png?cachebreaker='+random.toString()+'"/>');
	// Navigate back to home so we can see the screenshot.
	window.location.hash='#mainmenu';
  }
 
  function executeCommands(command)
  {
	$.ajax({
	  url: "/cmd?name="+command,
	  cache: false,
	  dataType: "text",
	  success: function(data) {
	  },
	  error: function (request, status, error) { alert(status + ", " + error); }
	});
	if (command !== 'exit') {
		startWebSocket();
	} else {
		updateStatusBar('<b style="color: red;">Disconnected</b>','Exited','No Driver');
	}
  }

  function executeHardReset()
  {
    executeCommands("hardreset");
	startWebSocket();
	$('.ui-dialog').dialog('close');
  }

  function executeSoftReset()
  {
    executeCommands("softreset");
	startWebSocket();
	$('.ui-dialog').dialog('close');
  }

  function executeExit()
  {
    executeCommands("exit");
	$('.ui-dialog').dialog('close');
  }

  function executeSlider()
  {
	$.ajax({
		  url: "/json/slider",
		  cache: false,
		  dataType: "json",
		  success: function(data) {
			var items = [];
			for (var i in data) {
			   items.push('<label for="slider-mini-'+i+'">'+data[i].description +':</label>');
			   items.push('<input type="range" name="slider-mini-'+i+'" id="slider-mini-'+i+'" value="'+data[i].curval+'" min="'+data[i].minval+'" max="'+data[i].maxval+'" step=="'+data[i].incval+'" data-highlight="true" data-mini="true" />');
            }
			$('#sliders').html('');
			$('#sliders').append(items.join('')).trigger('create'); 
			for (var i in data) {
				$('#slider-mini-' + i).bind( "slidestop", function(event, ui) { setSliderValue($(this).attr('id').replace('slider-mini-',''),$(this).slider().val()); });
			}

		  },
		  error: function (request, status, error) { alert(status + ", " + error); }
		});	
  window.location.hash='#slidermenu'; // Just making sure we're on the slider screen.
  }

  function setSliderValue(id,val)
  {
	$.ajax({
	  url: "/slider?id="+id+"&val="+val,
	  cache: false,
	  dataType: "text",
	  success: function(data) {
	  },
	  error: function (request, status, error) { alert(status + ", " + error); }
	});	
  }
  
  function startWebSocket() {
	var docbase = window.location.href.toString().split('#')[0]; // We strip the fragment from the URL using split.
	var url = docbase.replace("http://","ws://");
    websocket = new WebSocket(url);
    websocket.onopen = function(ev) {
	  updateStatusBar('<b style="color: green;">Connected</b>','','');
    };
    websocket.onclose = function(ev) {      
      updateStatusBar('<b style="color: red;">Disconnected</b>','','');
    };
    websocket.onmessage = function(ev) {
	if (ev.data=='update_machine') 
	{
		$.ajax({
		  url: "json/game",
		  cache: false,
		  dataType: "json",
		  success: function(data) {
			var maindesc_name = [];
			var maindesc_description = [];
			var maindesc_year = [];
			var maindesc_manufacturer = [];
			var maindesc_parent = [];
			var maindesc_sourcefile = [];
			var statusbar_ispaused = [];
			var statusbar_runningdriver = [];
			if(data.ispaused) {
				statusbar_ispaused.push('<b style="color: red; ">Paused</b>');
			} else {
				statusbar_ispaused.push('<b style="color: green; ">Running</b>');
			}
			if(data.name =='__empty') {
				statusbar_runningdriver.push('No driver');
			} else {
				statusbar_runningdriver.push(data.description + ' [' + data.manufacturer+']');
			}
			maindesc_name.push(data.name);
			maindesc_description.push(data.description);
			maindesc_year.push(data.year);
			maindesc_manufacturer.push(data.manufacturer);
			maindesc_parent.push(data.parent);
			maindesc_sourcefile.push(data.source_file);
			$("#maindesc_name").html(maindesc_name.join(''));
			$("#maindesc_description").html(maindesc_description.join(''));
			$("#maindesc_year").html(maindesc_year.join(''));
			$("#maindesc_manufacturer").html(maindesc_manufacturer.join(''));
			$("#maindesc_parent").html(maindesc_parent.join(''));
			$("#maindesc_sourcefile").html(maindesc_sourcefile.join(''));

			// Now, actually update the status bar..
			updateStatusBar('',statusbar_ispaused.join(''),statusbar_runningdriver.join(''));
		  },
		  error: function (request, status, error) { alert(status + ", " + error); }
		});	
	}

    };
    websocket.onerror = function(ev) {
		updateStatusBar('<b style="color: red; ">Error</b>',' ',' ');
    };
  }

  window.onload = function() {
	startWebSocket();
  };
</script>

<!-- This begins the MAIN MENU page ------------------------------------------------------------------->
<div data-role="page" id="mainmenu">
    <div data-theme="a" data-role="header">
        <div style="width: 100%; height: 120px; position: relative;">
			<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
        </div>
        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#drivermenumenu" data-transition="fade" data-icon="bars">Driver</a>
                </li>
                <li>
                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
                </li>
                <li>
                    <a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
                </li>
                <li>
                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content" id ="mainmenucontent">	
		<table style="tablelayout: auto; width: 100%" border="0">
				<tr>
					<td style="padding: 0px; vertical-align:top; width: 1px"><div id="screenshot"><a href="#screenshotpopup" data-rel="popup"><img height="240" width="320" src="/screenshot.png"></a></div></td>
					<td style="padding: 0px; vertical-align:top">
						<table border="0"><div id="drivertext"></div>
							<tr>
								<th style="text-align:left;">Name</th>
								<td><div id="maindesc_name"></div></td>
							</tr>
							<tr>
								<th style="text-align:left;">Description</th>
								<td><div id="maindesc_description"></div></td>
							</tr>
							<tr>
								<th style="text-align:left;">Year</th>
								<td><div id="maindesc_year"></div></td>
							</tr>
							<tr>
								<th style="text-align:left;">Manufacturer</th>
								<td><div id="maindesc_manufacturer"></div></td>
							</tr>
							<tr>
								<th style="text-align:left;">Parent</th>
								<td><div id="maindesc_parent"></div></td>
							</tr>
							<tr>
								<th style="text-align:left;">Source File</th>
								<td><div id="maindesc_sourcefile"></div></td>
							</tr>						
						</table>
					</td>
				</tr>
		</table>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
		<div  data-role="navbar" data-iconpos="top">
			<ul>
				<li>
					<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
				</li>
				<li>
					<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
				</li>
				<li>
					<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
				</li>
				<li>
					<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
				</li>
			</ul>
		</div>
		<h3>
			<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
				<tr>
					<td style="width: 10%; padding: 0px;" id="main_statusbar_connectionstatus"></div></td>
					<td style="width: 10%; padding: 0px;" id="main_statusbar_ispaused"></div></td>
					<td style="width: 80%; padding: 0px;" id="main_statusbar_runningdriver"></div></td>
				</tr>
			</table> 
		</h3>
	</div>
</div>

<!-- This begins the COMMAND MENU page ------------------------------------------------------------------->
<div data-role="page" id="commandmenu">
    <div data-theme="a" data-role="header">
        <div style="width: 100%; height: 120px; position: relative;">
			<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
        </div>
        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#drivermenumenu" data-transition="fade" data-icon="bars">Driver</a>
                </li>
                <li>
                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
                </li>
                <li>
                    <a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
                </li>
                <li>
                    <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content" id ="menu_commandmenu">	
		<h2>Reset Control</h2>
		<div class="ui-grid-a">
			<div class="ui-block-a"><a href="confirmsoftreset.html" data-rel="dialog" data-role="button">Soft reset</a></div>
			<div class="ui-block-b"><a href="confirmhardreset.html" data-rel="dialog" data-role="button">Hard reset</a></div>
		</div>
		<h2>Savestate Control</h2>
		<div class="ui-grid-a">
			<div class="ui-block-a"><a href="#savestatepanel" data-transition="fade" data-role="button">Save State</a></div>
			<div class="ui-block-b"><a href="#loadstatepanel" data-transition="fade" data-role="button">Load State</a></div>
		</div>
		<h2>Execution Control</h2>
		<a href="javascript:executeCommands('togglepause');" data-role="button">Toggle Pause</a>
		<a href="confirmexit.html" data-rel="dialog" data-role="button">Exit</a>

		<!-- This begins the Save State panel -------------------------------------------------------->
		<div data-role="panel" id="savestatepanel" data-position="left" data-display="overlay" data-theme="a">
			<h3>Select position to save to</h3>

			<!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. -->
			<div data-role="controlgroup" data-type="horizontal">
				<a href="" data-rel="close" data-role="button">Cancel</a>
				<a href="javascript:executeCommands('savestate&val=auto');" data-role="button">Autosave Slot</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('savestate&val=0');" data-role="button">0</a>
				<a href="javascript:executeCommands('savestate&val=1');" data-role="button">1</a>
				<a href="javascript:executeCommands('savestate&val=2');" data-role="button">2</a>
				<a href="javascript:executeCommands('savestate&val=3');" data-role="button">3</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('savestate&val=4');" data-role="button">4</a>   
				<a href="javascript:executeCommands('savestate&val=5');" data-role="button">5</a>
				<a href="javascript:executeCommands('savestate&val=6');" data-role="button">6</a>
				<a href="javascript:executeCommands('savestate&val=7');" data-role="button">7</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('savestate&val=8');" data-role="button">8</a>
				<a href="javascript:executeCommands('savestate&val=9');" data-role="button">9</a>
				<a href="javascript:executeCommands('savestate&val=a');" data-role="button">A</a>
				<a href="javascript:executeCommands('savestate&val=b');" data-role="button">B</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('savestate&val=c');" data-role="button">C</a>
				<a href="javascript:executeCommands('savestate&val=d');" data-role="button">D</a>
				<a href="javascript:executeCommands('savestate&val=e');" data-role="button">E</a>
				<a href="javascript:executeCommands('savestate&val=f');" data-role="button">F</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('savestate&val=g');" data-role="button">G</a>
				<a href="javascript:executeCommands('savestate&val=h');" data-role="button">H</a>
				<a href="javascript:executeCommands('savestate&val=i');" data-role="button">I</a>
				<a href="javascript:executeCommands('savestate&val=j');" data-role="button">J</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('savestate&val=k');" data-role="button">K</a>
				<a href="javascript:executeCommands('savestate&val=l');" data-role="button">L</a>
				<a href="javascript:executeCommands('savestate&val=m');" data-role="button">M</a>
				<a href="javascript:executeCommands('savestate&val=n');" data-role="button">N</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('savestate&val=o');" data-role="button">O</a>
				<a href="javascript:executeCommands('savestate&val=p');" data-role="button">P</a>
				<a href="javascript:executeCommands('savestate&val=q');" data-role="button">Q</a>
				<a href="javascript:executeCommands('savestate&val=r');" data-role="button">R</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('savestate&val=s');" data-role="button">S</a>
				<a href="javascript:executeCommands('savestate&val=t');" data-role="button">T</a>
				<a href="javascript:executeCommands('savestate&val=u');" data-role="button">U</a>
				<a href="javascript:executeCommands('savestate&val=v');" data-role="button">V</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('savestate&val=w');" data-role="button">W</a>
				<a href="javascript:executeCommands('savestate&val=x');" data-role="button">X</a>
				<a href="javascript:executeCommands('savestate&val=y');" data-role="button">Y</a>
				<a href="javascript:executeCommands('savestate&val=z');" data-role="button">Z</a>
			</div>
			<!-- This is here to prevent webkit from trying to put the last row of states under the bottom menu on small screens like phone-->
			<br><br><br><br><br>
		</div>

		<!-- This begins the Load State panel -------------------------------------------------------->
		<div data-role="panel" id="loadstatepanel" data-position="left" data-display="overlay" data-theme="a">
			<h3>Select position to load from</h3>

			<!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. -->
			<div data-role="controlgroup" data-type="horizontal">
				<a href="" data-rel="close" data-role="button">Cancel</a>
				<a href="javascript:executeCommands('loadstate&val=auto');" data-role="button">Autoload Slot</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('loadstate&val=0');" data-role="button">0</a>
				<a href="javascript:executeCommands('loadstate&val=1');" data-role="button">1</a>
				<a href="javascript:executeCommands('loadstate&val=2');" data-role="button">2</a>
				<a href="javascript:executeCommands('loadstate&val=3');" data-role="button">3</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('loadstate&val=4');" data-role="button">4</a>   
				<a href="javascript:executeCommands('loadstate&val=5');" data-role="button">5</a>
				<a href="javascript:executeCommands('loadstate&val=6');" data-role="button">6</a>
				<a href="javascript:executeCommands('loadstate&val=7');" data-role="button">7</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('loadstate&val=8');" data-role="button">8</a>
				<a href="javascript:executeCommands('loadstate&val=9');" data-role="button">9</a>
				<a href="javascript:executeCommands('loadstate&val=a');" data-role="button">A</a>
				<a href="javascript:executeCommands('loadstate&val=b');" data-role="button">B</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('loadstate&val=c');" data-role="button">C</a>
				<a href="javascript:executeCommands('loadstate&val=d');" data-role="button">D</a>
				<a href="javascript:executeCommands('loadstate&val=e');" data-role="button">E</a>
				<a href="javascript:executeCommands('loadstate&val=f');" data-role="button">F</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('loadstate&val=g');" data-role="button">G</a>
				<a href="javascript:executeCommands('loadstate&val=h');" data-role="button">H</a>
				<a href="javascript:executeCommands('loadstate&val=i');" data-role="button">I</a>
				<a href="javascript:executeCommands('loadstate&val=j');" data-role="button">J</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('loadstate&val=k');" data-role="button">K</a>
				<a href="javascript:executeCommands('loadstate&val=l');" data-role="button">L</a>
				<a href="javascript:executeCommands('loadstate&val=m');" data-role="button">M</a>
				<a href="javascript:executeCommands('loadstate&val=n');" data-role="button">N</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('loadstate&val=o');" data-role="button">O</a>
				<a href="javascript:executeCommands('loadstate&val=p');" data-role="button">P</a>
				<a href="javascript:executeCommands('loadstate&val=q');" data-role="button">Q</a>
				<a href="javascript:executeCommands('loadstate&val=r');" data-role="button">R</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('loadstate&val=s');" data-role="button">S</a>
				<a href="javascript:executeCommands('loadstate&val=t');" data-role="button">T</a>
				<a href="javascript:executeCommands('loadstate&val=u');" data-role="button">U</a>
				<a href="javascript:executeCommands('loadstate&val=v');" data-role="button">V</a>
			</div>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="javascript:executeCommands('loadstate&val=w');" data-role="button">W</a>
				<a href="javascript:executeCommands('loadstate&val=x');" data-role="button">X</a>
				<a href="javascript:executeCommands('loadstate&val=y');" data-role="button">Y</a>
				<a href="javascript:executeCommands('loadstate&val=z');" data-role="button">Z</a>
			</div>
			<!-- This is here to prevent webkit from trying to put the last row of states under the bottom menu on small screens like phone-->
			<br><br><br><br><br>
		</div>
		
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
		<div  data-role="navbar" data-iconpos="top">
			<ul>
				<li>
					<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
				</li>
				<li>
					<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
				</li>
				<li>
					<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
				</li>
				<li>
					<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
				</li>
			</ul>
		</div>
		<h3>
			<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
				<tr>
					<td style="width: 10%; padding: 0px;" id="command_statusbar_connectionstatus"></div></td>
					<td style="width: 10%; padding: 0px;" id="command_statusbar_ispaused"></div></td>
					<td style="width: 80%; padding: 0px;" id="command_statusbar_runningdriver"></div></td>
				</tr>
			</table> 
		</h3>
    </div>
</div>

<!-- This begins the SLIDERS page ------------------------------------------------------------------->
<div data-role="page" id="slidermenu">
    <div data-theme="a" data-role="header">
        <div style="width: 100%; height: 120px; position: relative;">
			<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
        </div>
        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#drivermenumenu" data-transition="fade" data-icon="bars">Driver</a>
                </li>
                <li>
                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
                </li>
                <li>
                    <a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
                </li>
                <li>
                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content" id ="sliders">	
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
		<div  data-role="navbar" data-iconpos="top">
			<ul>
				<li>
					<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
				</li>
				<li>
					<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
				</li>
				<li>
					<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
				</li>
				<li>
					<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
				</li>
			</ul>
		</div>
		<h3>
			<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
				<tr>
					<td style="width: 10%; padding: 0px;" id="option_statusbar_connectionstatus"></div></td>
					<td style="width: 10%; padding: 0px;" id="option_statusbar_ispaused"></div></td>
					<td style="width: 80%; padding: 0px;" id="option_statusbar_runningdriver"></div></td>
				</tr>
			</table> 
		</h3>
    </div>
</div>

<!-- This begins the OPTION MENU page ------------------------------------------------------------------->
<div data-role="page" id="optionmenu">
    <div data-theme="a" data-role="header">
        <div style="width: 100%; height: 120px; position: relative;">
			<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
        </div>
        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#drivermenumenu" data-transition="fade" data-icon="bars">Driver</a>
                </li>
                <li>
                    <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
                </li>
                <li>
                    <a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
                </li>
                <li>
                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content" id ="menu_optionmenu">	
		<a href="javascript:executeSlider();" data-role="button">Sliders</a>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
		<div  data-role="navbar" data-iconpos="top">
			<ul>
				<li>
					<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
				</li>
				<li>
					<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
				</li>
				<li>
					<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
				</li>
				<li>
					<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
				</li>
			</ul>
		</div>
		<h3>
			<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
				<tr>
					<td style="width: 10%; padding: 0px;" id="slider_statusbar_connectionstatus"></div></td>
					<td style="width: 10%; padding: 0px;" id="slider_statusbar_ispaused"></div></td>
					<td style="width: 80%; padding: 0px;" id="slider_statusbar_runningdriver"></div></td>
				</tr>
			</table> 
		</h3>
    </div>
</div>

<!-- This begins the DRIVER MENU page ------------------------------------------------------------------->
<div data-role="page" id="drivermenu">
    <div data-theme="a" data-role="header">
        <div style="width: 100%; height: 120px; position: relative;">
			<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
        </div>
        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
                </li>
                <li>
                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
                </li>
                <li>
                    <a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
                </li>
                <li>
                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content" id="drivermenucontent">	
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
		<div  data-role="navbar" data-iconpos="top">
			<ul>
				<li>
					<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
				</li>
				<li>
					<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
				</li>
				<li>
					<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
				</li>
				<li>
					<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
				</li>
			</ul>
		</div>
		<h3>
			<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
				<tr>
					<td style="width: 10%; padding: 0px;" id="driver_statusbar_connectionstatus"></div></td>
					<td style="width: 10%; padding: 0px;" id="driver_statusbar_ispaused"></div></td>
					<td style="width: 80%; padding: 0px;" id="driver_statusbar_runningdriver"></div></td>
				</tr>
			</table> 
		</h3>
	</div>
</div>

<!-- This begins the IMAGE MENU page ------------------------------------------------------------------->
<div data-role="page" id="imagemenu">
    <div data-theme="a" data-role="header">
        <div style="width: 100%; height: 120px; position: relative;">
			<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
        </div>
        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#drivermenu" data-transition="fade" data-icon="bars">Driver</a>
                </li>
                <li>
                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
                </li>
                <li>
                    <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
                </li>
                <li>
                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content" id="imagemenucontent">	
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
		<div  data-role="navbar" data-iconpos="top">
			<ul>
				<li>
					<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
				</li>
				<li>
					<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
				</li>
				<li>
					<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
				</li>
				<li>
					<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
				</li>
			</ul>
		</div>
		<h3>
			<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
				<tr>
					<td style="width: 10%; padding: 0px;" id="image_statusbar_connectionstatus"></div></td>
					<td style="width: 10%; padding: 0px;" id="image_statusbar_ispaused"></div></td>
					<td style="width: 80%; padding: 0px;" id="image_statusbar_runningdriver"></div></td>
				</tr>
			</table> 
		</h3>
	</div>
</div>

<!-- This begins the INFO MENU page ------------------------------------------------------------------->
<div data-role="page" id="infomenu">
    <div data-theme="a" data-role="header">
        <div style="width: 100%; height: 120px; position: relative;">
			<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
        </div>
        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#drivermenu" data-transition="fade" data-icon="bars">Driver</a>
                </li>
                <li>
                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
                </li>
                <li>
                    <a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
                </li>
                <li>
                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content" id="infomenucontent">	
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
		<div  data-role="navbar" data-iconpos="top">
			<ul>
				<li>
                    <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
				</li>
				<li>
					<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
				</li>
				<li>
					<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
				</li>
				<li>
					<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
				</li>
			</ul>
		</div>
		<h3>
			<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
				<tr>
					<td style="width: 10%; padding: 0px;" id="info_statusbar_connectionstatus"></div></td>
					<td style="width: 10%; padding: 0px;" id="info_statusbar_ispaused"></div></td>
					<td style="width: 80%; padding: 0px;" id="info_statusbar_runningdriver"></div></td>
				</tr>
			</table> 
		</h3>
	</div>
</div>

<!-- This begins the LOGS MENU page ------------------------------------------------------------------->
<div data-role="page" id="logsmenu">
    <div data-theme="a" data-role="header">
        <div style="width: 100%; height: 120px; position: relative;">
			<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
        </div>
        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#drivermenu" data-transition="fade" data-icon="bars">Driver</a>
                </li>
                <li>
                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
                </li>
                <li>
                    <a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
                </li>
                <li>
                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content" id="logsmenucontent">	
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
		<div  data-role="navbar" data-iconpos="top">
			<ul>
				<li>
					<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
				</li>
				<li>
                    <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
				</li>
				<li>
					<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
				</li>
				<li>
					<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
				</li>
			</ul>
		</div>
		<h3>
			<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
				<tr>
					<td style="width: 10%; padding: 0px;" id="logs_statusbar_connectionstatus"></div></td>
					<td style="width: 10%; padding: 0px;" id="logs_statusbar_ispaused"></div></td>
					<td style="width: 80%; padding: 0px;" id="logs_statusbar_runningdriver"></div></td>
				</tr>
			</table> 
		</h3>
	</div>
</div>

</body>
</html>