/*
Script: htmlbox.js
	Contains <HTMLBox>

Author:
	Alan Roemen

Class: HTMLBox
	Not defined

Options:
	baseURL: Base directory for script. Default: false
	cssFile: Name of css file. Set to location of CSS file or true to use default and false to use none. Default: true,
	scriptName: Name of javascript file. Default: 'slidingtabs'
	className: CSS class name for script. Set to false for no CSS. Default: 'SlidingTabs'
	lightboxRel: Default value for REL attribute. Default: 'lightbox'
	initialWidth: Initial width of container. Default: 10
	initialHeight: Initial height of container. Default: 10
	movieWidth: Set width of flash videos. Default: 800
	movieHeight: Set height of flash videos. Default: 618
	screenMin: Minimum size allowed for screen. Set false to disable. Default: { x: '850', y: '650' }
	showEffect: options for effect used to animate the sliding, see Fx.Base in mootools docs. Default: duration: 300 // half a second
	hideEffect: options for effect used to animate the sliding, see Fx.Base in mootools docs. Default: duration: 300 // half a second
	showClose: Shows the close button for the container. Default: true
	backgroundClose: Close container when background is clicked. Default: false
	overlay: Display background overlay. Default: true
*/

var HTMLBox = new Class({
	options: {
		baseURL: false,
		cssFile: 'style-default',
		scriptName: 'htmlbox',
		className: 'htmlbox',
		width: 600,
		height: 400,
		backgroundClose: true,
		overlay: true,
		focusField: false,
		showContentError: true,
		onLoad: Class.empty,
		onContentLoad: Class.empty
	},	

	initialize: function(links, file, options) {
		this.setOptions(options);
		this.file = file || false;
		this.links = (links==''?null:document.getElements('a[rel^='+links+']'));
		
		//IE6 Problems
		if(window.ie6){
			this.options.backgroundClose = true;
			this.options.overlay = true;
		}
		
		// Get script base path
		if(!this.options.baseURL) {
			var elements = document.getElementsByTagName('script');
			for (var i=0; i<elements.length; i++) {
				if (elements[i].src && (elements[i].src.indexOf(this.options.scriptName+'.js') != -1)) {
					var src = elements[i].src;
					this.options.baseURL = src.substring(0, src.lastIndexOf('/'));
					break;
				}
			}
			// Get document base path
			this.documentBasePath = document.location.href;
			if (this.documentBasePath.indexOf('?') != -1)
				this.documentBasePath = this.documentBasePath.substring(0, this.documentBasePath.indexOf('?'));
			this.documentBasePath = this.documentBasePath.substring(0, this.documentBasePath.lastIndexOf('/'));
			if (this.options.baseURL.indexOf('://') == -1 && this.options.baseURL.charAt(0) != '/')
				this.options.baseURL = this.documentBasePath + "/" + this.options.baseURL;
		}
		
		// Adds Stylesheet
		if(this.options.cssFile !== false) new Asset.css(this.options.baseURL + '/' + this.options.cssFile + '.css');
		
		// Get Content
		this.content = false;
		new Ajax(this.options.baseURL+'/'+this.file, {
			method: 'get',
			onSuccess: function(response){
				this.content = response;
				this.fireEvent('onContentLoad');
			}.bind(this)
		}).request();
		
		// Setup Links & Link Images
		this.active = false;
		if(this.links == null) return;
		this.links.each(function(el, i){
			el.addEvent('click', function(e){
				e = new Event(e).stop();
				if(this.active !== false) return;
				this.active = el;
				this.show();
			}.bindWithEvent(this));
		}.bind(this));
	},

	show: function(){
		if(!this.content) { if(this.options.showContentError) alert('No Content!'); return; }
		
		//Create Element
		this.background = new Element('div', {
			'class': 'background',
			'styles': {
				'width': '100%',
				'height': '100%',
				'opacity': '0.7',
				'cursor': (this.options.backgroundClose?'pointer':'auto')
			},
			'events': {
				'click': (function(e){
					e = new Event(e).stop();
					if(this.options.backgroundClose) this.hide();
				}).bindWithEvent(this)
			}
		});
		this.container = new Element('div', {
			'class': this.options.className
		}).setHTML(this.content);
		
		//Set Close
		var closeEl = this.container.getElement('.close');
		if(closeEl){
			closeEl.addEvent('click', function(e){
				e = new Event(e).stop();
				this.hide();
			}.bind(this));
		}

		if(this.options.overlay) this.background.inject($$('body')[0]);
		this.container.inject($$('body')[0]);
		
		var size = this.container.getSize().size;
		this.container.setStyles({
			'margin-top': (((size.y/2).toInt()) * -1)+'px',
			'margin-left': (((size.x/2).toInt()) * -1)+'px'
		});

		//IE6 fixed positioning & positioning hack
		if(window.ie6){
			new Ajax(this.options.baseURL+'/ie7-fixed.js', {
				method: 'get',
				evalScripts: true
			}).request();
		}
				
		//Focus Field
		if(this.options.focusField !== false) $(this.options.focusField).focus();
		this.fireEvent('onLoad');
	},

	hide: function(){
		this.container.remove();
		if(this.options.overlay) this.background.remove();
		this.active = false;		
	}
});

HTMLBox.implement(new Options, new Events);