/**
 * The javascripts for an unobtrusive DHTML Window
 * @author Ozgur Ayten
 */

var Akyla_Prototype_WindowHandler = Class.create(Akyla_Prototype_Observer,
{
	/**
	 * Name of the module 
	 */
	moduleName : "Akyla.WindowHandler",
	/**
	 * Load default preferences for the JSON  Table
	 */
	loadDefaultPreferences : function()
	{
		this.preferences = 
		{
		};
	},
	localization : 
	{
		"nl_NL":
		{
			"Yes" : "Ja",
			"No" : "Nee",
			"Cancel" : "Annuleren",
			"Are you sure?" : "Weet u het zeker?"
		}
	},
	/**
	 * Processes a JSON component. In this cases it @use this.buildTable
	 * @param object component JSON component to process
	 */
	processComponent : function (component)
	{
		var type = component.type;
		var id = component.containerId;
		var content = component.content;
		var contentType = component.contentType;
		var action = component.action;
		if (type && id)
		{
			var dialog = Akyla.WindowHandler.getById(id);
			if (!dialog)
			{
				dialog = Akyla.WindowHandler.factory(type, { id : id, contentType : contentType, content : content});
			}
			else
			{
				if (content)
				{
					dialog.update(content);
				}
			}
			if (action)
			{
				dialog[action]();
			}
		}
	},
	/**
	 * 
	 */
	domLoaded : function ()
	{
	},
	factory : function (windowType, windowPreferences)
	{
		if (Akyla.WindowHandler[windowType])
		{
			//try{
			return new Akyla.WindowHandler[windowType](windowPreferences);
			//} catch (e) {alert(e);}
		}
	},
	getById : function (id)
	{
		var dialog = $(document.body).down("div.akylaWindow#"+id);
		if (dialog)
		{
			return dialog.akylaWindow;
		}
		else
		{
			return null;
		}
	},
	getDocumentDimensions : function ()
	{
		var dimensions;
		if (window.innerWidth)
		{
			dimensions = {
				width : window.innerWidth, 
				height : window.innerHeight,
				left : window.pageXOffset,
				top : window.pageYOffset
			};

		}
		else  if (document.body.clientWidth)
		{
			dimensions =  
			{
				width : document.body.clientWidth, 
				height : document.body.clientHeight,
				left : document.body.scrollLeft,
				top : document.body.scrollTop
			};
		}
		return dimensions;
	}
});

Akyla.WindowHandler = new Akyla_Prototype_WindowHandler();

Akyla.WindowHandler.Window = Class.create(
{
	loadDefaultPreferences : function()
	{
		this.preferences = 
		{
			contentType : "text",
			autoReload : false,
			autoFocus : true,
			extraClass : null
		};
	},
	initialize : function (preferences)
	{
		this.loadDefaultPreferences();
		this.innerDiv = null;
		this.dialog = null;
		this.title = null;
		this.footerTitle = null;
		Object.extend(this.preferences,preferences);
		this.createDialog();
		this.placeDialog();
	},
	setTitle : function (title)
	{
		this.title.update(title);
		return this;
	},
	setFooter : function (footer)
	{
		this.footerTitle.update(footer);
		return this;
	},
	createDialog : function ()
	{
		if (this.preferences.overlayEnabled)
		{
			var overlay = new Element("div").addClassName("overlay").hide();
			$(document.body).insert({bottom : overlay});
			this.overlay = overlay;
		}
		this.title = new Element("h2");

		this.footerTitle = new Element("p");
		var footer = new Element("div", {className : "footer"}).insert({bottom : this.footerTitle});
			
		this.innerDiv = new Element("div");//.update("This dialog is a sample for a slide down.<br /> You should be rewriting the ");
		var body = new Element("div", {className : "body"}).insert({top : this.innerDiv});
		var header = new Element("div", {className : "header"}).insert({top : this.title, bottom : body});

		this.dialog = new Element("div").addClassName("akylaWindow").insert({top : header, bottom : footer}).setStyle().hide();
		if (this.preferences.extraClass)
		{
			this. dialog.addClassName(this.preferences.extraClass);
		}
		if (this.preferences.extraClassName)
		{
			this.dialog.addClassName(this.preferences.extraClassName);
		}
		this.dialog.akylaWindow = this;
		if (this.preferences.id)
		{
			this.dialog.id = this.preferences.id;
		}
		this.update(this.preferences.content);
		$(document.body).insert({bottom : this.dialog});
		this.observeDialog();
	},
	observeDialog : function()
	{
	},
	placeDialog : function()
	{
		var viewportDimension = document.viewport.getDimensions();
		var dialogDimension = this.dialog.getDimensions();
		this.dialog.setStyle(
			{
				position : "fixed",
				left : dialogDimension.width>viewportDimension.width?0:((viewportDimension.width-dialogDimension.width)/2)+"px",
				top : dialogDimension.height>viewportDimension.height?0:((viewportDimension.height-dialogDimension.height)/3)+"px"
			}
		);
	},
	update : function(content)
	{
		if (this.preferences.contentType == "htmlNode")
		{
			this.innerDiv.update($(this.preferences.content).cloneNode(true));
		}
		else
		{
			this.innerDiv.update(content);
		}
	},
	toggle : function ()
	{
		if (this.visible())
		{
			this.hide();
		}
		else
		{
			this.show();
		}
	},
	focus : function()
	{
		if (this.preferences.autoFocus)
		{
			var control = this.innerDiv.down("input, select, button");
			if (control)
			{
				if (control.tagName.toLowerCase() == "button")
				{
					$(control).focus();
				}
				else
				{
					$(control).activate();
				}
			}
		}
	},
	reposition : function ()
	{
		this.placeDialog();
		if (this.preferences.contentType == "htmlNode" && this.preferences.reloadContent)
		{
			this.update($(this.preferences.content).cloneNode(true));
		}
		if (this.overlay)
		{
			this.overlay.show();
		}
	},
	visible : function ()
	{
		return this.dialog.visible();
	},
	show : function ()
	{
	},
	hide : function ()
	{
	},
	remove : function ()
	{
		$(this.dialog).remove();
		if (this.preferences.overlayEnabled)
		{
			this.overlay.remove();
		}
	}
});

Akyla.WindowHandler.SlideDown = Class.create(Akyla.WindowHandler.Window,
{
	loadDefaultPreferences : function()
	{
		this.preferences = 
		{
			autoRemove : false,
			extraClass : "appear"
		};
	},
	show : function ()
	{
		if (this.animating)
		{
			return;
		}
		this.animating = true;
		this.reposition();
		new Effect.Appear(this.dialog,{
			duration:0.5,
			afterFinish : function ()
			{
				this.animating = false;
				this.focus();
			}.bind(this)
		});
		
	},
	hide : function ()
	{
		if (this.animating)
		{
			return;
		}
		this.animating = true;
		new Effect.Fade(this.dialog,{
			duration:0.5,
			afterFinish : function ()
			{
				this.animating = false;
				if (this.overlay)
				{
					this.overlay.hide();
				}
				if (this.preferences.autoRemove)
				{
					this.remove();
				}
			}.bind(this)
		});
	}
});

Akyla.WindowHandler.Confirm = Class.create(Akyla.WindowHandler.SlideDown,
{
	loadDefaultPreferences : function()
	{
		this.preferences = 
		{
			contentType : "text",
			autoReload : false,
			autoFocus : true,
			onYes : function () {},
			onNo : function () {},
			overlayEnabled : true
		};
	},
	update : function (content)
	{
		var confirmDialog = new Element("div").addClassName("confirmDialog");
		var yesImage = new Element("img",{src : Akyla.preferences.baseUrl+"/image/icons/original/accept.png"});
		var noImage = new Element("img",{src : Akyla.preferences.baseUrl+"/image/icons/original/delete.png"});
		this.yesButton = new Element("button").addClassName("yesButton").insert({top : yesImage, bottom : Akyla.translate("Yes")});
		this.noButton = new Element("button").addClassName("noButton").insert({top : noImage, bottom : Akyla.translate("No")});
		this.yesButton.observe("click", function (event)
		{
			this.preferences.onYes(event);
			this.hide();
			this.remove();
		}.bind(this));
		this.noButton.observe("click", function (event)
		{
			this.preferences.onNo(event);
			this.hide();
			this.remove();
		}.bind(this));

		if (content)
		{
			confirmDialog.insert({bottom : content});
			confirmDialog.insert({bottom : "<br />"});
		}
		else
		{
			confirmDialog.insert({bottom : Akyla.translate("Are you sure?")+"<br />"});
		}
		confirmDialog.insert({bottom : this.yesButton});
		confirmDialog.insert({bottom : this.noButton});
		this.innerDiv.insert({bottom : confirmDialog});
	},
	observeDialog : function()
	{

	}
});

Akyla.WindowHandler.Alert = Class.create(Akyla.WindowHandler.SlideDown,
{
	loadDefaultPreferences : function()
	{
		this.preferences = 
		{
			contentType : "text",
			autoReload : false,
			autoFocus : true,
			overlayEnabled : true,
			afterClose : function () {}
		};
	},
	update : function (content)
	{
		var alertDialog = new Element("div").addClassName("alertDialog");
		var okImage = new Element("img",{src : Akyla.preferences.baseUrl+"/image/icons/original/accept.png"});
		this.okButton = new Element("button").addClassName("okButton").insert({top : okImage, bottom : Akyla.translate("OK")});
		this.okButton.observe("click", function (event)
		{
			this.hide();
			this.remove();
			this.preferences.afterClose();
		}.bind(this));
		alertDialog.insert({bottom : content});
		alertDialog.insert({bottom : "<br />"});
		alertDialog.insert({bottom : this.okButton});
		this.innerDiv.insert({bottom : alertDialog});
	},
	focus : function()
	{
		if (this.preferences.autoFocus)
		{
			var control = this.innerDiv.down("input, select, button");
			if (control && (this.innerDiv.select("span.error").size() < 1))
			{
				if (control.tagName.toLowerCase() == "button")
				{
					$(control).focus();
				}
				else
				{
					$(control).activate();
				}
			}
		}
	},
	observeDialog : function()
	{

	}
});


Akyla.WindowHandler.AutoHide = Class.create(Akyla.WindowHandler.SlideDown,
{
	loadDefaultPreferences : function()
	{
		this.preferences = 
		{
			autoRemove : true,
			extraClassName : "autoHide"
		};
	},
	show : function ()
	{
		this.reposition();
		new Effect.SlideDown(this.dialog,{
			duration:0.5,
			afterFinish : function ()
			{
				this.focus();
				setTimeout(function ()
				{
					this.hide();
				}.bind(this),1000);
			}.bind(this)
		});
	}
});