/*******************************************************************

*

* File    : xLayer.js

*

* Created : 2000/06/08

*

* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com

*

* Purpose : To create a cross browser dynamic layers. This

*		library is based on the library defined in the

*		excellent book. "JavasScript - The Definitive guide"

*		by David Flanagan. Published by O'Reilly.

*		ISBN 1-56592-392-8

*

* History

* Date         Version        Description

*

* 2000-06-08	1.0		Initial version

* 2000-06-17	1.1		Changed function name to setzIndex()
* 2000-06-17	1.2		Changed function name to getzIndex()
* 2000-08-07	1.3		Added the event handling functionality
*					from the book.
* 2000-08-15	1.4		Finally! The NS functions are now prototypes.
***********************************************************************/

var xLayerNo=0;




function xLayer(xHtml, x, y, w)

{

	if(x==null)x=0;

	if(y==null)y=0;

	if(w==null)w=100;



	if(document.layers)

	{
		this.layer=new Layer(w);

		this.layer.document.open();

		this.layer.document.write(xHtml);

		this.layer.document.close();

		this.layer.moveTo(x,y);

		this.images=this.layer.document.images;



	}

	else

	if(document.all)

	{

		var xName="xLayer" + xLayerNo++;



		txt =   "<DIV ID='" + xName

			+ "' STYLE=\"position:absolute;"

			+ "left:"  + x + ";"

			+ "top:"   + y + ";"

			+ "width:" + w + ";"

			+ "visibility:hidden\">"

			+ xHtml 

			+ "</DIV>";

		document.body.insertAdjacentHTML("BeforeEnd",txt);

		this.content = document.all[xName];

		this.layer   = document.all[xName].style;

		this.images  = document.images;

	}

	return(this);

}



if(navigator.appName.indexOf("Netscape") != -1)
{
var eventmasks = {
      onabort:Event.ABORT, onblur:Event.BLUR, onchange:Event.CHANGE,
      onclick:Event.CLICK, ondblclick:Event.DBLCLICK, 
      ondragdrop:Event.DRAGDROP, onerror:Event.ERROR, 
      onfocus:Event.FOCUS, onkeydown:Event.KEYDOWN,
      onkeypress:Event.KEYPRESS, onkeyup:Event.KEYUP, onload:Event.LOAD,
      onmousedown:Event.MOUSEDOWN, onmousemove:Event.MOUSEMOVE, 
      onmouseout:Event.MOUSEOUT, onmouseover:Event.MOUSEOVER, 
      onmouseup:Event.MOUSEUP, onmove:Event.MOVE, onreset:Event.RESET,
      onresize:Event.RESIZE, onselect:Event.SELECT, onsubmit:Event.SUBMIT,
      onunload:Event.UNLOAD
};

/**** START prototypes for NS ***/

xLayer.prototype.moveTo 	= function(x,y) 	{ this.layer.moveTo(x,y); }
xLayer.prototype.moveBy 	= function(x,y) 	{ this.layer.moveBy(x,y); }
xLayer.prototype.show		= function() 	{ this.layer.visibility = "show"; }
xLayer.prototype.hide 		= function() 	{ this.layer.visibility = "hide"; }
xLayer.prototype.setzIndex	= function(z)	{ this.layer.zIndex = z; }
xLayer.prototype.setBgColor 	= function(color) { this.layer.bgColor = color; }
xLayer.prototype.setBgImage 	= function(image) { this.layer.background.src = image; }
xLayer.prototype.getX 		= function() 	{ return this.layer.left; }
xLayer.prototype.getY 		= function() 	{ return this.layer.top; }
xLayer.prototype.getWidth 	= function() 	{ return this.layer.width; }
xLayer.prototype.getHeight 	= function() 	{ return this.layer.height; }
xLayer.prototype.getzIndex	= function()	{ return this.layer.zIndex; }
xLayer.prototype.isVisible 	= function() 	{ return this.layer.visibility == "show"; }
xLayer.prototype.setContent   = function(xHtml)
{
	this.layer.document.open();
	this.layer.document.write(xHtml);
	this.layer.document.close();
}

xLayer.prototype.clip = function(x1,y1, x2,y2)
{
	this.layer.clip.top	=y1;
	this.layer.clip.left	=x1;
	this.layer.clip.bottom	=y2;
	this.layer.clip.right	=x2;
}
xLayer.prototype.addEventHandler = function(eventname, handler) 
{
        this.layer.captureEvents(eventmasks[eventname]);
        var xl = this;
        this.layer[eventname] = function(event) { 
            return handler(xl, event.type, event.x, event.y, 
                           event.which, event.which,
                           ((event.modifiers & Event.SHIFT_MASK) != 0),
                           ((event.modifiers & Event.CTRL_MASK) != 0),
                           ((event.modifiers & Event.ALT_MASK) != 0));
        }
}

/*** END NS ***/

}

else

if(document.all)

{

/*** START prototypes for IE ***/

xLayer.prototype.moveTo = function(x,y)

{

	this.layer.pixelLeft = x;

	this.layer.pixelTop = y;

}

xLayer.prototype.moveBy = function(x,y)

{

	this.layer.pixelLeft += x;

	this.layer.pixelTop += y;

}

xLayer.prototype.show		= function() 	{ this.layer.visibility = "visible"; }

xLayer.prototype.hide		= function() 	{ this.layer.visibility = "hidden"; }

xLayer.prototype.setzIndex	= function(z)	{ this.layer.zIndex = z; }

xLayer.prototype.setBgColor	= function(color) { this.layer.backgroundColor = color; }

xLayer.prototype.setBgImage	= function(image) { this.layer.backgroundImage = image; }

xLayer.prototype.setContent   = function(xHtml)	{ this.content.innerHTML=xHtml; }

xLayer.prototype.getX		= function() 	{ return this.layer.pixelLeft; }

xLayer.prototype.getY		= function() 	{ return this.layer.pixelTop; }

xLayer.prototype.getWidth	= function() 	{ return this.layer.pixelWidth; }

xLayer.prototype.getHeight	= function() 	{ return this.layer.pixelHeight; }

xLayer.prototype.getzIndex	= function()	{ return this.layer.zIndex; }

xLayer.prototype.isVisible	= function()	{ return this.layer.visibility == "visible"; }

xLayer.prototype.clip		= function(x1,y1, x2,y2)

{

	this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")";

	this.layer.pixelWidth=x2;

	this.layer.pixelHeight=y2;

	this.layer.overflow="hidden";

}
xLayer.prototype.addEventHandler = function(eventName, handler) 
{
	var xl = this;
	this.content[eventName] = function() 
	{ 
            var e = window.event;
            e.cancelBubble = true;
            return handler(xl, e.type, e.x, e.y, 
                           e.button, e.keyCode, 
                           e.shiftKey, e.ctrlKey, e.altKey); 
        }
}


/*** END IE ***/

}

else

{

xLayer.prototype.moveTo 	= function(x,y) 	{  }

xLayer.prototype.moveBy 	= function(x,y) 	{  }

xLayer.prototype.show 		= function() 	{  }

xLayer.prototype.hide 		= function() 	{  }

xLayer.prototype.setzIndex	= function(z) {  }

xLayer.prototype.setBgColor 	= function(color) {  }

xLayer.prototype.setBgImage 	= function(image) {  }

xLayer.prototype.getX 		= function() 	{ return 0; }

xLayer.prototype.getY 		= function() 	{ return 0; }

xLayer.prototype.getWidth 	= function() 	{ return 0; }

xLayer.prototype.getHeight 	= function() 	{ return 0; }

xLayer.prototype.getzIndex	= function()	{ return 0; }

xLayer.prototype.isVisible 	= function() 	{ return false; }

xlayer.prototype.setContent   = function(xHtml) { }



}

/*** End  - xLayer - a cross browser layer object by www.Roy.Whittle.com ***/