// $Id: //placeware/dev/i18n/build/placeware.ccc/lib/ccc/button.js#8 $
// Copyright 1999-2002 PlaceWare, Inc.


var preloadedImages = new Object(); // save redundant preloads
var activeButtons   = new Object();
var btns 	    = new Object();
var imgs	    = new Object();
var hasLayers	    = isNetscape4;  // some browser does not know hasLayers = !!document.layers; ??
var hovers 	    = new Object();


//#####################################################################
// ===== Basic Images =====
// This Img object does not do any document write.
// It only returns HTML text
//#####################################################################
function Img(name, w, h, base, layerId, ext, altText, imgD, useBaseOnly)
{
  this.name 		= name;
  this.w 		= w;
  this.h 		= h;
  this.base 		= base;
  this.layerId		= layerId;
  if (ext) this.ext 	= ext;
  this.altText  	= altText;
  this.imageDir 	= imgD ? imgD : imgDir();
  this.useBaseOnly 	= useBaseOnly;
  this.setSrc		= ImgSetSrc;
  this.getSrc		= ImgGetSrc;
  this.preload  	= ImgPreload;
  this.write		= ImgWrite;
  this.writeVariant 	= ImgWriteVariant;
  this.writeA   	= ImgWriteA;
  this.writeTD  	= ImgWriteTD;

  imgs[name] 	        = this;
}


function ImgSetSrc(base) {
  var layer;
  
  if (!base)
	base = this.imageDir + 'blank.gif';
  
  if (isNetscape4)
     	document[this.layerId].document.images[this.name].src = base;
  else
  	document.all[this.name].src = base;
}

function ImgGetSrc(suffix) {
  if (this.useBaseOnly)
      return this.base;
  return this.imageDir + this.base + opt(suffix, '') + opt(this.ext, '.gif');
}

function ImgPreload(suffix) {
  
  var src   = this.getSrc(suffix);
  var image = preloadedImages[src];
  if (!image) {
    image     = new Image();
    preloadedImages[src] = image;
    image.src = src;
  }
  return image.src
}

function ImgWrite(attrs, w, h) {
  return this.writeVariant(null, attrs, w, h);
}

function ImgWriteVariant(suffix, attrs, w, h) {
  var width  = opt(w, this.w);
  var height = opt(h, this.h);
  var result = '<IMG';
  if (this.name) result += makeAttr('ID', this.name);
  if (this.name) result += makeAttr('NAME', this.name);
  if (width)  	 result += makeAttr('WIDTH',  width);
  if (height)    result += makeAttr('HEIGHT', height);
  if (attrs)     result += '\n ' + attrs;
  if (this.altText)
      result += makeAttr('ALT', html(this.altText));
  result += '\n SRC="' + this.getSrc(suffix) + '"\n>';

  return result;
}

function ImgWriteTD(attrs, prefix, suffix, w, h) {
  var result = '';
  if (prefix) result= prefix;
  result += '<td';
  if (attrs) result += ' ' + attrs;
  result += '>';
  result += this.write(null, w, h);
  result += '</td>';
  if (suffix) result += suffix;
  result += '\n';

  return result;
}


function ImgWriteA(suffix, aAttrs, iAttrs, w, h) {
  var result = '';
  if (aAttrs) result += '<A ' + aAttrs + '\n>';
  result += this.writeVariant(suffix, opt(iAttrs, '') + ' BORDER="0"', w, h);
  if (aAttrs) result += '</A\n>';

  return result;
}

//#####################################################################
// ===== DHTML Button =====
//#####################################################################

function rect(w, h) { return 'rect(0,' + w + ',' + h + ',0)'; }
function marg(l, t, w, h) { return l + 'pt ' + t + 'pt '
 				 + w + 'pt ' + h + 'pt'; }

function showStatus(msg) { window.status = msg; return true; }

function showLayer(layer, show) {
  if (!layer) return;
  var obj = hasLayers ? layer : layer.style;
  obj.visibility = show ? "visible" : "hidden";
}

function ButtonStyleInfo(name, bgImage,
			 styleName, rollStyleName, disabledStyleName)
{
    this.name = name;
    this.bgImage = bgImage;
    this.styleName = opt(styleName, 'shortBtn');
    this.rollStyleName = opt(rollStyleName, 'shortBtnOn');
    this.disabledStyleName = opt(disabledStyleName, 'shortBtnDis');
}

// Construct a button with a text label w/optional bg image layer.
// Currently, a button can only write() once per page.
// ASSUMES: Button is in a layer with absolute position
// target is "_parent" or refers to this window.
function Button(name, label, styleInfo, layerId, href, target) {
    this.styleInfo         = styleInfo;
    this.name              = name;
    this.label             = html(label);
    this.unescapedLabel    = label;
    this.layerId	   = layerId;
    this.styler            = theme.getStyler(styleInfo.styleName);
    this.rollStyler        = theme.getStyler(styleInfo.rollStyleName);
    this.disabledStyler    = theme.getStyler(styleInfo.disabledStyleName);
    this.offColor          = theme.getColor('buttonOff');
    this.onColor           = theme.getColor('buttonOn');
    this.enabled           = true;
    this.href		   = href;
    this.target		   = target;
    this.impl              = '';

    this.write             = ButtonWrite;
    this.mouseOver         = ButtonMouseOver;
    this.mouseOut          = ButtonMouseOut;
    this.onClick           = ButtonOnClick;
    this.setStyler         = ButtonSetStyler;
    this.setDisabledStyler = ButtonSetDisabledStyler;
    this.enable            = ButtonEnable;
    this.disable           = ButtonDisable;
    this.setEnabled        = ButtonSetEnabled;
    this.init              = ButtonInit;
    this.onLoadHandler     = ButtonOnLoadHandler;
    this.onResizeHandler   = ButtonOnResizeHandler;

    this.pvtHandlerAttrs   = ButtonPvtHandlerAttrs;
    this.pvtMkLabel        = ButtonPvtMkLabel;

    btns[name] 	           = this;
}
// WARNING: Very fragile! BB 184 et al.
// ASSUMES: target is "_parent" or refers to this window.
// ASSUMES this.styler uses a CLASS. (Why let Stylers emit raw STYLE attrs?)
function ButtonWrite(href, target) {
    if (href)   this.href = href;
    if (target) this.target = target;
    var aAttrs  = this.pvtHandlerAttrs();
    var cAttrs  = this.styler.getStyleForTag() + aAttrs;
    var dims    = '';
    var bgImage = this.styleInfo.bgImage;

    var result  = '';

    this.impl = versionInt < 4			? ''
	      : hasLayers			? 'n4'
	      : isExplorer && versionInt >= 5	? 'i5'
						: 'i4';
    if (bgImage) {
	dims = makeAttr('WIDTH', bgImage.w) + makeAttr('HEIGHT', bgImage.h);
	if (this.impl != 'i4') {
	    this.lo_src = bgImage.preload();
	    this.hi_src = bgImage.preload('_hi');
	}
    }

    if (!this.impl || !bgImage || !this.enabled) {
	// nav btns can't show rollover in NS w/o bgImage
	if (bgImage) {
	    var bg = this.impl == 'i4'
		? makeAttr('BGCOLOR',    theme.getBGColor('button'))
		: makeAttr('BACKGROUND', this.lo_src);
	    result = TableTag(dims + bg, 0, 0, this.impl == 'i4' ? 1 : 0);
	    result += '<TR><TD ALIGN="center">';
	}
	if (this.enabled) {
	    result += '<A' + cAttrs + '>' + this.label + '</A>';
	} else {
	    this.disabledStyler.write(this.label);
	}
	if (bgImage)
	    result += '</TD></TR></TABLE\n>';
	this.impl = '';
    } else if (this.impl == 'n4') {
	var imgID = makeAttr((isNav ? 'NAME' : 'ID'), this.name + '_img');
	result += bgImage.writeA(null, aAttrs, imgID);
    } else if (this.impl == 'i4') {
	cAttrs +=
	    makeAttr('onClick', "return btns['" + this.name + "'].onClick()");
	result +='<BUTTON' + cAttrs + '>' + this.label + '</BUTTON\n>';
    } else if (this.impl == 'i5') {
	result +='<A' + cAttrs + '>' + this.label + '</A\n>';
    }

    activeButtons[this.name] = this;
    return result;
}
function ButtonPvtHandlerAttrs() {
  var ref = "btns['" + this.name + "']";
  return  makeOptAttr('HREF'  , this.href)
	+ makeOptAttr('TARGET', this.target)
	+ makeAttr('onMouseOver', 'return ' + ref + '.mouseOver(this)')
	+ makeAttr('onMouseOut',  'return ' + ref + '.mouseOut(this)');
}
function ButtonPvtMkLabel(base, styler, vis) { // NS 4
  var bgImage = this.styleInfo.bgImage;
  var overlay = new Layer(300);
  overlay.visibility = "hidden";
  overlay.document.write(
      '<A' + styler.getStyleForTag() + this.pvtHandlerAttrs() + '>'
    + this.label
    + '</A>');
  overlay.document.close();
  overlay.moveTo(elements[this.layerId].getX() + base.x + (bgImage.w - overlay.clip.width ) / 2,
		 elements[this.layerId].getY() + base.y + (bgImage.h - overlay.clip.height) / 2);
  showLayer(overlay, vis);
  return overlay;

}

function ButtonInit() { // (re)init & center the label
    if (this.impl == 'n4') {
	this.image    = document.layers[this.layerId].document.images[this.name + "_img"];
	this.offLayer = this.pvtMkLabel(this.image, this.styler, true);
	this.onLayer  = this.pvtMkLabel(this.image, this.rollStyler);
    }
}

function ButtonMouseOver(obj) {
    showLayer(this.onLayer,  true);
    showLayer(this.offLayer, false);
    if (this.image) this.image.src = this.hi_src;
    if (this.impl == 'i4') obj.style.color = this.onColor;
    // if (isExplorer4) set-color causes delayed & missed changes
    showStatus(this.unescapedLabel);
    return true;
}
function ButtonMouseOut(obj) {
    showLayer(this.offLayer, true);
    showLayer(this.onLayer,  false);
    if (this.image) this.image.src = this.lo_src;
    if (this.impl == 'i4') obj.style.color = this.offColor;
    showStatus('');
    return true;
}
function ButtonOnClick() {
    // Simulate clicking an <A> tag.
    // ASSUMES: target is "_parent" or refers to this window.
    var js   = "javascript:";
    var jsl  = js.length;
    var href = this.href;

    if (href.substr(0, jsl) == js) {
	eval(href.substr(jsl));
    } else {
	var target = this.target == "_parent" ? parent : self;
	target.location.href = href;
    }
}

// --- Can set stylers and enable/disable ONLY before .write()
function ButtonSetStyler(styler) {
    this.styler = styler;
}
function ButtonSetDisabledStyler(styler) {
    this.disabledStyler = styler;
}
function ButtonEnable() {
    this.setEnabled(true);
}
function ButtonDisable() {
    this.setEnabled(false);
}
function ButtonSetEnabled(enabled) {
    this.enabled = enabled != false;
}

function ButtonOnLoadHandler() {
    this.init();
}
function ButtonOnResizeHandler() {
    this.init();
}


//#####################################################################
// ===== ImgButton =====
//#####################################################################
function ImgButton(name, img, lo, hi, dis, href, target) {
    this.name      = name;
    this.img       = img;
    this.lo        = lo;
    this.hi        = hi;
    this.dis       = dis;
    this.href      = href;
    this.target    = target;
    this.enabled   = true;

    this.write      = ImgButtonWrite;
    this.mouseOver  = ImgButtonMouseOver;
    this.mouseOut   = ImgButtonMouseOut;
    this.enable     = ImgButtonEnable;
    this.disable    = ImgButtonDisable;
    this.setEnabled = ImgButtonSetEnabled;

    btns[name] = this;
}
function ImgButtonWrite(href, target) {
    if (!this.enabled) {
	return this.img.writeVariant(this.dis, attrs);
    } else {
	this.lo_src = this.img.preload(opt(this.lo, null));
	this.hi_src = this.img.preload(opt(this.hi, '_hi'));
        if (href)   this.href = href;
        if (target) this.target = target;
	var ref     = "btns['" + this.name + "']";
	var aAttrs  =
	    makeOptAttr('href',   this.href)
	  + makeOptAttr('target', this.target)
	  + makeAttr('onmouseover', 'return ' + ref + '.mouseOver()')
	  + makeAttr('onmouseout',  'return ' + ref + '.mouseOut()');
	//var iAttrs  = makeAttr('name', this.name);
	var iAttrs = '';
	return this.img.writeA(this.lo, aAttrs, iAttrs);
    }
}
function ImgButtonMouseOver() {
    var name = this.name;
    var href = this.href;
    if (document.images)
	document.images[name].src = this.hi_src;
    showStatus(href && (href.indexOf("javascript:") == -1) ? href : this.name);
    return true;
}
function ImgButtonMouseOut() {
    var name = this.name;
    if (document.images)
	document.images[name].src = this.lo_src;
    showStatus('');
    return true;
}
function ImgButtonEnable() {
    this.setEnabled(true);
}
function ImgButtonDisable() {
    this.setEnabled(false);
}
function ImgButtonSetEnabled(enabled) {
    this.enabled = enabled != false;
}

//#####################################################################
// ===== handler functions, can be overridden as needed =====
//#####################################################################
function onLoad() {
    handleOnLoad(); // call stub function

    for (var i in activeButtons)
	activeButtons[i].onLoadHandler();
}

function onResize() {
    handleOnResize(); // call stub function

    for (var i in activeButtons)
	activeButtons[i].onResizeHandler();
}

function handleOnLoad() { }
function handleOnResize() { }
function onDragDrop() { }
function onDefaultAction() { }


//#####################################################################
// ===== Stylers =====
//#####################################################################
function Styler(cssClass, cssId, cssEmitClass, cssStyle,
		fontFace, fontSize, color, bgColor,
		fontAddBold, fontAddItalic,
		emitBoth, preferFontTags)

{
    this.cssClass	= cssClass;
    this.cssId		= cssId;
    this.cssStyle	= cssStyle;
    this.cssEmitClass	= cssEmitClass;
    this.fontFace	= fontFace;
    this.fontSize	= fontSize;
    this.fontAddBold	= fontAddBold;
    this.fontAddItalic	= fontAddItalic;
    this.color		= color;
    this.bgColor	= bgColor;
    this.emitBoth	= emitBoth;
    this.preferFontTags	= preferFontTags;

    this.wrap		= StylerWrap;
    this.getStyleForTag	= StylerGetStyleForTag;
    this.writeCSSStyle  = StylerWriteCSSStyle;
}

function StylerWrap(t1, t2, t3, t4, t5, t6, t7, t8, t9) {
    var     result =   ''   + t1;
    if (t2) result = result + t2;
    if (t3) result = result + t3;
    if (t4) result = result + t4;
    if (t5) result = result + t5;
    if (t6) result = result + t6;
    if (t7) result = result + t7;
    if (t8) result = result + t8;
    if (t9) result = result + t9;
    return this.wrapOne(result);
}
function StylerGetStyleForTag() {
    if (this.cssId)    return makeAttr('ID',    this.cssId);
    if (this.cssClass) return makeAttr('CLASS', this.cssClass);
    if (this.cssStyle) return makeAttr('STYLE', this.cssStyle);
    return '';
}

function StylerWriteCSSStyle() {
    if (this.cssEmitClass && this.cssStyle) {
        this.cssStyle.writeRule(this.cssEmitClass);
    }
}

// ===== CSS Style Declarations =====

function StyleAttr(key, val) {
    this.key = key;
    this.val = '' + val;
}

function ssFontSize  (pts) { return new StyleAttr('font-size', pts + 'pt'); }
function ssFontFace  (val) { return new StyleAttr('font-family'     , val); }
function ssFontStyle (val) { return new StyleAttr('font-style'      , val); }
function ssFontWeight(val) { return new StyleAttr('font-weight'     , val); }
function ssColor     (val) { return new StyleAttr('color'           , val); }

function ssBGColor   (val) { return new StyleAttr('background-color', val); }
function ssBGImage   (val) { return new StyleAttr('background-image', val); }
function ssPosition  (val) { return new StyleAttr('position'        , val); }
function ssLeft      (val) { return new StyleAttr('left'            , val); }
function ssTop       (val) { return new StyleAttr('top'             , val); }
function ssWidth     (val) { return new StyleAttr('width'           , val); }
function ssHeight    (val) { return new StyleAttr('height'          , val); }
function ssZIndex    (val) { return new StyleAttr('z-index'         , val); }
function ssVisibility(val) { return new StyleAttr('visibility'      , val); }
function ssTextAlign (val) { return new StyleAttr('text-align'      , val); }
function ssLineHt    (val) { return new StyleAttr('line-height'     , val); }
function ssClip      (w,h) { return new StyleAttr('clip'      , rect(w,h)); }
function ssLayerBGColor(val) { return new StyleAttr('layer-background-color', val); }
function ssTextDecoration(val) { return new StyleAttr('text-decoration', val); }
function ssTextDecorationNone() { return new StyleAttr('text-decoration', 'none'); }

function ssBorderColor(val) { return new StyleAttr('border-color'   , val); }
function ssBorderStyle(val) { return new StyleAttr('border-style'   , val); }
function ssBorderWidth(l,t,w,h) { return new StyleAttr('border-width', marg(l,t,w,h)); }
function ssMargin(l,t,w,h) { return new StyleAttr('margin', marg(l,t,w,h)); }

function ssBGImg(img, sfx) { return ssBGImage("URL(" + img.getSrc(sfx) + ")"); }

function Style() {
    this.list = arguments;
    this.writeRule = StyleWriteRule;
    this.writeDecl = StyleWriteDecl;
    this.makeAttr  = StyleMakeAttr;
}
function StyleWriteRule(selector) {
    // suitable for inclusion in the STYLE element
    dw(selector, ' {\n');
    for (var i = 0; i < this.list.length; i++) {
        var item = this.list[i];
        dw('  ', item.key, ': ', item.val, ';\n');
    }
    dw('}\n');
}
function StyleWriteDecl() {
    // suitable for the value of a tag's STYLE attribute
    for (var i = 0; i < this.list.length; i++) {
        var item = this.list[i];
        dw((i > 0 ? '; ' : ''), item.key, ':', item.val);
    }
}
function StyleMakeAttr() {
    // a tag's STYLE attribute
    var sAttrs = '';
    for (var i = 0; i < this.list.length; i++) {
        var item = this.list[i];
        sAttrs += (i > 0 ? '; ' : '') + item.key + ':' + item.val;
    }
    return makeAttr('STYLE', sAttrs);
}

//#####################################################################
// ===== Themes =====
//#####################################################################
function Theme(themeName) {
    this.themeName = themeName;
    this.stylers   = new Object();
    this.buttonStyleInfos = new Object();
    this.imageCompDirs = new Object();

    this.colors = new Object();
    this.colors.normal 		= black;  	     // foreground color
    this.colors.buttonOn 	= black;
    this.colors.labelButtonOn 	= white;
    this.colors.labelButtonOff = white;
    this.colors.labelButtonDis = white;

    this.bgColors = new Object();
    this.bgColors.normal 	= defFontBGColor;    // background color

    this.fontSizes = new Object();
    this.fontSizes.normal	       = defFontSizePts;
    this.fontSizes.informationalMsg    = defFontSizePts + 2;
    this.fontSizes.buttonOn	       = defFontSizePts + 0;
    this.fontSizes.buttonOff	       = defFontSizePts + 0;
    this.fontSizes.buttonDis	       = defFontSizePts + 0;
    this.fontSizes.labelButtonOn       = defFontSizePts - 1;
    this.fontSizes.labelButtonOff      = defFontSizePts - 1;
    this.fontSizes.labelButtonDis      = defFontSizePts - 1;
    this.fontSizes.large	       = defFontSizePts + 2;
    this.fontSizes.small	       = defFontSizePts - 1;

    this.init		       = ThemeInit;
    this.activate	       = ThemeActivate;
    this.setupStylers	       = ThemeSetupStylers;
    this.addButtonStylers      = ThemeAddButtonStylers;
    this.addDivStylers	       = ThemeAddDivStylers;
    this.setupDefaultStylers   = ThemeSetupDefaultStylers;
    this.writeStyleSheet       = ThemeWriteStyleSheet;
    this.getStyler	       = ThemeGetStyler;
    this.getStyleForTag        = ThemeGetStyleForTag;
    this.addStyler	       = ThemeAddStyler;
    this.writeStyled	       = ThemeWriteStyled;
    this.writeParagraphStyled  = ThemeWriteParagraphStyled;
    this.wrapStyled	       = ThemeWrapStyled;
    this.newImage	       = ThemeNewImage;
    this.imageCompDir	       = ThemeImageCompDir;
    this.newButton	       = ThemeNewButton;
    this.newImgButton	       = ThemeNewImgButton;
    this.newElement	       = ThemeNewElement;
    this.addButtonStyleInfo    = ThemeAddButtonStyleInfo;
    this.getColor	       = ThemeGetColor;
    this.getBGColor	       = ThemeGetBGColor;
    this.getFontSize	       = ThemeGetFontSize;
    this.ssColor	       = ThemeSSColor;
    this.ssBGColor	       = ThemeSSBGColor;
    this.ssFontSize	       = ThemeSSFontSize;

    if (!themeName) themeName = 'defaultTheme';
    themes[themeName] = this;
}

function ThemeInit() {
    this.setupStylers();
}


function ThemeActivate() {
    // we don't initialize these function pointers
    // until activate time, so that other html/js files
    // can override the customizing hooks.

    this.init();
    this.writeStyleSheet();
}

function ThemeWriteStyleSheet() {
    // write all the style info using the available Styler objects...
    dw('<STYLE TYPE="text/css">\n');
    for (i in this.stylers) {
	this.stylers[i].writeCSSStyle();
    }
    dw('</STYLE>');
}

function ThemeGetStyler(name) {
    if (name && this.stylers[name]) return this.stylers[name];
    return this.stylers.normal;
}
function ThemeGetStyleForTag(name) {
    return this.getStyler(name).getStyleForTag();
}

function ThemeAddStyler(name, styler) {
    this.stylers[name] = styler;
}

function ThemeNewImage(name, w, h, base, layerId, ext, altText,
		       imgDir, useBaseOnly)
{
    // the last two params are rarely needed
    return new Img(name, w, h, base, layerId, ext, altText, imgDir, useBaseOnly);
}

function ThemeImageCompDir(dir, base) {
    this.imageCompDirs[base] = dir;
}

function ThemeNewButton(name, label, styleName, layerId, href, target) {
    var buttonStyleInfo = this.buttonStyleInfos[opt(styleName, 'normal')];
    return new Button(name, label, buttonStyleInfo, layerId, href, target);
}

function ThemeNewImgButton(name, img, lo, hi, dis, href, target) {
    return new ImgButton(name, img, lo, hi, dis, href, target);
}

function ThemeNewElement(name, classId, body, top, left, width, height) {
    return new Element(name, classId, body, top, left, width, height);
}

function ThemeWriteStyled(style, t1, t2, t3, t4, t6, t7, t8, t9) {
    var styler = this.getStyler(style);
    return styler.write(t1, t2, t3, t4, t6, t7, t8, t9);
}
function ThemeWriteParagraphStyled(style, t1, t2, t3, t4, t6, t7, t8, t9) {
    var styler = this.getStyler(style);
    return styler.writeParagraph(t1, t2, t3, t4, t6, t7, t8, t9);
}
function ThemeWrapStyled(style, t1, t2, t3, t4, t6, t7, t8, t9) {
    var styler = this.getStyler(style);
    return styler.wrap(t1, t2, t3, t4, t6, t7, t8, t9);
}

function ThemeAddButtonStyleInfo(name, bgImage,
				 styleName, rollStyleName, disabledStyleName)
{
    var btnStyleInfo = new ButtonStyleInfo(name, bgImage,
	styleName, rollStyleName, disabledStyleName);
    this.buttonStyleInfos[name] = btnStyleInfo;
    return btnStyleInfo;
}

function ThemeSetupStylers() {
    this.setupDefaultStylers();
}

function ThemeAddButtonStylers(type, width, height, style, specialFontSize) {
    var btnImg = this.newImage(null, width, height, type + 'Button');
    var btn = type + 'Btn';
    var btnOn  = btn + 'On';
    var btnDis = btn + 'Dis';
    style = style || type;
    name = specialFontSize ? type + 'Button' : 'button';
 
   
    this.addStyler(btn, // btn text
		    new Styler(btn, null, '.' + btn,
			       new Style(
				 ssFontFace(defFontFace),
				 ssFontWeight(800),
				 this.ssFontSize(name + 'Off'),
				 ssTextDecorationNone(),
				 this.ssColor(name + 'Off'),
				 this.ssBGColor(name)
			       )));
    this.addStyler('button.' + btn,
		    new Styler(btn, null, 'button.' + btn,
			       new Style(
				 ssWidth( btnImg.w),
				 ssHeight(btnImg.h)
			       )));
    if (!hasLayers)
	this.addStyler('a.' + btn,
		    new Styler(btn, null, 'a.' + btn,
			       new Style(
				 ssBGImg( btnImg),
				 ssWidth( btnImg.w),
				 ssHeight(btnImg.h),
				 ssLineHt(btnImg.h + "px"),
				 ssTextAlign('center')
			       )));

    this.addStyler('a.' + btn + ':hover',
		    new Styler(btn, null, 'a.' + btn + ':hover',
			       new Style(
				 ssBGImg(btnImg, '_hi')
			       )));

    this.addStyler(btnOn, // hilite/rollover btn text
		    new Styler(btnOn, null, '.' + btnOn,
			       new Style(
				 ssFontFace(defFontFace),
				 ssFontWeight(800),
				 this.ssFontSize(name + 'On'),
				 ssTextDecorationNone(),
				 this.ssColor(name + 'On'),
				 this.ssBGColor(name)
			       )));
    this.addStyler(btnDis, // disabled btn text
		    new Styler(btnDis, null, '.' + btnDis,
			       new Style(
				 ssFontFace(defFontFace),
				 ssFontWeight(800),
				 this.ssFontSize(name + 'Dis'),
				 ssFontStyle('italic'),
				 ssTextDecorationNone(),
				 this.ssColor(name + 'Dis'),
				 this.ssBGColor(name)
			       )));
			       
    this.addButtonStyleInfo(style, btnImg, btn,  btnOn,  btnDis);

}

function ThemeAddDivStylers(id, left, top, width, height, color, bgcolor, clip) {
    this.addStyler(id,
                   new Styler(id, null, '#' + id + 'Div',
                       new Style(
                       		ssPosition('absolute'),
                	        ssLeft(left),
            		        ssTop(top),
            		        ssWidth(width),
            		        ssHeight(height),
            		        (clip)? ssClip(0,height):ssClip(width, height),
            		        ssColor(opt(color, black)),
        			ssBGColor(opt(bgcolor,defFontBGColor)),
        			ssLayerBGColor(opt(bgcolor,defFontBGColor))
			       )));

}

function ThemeSetupDefaultStylers() {
    this.addStyler('normal',
		    new Styler(null, null, null, null,
			       defFontFace, defFontSize,
			       defFontColor, defFontBGColor,
			       false, false,
			       false, true));

    // --- for <A> links & buttons
    this.addStyler('a:hover',
		    new Styler('a', null, 'a:hover',
			       new Style(
				 this.ssColor('buttonOn')
			       )));

    this.addStyler('default',
                    new Styler('default', null, '.default',
                	new Style(
                		ssFontFace(defFontFace),
            		       	ssFontSize(defFontSizePts),
            		       	ssColor(defFontColor),
        			ssBGColor(defFontBGColor),
        			ssLayerBGColor(defFontBGColor)
			       )));
    this.addStyler('small',
                        new Styler('small', null, '.small',
                    	new Style(
                    		ssFontFace(defFontFace),
                		ssFontSize(defFontSizePts-1),
                		ssColor(defFontColor),
            			ssBGColor(defFontBGColor),
            			ssLayerBGColor(defFontBGColor)
			       )));
			       
    this.addStyler('data',
                        new Styler('data', null, '.data',
                    	new Style(
                    		ssFontFace(defFontFace),
                		ssFontSize(defFontSizePts-1),
                		ssColor(navy),
            			ssBGColor(defFontBGColor),
            			ssLayerBGColor(defFontBGColor),
            			ssFontWeight('bold'),
            			ssTextAlign(smScreen?'left':'right')
			       )));
			       
    this.addStyler('center',
    		    new Styler('center', null, '.center',
    			       new Style(
				 ssTextAlign('center')
			       )));
			       
    this.addStyler('title',
    		    new Styler('title', null, '.title',
    			       new Style(
    				 ssFontFace(defFontFace),
				 ssFontSize(defFontSizePts),
				 ssColor(white),
				 ssBGColor(navy),
				 ssLayerBGColor(navy),
				 ssTextAlign('center'),
				 ssFontWeight('bold')
			       )));
			       
    

    this.addStyler('menuIE',
                	    new Styler('menuIE', null, '.menuIE',
                	       new Style(
                		 ssFontFace(defFontFace),
            		         ssFontSize(defFontSizePts),
            		         ssColor(defFontColor),
        			 ssBGColor(defFontBGColor),
        			 ssBorderColor(blue),
        			 ssBorderStyle('solid'),
        			 ssBorderWidth(15,7,7,7),
        			 ssWidth(190),
        			 ssHeight(210)
			       )));
			       
    this.addStyler('menuNS',
                    	    new Styler('menuNS', null, '.menuNS',
                    	       new Style(
                    		 ssFontFace(defFontFace),
                		 ssFontSize(defFontSizePts),
                		 ssColor(defFontColor),
            			 ssBGColor(defFontBGColor)
			       )));
			       
    this.addStyler('menu',
                    	    new Styler('menu', null, '.menu',
                    	       new Style(
                    		 ssFontFace(defFontFace),
                		 ssFontSize(defFontSizePts),
                		 ssColor(defFontColor),
            			 ssBGColor(defFontBGColor),
            			 ssBorderColor(blue),
            			 ssBorderStyle('solid'),
            			 ssBorderWidth(2),
            			 ssWidth(90),
            			 ssHeight(60)
			       )));
			       
    this.addStyler('qaform',
                                new Styler('qaform', null, '.qaform',
                            	new Style(
                            	 ssFontFace(defFontFace),
            		         ssFontSize(defFontSizePts),
            		         ssColor(defFontColor),
        			 ssBGColor(defFontBGColor),
        			 ssLayerBGColor(defFontBGColor),
            		         ssMargin(0,0,0,0)
			       )));
			       
    this.addStyler('slideIE',
                                new Styler('slideIE', null, '.slideIE',
                            	new Style(
                    		ssWidth(191),
                    		ssHeight(286)
			       )));

    this.addStyler('qaIE',
                            new Styler('qaIE', null, '.qaIE',
                        	new Style(
                		ssWidth(702)
			       )));

    this.addButtonStylers('short', 82, 23, 'normal');
    this.addButtonStylers('label', 86, 15, null, true);

    	//                  id, left, top, width, height, bgColor
    if (smScreen) {
    	this.addDivStylers('Brand',  3,  20,  93,  50);
    	this.addDivStylers('Title',  3,  70,  93,  40, white, navy);
    	this.addDivStylers('Rec',    3, 130,  93, 180);
    	this.addDivStylers('Tab',    3, 335,  93,  15);
    	this.addDivStylers('Slide',  3, 350,  93,  30, navy, blue);
    	this.addDivStylers('Data',   3, 495,  93,  20);
    	this.addDivStylers('Buffer', 5, 515,  93,   8, defFontBGColor, navy, true);
       	this.addDivStylers('Help',   5, 535,  93,  40);
    }  else {
        this.addDivStylers('Brand',  3,  20, 215,  70);
        this.addDivStylers('Title',  5, 100, 211,  18, white, navy);
        this.addDivStylers('Rec',    3, 118, 215, 101);
        this.addDivStylers('Tab',    6, 220, 210,  15);
        this.addDivStylers('Data',   6, 580,  70,  20, navy, defFontBGColor);
        this.addDivStylers('Buffer',78, 584, 130,   8, defFontBGColor, navy, true);
        this.addDivStylers('Logo',  10, 630, 100,  40);
	this.addDivStylers('Help', 120, 640,  90,  40);
    	if (isNetscape4) {
    	    this.addDivStylers('Slide', 14, 260, 200, 300, navy, blue);
    	    this.addDivStylers('QA', 228, 597, 708, 80);
    	} else {
    	    this.addDivStylers('Slide', 6, 235, 210, 330, navy, blue);
    	    this.addDivStylers('QA', 228, 605, 704, 60);
    	}
    }
}


function ThemeGetColor(name) {
    return opt(this.colors[name],    this.colors.normal);
}

function ThemeGetBGColor(name) {
    return opt(this.bgColors[name],  this.bgColors.normal);
}

function ThemeGetFontSize(name) {
    return opt(this.fontSizes[name], this.fontSizes.normal);
}

function ThemeSSColor(name) {
    return ssColor(this.getColor(name));
}

function ThemeSSBGColor(name) {
    return ssBGColor(this.getBGColor(name));
}

function ThemeSSFontSize(name) {
    return ssFontSize(this.getFontSize(name));
}