Untitled Document

<HTML>
<HEAD>
<TITLE>Change tabs and load 3 pages</TITLE>

.conts { visibility:hidden }
.tab {
border-left:1px solid #C1C1C1;
padding:1 5px;
background-image: url('sos_tabs1.gif');
background-repeat: no-repeat;
height: 31px;
width:109px;
display:block;
text-decoration:none;
font-family: Arial, Helvetica;
margin:0;
text-indent:0;
font-size: 11px;
font-weight: bold;
color: #C1C1C1;
text-decoration: none;
}

.selTab {
color:#000000;
padding:1 5px;
border-left:1px solid #C1C1C1;
background-image: url('sos_tabs3.gif');
background-repeat: no-repeat;
height: 31px;
width:109px;
font-family: Arial, Helvetica;
font-size: 11px;
margin:0;
text-indent:0;
font-weight: bold;
color: #000000;
text-decoration: none;
}

.tabred a:hover{
border-left:1px solid #C1C1C1;
padding:1 5px;
background-image: url('sos_tabs3.gif');
background-repeat: no-repeat;
height: 31px;
width:109px;
display:block;
text-decoration:none;
font-family: Arial, Helvetica;
margin:0;
text-indent:0;
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
}

</style>

//a public function that the container uses to pass in values for the labels
function public_Labels(label1, label2, label3){

t1.innerText = label1;
t2.innerText = label2;
t3.innerText = label3;

}

//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, contents3){

t1Contents.innerHTML = contents1;
t2Contents.innerHTML = contents2;
t3Contents.innerHTML = contents3;

init();
}

//sets the default display to tab 1
function init(){
tabContents.innerHTML = t1Contents.innerHTML;
}

//this is the tab switching function
var currentTab;
var firstFlag = true;

function changeTabs(){

if(firstFlag == true){
currentTab = t1;
firstFlag = false;
}

if(window.event.srcElement.className == "tab"){

currentTab.className = "tab";
currentTab = window.event.srcElement;
tabContentID = currentTab.id + "Contents";
tabContent = document.all(tabContentID);
currentTab.className = "selTab";
tabContents.innerHTML = tabContent.innerHTML;

}
}

</SCRIPT>

<TABLE width="137" CELLPADDING=0 CELLSPACING=0 class="tabred">
<TR>
<TD align="left" width=10 HEIGHT=32><IMG SRC="http://esp.ibi.com/images/cleardot.gif" WIDTH=10 HEIGHT=1 BORDER="0"></TD>
<TD align="left" width=109 HEIGHT=32 ><a href="#" ID=t1 CLASS=selTab>Sales<br>Analysis</a></TD>
<TD align="left" width=109 HEIGHT=32><a href="#" ID=t2 CLASS=tab>Sales Cycle<br>Analysis</a></TD>
<TD align="left" width=109 HEIGHT=32><a href="#" ID=t3 CLASS=tab>Location<br>Analysis</a></TD>
</TR>
</TABLE>
<TABLE width="100%" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD bgcolor="#C7C7C7" HEIGHT="1" COLSPAN=3><IMG SRC="http://esp.ibi.com/images/cleardot.gif" WIDTH=100% HEIGHT=1 BORDER="0"></TD>
</tr>
<TR>
<TD bgcolor="#ffffff" HEIGHT="2" COLSPAN=3><IMG SRC="http://esp.ibi.com/images/cleardot.gif" WIDTH=100% HEIGHT=1 BORDER="0"></TD>
</tr>
<TR>
<TD bgcolor="#C7C7C7" HEIGHT="1" COLSPAN=3><IMG SRC="http://esp.ibi.com/images/cleardot.gif" WIDTH=100% HEIGHT=1 BORDER="0"></TD>
</tr>
</TABLE>

<div style="position:absolute; top:210; height:450; width:980; left:15; border:#C1C1C1; overflow:no;">
<TABLE width=900 height=250 CELLPADDING=0 CELLSPACING=0 align="left" class="tabred">
<TR><td><div class="" ID=tabContents>Sales Analysis</div></td></TR>
</TABLE>
</DIV>