<!--
Copyright (c) 2000-2002 Microsoft Corp. All rights reserved.
Version 1.0.2.226
-->

<public:component tagName="TabStrip" literalcontent="true" lightweight="true">
<public:property name="targetID" />
<public:property name="tabDefaultStyle" />
<public:property name="tabHoverStyle" />
<public:property name="tabSelectedStyle" />
<public:property name="sepDefaultStyle" />
<public:property name="sepHoverStyle" />
<public:property name="sepSelectedStyle" />
<public:property name="sepDefaultImageUrl" />
<public:property name="sepHoverImageUrl" />
<public:property name="sepSelectedImageUrl" />
<public:property name="numTabs" get="f_NumTabs" id="propNumTabs" />
<public:property name="numItems" get="f_NumItems" id="propNumItems" />
<public:property name="selectedIndex" get="f_GetSelectedIndex" put="f_SetSelectedIndex" id="propSelectedIndex" />
<public:property name="orientation" get="f_GetDirection" put="f_SetDirection" id="propOrientation" />
<public:method name="createTabAt" internalname="f_PublicCreateTabAt" />
<public:method name="createSeparatorAt" internalname="f_PublicCreateSeparatorAt" />
<public:method name="getItem" internalname="f_PublicGetItem" />
<public:method name="getTab" internalname="f_PublicGetTab" />
<public:event name="onselectedindexchange" id="evtIndexChangeEvent" />
<public:event name="onwcready" id="evtWCReady" />
<public:attach event="oncontentready" onevent="f_Init()" />
<public:attach event="ondocumentready" onevent="f_PostInit()" />
<public:attach event="onselectstart" onevent="f_CancelEvent()" />
<public:attach event="onkeydown" onevent="f_OnKeyDown()" />
<public:attach event="onkeyup" onevent="f_OnKeyUp()" />
<public:attach event="onpropertychange" onevent="f_PropChange()" />
<public:defaults
tabStop=true
contentEditable=false
canHaveHTML=true
viewInheritStyle=true
viewMasterTab=true
viewLinkContent=false
style="display:block"
/>
</public:component>
<script language="JScript">
var _OnStopCount = 0;
var _InInit = true;
var _Tabs = null;
var _HoverIndex = -1;
var _bHorizontal = true;
var _NumTabs = 0;
var _nSelectedIndex = -2;
var _BuiltInTabDefaultStyle = "cursor:hand;background-color:buttonface";
var _BuiltInTabHoverStyle = "background-color:buttonhighlight";
var _BuiltInTabSelectedStyle = "cursor:default;background-color:buttonhighlight";
var _BuiltInSepDefaultStyle = "";
var _BuiltInSepHoverStyle = "";
var _BuiltInSepSelectedStyle = "";
var _StateVals = new Array();
var _StateDefault = 1;
var _StateHover = 2;
var _StateSelected = 3;
var _DelayEvent = false;
var _FirstIndex = -1;
var _TimerSet = false;
var _TimerID = -1;
var _IsSubmitting = false;
function f_Init()
{
f_AddStopEvent();
var cacheImageDef = new Image();
var cacheImageHov = new Image();
var cacheImageSel = new Image();
cacheImageDef.src = sepDefaultImageUrl;
cacheImageHov.src = sepHoverImageUrl;
cacheImageSel.src = sepSelectedImageUrl;
_StateVals["default"] = _StateDefault;
_StateVals["hover"] = _StateHover;
_StateVals["selected"] = _StateSelected;
var oRoot = element.document.createElement("SPAN");
oRoot.innerHTML = innerHTML;
var oTable = element.document.createElement("TABLE");
var oTBody = element.document.createElement("TBODY");
oTable.style.fontSize = currentStyle.fontSize;
oTable.style.fontFamily = currentStyle.fontFamily;
oTable.style.fontWeight = currentStyle.fontWeight;
oTable.style.color = currentStyle.color;
oTable.cellSpacing = 0;
oTable.cellPadding = 0;
oTable.border = 0;
if (element.currentStyle.direction != element.style.direction)
oTable.style.direction = element.currentStyle.direction;
else
oTable.style.direction = element.style.direction;
oTable.dir = element.dir;
if (element.currentStyle.height != null)
oTable.style.height = element.currentStyle.height;
if (element.currentStyle.width != null)
oTable.style.width = element.currentStyle.width;
var oRow = null;
if (_bHorizontal)
{
oRow = element.document.createElement("TR");
oTBody.appendChild(oRow);
}
for (var nIndex = 0; nIndex < oRoot.children.length; nIndex++)
{
if (!_bHorizontal)
{
oRow = element.document.createElement("TR");
oTBody.appendChild(oRow);
}
var oNode = oRoot.children[nIndex];
var szTagName = oNode.tagName.toLowerCase();
if ((szTagName != "tab") && (szTagName != "tabseparator"))
continue;
f_AppendTabContent(oRow, oNode);
}
_Tabs = _bHorizontal ? oTBody.childNodes[0] : oTBody;
oTable.appendChild(oTBody);
var numTabs = f_NumTabs()
if (numTabs > 0)
{
var curIndex = _nSelectedIndex;
_nSelectedIndex = -1;
if (curIndex != -1)
{
if ((curIndex < 0) || (curIndex >= numTabs))
curIndex = 0;
f_SetSelectedIndex(curIndex);
}
}
else
{
_nSelectedIndex = -1;
}
var oBody = element.document.createElement("BODY");
var oHtml = element.document.createElement("HTML");
oBody.appendChild(oTable);
oHtml.appendChild(oBody);
defaults.viewLink = oHtml.document;
_InInit = false;
}
function f_PostInit()
{
f_CleanupEvents();
f_NavigateMultiPage(f_GetTab(_nSelectedIndex));
evtWCReady.fire(createEventObject());
}
function f_CleanupEvents()
{
var eventArray = window.__tabStripAttachedEvents;
if ((eventArray != null) && (eventArray[0]))
{
var newArray = new Array(false);
for (var i = 1; i < eventArray.length; i++)
{
if (element.document.all[eventArray[i][0]] == null)
{
element.document.detachEvent("onstop", eventArray[i][1]);
}
else
{
newArray = newArray.concat(new Array(eventArray[i]));
}
}
window.__tabStripAttachedEvents = newArray;
}
}
function f_AddStopEvent()
{
var eventArray = window.__tabStripAttachedEvents;
if (eventArray == null)
{
eventArray = new Array(false);
}
element.document.attachEvent("onstop", f_OnStop);
eventArray[0] = true;
entry = new Array(element.uniqueID, f_OnStop);
window.__tabStripAttachedEvents = eventArray.concat(new Array(entry));
}
function f_AppendTabContent(parent, node)
{
var szTagName = node.tagName.toLowerCase();
var isTab = (szTagName == "tab");
var oCell = element.document.createElement("TD");
oCell.mergeAttributes(node, false);
if (isTab)
{
oCell.setAttribute("_type", "tab", 0);
oCell.attachEvent("onclick", f_TabClick);
oCell.attachEvent("onmousedown", f_TabClick);
oCell.attachEvent("onmouseover", f_TabOver);
oCell.attachEvent("onmouseout", f_TabOut);
oCell.setAttribute("index", _NumTabs, 0);
_NumTabs++;
}
else if (szTagName == "tabseparator")
{
oCell.setAttribute("_type", "separator", 0);
}
else
{
return;
}
var cacheImageDef = new Image();
var cacheImageHov = new Image();
var cacheImageSel = new Image();
cacheImageDef.src = node.getAttribute("defaultImageUrl");
cacheImageHov.src = node.getAttribute("hoverImageUrl");
cacheImageSel.src = node.getAttribute("selectedImageUrl");
var content;
if (isTab)
{
content = element.document.createElement("A");
oCell.appendChild(content);
if (oCell.tabIndex > 0)
{
content.tabIndex = oCell.tabIndex;
oCell.tabIndex = -1;
}
if (oCell.title != "")
{
content.title = oCell.title;
oCell.title = "";
}
}
else
{
content = oCell;
}
var szText = node.getAttribute("text");
if (szText != null)
{
var oTextSpan = element.document.createElement("SPAN");
oTextSpan.innerText = szText;
content.appendChild(oTextSpan);
}
else
{
while (node.childNodes.length > 0)
content.appendChild(node.childNodes[0]);
}
f_ApplyState(oCell, "default");
oCell.noWrap = true;
oCell.attachEvent("onkeyup", f_OnTabKeyUp);
parent.appendChild(oCell);
}
function f_PropChange()
{
switch (event.propertyName)
{
case "tabDefaultStyle":
case "tabHoverStyle":
case "tabSelectedStyle":
case "sepDefaultStyle":
case "sepHoverStyle":
case "sepSelectedStyle":
case "sepDefaultImageUrl":
case "sepHoverImageUrl":
case "sepSelectedImageUrl":
if (!_InInit)
{
f_Redraw();
}
break;
case "_submitting":
_IsSubmitting = (element.getAttribute("_submitting") == 'true');
_OnStopCount = 0;
break;
case "style.direction":
if (_bHorizontal)
_Tabs.parentElement.parentElement.style.direction = element.style.direction;
else
_Tabs.parentElement.style.direction = element.style.direction;
break;
case "dir":
if (_bHorizontal)
_Tabs.parentElement.parentElement.dir = element.dir;
else
_Tabs.parentElement.dir = element.dir;
break;
}
}
function f_PublicCreateTabAt(index)
{
return f_AddItemAt(index, "tab");
}
function f_PublicCreateSeparatorAt(index)
{
return f_AddItemAt(index, "tabseparator");
}
function f_AddItemAt(index, type)
{
var numItems = f_NumItems();
if ((index < 0) || (index > numItems))
index = numItems;
var renumber = false;
var cell = element.document.createElement("TD");
if (type == "tab")
{
cell.setAttribute("_type", "tab", 0);
cell.attachEvent("onclick", f_TabClick);
cell.attachEvent("onmousedown", f_TabClick);
cell.attachEvent("onmouseover", f_TabOver);
cell.attachEvent("onmouseout", f_TabOut);
_NumTabs++;
renumber = true;
var link = element.document.createElement("A");
cell.appendChild(link);
}
else if (type == "tabseparator")
{
cell.setAttribute("_type", "separator", 0);
}
else
{
return null;
}
f_ApplyState(cell, "default");
cell.noWrap = true;
cell.attachEvent("onkeyup", f_OnTabKeyUp);
var addItem = cell;
if (!_bHorizontal)
{
row = element.document.createElement("TR");
row.appendChild(cell);
addItem = row;
}
if (index == numItems)
_Tabs.appendChild(addItem);
else
_Tabs.children[index].insertAdjacentElement("beforeBegin", addItem);
if (renumber)
f_RenumberTabs();
if (type == "tab")
{
var tabIndex = cell.getAttribute("index");
if (tabIndex <= _nSelectedIndex)
{
_nSelectedIndex++
f_FireIndexChangeEvent();
f_NavigateMultiPage(cell);
}
else if (_nSelectedIndex < 0)
{
f_SetSelectedIndex(0);
}
}
f_NumItemsChanged();
if (type == "tab")
f_NumTabsChanged();
return f_PublicMakeContract(cell);
}
function f_NumItemsChanged()
{
if (!_InInit)
propNumItems.fireChange();
}
function f_NumTabsChanged()
{
if (!_InInit)
propNumTabs.fireChange();
}
function f_RenumberTabs()
{
var tabIndex = 0;
for (var index = 0; index < _Tabs.children.length; index++)
{
var cell = _Tabs.children[index];
if (!_bHorizontal)
cell = cell.children[0];
if (cell.getAttribute("_type") == "tab")
{
cell.setAttribute("index", tabIndex, 0);
tabIndex++;
}
}
}
function f_FixSelectedIndex()
{
var numTabs = f_NumTabs();
if (numTabs == 0)
{
if (_nSelectedIndex >= 0)
{
_nSelectedIndex = -1;
f_FireIndexChangeEvent();
}
return;
}
if (_nSelectedIndex < 0)
f_SetSelectedIndex(0);
else if (_nSelectedIndex < numTabs)
{
var tab = f_GetTab(_nSelectedIndex);
f_SetTabActive(tab);
}
else
f_SetSelectedIndex(numTabs - 1);
}
function f_PublicRemoveItem(item)
{
var renumber = false;
var fixIndex = false;
var fireIndexChange = false;
var isTab = (item.getAttribute("_type") == "tab");
if (isTab)
{
var itemIndex = item.getAttribute("index");
if (itemIndex == _nSelectedIndex)
fixIndex = true;
else if (itemIndex < _nSelectedIndex)
{
_nSelectedIndex--;
fireIndexChange = true;
}
renumber = true;
_NumTabs--;
}
if (!_bHorizontal)
item = item.parentElement;
item.removeNode(true);
if (renumber)
f_RenumberTabs();
if (fixIndex)
f_FixSelectedIndex();
else if (fireIndexChange)
{
f_FireIndexChangeEvent();
f_NavigateMultiPage(f_GetTab(_nSelectedIndex));
}
f_NumItemsChanged();
if (isTab)
f_NumTabsChanged();
}
function f_PublicGetItem(index)
{
if ((index < 0) || (index >= _Tabs.children.length))
return null;
var item = _Tabs.children[index];
if (!_bHorizontal)
item = item.children[0];
return f_PublicMakeContract(item);
}
function f_PublicGetTab(index)
{
if ((index < 0) || (index >= _NumTabs))
return null;
return f_PublicMakeContract(f_GetTab(index));
}
function f_PublicMakeContract(item)
{
var obj = new Object();
obj.getType = function() { return item.getAttribute("_type"); };
obj.remove = function() { f_PublicRemoveItem(item); };
obj.getAttribute = function(name) { return f_PublicGetAttribute(item, name); };
obj.setAttribute = function(name, value) { f_PublicSetAttribute(item, name, value); };
return obj;
}
function f_PublicGetAttribute(item, name)
{
return item.getAttribute(name);
}
function f_PublicSetAttribute(item, name, value)
{
var cacheImage;
var lname = name.toLowerCase();
if ((item.getAttribute("_type") == "tab") && ((lname == "tabindex") || (lname == "title")))
{
item = item.children[0];
}
if ((lname != "innertext") && (lname != "innerhtml") && (lname != "outerhtml"))
item.setAttribute(name, value, 0);
switch (lname)
{
case "defaultstyle":
case "hoverstyle":
case "selectedstyle":
f_ApplyState(item, "redraw");
break;
case "defaultimageurl":
case "hoverimageurl":
case "selectedimageurl":
cacheImage = new Image();
cacheImage.src = value;
f_ApplyState(item, "redraw");
break;
case "text":
case "innertext":
f_DoText(item, value);
break;
case "innerhtml":
f_DoHTML(item, value);
break;
}
}
function getContent(item)
{
if (item.getAttribute("_type") == "tab")
return item.children[0];
return item;
}
function f_DoText(item, text)
{
var content = getContent(item);
f_RemoveTextNodes(item);
var span = element.document.createElement("SPAN");
span.innerText = text;
content.appendChild(span);
}
function f_DoHTML(item, html)
{
var content = getContent(item);
f_RemoveTextNodes(item);
var span = element.document.createElement("SPAN");
span.innerHTML = html;