/**
 * This file must be included to support popup windows. You can instantiate the PopupWindow class by giving the ID of the body,
 * the position and size and the name / title of the window. The positions and size may be in pixel or percentages 
 * (p.h. "new PopupWindow('id', '100px', '200px', '300px', '400px', 'A nice popup').
 * 
 * @version 13-01-2010
 * @author <a href="mailto:r.tennapel@griponservice.nl?SUBJECT=popupwindow.js">R. ten Napel, ing.</a>
 **/

/**
 * The popup window class. A popup window consists out of a wrapper, a header beam with buttons and a body with contents.
 * 
 * @param id				The ID of the body of the window.
 * @param x					The X-position of the window.
 * @param y					The Y-position of the window.
 * @param width				The width of the window.
 * @param height			The height of the window.
 * @param name				The title of the window.
 * @param transparency		The transparency level of the window filter.
 **/
PopupWindow = function(id, x, y, width, height, name, transparency) {		
	this.id = id;
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	this.name = name;
	this.transparency = (transparency == null) ? 50 : transparency;
	
	// The popup window elements:
	this.showState = "normal";
	this.filter = this.createFilter(this.transparency);
	this.wrapper = this.createWrapper(this, id, x, y, width, height);
	this.beam = this.createBeam(this.wrapper);
	this.title = this.createTitle(this.beam, name);
	this.btnClose = this.createBtnClose(this.beam);
	this.btnMaximize = this.createBtnMaximize(this.beam);
	this.body  = this.createBody(id, this.wrapper);
};

/**
 * Create the filter used in association with this window. When the window is shown, the filter disables all other controls beneath the wrapper.
 * 
 * @param transparency		The transparency level of the filter.
 * 
 * @return					The transparency layer of this window.
 **/
PopupWindow.prototype.createFilter = function(transparency) {
	var filter = document.createElement("DIV");
	
	filter.window = this;
	
	(!GlobalKit.browser().contains("MSIE 6")) ? $(filter).setStyle("position", "fixed").setStyle("width", "100%") : $(filter).setStyle("position", "absolute").setStyle("width", "200%");
	$(filter).setBColor("#000000").setStyle("left", "0px").setStyle("top", "0px").setStyle("height", "100%").setTransparency(transparency);
	
	document.body.appendChild(filter);
	
	return filter;
};

/**
 * Create a wrapper element which encapsulates the header beam and content body of the window and add's it to the document body.
 * This wrapper element uses the css "popup_wrapper"-class by default. The wrapper is the graphical representation of the window.
 * 
 * @param parentElement		The parent element of the wrapper (the window itself by default).
 * @param id				The ID of the content body to also use for the wrapper (p.h. id = 'test' will give the wrapper an id of 'wrapper_test').
 * @param x					The X-position of the wrapper (by default the same as the window).
 * @param y					The Y-position of the wrapper (by default the same as the window).
 * @param width				The width of the wrapper (by default the same as the window).
 * @param height			The height of the wrapper (by default the same as the window).
 *
 * @return					A wrapper that's been added to the document body.
 **/
PopupWindow.prototype.createWrapper = function(parentElement, id, x, y, width, height) {
	var wrapper = document.createElement("DIV");
	
	wrapper.window = this;
	wrapper.parent = parentElement;
	wrapper.id = "wrapper_" + id;
	
	(!GlobalKit.browser().contains("MSIE 6")) ? $(wrapper).setStyle("position", "fixed") : $(wrapper).setStyle("position", "absolute");
	$(wrapper).setStyle("left", x).setStyle("top", y).setStyle("width", width).setStyle("height", height).addClass("popup_wrapper");
	
	document.body.appendChild(wrapper);
	
	return wrapper;
};

/**
 * Create a header beam which encapsulates the popup title and buttons and add's it to the given parent element.
 * This beam element uses the css "beam"-class by default.
 * 
 * @param parentElement		The parent element of the beam (the wrapper by default).
 *
 * @return					A header beam that's been added to the parent element.
 **/
PopupWindow.prototype.createBeam = function(parentElement) {
	var beam = document.createElement("DIV");
	
	beam.window = this;
	beam.parent = parentElement;
	
	$(beam).addClass("beam");
	
	parentElement.appendChild(beam);
	
	return beam;
};

/**
 * Create a title element and add's it to the given parent element. This title element uses the css "title"-class by default.
 * 
 * @param parentElement		The parent element of the title (the header beam by default).
 * @param text				The title's content.
 *
 * @return					A title element that's been added to the parent element.
 **/
PopupWindow.prototype.createTitle = function(parentElement, text) {
	// Set default text:
	if (text == null) {
		text = "Popup window";
	}
	
	var title = document.createElement("DIV");
	
	title.window = this;
	title.parent = parentElement;
	title.innerHTML = text;
	
	$(title).addClass("title");
	
	parentElement.appendChild(title);
	
	return title;
};

/**
 * Create a button to close the window and add it to the given parent element. This title element uses the css "button"-class by default.
 * 
 * @param parentElement		The parent element of the button (the header beam by default).
 *
 * @return					A button element that's been added to the parent element.
 **/
PopupWindow.prototype.createBtnClose = function(parentElement) {
	var close = document.createElement("A");
	
	close.window = this;
	close.parent = parentElement;
	close.href = "#";
	close.setAttribute("href", close.href);
	close.innerHTML = "X";
	
	$(close).addClass("button").on("click", function() { this.window.hide(); });
	
	parentElement.appendChild(close);
	
	return close;
};

/**
 * Create a button to maximize the window and add it to the given parent element. This title element uses the css "button"-class by default.
 * 
 * @param parentElement		The parent element of the button (the header beam by default).
 *
 * @return					A button element that's been added to the parent element.
 **/
PopupWindow.prototype.createBtnMaximize = function(parentElement) {
	var max = document.createElement("A");
	
	max.window = this;
	max.parent = parentElement;
	max.href = "#";
	max.setAttribute("href", max.href);
	max.innerHTML = "+";
	
	$(max).on("click", function() {
		if (this.window.showState == "normal") {
			this.window.maximize();
		} else if (this.window.showState == "maximized") {
			this.window.normalize();
		}
	}).addClass("button");
	
	parentElement.appendChild(max);
	
	return max;
};

/**
 * Create a body element and add it to the given paren element.
 * 
 * @param id				The ID of the body element.
 * @param parentElement		The parent element to add the body to (the wrapper by default).
 * 
 * @return					The body element that's been added to the parent element.
 **/
PopupWindow.prototype.createBody = function(id, parentElement) {
	var body = document.createElement("DIV");
	
	body.window = this;
	body.parent = parentElement;
	body.id = id;
	$(body).addClass("body");
	
	$(body).setStyle("width", "100%");
	body.show = function() {
		this.window.show();
		
		return this;
	};
	body.hide = function() {
		this.window.hide();
		
		return this;
	};
	
	parentElement.appendChild(body);
	
	return body;
};

/**
 * The routine that maximizes the window.
 * 
 * @param wrapper			The wrapper element that will be transformed.
 * 
 * @return					This window.
 **/
PopupWindow.prototype.maximize = function(wrapper) {
	this.showState = "maximized";
	this.btnMaximize.innerHTML = "-";
	
	$(this.wrapper).moveTo(0, 0, 1000, Tween.ease, 30).resizeTo(100.0, 100.0, 1000, Tween.ease, 30);
	
	return this;
};

/**
 * The routine that changes the window to its normal size and position.
 * 
 * @param wrapper			The wrapper element that will be transformed.
 * 
 * @return					This window.
 **/
PopupWindow.prototype.normalize = function(wrapper) {
	this.showState = "normal";
	this.btnMaximize.innerHTML = "+";
	
	$(this.wrapper).moveTo(this.x, this.y, 1000, Tween.ease, 30).resizeTo(this.width, this.height, 1000, Tween.ease, 30);
	
	return this;
};

/**
 * Shows this popup window.
 * 
 * @return					This window.
 **/
PopupWindow.prototype.show = function() {
	$(this.wrapper, this.filter).show();
	
	return this;
};

/**
 * Hides this popup window.
 * 
 * @return					This window.
 **/
PopupWindow.prototype.hide = function() {
	$(this.filter, this.wrapper).hide();
	
	return this;
};