<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"> 

<html>

<head>
	<title>Dojo Storage Test</title>
	
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
    </style>
    
    <!--
  		// 'forceStorageProvider' is a flag to force a particular storage type. 
  		// Example:
  		//
  		//var djConfig = { 
  		//					isDebug: false, 
  		//					forceStorageProvider: "dojox.storage.FlashStorageProvider" 
  		//				  };
  	-->

    <script>
      // most storage providers have to be loaded when the page first loads;
      // the code below is so that we can use the storage provider pulldown,
      // select a provider, change the URL to force this provider, and then
      // reload the page to force this new provider
      var loc = window.location;
      var forceStorageProvider = undefined;
      // does the URL have a storage provider for us to force using?
      if(loc && loc.search && loc.search.indexOf("forceStorageProvider") != -1){
        var m = loc.search.match(/forceStorageProvider=([a-zA-Z0-9_\.]*)/g);
        if(m && m.length){
          // forceStorageProvider can repeat as a query parameter if the
          // page has been reloaded several times, so just grab the last
          // one
          forceStorageProvider = m[m.length - 1];
          if(forceStorageProvider.indexOf("=") != -1){
            forceStorageProvider = forceStorageProvider.split("=");
            forceStorageProvider = forceStorageProvider[1];
          }
        }
      }
      
      var djConfig = { 
  							isDebug: false, 
  							forceStorageProvider: forceStorageProvider
  		};
    </script>

    <script type="text/javascript" 
            src="../../../dojo/dojo.js"></script>
	
	<script type="text/javascript" src="test_storage.js"></script>
	
	<style type="text/css">
		h1 { margin: 0px auto 0px auto; padding-top: 0px auto 0px auto; clear: none; float: left; }
		body { padding: 0.2em 1em 1em 1em; }
		div { margin-bottom: 1.5em; }
		label { margin-right: 0.6em; }
		button { margin-right: 0.6em; }
		form { float: right; width: 80%; }
		#top { width: 70%; }
		#directoryContainer { float: left; clear: left; width: 20%; }
		#templates { text-align: center; }
		#templates a { display: block; margin-top: 1em; }
		#directory { width: 100%; }
		#namespaceDirectory { width: 100%; }
		#storageValue { vertical-align: top; width: 100%; height: 10em; }
		#buttonContainer { text-align: center; }
		#currentStorageProvider { font-weight: bold; }
		#providerMetadataContainer { float: right; font-size: 9pt; }
		#storageForm { width: 70%; }
		.status { float: right; padding-left: 5px; padding-right: 5px; background: red; color: white; }
		.providerMetadata { font-weight: bold; margin-bottom: 0.5em; }
		.providerMetadataValue { font-weight: normal; }
		.firebug { clear: both; } // clear Firebug Lite to bottom of screen
	</style>
	
</head>

<body>
	<div id="top">
		<h1>Dojo.Storage Test</h1>
	</div>
	
	<div id="directoryContainer">
		<h2>All Namespaces:</h2>
		<select id="namespaceDirectory" size="3"></select>
		
		<h2>All Keys:</h2>
		<select id="directory" size="10">
		</select>
		
		<div id="templates">
			<a href="#" onclick="return TestStorage.saveBook()">Save Test Book (238K - Faust by Goethe)</a>
			<a href="#" onclick="return TestStorage.saveXML()">Save Test XML</a>
		</div>
	</div>
	
	<form id="storageForm">
		<h2>Save/Load Values:</h2>
		<div>
			<div id="providerMetadataContainer">
				<div class="providerMetadata">
						Supported:
						
						<span id="isSupported" class="providerMetadataValue">
						</span>
					</div>
					
				<div class="providerMetadata">
					Supports Persistence:
					
					<span id="isPersistent" class="providerMetadataValue">
					</span>
				</div>
				
				<div class="providerMetadata">
					Supports UI Configuration:
					
					<span id="hasUIConfig" class="providerMetadataValue">
					</span>
				</div>
				
				<div class="providerMetadata">
					Maximum Size:
					
					<span id="maximumSize" class="providerMetadataValue">
					</span>
				</div>
				
				<div class="providerMetadata">
					Value size:
					
					<span id="valueSize" class="providerMetadataValue">
					</span>
				</div>
				
				<div class="providerMetadata">
					More info:
					
					<span id="moreInfo" class="providerMetadataValue">
					</span>
				</div>
			</div>
			
			<div>
				Storage Provider:
				
				<select id="currentStorageProvider" size="1"></select>
			</div>
		</div>
		
		<div id="storageNamespaceContainer">
			<label for="storageNamespace">
				Namespace:
			</label>
			
			<input type="text" id="storageNamespace" name="storageNamespace" size="40" disabled="true">
		</div>
		
		<div id="storageKeyContainer">
			<label for="storageKey">
				Key:
			</label>
			
			<input type="text" id="storageKey" name="storageKey" size="40" disabled="true">
		</div>
		
		<div id="storageValueContainer">
			<label for="storageValue">
				Value:
			</label>
			
			<textarea id="storageValue" name="storageValue" disabled="true"></textarea>
		</div>
		
		<div id="buttonContainer">
			<button id="loadButton" disabled="true">Load</button>
			<button id="saveButton" disabled="true">Save</button>
			<button id="removeButton" disabled="true">Remove</button>
			<button id="clearNamespaceButton" disabled="true">Clear Namespace</button>
			<button id="configureButton" disabled="true">Configure</button>
		</div>
	</form>
</body>

</html>