<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessible Tabs: A-Tabs 1.0</title>
<style type="text/css" media="screen">
<!--
@import "TAB_styles.css";
-->
</style>
<script type="text/javascript" src="TAB_Function_Lib.js"></script>
</head>
<body bgcolor="#000000" text="#FFFFFF" link="#FFCCFF" vlink="#FF6666" alink="#FF33FF"
<pre style="font-size: 1em; font-family: 'courier new', courier, monospace;" id="TAB_DEBUG_BLOCK"></pre>
<center><font color="#ffccff"><h1>Dort Mall</h1>
<h2>Flint, Michigan</h2></font>
<div class="tabWrapper" id="example">
<ul class="tabbedNavOff" id="example_tabs">
<li><a class="" id="tabsample1" href="#sampleA" onclick="return Example.switchTab(this.id,false)"><span><span>Page 1</span></span></a></li>
<li><a class="" id="tabsample2" href="#sampleB" onclick="return Example.switchTab(this.id,false)"><span><span>Page 2</span></span></a></li>
<li><a class="" id="tabsampleC" href="#whatever" onclick="return Example.switchTab(this.id,false)"><span><span>Page 3</span></span></a></li>
<li><a class="" id="tabsampleD" href="#sampleD" onclick="return Example.switchTab(this.id,false)"><span><span>Page 4</span></span></a></li>
<li><a class="" id="tabsampleE" href="#sampleE" onclick="return Example.switchTab(this.id,false)"><span><span>Page 5</span></span></a></li>
<li><a class="" id="tabsampleF" href="#sampleF" onclick="return Example.switchTab(this.id,false)"><span><span>Page 6</span></span></a></li>
</ul>
<div class="tabSpacerOff" id="example_spacer"> </div>
<div class="tabBox" id="sampleA">
<div class="tabBoxGutter">
Page 1</div>
<p class="tabBoxNav">
<a href="#sampleB" class="tabBoxNavRight" onclick="return Example.switchTab('tabsample2', true);">Next >></a>
<span class="tabSpacer"> </span>
</p>
</div><!-- end sampleA -->
<div class="tabBox" id="sampleB">
<div class="tabBoxGutter">
Page 2</div>
<p class="tabBoxNav">
<a href="#sampleA" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsample1', true);"><< Previous</a>
<a href="#whatever" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleC', true);">Next >></a>
<span class="tabSpacer"> </span>
</p>
</div><!-- end sampleB -->
<div class="tabBox" id="whatever">
<div class="tabBoxGutter">
Page 3</div>
<p class="tabBoxNav">
<a href="#sampleB" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsample2', true);"><< Previous</a>
<a href="#sampleD" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleD', true);">Next >></a>
<span class="tabSpacer"> </span>
</p>
</div><!-- end whatever -->
<div class="tabBox" id="sampleD">
<div class="tabBoxGutter">
Page 4</div>
<p class="tabBoxNav">
<a href="#whatever" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsampleC', true);"><< Previous</a>
<a href="#sampleE" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleE', true);">Next >></a>
<span class="tabSpacer"> </span>
</p>
</div><!-- end sampleD -->
<div class="tabBox" id="sampleE">
<div class="tabBoxGutter">
Page 2</div>
<p class="tabBoxNav">
<a href="#sampleD" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsampleD', true);"><< Previous</a>
<a href="#sampleF" class="tabBoxNavRight" onclick="return Example.switchTab('tabsampleF', true);">Next >></a>
<span class="tabSpacer"> </span>
</p>
</div><!-- end sampleE -->
<div class="tabBox" id="sampleF">
<div class="tabBoxGutter">
Page 3</div>
<p class="tabBoxNav">
<a href="#sampleB" class="tabBoxNavLeft" onclick="return Example.switchTab('tabsampleE', true);"><< Previous</a>
<span class="tabSpacer"> </span>
</p>
</div><!-- end sampleF -->
<p class="tabOptionsOff" id="example_options"></p>
<script type="text/javascript">
//<![CDATA[
Without this part it does not work period, with it it's okay on IE but not firefox
// Declare a new instance of the TAB class
var Example = new TAB(tabsampleD);
var Example = new TAB(tabsampleE);
var Example = new TAB(tabsampleF);
// Set IDs needed to create tab structure.
Example.name = "example";
Example.tabSpacerID = "example_spacer";
Example.tabOptionsID = "example_options";
Example.tabRootID = "example_tabs";
// IDs of the tabs themselves
Example.tabIDs[0] = "tabsample1";
Example.tabIDs[1] = "tabsample2";
Example.tabIDs[2] = "tabsampleC";
Example.tabIDs[3] = "tabsampleD";
Example.tabIDs[4] = "tabsampleE";
Example.tabIDs[5] = "tabsampleF";
// IDs of the tab boxes
Example.boxIDs[0] = "sampleA";
Example.boxIDs[1] = "sampleB";
Example.boxIDs[2] = "whatever";
Example.boxIDs[3] = "sampleD";
Example.boxIDs[4] = "sampleE";
Example.boxIDs[5] = "sampleF";
// Initialize the tabs
Example.initialize();
//Example.initializeWithIDs("example","example_tabs","example_spacer","example_options");
// ]]>
</script>
</div><!-- end example -->
</body>
</html>