<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>ScalienDB Management Console</title>
		<link rel="stylesheet" type="text/css" href="login.css"/>
		<link rel="stylesheet" type="text/css" href="unregisterShardServer.css"/>
		<link rel="stylesheet" type="text/css" href="createQuorum.css"/>
		<link rel="stylesheet" type="text/css" href="renameQuorum.css"/>
		<link rel="stylesheet" type="text/css" href="deleteQuorum.css"/>
		<link rel="stylesheet" type="text/css" href="addNode.css"/>
		<link rel="stylesheet" type="text/css" href="removeNode.css"/>
		<link rel="stylesheet" type="text/css" href="createDatabase.css"/>
		<link rel="stylesheet" type="text/css" href="renameDatabase.css"/>
		<link rel="stylesheet" type="text/css" href="deleteDatabase.css"/>
		<link rel="stylesheet" type="text/css" href="createTable.css"/>
		<link rel="stylesheet" type="text/css" href="renameTable.css"/>
		<link rel="stylesheet" type="text/css" href="truncateTable.css"/>
		<link rel="stylesheet" type="text/css" href="deleteTable.css"/>
		<link rel="stylesheet" type="text/css" href="splitShard.css"/>
		<link rel="stylesheet" type="text/css" href="migrateShard.css"/>
		<link rel="stylesheet" type="text/css" href="error.css"/>
		<link rel="stylesheet" type="text/css" href="main.css"/>
		<script language="javascript" type="text/javascript" src="json2.js"></script>
		<script language="javascript" type="text/javascript" src="scaliendb.js"></script>
		<script language="javascript" type="text/javascript" src="ui.js"></script>
	</head>
	<body onload="onLoad()" onmousedown="onMouseDown()" onmouseup="onMouseUp()">
		<!-- login -->
		<div id="loginContainer">
		<div class="login-overlay"></div>
		<div class="login-content">
			<br/><br/><br/>
			<span class="login-welcome">Welcome to ScalienDB!</span><br/>
			<br/><br/><br/>
			<span class="login-connect">Connect to cluster:</span><br/><br/>
			<form action="javascript:connect()">
			<input id="loginCluster" class="login-input" type="text" value="localhost:8080" /><br/><br/><br/>
			<button type="submit" class="login-button">Connect</button>
			</form>
		</div>
		</div>
		<!-- create-quorum -->
		<div id="createQuorumContainer">
		<div class="create-quorum-overlay"></div>
		<div class="create-quorum-content">
			<a href="javascript:hideCreateQuorum()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="create-quorum-welcome">Create new quorum</span><br/>
			<br/><br/><br/>
			<form action="javascript:createQuorum()">
			<span class="create-quorum-name">Name:</span><br/><br/>
			<input id="createQuorumName" class="create-quorum-input" type="text" value="" /><br/><br/><br/>
			<span class="create-quorum-shardServers">Shard server list:</span><br/><br/>
			<input id="createQuorumShardServers" class="create-quorum-input" type="text" value="" /><br/><br/><br/>
			<button type="submit" class="create-quorum-button">Create</button>
			</form>
		</div>
		</div>
		<!-- rename-quorum -->
		<div id="renameQuorumContainer">
		<div class="rename-quorum-overlay"></div>
		<div class="rename-quorum-content">
			<a href="javascript:hideRenameQuorum()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="rename-quorum-welcome">Rename quorum</span><br/>
			<br/><br/><br/>
			<span class="rename-quorum-name">Name:</span><br/><br/>
			<form action="javascript:renameQuorum()">
			<input id="renameQuorumName" class="rename-quorum-input" type="text" value="" /><br/><br/><br/>
			<button id="renameQuorumButton" type="submit" class="rename-table-button">Rename</button>
			</form>
		</div>
		</div>
		<!-- add-node -->
		<div id="addNodeContainer">
		<div class="add-node-overlay"></div>
		<div class="add-node-content">
			<a href="javascript:hideAddNode()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="add-node-welcome">Add shard server to quorum</span><br/>
			<br/><br/><br/>
			<span class="add-node-shardServer">Shard server:</span><br/><br/>
			<form action="javascript:addNode()">
			<!--<input id="addNodeShardServer" class="add-node-input" type="text" value="100" />-->
			<select id="addNodeShardServerSelector" class="add-node-selector">
			</select>
			<br/><br/><br/>
			<button type="submit" class="add-node-button">Add</button>
			</form>
		</div>
		</div>
		<!-- remove-node -->
		<div id="removeNodeContainer">
		<div class="remove-node-overlay"></div>
		<div class="remove-node-content">
			<a href="javascript:hideRemoveNode()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="remove-node-welcome">Remove shard server from quorum</span><br/>
			<br/><br/><br/>
			<span class="remove-node-shardServer">Shard server:</span><br/><br/>
			<form action="javascript:removeNode()">
			<!--<input id="removeNodeShardServer" class="remove-node-input" type="text" value="100" />-->
			<select id="removeNodeShardServerSelector" class="remove-node-selector">
			</select>
			<br/><br/><br/>
			<button type="submit" class="remove-node-button">Remove</button>
			</form>
		</div>
		</div>
		<!-- delete-quorum -->
		<div id="deleteQuorumContainer">
		<div class="delete-quorum-overlay"></div>
		<div class="delete-quorum-content">
			<a href="javascript:hideDeleteQuorum()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="delete-quorum-welcome">Delete quorum</span><br/>
			<br/><br/><br/>
			<span class="delete-quorum-question">Are you sure you want to delete the quorum?</span><br/><br/><br/><br/>
			<form action="javascript:deleteQuorum()">
			<button type="submit" class="delete-quorum-button">Delete</button>
			</form>
		</div>
		</div>
		<!-- delete-quorum -->
		<div id="unregisterShardServerContainer">
		<div class="unregister-shard-server-overlay"></div>
		<div class="unregister-shard-server-content">
			<a href="javascript:hideUnregisterShardServer()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="unregister-shard-server-welcome">Unregister shard server</span><br/>
			<br/><br/><br/>
			<span class="delete-quorum-question">Are you sure you want to permanently unregister<br/> the shard server from the ScalienDB cluster?</span><br/><br/><br/><br/>
			<form action="javascript:unregisterShardServer()">
			<button type="submit" class="unregister-shard-server-button">Unregister</button>
			</form>
		</div>
		</div>
		<!-- create-database -->
		<div id="createDatabaseContainer">
		<div class="create-database-overlay"></div>
		<div class="create-database-content">
			<a href="javascript:hideCreateDatabase()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="create-database-welcome">Create new database</span><br/>
			<br/><br/><br/>
			<span class="create-database-name">Name:</span><br/><br/>
			<form action="javascript:createDatabase()">
			<input id="createDatabaseName" class="create-database-input" type="text" value="" /><br/><br/><br/>
			<button id="createDatabaseButton" type="submit" class="create-database-button">Create</button>
			</form>
		</div>
		</div>
		<!-- rename-database -->
		<div id="renameDatabaseContainer">
		<div class="rename-database-overlay"></div>
		<div class="rename-database-content">
			<a href="javascript:hideRenameDatabase()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="rename-database-welcome">Rename database</span><br/>
			<br/><br/><br/>
			<span class="rename-database-name">Name:</span><br/><br/>
			<form action="javascript:renameDatabase()">
			<input id="renameDatabaseName" class="rename-database-input" type="text" value="" /><br/><br/><br/>
			<button id="renameDatabaseButton" type="submit" class="rename-database-button">Rename</button>
			</form>
		</div>
		</div>
		<!-- delete-database -->
		<div id="deleteDatabaseContainer">
		<div class="delete-database-overlay"></div>
		<div class="delete-database-content">
			<a href="javascript:hideDeleteDatabase()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="delete-database-welcome">Delete database</span><br/>
			<br/><br/><br/>
			<span class="delete-quorum-question">Are you sure you want to delete the database and all contained tables?<br/></span><br/><br/><br/><br/>
			<form action="javascript:deleteDatabase()">
			<button type="submit" class="delete-database-button">Delete</button>
			</form>
		</div>
		</div>
		<!-- create-table -->
		<div id="createTableContainer">
		<div class="create-table-overlay"></div>
		<div class="create-table-content">
			<a href="javascript:hideCreateTable()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="create-table-welcome">Create new table</span><br/>
			<br/><br/><br/>
			<form action="javascript:createTable()">
			<span class="create-table-name">Name:</span><br/><br/>
			<input id="createTableName" class="create-table-input" type="text" value="" /><br/><br/><br/>
			<span class="create-table-quorum">Place first shard in quorum:</span><br/><br/>
			<select id="createTableQuorumSelector" class="create-table-selector">
			</select>
			<!--<input id="createTableQuorum" class="create-table-input" type="text" value="1" />--><br/><br/><br/>
			<button id="createTableButton" type="submit" class="create-table-button">Create</button>
			</form>
		</div>
		</div>
		<!-- rename-table -->
		<div id="renameTableContainer">
		<div class="rename-table-overlay"></div>
		<div class="rename-table-content">
			<a href="javascript:hideRenameTable()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="rename-table-welcome">Rename table</span><br/>
			<br/><br/><br/>
			<span class="rename-table-name">Name:</span><br/><br/>
			<form action="javascript:renameTable()">
			<input id="renameTableName" class="rename-table-input" type="text" value="" /><br/><br/><br/>
			<button id="renameTableButton" type="submit" class="rename-table-button">Rename</button>
			</form>
		</div>
		</div>
		<!-- truncate-table -->
		<div id="truncateTableContainer">
		<div class="truncate-table-overlay"></div>
		<div class="truncate-table-content">
			<a href="javascript:hideTruncateTable()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="truncate-table-welcome">Truncate table</span><br/>
			<br/><br/><br/>
			<span class="truncate-table-question">Are you sure you want to truncate the table?<br/>This will delete all shards and create a new, empty shard.</span><br/><br/><br/><br/>
			<form action="javascript:truncateTable()">
			<button type="submit" class="truncate-table-button">Truncate</button>
			</form>
		</div>
		</div>
		<!-- delete-table -->
		<div id="deleteTableContainer">
		<div class="delete-table-overlay"></div>
		<div class="delete-table-content">
			<a href="javascript:hideDeleteTable()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="delete-table-welcome">Delete table</span><br/>
			<br/><br/><br/>
			<span class="delete-table-question">Are you sure you want to delete the table?</span><br/><br/><br/><br/>
			<form action="javascript:deleteTable()">
			<button type="submit" class="delete-table-button">Delete</button>
			</form>
		</div>
		</div>
		<!-- split-shard -->
		<div id="splitShardContainer">
		<div class="split-shard-overlay"></div>
		<div class="split-shard-content">
			<a href="javascript:hideSplitShard()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="split-shard-welcome">Split shard</span><br/>
			<br/><br/><br/>
			<span class="split-shard-key">Split key:</span><br/><br/>
			<form action="javascript:splitShard()">
			<input id="splitShardKey" class="split-shard-input" type="text" value="" /><br/><br/><br/>
			<button type="submit" class="split-shard-button">Split</button>
			</form>
		</div>
		</div>
		<!-- migrate-shard -->
		<div id="migrateShardContainer">
		<div class="migrate-shard-overlay"></div>
		<div class="migrate-shard-content">
			<a href="javascript:hideMigrateShard()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span class="migrate-shard-welcome">Migrate shard</span><br/>
			<br/><br/><br/>
			<span id="migrateShardText" class="migrate-shard-quorumID">Migrate to quorum:</span><br/><br/>
			<form action="javascript:migrateShard()">
			<!--<input id="migrateShardQuorum" class="migrate-shard-input" type="text" value="" />
			<br/>-->
			<select id="migrateShardQuorumSelector" class="migrate-shard-selector">
			</select>
			<br/><br/><br/>
			<button id="migrateShardButton" type="submit" class="migrate-shard-button">Migrate</button>
			</form>
		</div>
		</div>
		<!-- error -->
		<div id="errorContainer">
		<div class="error-overlay"></div>
		<div class="error-content">
			<a href="javascript:hideError()"><img border="0" class="close" src="close.png"/></a>
			<br/><br/><br/>
			<span id="errorTitle" class="error-title">Error</span><br/>
			<br/><br/><br/>
			<span id="errorText" class="error-text">Error text</span><br/><br/>
			<form action="javascript:hideError()">
			<br/><br/><br/>
			<button id="errorSubmitButton" type="submit" class="error-button">OK</button>
			</form>
		</div>
		</div>
		<!-- main -->
		<div id="mainContainer">
			<div class="top-header">
				<span class="scalien-logo"><a href="http://scalien.com"><img class="logo" src="scalien_logo.png" /></a></span>
				<span class="nav-bar">
					<span id="controller"></span>
					<a class="no-line" href="javascript:logout()"><span class="refresh-button">logout + reconnect</span></a>
				</span>
			</div>
			<div class="tab-head-container">
				<a class="no-line" href="javascript:activateDashboardTab()"><span id="tabHeadDashboard" class="tab-head tab-head-active">Dashboard</span></a>
				<a class="no-line" href="javascript:activateQuorumsTab()"><span id="tabHeadQuorums" class="tab-head tab-head-inactive">Quorums</span></a>
				<a class="no-line" href="javascript:activateSchemaTab()"><span id="tabHeadSchema" class="tab-head tab-head-inactive">Schema</span></a>
				<a class="no-line" href="javascript:activateMigrationTab()"><span id="tabHeadMigration" class="tab-head tab-head-inactive">Shard migration</span></a>
			</div>
			<div class="tab-page-container">
				<!-- dashboard -->
				<div id="tabPageDashboard" class="tab-page tab-page-active">
					<br/>
					<table class="dashboard-icon">
						<tr>
							<td><img src="megaphone.png" /></td>
							<td><span class="status-message critical" id="clusterState"></span></td>
						</tr>
					</table>
					<table class="dashboard-icon">
						<tr>
							<td><img src="database.png" /></td>
							<td>
							There <span id="numDatabasesPrefix">are</span> <b><span id="numDatabases">0 databases</span></b> in the system,
							with a total of <b><span id="numTables">0 table</span></b>
							and <b><span id="numShards">0 shards</span></b>.<br/>
							<span id="dashboardStats">
							The smallest database consists of <span id="minTables">0  table</span>,
							the largest consists of <span id="maxTables">0 table</span>,
							<b>average is <span id="avgTables">0 table</span> per database</b>.<br/>
							The smallest table consists of <span id="minShards">0 shard</span>,
							the largest table consists of <span id="maxShards">0 shard</span>,
							<b>average is <span id="avgShards">0 shard</span> per table</b>.<br/>
							</span>
							</td>
						</tr>
					</table>
					<table class="dashboard-icon">
						<tr>
							<td><img src="servers.png" /></td>
							<td>
							<!-- The cluster is controlled by <b>3 controller node(s)</b>. -->
							<!-- The <b>master controller is node 0</b>.<br/> -->
							The cluster contains <b><span id="numShardServers">0 shard server</span>
							</b> in the system, making up a total of
							<b><span id="numQuorums">0 quorum</span></b>.<br/><br/>
							List of controllers:
							<div class="config-server-list" id="configservers"></div>
							<br/>
							List of shard servers:
							<div class="shard-server-list" id="shardservers"></div>
							</td>
						</tr>
					</table>
				</div>

				<!-- quorums -->
				<div id="tabPageQuorums" class="tab-page tab-page-inactive">
					<span class="listing">Listing quorums - </span><a class="no-line" href="javascript:showCreateQuorum()"><span class="create-button">create new quorum</span></a><br/><br/>
					<div id="quorums">
					</div>
				</div>

				<!-- schema -->
				<div id="tabPageSchema" class="tab-page tab-page-inactive">
					<span class="listing">Listing databases - </span><a class="no-line" href="javascript:showCreateDatabase()"><span class="create-button">create new database</span></a><br/><br/>
					<div id="databases">
					</div>
				</div>				

				<!-- shard migration -->
				<div id="tabPageMigration" class="tab-page tab-page-inactive">
					<span class="listing">Active shard migrations</span><br/><br/>
					<div id="migrations">
					</div>
				</div>

			</div>
		</div>
	</body>
</html>