/******************************************************************* 
* File    : JSFX_BorderedLayer.js  © JavaScript-FX.com
* Created : 2001/04/11 
* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com 
* Purpose : To create a cross browser dynamic layers with 3d borders.
* History 
* Date         Version        Description 
* 2001-09-08	1.0		Extended from JSFX.Layer - this class creates bordered layers
***********************************************************************/ 
/**********************************************************************************/
//Class JSFX.BorderedLayer extends Layer
JSFX.BorderedLayer = function(newLayer, borderWidth, parent) 
{
	if(!newLayer)
		return;
	this.superC = JSFX.Layer;
	this.superC(newLayer, parent);
	if(document.layers)
	{
		this.borderHi = this.parent ? new Layer(2000, this.parent.elem) : new Layer(2000);
		this.borderLo = this.parent ? new Layer(2000, this.parent.elem) : new Layer(2000);
		this.borderHi.zIndex = 1;
		this.borderLo.zIndex = 2;
		this.style.zIndex    = 3;
		this.borderWidth	= borderWidth;
		this.x		= 0;
		this.y		= 0;
		if(parent != null)
			this.style.visibility = "inherit";
		this.setBorderWidth(borderWidth);
 	} 
	else 
	{
		this.borderWidth  = borderWidth;
		this.setBorderWidth(borderWidth);
	} 
} 
JSFX.BorderedLayer.prototype = new JSFX.Layer;

/**********************************************************************************/
if(ns4)
{
	JSFX.BorderedLayer.prototype.moveTo = function(x,y)
	{
		this.x = x;
		this.y = y;
		var bw=this.borderWidth;
		this.borderHi.moveTo(x,y); 
		this.elem.moveTo(x+bw,y+bw); 
		this.borderLo.moveTo(x+bw,y+bw); 
	}
}
/**********************************************************************************/
/*** show()/hide() Visibility ***/
JSFX.BorderedLayer.prototype.show		= function() 	{ this.style.visibility = "inherit"; } 
if(ns4)
{
	JSFX.BorderedLayer.prototype.show		= function() 	
	{ 
		this.style.visibility 	 = "inherit"; 
		this.borderHi.visibility = "inherit"; 
		this.borderLo.visibility = "inherit"; 
	}
	JSFX.BorderedLayer.prototype.hide 		= function() 	
	{
		this.style.visibility 	 = "hide";
		this.borderHi.visibility = "hide"; 
		this.borderLo.visibility = "hide"; 
	}
}
/**********************************************************************************/
/*** zIndex ***/
JSFX.BorderedLayer.prototype.setzIndex	= function(z)	{ this.style.zIndex = z; } 
JSFX.BorderedLayer.prototype.getzIndex	= function()	{ return this.style.zIndex; }
if(ns4)
{
	JSFX.BorderedLayer.prototype.setzIndex	= function(z)
	{
		this.borderHi.zIndex = 3*z+1;
		this.borderLo.zIndex = 3*z+2;
		this.style.zIndex    = 3*z+3;
	} 
	JSFX.BorderedLayer.prototype.getzIndex	= function()	{ return this.borderHi.zIndex/3; }
}
/**********************************************************************************/
//NS6
if(document.getElementById && ! document.all)
{
	JSFX.BorderedLayer.prototype.resizeTo = function(x,y)
	{
		var bw = this.getBorderWidth();
		this.style.width   = (x-2*bw)+"px";
		this.style.height  = (y-2*bw)+"px";
	}
}
if(ns4)
{
	JSFX.BorderedLayer.prototype.resizeTo = function(w,h)
	{
		this.style.clip.width		=w - 2*this.borderWidth;
		this.style.clip.height		=h - 2*this.borderWidth;
		this.borderHi.clip.width	=w;
		this.borderHi.clip.height	=h;
		this.borderLo.clip.width	=w - this.borderWidth;
		this.borderLo.clip.height	=h - this.borderWidth;
	}
}

/**********************************************************************************/
/**********************************************************************************/
/*** get pageX/pageY ***/
JSFX.BorderedLayer.prototype.getPageX2		= function(el)	
{ 
	return el.offsetLeft + (el.offsetParent ? this.getPageX2(el.offsetParent) : 0);
}
JSFX.BorderedLayer.prototype.getPageY2		= function(el) 	
{ 
	return el.offsetTop +(el.offsetParent ? this.getPageY2(el.offsetParent) : 0);
}
JSFX.BorderedLayer.prototype.getPageX		= function()	
{ 
	el = this.elem;
	return el.offsetLeft - this.getBorderWidth()  + (el.offsetParent ? this.getPageX2(el.offsetParent) : 0);
}
JSFX.BorderedLayer.prototype.getPageY		= function() 	
{ 
	el = this.elem;
	return el.offsetTop - this.getBorderWidth() + (el.offsetParent ? this.getPageY2(el.offsetParent) : 0);
}
if(document.all)
{
	JSFX.BorderedLayer.prototype.getPageX2		= function(el)	
	{ 
		return el.offsetLeft + parseInt(el.style.borderWidth + "0") + (el.offsetParent ? this.getPageX2(el.offsetParent) : 0);
	}
	JSFX.BorderedLayer.prototype.getPageY2		= function(el) 	
	{ 
		return el.offsetTop + parseInt(el.style.borderWidth + "0") + (el.offsetParent ? this.getPageY2(el.offsetParent) : 0);
	}
	JSFX.BorderedLayer.prototype.getPageX		= function()	
	{ 
		el = this.elem;
		return el.offsetLeft + (el.offsetParent ? this.getPageX2(el.offsetParent) : 0);
	}
	JSFX.BorderedLayer.prototype.getPageY		= function() 	
	{ 
		el = this.elem;
		return el.offsetTop + (el.offsetParent ? this.getPageY2(el.offsetParent) : 0);
	}
}
if(ns4)
{
	JSFX.BorderedLayer.prototype.getPageX 	= function() 	{ return this.elem.pageX - this.getBorderWidth(); }
	JSFX.BorderedLayer.prototype.getPageY 	= function() 	{ return this.elem.pageY - this.getBorderWidth(); }
}
/**********************************************************************************/
/*** getWidth/Height ***/
JSFX.BorderedLayer.prototype.getInnerWidth	= function() 	{ return this.getWidth() - 2*this.getBorderWidth(); }
JSFX.BorderedLayer.prototype.getInnerHeight	= function() 	{ return this.getHeight() - 2*this.getBorderWidth(); }
if(!document.getElementById)
{
	JSFX.BorderedLayer.prototype.getInnerWidth		= function()
 	{ 
		if(this.elem.scrollWidth)
			return this.elem.scrollWidth;
		else
			return this.elem.offsetWidth;
	}
	JSFX.BorderedLayer.prototype.getInnerHeight		= function()
 	{ 
		if(this.elem.scrollHeight)
			return this.elem.scrollHeight;
		else
			return this.elem.offsetHeight;
	}
	JSFX.BorderedLayer.prototype.getWidth		= function()
 	{ 
		return this.getInnerWidth() + 2*this.getBorderWidth();
	}
	JSFX.BorderedLayer.prototype.getHeight		= function()
 	{ 
		return this.getInnerHeight() + 2*this.getBorderWidth();
	}
}

if(ns4)
{
	JSFX.BorderedLayer.prototype.getInnerWidth	= function() 	{ return this.style.clip.right; }
	JSFX.BorderedLayer.prototype.getInnerHeight	= function() 	{ return this.style.clip.bottom; }
	JSFX.BorderedLayer.prototype.getWidth	= function() 	{ return this.style.clip.right + 2*this.borderWidth; }
	JSFX.BorderedLayer.prototype.getHeight	= function() 	{ return this.style.clip.bottom + 2*this.borderWidth; }
}
/**********************************************************************************/
/*** get/set border ***/
JSFX.BorderedLayer.prototype.setBorderWidth	= function(w)
{
	this.style.borderWidth = w;
}
JSFX.BorderedLayer.prototype.getBorderWidth	= function()
{
	return parseInt(this.style.borderWidth);
}
//** In IE the border is placed INSIDE the element space. Resize it so the border goes
//** on the "outside" of the element
if(document.all)
{
	JSFX.BorderedLayer.prototype.setBorderWidth	= function(w)
	{
		this.style.borderWidth = 0;
		this.resizeTo(this.elem.offsetWidth + 2*w, this.elem.offsetHeight + 2*w);
		this.style.borderWidth = w;
	}
}
//** In NS4 we simulate 2 borders with 2 seperate layers.
if(ns4)
{
	JSFX.BorderedLayer.prototype.setBorderWidth	= function(borderWidth)
	{
		this.borderWidth = borderWidth;
		var w = this.style.clip.right;
		var h = this.style.clip.bottom;
		this.borderHi.clip.right  = w + 2*borderWidth;
		this.borderHi.clip.bottom = h + 2*borderWidth;
		this.borderLo.clip.right  = w + borderWidth;
		this.borderLo.clip.bottom = h + borderWidth;
		this.moveTo(this.x, this.y);
	}
	JSFX.BorderedLayer.prototype.getBorderWidth	= function()
	{
		return this.borderWidth;
	}
}
/**********************************************************************************/
/*** set border hi/lo colors (for 3d effect) ***/
JSFX.BorderedLayer.prototype.setBorderHighColor	= function(c)
{
	this.style.borderStyle="solid"
	this.style.borderTopColor = c;
	this.style.borderLeftColor = c;
}
JSFX.BorderedLayer.prototype.setBorderLowColor	= function(c)
{
	this.style.borderStyle="solid"
	this.style.borderRightColor = c;
	this.style.borderBottomColor = c;
}
if(ns4)
{
	JSFX.BorderedLayer.prototype.setBorderHighColor	= function(color)
	{
		this.borderHi.bgColor = color;
 	}
	JSFX.BorderedLayer.prototype.setBorderLowColor	= function(color)
	{
		this.borderLo.bgColor = color;
 	}
}