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

	script voor een inline floating notepad
	(c) 2004, E-Wise BV
	deze wordt door medere sites gebruikt, wil je iets anders, maak dan een copie in een subfolder!

***************************************************************/
/*
	globale variabelen
*/
var FLOATER_OFFSET_TOP = 20;
var FLOATER_TABHEIGHT = 68;
var FLOATER_TABWIDTH = 18;
var FLOATER_FRAMEHEIGHT = 500;
var FLOATER_FRAMEWIDTH = 285;
var FLOATER_INTERVAL = 20;			//--- kleiner == sneller
var FLOATER_DIRECTION = 1;			//--- -1 om de tab aan de rechterkant te zetten
var FLOATER_EASE = 10;						//--- 1 = direct, hoger is 'easier'


/*
	functie om de x positie van een object te vinden. als er geen obj is meegegeven
	gaat'ie er vanuit dat het een floaterObject is...
*/
floaterObject.prototype.findPosX = function(){
	var	obj = this.table;
	var curleft = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x){
		curleft += obj.x;
	}
	return curleft;
}

/*
	functie om de y positie van een object te vinden. als er geen obj is meegegeven
	gaat'ie er vanuit dat het een floaterObject is...
*/
floaterObject.prototype.findPosY = function(){
	var	obj = this.table;
	var curtop = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y){
		curtop += obj.y;
	}
	return curtop;
}


/*
	functie wat er gebeurd als je op het object klikt
*/
floaterObject.prototype.openCloseClicked = function(){
	this.isOpen = this.isOpen ? false : true;
	this.hresX = this.findPosX();
	this.resize();
	setTimeout("floaters[" + this.nr + "].ease()", FLOATER_INTERVAL);
}

/*
	interval, moved de floater naar de nieuwe posities
	er is geen y movement tenzij de scrolling
*/
floaterObject.prototype.ease = function(){
	var diffX = parseFloat(parseFloat(this.x - this.hresX)/FLOATER_EASE);
	

	if(Math.abs(diffX)<1/FLOATER_EASE){
		this.hresX = this.x;
	} else {
		this.hresX += diffX;
		setTimeout("floaters[" + this.nr + "].ease()", FLOATER_INTERVAL);	
	}
	this.moveTo(this.hresX, this.hresY);
}


/*
	houdt de y in de gaten
*/
floaterObject.prototype.scroll = function(){
	this.table.style.top = this.y = parseInt(document.body.scrollTop + this.top);
}



/*
	moved het object naar x
*/
floaterObject.prototype.moveTo = function(x, y){
	this.table.style.left=parseInt(x) + "px";
	this.table.style.top=parseInt(y) + "px";
}


/*
	force Open
*/
floaterObject.prototype.forceOpen = function(){
	this.isOpen = false;
	this.openCloseClicked();
}


function getFloaterById(id){
	for (var i=0;i<floaters.length;i++){
		if(floaters[i].id == id) return floaters[i];
	}
	return null;
}

/*
	set url by id
*/
function setFloaterUrlById(id, url, forceOpen){
	var floater = getFloaterById(id);
	if(floater != null){
		if(forceOpen != null) floater.forceOpen();
		if(floater.setUrl(url)) return true;
	}
	return false;	
}

/*
	als de base url anders is dan de huidige url's base, dan 
	moeten we echt reloaden, anders volstaat het wijzigen van de url
*/
floaterObject.prototype.setUrl = function(url){
	
	stopScrolling = true;
	if(this.url == url || url.replace(/^(.+?)#.*|$/, "$1") == this.url.replace(/^(.+?)#.*|$/, "$1")){
		this.iframe.src = url;
		return true;
	}

	this.url = url;
	try {
		var newFrame = this.buildIFrame();
		var oldFrame = this.content.childNodes.item(0);
		this.content.removeChild(oldFrame);
		this.content.appendChild(newFrame);
		this.iframe = newFrame;
		oldFrame = null;
		return true;
	}
	catch(e){
		alert(e.message);
	}
	return false;
}	

/*
	bouw een iframe, dit doen we apart, omdat we soms nieuwe urls willen laden
*/
floaterObject.prototype.buildIFrame = function(){
	/* iframe */	
	var iframe = document.createElement("IFRAME");
	iframe.id = iframe.name = "floaterFrame" + this.id;
	iframe.className = "floatingFrame";
	iframe.src = this.url;
	iframe.scrolling = this.scrolling;
	iframe.width = "100%";
	iframe.height = "100%";
	iframe.border = "0px";
	
	var func = new Function("floaterLoaded('" + this.id + "')");
	if (document.attachEvent) {	/* internet explorer */
		iframe.attachEvent("onload", func);
	}
	else {	/* firefox */
		iframe.addEventListener("load", func, false);
	}
	return iframe;
}


/*
	get html maakt het tabje via de DOM, vrij langdradig, maar wel generiek
*/
floaterObject.prototype.build = function(){

	/* init waarden */
	var t = FLOATER_OFFSET_TOP + FLOATER_TABHEIGHT * this.nr; 

	var w = this.width + FLOATER_TABWIDTH;
	var l = -1 * this.width;
	var h = this.height;

	if(FLOATER_DIRECTION<0){
		l =	window.document.body.clientWidth - FLOATER_TABWIDTH;		
	}
	

	/*
		table via dom
	*/
	var table = document.createElement("TABLE");
	
	table.id = table.name = "floaterTable" + this.id;
	table.className = "floatingTable";
	table.cellSpacing = "0px";
	table.cellPadding = "0px";
	table.border = "0px";
	table.width = w;
	table.height = h;
	table.style.top = t;
	table.style.left = l;
	table.style.width = w;
	table.style.height = h;
	table.style.display = "none";
	table._floater = this;

	/* tbody moet er dan in zitten */	
	var tbody = document.createElement("TBODY");
	tbody.className = "floatingTBody";
	
	/* 1 tr */
	var tr = document.createElement("TR");
	tr.className = "floatingTR";
	tr.height = h;
	
	/* en 2 celletjes */
	var tdc = document.createElement("TD");				// content
	tdc.className = "floatingCellContent";
	tdc.height = h;

	var iframe = this.buildIFrame();
	tdc.appendChild(iframe);
		
	/* tab td */
	var tdt = document.createElement("TD");				// tabje
	tdt.className = "floatingCellTab";
	tdt.vAlign = "top";

	tdt.align = FLOATER_DIRECTION<0?"right":"left";

	/* image */	
	var img = document.createElement("IMG");
	img.hspace = "0";
	img.vspace = "0";
	img.className = "floaterTab";
	img.src = this.tab;
	img.onclick = new Function("return clickFloater(" + this.nr + ")");
	
	tdt.appendChild(img);
	
	
	if(FLOATER_DIRECTION<0){ /* content eerst, tab daarna */
		tr.appendChild(tdt);
		tr.appendChild(tdc);
	} else {								 /* tab eerst, content daarna */
		tr.appendChild(tdc);
		tr.appendChild(tdt);
	}
	
	tbody.appendChild(tr);
	table.appendChild(tbody);
	
	 /* en van deze 3 willen we direct toegang */
	this.content = tdc;	
	this.iframe = iframe;
	this.table = table;	


	/* close */	

	var cross = document.createElement("IMG");
	cross.style.cssText = "position: relative; display: block; left: -30px; top: -68px; border: 0px; padding: 0px; margin: 0px; cursor: pointer; cursor: hand; z-Index: 30000";
	cross.hspace = "0";
	cross.vspace = "0";
	cross.src = "/shared/images/windows_close.gif";
	cross.onclick = new Function("return clickFloater(" + this.nr + ")");
	
	tdt.appendChild(cross);

}

/* 
	maakt een nieuw floater Object
*/

function floaterObject(id, nr, url, tab, width, height, scrolling){
	/* default values */
	
	this.id = id;
	this.nr = nr;
	this.url = url;
	this.tab = tab;
	this.originalWidth = this.width = width;
	this.height = height;
	this.scrolling = scrolling;
	
	this.hresY = this.y = this.top = FLOATER_OFFSET_TOP + FLOATER_TABHEIGHT * this.nr;
	
	
	if(FLOATER_DIRECTION<0){
		this.hresX = this.x = this.left = window.document.body.clientWidth - FLOATER_TABWIDTH;		
	} else {
		this.hresX = this.x = this.left = this.width * -1;
	}
	
	this.zIndex = 20000 + nr;
	this.isOpen = false;
	
	this.build();
	document.body.appendChild(this.table);


	
}



/*
	als je op het tabje klikt
*/
function clickFloater(nr, forceOpen){
	floater = floaters[nr];
	if(forceOpen != null){
		floater.isOpen = false;
	}
	floater.openCloseClicked();
}

function closeFloaters(){
	for(var i=0;i<floaters.length;i++){
		var floater = floaters[i];
		if (floater.isOpen) floater.openCloseClicked();
	}
}


function floaterLoaded(id){
	if(!window._floatersLoaded) window._floatersLoaded = new Array();
	var t = document.getElementById("floaterTable" + id);
	window._floatersLoaded.push(t);
	try {
		if(window._floatersLoaded.length == floaters.length){	/* allemaal geladen? */
			while(window._floatersLoaded.length>0){
				var floater = window._floatersLoaded.pop();
				floater.style.display = "";
				floater._floater.ease();
			}
		}
	}
	catch(e){
		window.status = "floater " + id + " loaded, but " + e.message;
	}
}

/*
	gebruik setTimeout voor mozilla event vertraging (scrolling loopt er 1 achter anders)
*/
function scrollTab(){
	for(var i in floaters) setTimeout("floaters[" + i + "].scroll()", 100);
}


/* 
	max en min geven vrij simpele antwoorden :-)
*/
function max(a,b){
	if (a>b) return a;
	return b;
}

function min(a,b){
	if (a<b) return a;
	return b;
}

/*
	width en height is van zoveel afhankelijk
*/
floaterObject.prototype.setWidth = function(w){
	this.table.width = this.width = w;
	this.table.style.width = w + "px";
}

floaterObject.prototype.setHeight = function(h){
	this.table.height = this.height = h;
	this.table.style.height = h + "px";
}
	
/*
	deze functie resized de floater als de ruimte te klein wordt
*/
floaterObject.prototype.resize = function(){

	if(this.isOpen){	/* item resizen met scherm als tabje open is */
		this.setWidth(min(max(this.originalWidth, this.width), window.document.body.clientWidth));
	} else {					/* item in originele groote maken als tabje dicht is */
		this.setWidth(this.originalWidth);
	}

	if(FLOATER_DIRECTION<0){	/* uit rechterkant */
		if(this.isOpen){				/* en open ? */
			this.x = window.document.body.clientWidth - this.width ;
		} else {
			this.x = window.document.body.clientWidth - FLOATER_TABWIDTH;
		}
	} else {									/* vanuit linkerkant */
		if(this.isOpen){				/* en open ? */
			this.x = 0;
		} else {
			this.x = 0 - this.width + FLOATER_TABWIDTH;
		}
	}		
}

/*
	als het window geresized wordt moeten we alle tabs even verplaatsen, mooiste is met ease
*/
function windowResize(){
	for(var i=0;i<floaters.length;i++){
		floaters[i].resize();
		floaters[i].ease();
	}
}


var floaters = [];

if (document.attachEvent) {	/* internet explorer */
	window.attachEvent("onscroll", scrollTab);
	window.attachEvent("onresize", windowResize);
	window.attachEvent("onload", createTabs);
}
else {	/* firefox */
	window.captureEvents(Event.MOUSEMOVE | Event.CLICK | Event.MOUSEUP | Event.RESIZE);
	window.addEventListener('DOMMouseScroll', scrollTab, false);
	window.addEventListener('scroll', scrollTab, false);
	window.addEventListener('resize', windowResize, false);
	window.addEventListener('load',createTabs,false); 	
}

/*
	bouwt ze pas nadat de pagina zelf geladen is
*/
function createTabs() {
	if(window._floaters){
		for(var i=0; i<window._floaters.length;i++){
			var func = window._floaters[i];
			eval(func);
		}
	}
}
		

/*
	aanroepen om de tabs te maken, id, url en tab zijn verplicht
	scrolling, width en height optioneel
*/

function setFloaterHTML(id, url, tab, scrolling, width, height){
	if(!window._floaters) window._floaters = new Array();
	scrolling = scrolling==null ? "auto" : scrolling;									
	if(width == "max") width = window.document.body.clientWidth - FLOATER_TABWIDTH;		
	width = (width==null)?FLOATER_FRAMEWIDTH:parseInt(width);				
	if(height == "max") height = window.document.body.clientHeight;	
	height = (height==null)?FLOATER_FRAMEHEIGHT:parseInt(height);		
	var func= 'getFloaterHTML("'+id+'","'+url+'","'+tab+'","'+scrolling+'","'+width+'","'+height+'");';
	window._floaters.push(func);
}

/*
	na onload wordt deze functie aangeroepen
*/

function getFloaterHTML(id, url, tab, scrolling, width, height){
	var nr = floaters.length; 	
	
	if(floaters[nr]==null){
		try {
			var floater = new floaterObject(id, nr, url, tab, width, height, scrolling);
			floaters[nr] = floater;
			windowResize();
		}
		catch(e){
			alert(e.message);
			window.status = "error: couldn't create loater: " + id + ", " + e.message;
		}
	}
}