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

posElement 0.1
cross-browser een DHTML element tekenen. 
properties: 
id, visibility, top, left, width, height, bgColor.
methods:
writeElement, shiftTo, shiftBy, show, hide

requires: platform.js, een externe stylesheet waar cssClass naar verwijst.

1. maak een nieuw element object in de head van je html pagina
2. gebruik element.writeElement() op de juiste plek in de body
*************************************************************************/

/**************************
*                         *
*	     Element          *
*                         *
***************************/
function Element(id, visibility, top, left, width, height, bgColor, inhoud) {
	this.id = id;					// string: identifier
	this.visibility = visibility;	// string: visible of hidden
	this.top = top;					// int
	this.left = left;				// int
	this.width = width;				// int
	this.height = height;			// int
	this.bgColor = bgColor;			// string: hex
	this.inhoud = inhoud;			// string: html markup
}
if((platform.browser == "ns") && (platform.version < 5)) {
	Element.prototype.markup = markupNS4;
	Element.prototype.putLayerAttributes = putLayerAttributes;
	Element.prototype.putLayer = putLayer;
	Element.prototype.shiftTo = shiftToNS4;
	Element.prototype.shiftBy = shiftByNS4;
}else {
	Element.prototype.markup = markupDOM;
	Element.prototype.putStyle = putStyleAttributes;
	Element.prototype.putSpan = putSpan;
	Element.prototype.shiftTo = shiftToDOM;
	Element.prototype.shiftBy = shiftByDOM;
}
	Element.prototype.writeElement = writeElement;
	Element.prototype.show = show;
	Element.prototype.hide = hide;

/*************************************
*                                    *
*     cross-browser functies         *
*                                    *
**************************************/
function writeElement() {
	document.write(this.markup());
}

function show() {
	obj = getObj(this.id);
	obj.visibility = "visible";
}

function hide() {
	obj = getObj(this.id);
	obj.visibility = "hidden";
}

/*************************************
*                                    *
*     Netscape 4 functies            *
*                                    *
**************************************/
function markupNS4() {
	var layerBuffer = "";

	layerBuffer = this.putLayerAttributes();
	layerBuffer = this.putLayer(layerBuffer);
	return(layerBuffer)
}
function putLayerAttributes() {	
	var buffer = "";

	buffer = "";
	buffer += "visibility=" + this.visibility + " ";
	buffer += "top=" + this.top + " ";
	buffer += "left=" + this.left+ " ";
	buffer += "id=" + this.id+ " ";
	if(this.width) buffer += "width=" + this.width+ " ";
	if(this.height) buffer += "height=" + this.height+ " ";
	if(this.bgColor) buffer += "bgcolor=" + this.bgColor+ " ";

	return(buffer);
}
function putLayer(layerAttributes) {
	var buffer = "";
	
	buffer += "<layer ";
	if(this.id) this.buffer += "id=\"" + this.id + "\" ";
	if(layerAttributes) buffer += layerAttributes;
	buffer += ">";
	if(this.inhoud) buffer += this.inhoud;
	buffer += "</layer>\n";
	return(buffer);
}
function shiftToNS4(posX, posY) {
	obj = getObj(this.id);
	obj.moveTo(posX, posY);
}
function shiftByNS4(deltaX, deltaY) {
	obj = getObj(this.id);
	obj.moveBy(deltaX, deltaY);	
}

/*************************************
*                                    *
*     Internet Explorer functies     *
*                                    *
**************************************/
function markupDOM() {
	var buffer = "";
	var styleBuffer = "";
	
	styleBuffer = this.putStyle();
	buffer = this.putSpan(styleBuffer);
	return(buffer);
}
function putStyleAttributes() {	
	var buffer = "";
	
	buffer += "style=\"position:absolute; ";
	buffer += "visibility: " + this.visibility + "; ";
	buffer += "top: " + this.top + "px; ";
	buffer += "left: " + this.left+ "px; ";
	if(this.width) buffer += "width: " + this.width+ "px; ";
	if(this.height) buffer += "height: " + this.height+ "px; ";
	if(this.bgColor) buffer += "background-color: " + this.bgColor+ "; ";
	buffer += "cursor: hand;";
	buffer += "\" ";
	return(buffer);
}
function putSpan(style) {
	var buffer = "";
	
	buffer += "<span ";
	if(this.id) buffer += "id=\"" + this.id + "\" ";
	if(style) buffer += style;
	buffer += ">";
	if(this.inhoud) buffer += this.inhoud;
	buffer += "</span>\n";
	return(buffer);
}
function shiftToDOM(posX, posY) {
	obj = getObj(this.id);
	obj.pixelLeft = posX;
	obj.pixelTop = posY;
}
function shiftByDOM(deltaX, deltaY) {
	obj = getObj(this.id);
	obj.pixelLeft += deltaX;
	obj.pixelTop += deltaY;
}

/*************************************
*                                    *
*     Calls                          *
*                                    *
**************************************/
// een object id converteren naar een obj referentie
function getObj(objId) {
	if(platform.browser == 'ns')
		objRef = eval("document." + objId);
	else
		objRef = eval("document.all." + objId + ".style");
	return(objRef);
}