// ----------------------------------------------------------------------------------- //
// Script: HTMLBox (A HTML Content Holder based on LightBox)                           //
// ----------------------------------------------------------------------------------- //
// Made by: Stephen Kil                                                                //
// Website: www.skylinestudios.nl (dutch)                                              //
// ----------------------------------------------------------------------------------- //
// Publised under LGPL License:                                                        //
// ----------------------------------------------------------------------------------- //
// GNU LESSER GENERAL PUBLIC LICENSE                                                   //
//                       Version 3, 29 June 2007                                       //
//                                                                                     //
// Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>                 //
// Everyone is permitted to copy and distribute verbatim copies                        //
// of this license document, but changing it is not allowed.                           //
// ----------------------------------------------------------------------------------- //
// For more information on the license check: http://www.gnu.org/licenses/lgpl-3.0.txt //
// ----------------------------------------------------------------------------------- //

var HTMLBox = {
	
	init: function(options) 
	{
		this.options = $extend({
			duration: 400,
			transition: false,
			width: 50,
			height: 50,
			caption: true,
			overlayclose: false
		}, options || {});
		
		this.done = false;
		
		this.overlay = new Element('div', {'id': 'siteLock'}).inject(document.body);
		
		this.center = new Element('div', {'id': 'centerDiv', 'styles': {'width': this.options.width, 'height': this.options.height, 'marginLeft': -(this.options.width/2), 'display': 'none'}}).inject(document.body);
		
		this.title = new Element('strong', {'id': 'lockTitle'}).inject(this.center);
		this.container = new Element('div', {'id': 'containerDiv'}).inject(this.center);
		
		this.description = new Element('div', {'id': 'descriptionDiv', 'styles': {'display': 'none'}}).inject(document.body);
		this.bottom = new Element('div', {'id': 'bottomDiv'}).inject(this.description);

		this.closeLink = new Element('a', {'id': 'closeLink', 'href': '#'}).inject(this.bottom).set('html', '<img src="./_scripts/_htmlbox/_images/boxClose.gif" alt="" />');
		this.closeLink.onclick = this.close.bind(this);
		
		if(this.options.overlayclose && !this.done) 
		{
			this.overlay.onclick = this.close.bind(this);
			this.overlay.setStyle('cursor', 'pointer');
			this.done = true;
		}
		
		this.caption = new Element('div', {'id': 'captionDiv'}).inject(this.bottom);
		new Element('div', {'styles': {'clear': 'both'}}).inject(this.bottom);

		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: new Fx.Tween(this.overlay, {property: "opacity", duration: 500, onComplete: nextEffect}).set(0),
			title: new Fx.Tween(this.title, {property: "opacity", duration: 500}).set(0),
			resize: new Fx.Morph(this.center, $extend({duration: this.options.duration, onComplete: nextEffect}, this.options.transition ? {transition: this.options.transition} : {})),
			container: new Fx.Tween(this.container, {property: "opacity", duration: 500, onComplete: nextEffect}).set(0),
			bottom: new Fx.Tween(this.bottom, {property: 'margin-top', duration: 400, onComplete: nextEffect})
		};
	},

	set: function(options)
	{
		this.options = $extend({
			duration: 400,
			transition: false,
			width: 50,
			height: 50,
			caption: true,
			overlayclose: false
		}, options || {});
		
		if(this.options.overlayclose && !this.done)
		{
			this.overlay.onclick = this.close.bind(this);
			this.overlay.setStyle('cursor', 'pointer');
			this.done = true;
		}
	},
	
	open: function(html)
	{
		this.html = $extend({
			action: null,
			caption: 'This action requires you to have a valid Sierra User Subscription (S.U.S Licence) for this website.',
			element: new Element('div', {'id': 'emptyHTML', 'styles': {'display': 'none'}}),
			height: 250,
			title: 'Unknown',
			width: 350,
			onComplete: function() {},
			onClose: function() {}
		}, html || {});
		
		this.position();
		this.setup(true);
		this.top = window.getScrollTop() + (window.getHeight() / 15);
		this.center.setStyles({top: this.top, display: ''});
		this.fx.overlay.start(0.8);
	},

	setup: function(open){
		var elements = $A(document.getElementsByTagName('object'));
		elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
		elements.each(function(el){
			if (open) el.lbBackupStyle = el.style.visibility;
			el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
		});
		
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('scroll', this.position.bind(this))[fn]('resize', this.position.bind(this));
		document[fn]('keydown', this.keydown.bindWithEvent(this));
		
		this.step = 1;
	},

	nextEffect: function(){
		switch (this.step++){
			case 1:
				this.center.className = '';
				this.caption.set('html', this.html.caption || '');
				
				this.container.empty();
				this.container.setStyles({'display': '', 'opacity': '1'});
				
				this.html.element.inject(this.container);
				
				if(this.html.width == 'auto') this.html.width = this.html.element.offsetWidth + 6;
				this.container.setStyle('opacity', 0);
				
				if (this.center.clientWidth != this.html.width){
					this.fx.resize.start({width: this.html.width, marginLeft: -this.html.width/2});
				}
				
				break;
			case 2:
				this.title.setStyle('margin-left', 15);
				this.fx.title.start(1);
				this.title.set('html', this.html.title || '');
				
				this.container.setStyles({'display': '', 'opacity': '1'});
				if(this.html.height == 'auto') this.html.height = this.html.element.offsetHeight + 30;
				this.container.setStyle('opacity', 0);
				
				if(Browser.Engine.webkit)
				{
					this.container.set('html', this.container.innerHTML);
					if(this.container.offsetHeight > 25)
						this.html.height = this.container.offsetHeight + 30;
				}
				
				this.fx.resize.start({'height': this.html.height});
				break;
			case 3:
				this.container.setStyle('width', this.html.width - 6);
				this.container.setStyle('height', this.html.height - 30);
				this.container.setStyle('margin-left', 2);
				this.fx.container.start(1);
				break;
			case 4:
				this.description.setStyles({top: this.top + this.center.clientHeight, height: 0, marginLeft: this.center.style.marginLeft, display: '', width: this.html.width});
				
				this.overlay.setStyles({
					height: window.getHeight(),
					top: window.getScrollTop(),
					width: window.getWidth()
				});
				
				this.bottom.setStyle('display', '');
				this.description.setStyle('display', '');
				
				if (this.options.caption){
					this.fx.bottom.set(-this.bottom.offsetHeight);
					this.description.setStyle('height', '');
					this.fx.bottom.start(0);
					break;
				}
				
				break;
			case 5:
				this.html.onComplete();
				break;
			case -1:
				for(p in this.fx) this.fx[p].cancel();
			
				this.center.style.display = this.description.style.display = 'none';
				this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
				
				break;
			case 0:	
				
				// Simple Reset of all Styles applied to the container;
				this.container.destroy();	
				this.container = new Element('div', {'id': 'containerDiv'}).inject(this.center);
				var nextEffect = this.nextEffect.bind(this);
				this.fx.container = new Fx.Tween(this.container, {property: "opacity", duration: 500, onComplete: nextEffect}).set(0);
				
				this.html.onClose();
				break;
		}
	},
	
	keydown: function(event){
		switch (event['key']){
			case 'esc': this.close(); break;
		}
	},

	position: function(){
		this.overlay.setStyles({'top': window.getScrollTop(), 'height': window.getHeight()});
	},

	close: function(action){
		this.html = $extend(this.html, action || {});
		
		if (this.step < 0) return;
		this.step = -1;
		
		this.bottom.setStyle('display', 'none');
		this.description.setStyle('display', 'none');
		this.fx.resize.start({width: this.options.width, marginLeft: -this.options.width/2, height: this.options.height});
		this.fx.container.start(0);
		return false;
	},
	
	add: function(width, height)
	{	
		this.center.set('morph', {duration: 500});
		this.center.morph({height: this.pixelize(this.center.style.height) + height, marginLeft: -(this.pixelize(this.center.style.width) + width)/2, width: (this.pixelize(this.center.style.width) + width)});
		
		this.description.setStyle('top', this.pixelize(this.description.style.top) + height);
		this.description.set('tween', {duration: this.options.duration});
		this.description.tween('margin-top', [-height, 0]);
		
		this.description.set('morph', {duration: this.options.duration});
		this.description.morph({width: this.pixelize(this.center.style.width) + width, marginLeft: -(this.pixelize(this.center.style.width) + width)/2});
		
		this.container.set('morph', {duration: this.options.duration});
		this.container.morph({height: this.pixelize(this.container.style.height) + height, width: this.pixelize(this.container.style.width) + width});
	},
	
	size: function(width, height)
	{	
		this.center.set('morph', {duration: 500});
		this.center.morph({height: height, marginLeft: -width/2, width: width});
		
		this.description.setStyle('top', this.top + height);
		this.description.set('tween', {duration: this.options.duration});
		this.description.tween('margin-top', [-height, 0]);
		
		this.description.set('morph', {duration: this.options.duration});
		this.description.morph({width: width, marginLeft: -width/2});
		
		this.container.set('morph', {duration: this.options.duration});
		this.container.morph({height: height - 30, width: width - 6});
	},
	
	pixelize: function(str)
	{
		return parseInt(str.substr(0, str.indexOf('px')));
	},
	
	move:function(add, interval)
	{
		clearTimeout(this.timer);
		if(add - 1 >= 0)
		{
			this.description.setStyle('top', this.description.getTop() + 1);
		
			if(add > 0)
			{
				this.timer = setTimeout('HTMLBox.move('+(add-1)+')', interval);
			}
		}
	}
	
};

window.addEvent('domready', HTMLBox.init.bind(HTMLBox));