/**
   Class:       popup
   Description: Show / Hide a div that is used like a popup window
                defaults: displays a centered 600 X 500px popup (can be overridden).
   param id:    id of the div
   uses:        fbto.js, alphatool.js
   usage:       De popup wordt van buitenaf geconstrueerd door aanroep van function PopupDiv. 
   				In de DIV die de popup construeert, moet een DIV zitten die de header construeert. 
   				De header hoogte staat op default 30px. Bij aanpassing ook infoPopup.css aanpassen.
   				---------------------------------
   				Voorbeeld constructie:
   				
   				var popup1 = new PopupDiv("divPopup1", "/fbto/info.html",620,480,true,false,FADE,30); 	
   						
   				<div class="info_popup" id="divPopup1" onmousedown="dragStart(event, 'divPopup1')">
					<div class="info_popup_header" id="divPopup1Header">
				      	<img class="closebutton" src="/fbto/assets/images/buttons/close.gif" onclick="popup1.hide();">
					</div>
				</div>
   				---------------------------------
   				
   	@param element Een String die de naam van de popup div aangeeft
   	@param bodyURL Een String die naar de pagina wijst die in de popup geladen wordt
	@param width Breedte van de popup als integer
	@param height Hoogte van de popup als integer
	@param fromCursor Een boolean flag, welke aangeeft of de popup bij de cursor weergegeven moet worden of in het midden van de parent page
	@param underCursor Een boolean flag, welke aangeeft of de popup onder of boven de cursor getoond moet worden (icm fromCursor = true)
	@param centerWidthCursor Een boolean flag, welke aangeeft of de popup horizontaal gecentreerd moet worden (icm fromCursor = true)
	@param animate Een constante integer die een animatie type aangeeft
	@param speed Snelheid van animatie
*/
function PopupDiv(element, bodyURL, width, height, fromCursor, underCursor, centerWidthCursor, animate, speed) {
	// constants (animation)
	this.MOVE_NO		= 0;   // no effect
	this.MOVE_TOP		= 1;   // move from the top
	this.MOVE_LEFT		= 2;   // move from the left
	this.FADE			= 3;   // fades in from center, gebruikt aphatool.js
	this.FADE_SPEED		= 500; // aantal miliseconden, parameter voor faden 	

	// DEFAULT VALUES - override when required
	this.top			= 0;
	this.left			= 0;
	this.fromCursorX	= 2;     // -  x offset
	this.fromCursorY	= 5;     // -  y offset
	this.headerHeight	= 21;    // height of the header

	// animation (default: no animation)
	this.delay			= 0;     // delay in msecs before div is shown
	this.moveTime		= 10;    // timeinterval (msecs) in animation
	
	// private
	var _init			= false;
	var _browser		= new Browser();
	var _event			= null;
	var _timer			= null;
	var _pos			= null;
	var _iFrame			= null;

	// constructor functionality.
	this.element		= element;
	this.bodyURL		= bodyURL;
	this.width			= width;
	this.height			= height;
	this.fromCursor		= fromCursor;  // position div on cursor (event must be passed to show())
	this.underCursor	= underCursor;  // position div under/above cursor (in case of onCursor == true)
	this.centerWidthCursor	= centerWidthCursor;  // center div horizontally in window (in case of onCursor == true)
	this.animate		= animate;		// MOVE_NO, MOVE_TOP, MOVE_LEFT, FADE
	this.speed			= speed;    // move per timeinterval in animation
	
	// show the popup holder
	this.show = function (event) {
		// save event info
		if (event != null) {
			_event = event;
			_pos = getXY(_event);
		}
		_timer = setTimeout(this._delegate(this, function() { this._show('block'); }), this.delay);
	}
	
	// hide the popup holder
	this.hide = function () {
		if (_timer != null) {
			clearTimeout(_timer);
			_timer = null;
		}
		if (this.popup != null && this.popup.style != null) {
			if (this.animate == this.FADE) {
				if (isOlderIE(7)) {
					// haal content (i)frame weg als de popup verdwijnt, omdat IE6 anders de comboboxes niet meer rendert (bug)
					this.showMask();
				}
				alphatool.fadeElement(this.popup, false, this.FADE_SPEED);
			} else {
				this.popup.style.display = 'none';
				this.popup.style.visibility = 'hidden';
			}
		}
	}
	
	// Oplossing voor drag probleem waarbij document in genest iframe mousemove niet doorstuurt naar parent frame:
	// voeg een onzichtbare div mask toe die weer over de iframe heen zit :)
	this.showMask = function() {
		if (isOlderIE(7)) {
			this._setFrameVisibility("_contentframe", false);
		} else {
			this._setFrameVisibility("_maskframe", true);
		}
	}

	// Haal de 'mask' weer weg
	this.hideMask = function() {
		if (isOlderIE(7)) {
			this._setFrameVisibility("_contentframe", true);
		} else {
			this._setFrameVisibility("_maskframe", false);
		}
	}
	
	// private method: return the content iframe
	this._setFrameVisibility = function(frame, show) {
		var visibility = (show) ? "visible" : "hidden";
		document.getElementById(this.element + frame).style.visibility = visibility;
	}
	
	// private method: show the div
	this._show = function () {
		this.popup = document.getElementById(element);		
		if (this.popup != null && this.popup.style != null) {
			var positioner = (this.fromCursor) ? this._fromCursor : this._center;
			positioner.call(this, []);
			this._setBody();
			
			// Oplossing voor de bug in IE, versies tot 7.0. 
			// SelectBox trekt zich niets aan van z-index.
			if (_browser.isIE) {
				// creeer een iFrame
				var iFrame = this.iFrame = document.createElement("IFRAME");
				// ter voorkoming van de secure-nonsecure warning		  
				iFrame.setAttribute("src", "/fbto/blanco.html");
				iFrame.setAttribute("scrolling", "no");
				
				// IFrame precies matchen met header
				iFrame.style.position="absolute";
				iFrame.style.left = '0px';
				iFrame.style.top = '0px';
				iFrame.style.width = this.width + 'px';
				iFrame.style.height = this.headerHeight + 'px';
				
				//iFrame toevoegen aan de popup.
				this.popup.appendChild(iFrame);
			}
		}
		this.popup.style.display = 'block';
		this.popup.style.visibility = 'visible';   
		this._moveIn();
	}
	
	// private method: centers div in the browser window
	this._center = function () {
		// get window dimensions
		var W = 600, H = 500;
		if (_browser.isNS) {
			W = window.innerWidth;
			H = window.innerHeight;
		} else if (_browser.isIE) {
			W = document.body.offsetWidth;
			H = document.body.offsetHeight;
		}
		// center div in the window
		this.top  = Math.max((H  - this.height) / 2, 0);
		this.left = Math.max((W  - this.width) / 2, 0);
	}
	
	// private method:positions div to the mousecursor
	this._fromCursor = function () {
		if (_event == null) return;
		this.left = _pos.x + this.fromCursorX;
		this.top  = _pos.y + this.fromCursorY;
		if (!this.underCursor) {
			this.top -= this.height;
		}
		if (this.centerWidthCursor) {
			// get window dimensions
			var W = 600;
			if (_browser.isNS) {
				W = window.innerWidth;
			} else if (_browser.isIE) {
				W = document.body.offsetWidth;
			}
			// center div in the window
			this.left = Math.max((W  - this.width) / 2, 0);
		}
	}
	
	// private method: appends body of the div and applies a mask for when dragging
	this._setBody = function () {
		if (!_init && this.popup != null && this.popup.style != null) {
			this._setBodyframe(this.popup);
			if (!isOlderIE(7)) {
				this._setBodyMask(this.popup);
			}
			_init = true;
		}
	}
	
	// 
	this._setBodyframe = function(popup) {
		var bodyH = this.height - this.headerHeight;
		var props = "width=100% height=" + bodyH + "px frameborder=0 src='" + this.bodyURL + "'";
		popup.innerHTML += "<iframe id='" + this.element + "_contentframe' " + props + "></iframe>";
	}
	
	// 
	this._setBodyMask = function(popup) {
		var style = "width:99%;height:99%;position:absolute;top:0px;left:0px;" + alphatool.getAlphaCSS(0);
		popup.innerHTML += "<div id='" + this.element + "_maskframe' style='" + style + ";visibility:hidden;'>&nbsp;</div>";
	}
	
	// private method: animations to move div to the calculated position
	this._moveIn = function () {
		this.popup.style.width  = this.width + 'px';
		this.popup.style.height = this.height + 'px';
		
		if (this.animate == this.MOVE_TOP) {
			this._animate(-this.height, this.left, this.top, this.left);
		} else if (this.animate == this.MOVE_LEFT) {
			this._animate(this.top, -this.width, this.top, this.left);
		} else if (this.animate == this.FADE) {
			this.popup.style.top  = this.top + 'px';
			this.popup.style.left = this.left + 'px';
			if (isOlderIE(7)) {
				// show frame weer, die eerder weggehaald werdt omdat IE6 anders de comboboxes niet laadde
				this.hideMask();
			}
			alphatool.fadeElement(element, true, this.FADE_SPEED);
		} else {
			this.popup.style.top  = this.top + 'px';;
			this.popup.style.left = this.left + 'px';;
		}
	}
	
	// private method: animations to move div from start to end position
	this._animate = function (startT, startL, endT, endL) {
		var step = 0;
		var fnc = function() {
			var curT = parseInt(this.popup.style.top);
			var curL = parseInt(this.popup.style.left);
			if (step <= this.speed) {
				this.popup.style.top  = (startT + step * (endT-startT) / this.speed) + 'px';
				this.popup.style.left = (startL + step * (endL-startL) / this.speed) + 'px';
				step++;
			} else {
				clearInterval(this.interval);
			}
		}
		this.interval = setInterval(this._delegate(this, fnc), this.moveTime);
	}
	
	
	// private method: used in animations
	this._delegate = function (obj, method) {
		return function() { return method.call(obj); }
	}
}