/**
 * Create namespace
 */
if (!JS.Components) {
	JS.Components = {};
}


/**
 * Lightbox
 *
 * @param {Object} config Configuration
 */
JS.Components.LightboxHtml = function (config) {
	//Set configuration
		this.config = JS.extend({
			owner: null,
			autoDiscover: true,
			html: '<table><tr>\
						<td class="p-lt"><span><i></i></span></td>\
						<td class="p-t" width="50%"></td>\
						<td class="p-arrow"></td>\
						<td class="p-t" width="50%"></td>\
						<td class="p-rt"><span><i></i></span></td>\
					</tr>\
				  	<tr>\
						<td class="p-l"></td>\
						<td class="p-c" colspan="3"></td>\
						<td class="p-r"></td>\
					</tr>\
				  	<tr>\
						<td class="p-lb"><span><i></i></span></td>\
						<td class="p-b" colspan="3"></td>\
						<td class="p-rb"><span><i></i></span></td>\
					</tr></table>'
		}, config);
		
		this.config.owner = JS.Dom.get(this.config.owner) || document.body;
		
	//Set html
		this.html_contents = {};
	
	//Create needed html
		this.elements = {
			container: null
		};
		
		this._createHtml();
		
	//Create panel
		this.panel = new JS.Components.Panel(this.elements.container, {
			className: 'component-panel lightbox-html',
			fixedCenter: false,
			cssZIndex: 9999,
			overlay: false,
			html: this.config.html
		});
	
		this.panel.hide();
	
	//Functions
		var self = this;
		
		//Clicking on document closes lightbox
		JS.Event.addListener(document.body, 'click', function () {
			self.hide();
		});
		
		this.functions = {
			//Handle image link click, which will open lightbox
			openLightbox: function (ev) {
				JS.Event.stopEvent(ev);

				var id = this.getAttribute('dataId');
				self.show(id);
			}
		};
		
	//Auto discover lightbox items
		if (this.config.autoDiscover) {
			//Get links
			var a = this.config.owner.getElementsByTagName('A');
			
			for(var i=0,j=a.length; i<j; i++) {
				var rel = a[i].getAttribute('rel');
				if (rel == 'lightbox-html') {
					this.addHtmlByAnchorNode(a[i]);
				}
			}
		}
};

//Configuration
JS.Components.LightboxHtml.prototype.config = null;

//Valid image extension list
JS.Components.LightboxHtml.prototype.validImageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];

//Images
JS.Components.LightboxHtml.prototype.images = {};

//Panel
JS.Components.LightboxHtml.prototype.panel = null;

//Elements
JS.Components.LightboxHtml.prototype.elements = {};

//Functions
JS.Components.LightboxHtml.prototype.functions = {};

//Functions
JS.Components.LightboxHtml.prototype.maxId = 0;

/**
 * Show lightbox
 */
JS.Components.LightboxHtml.prototype.show = function (id) {
	if (!id || !(id in this.html_contents)) return;
	this.panel.show();
	
	this.elements.container.innerHTML = this.html_contents[id].html;
	this.panel.element.style.width = this.html_contents[id].width + 'px';
	this.resetPosition(this.html_contents[id].target, this.html_contents[id].width);
};

/**
 * Hide lightbox
 */
JS.Components.LightboxHtml.prototype.hide = function () {
	this.panel.hide();
	this.elements.container.innerHTML = '';
};

/**
 * Create lightbox html
 */
JS.Components.LightboxHtml.prototype._createHtml = function () {
	var self = this;
	
	//Main container
	this.elements.container = document.createElement('DIV');
		JS.Dom.addClassName(this.elements.container, 'lightbox-html-inner');
};

/**
 * Add image to the list
 * 
 * @param {String} image_preview_path
 * @param {String} image_path
 * @param {String} image_title
 */
JS.Components.LightboxHtml.prototype.addHtml = function (target, html, width) {
	if (target.getAttribute('dataId')) return false;
	
	var id = String(++this.maxId);
	
	this.html_contents[id] = {
		target: target,
		html: html,
		width: width || 800
	};
	
	target.setAttribute('dataId', id);
	
	return true;
};

/**
 * Add image to the list by anchor node. Function tries to find title, thumbnail and image
 * 
 * @param {Object} link_node
 */
JS.Components.LightboxHtml.prototype.addHtmlByAnchorNode = function (link_node) {
	var link_node = JS.Dom.get(link_node);
	if (link_node) {
		var href = link_node.getAttribute('href');
		if (href.length) {
			href = href.replace(document.location.protocol + '//' + document.location.host, '');
			href = href.replace(document.location.pathname, '');
			
			var html = '', width = parseInt(link_node.getAttribute('lightboxwidth') || 0);
			
			if (href.charAt(0) == '#') {
				//Content from DOM
				var node = href.substr(1);
					node = JS.Dom.get(node);
					
				if (node) {
					html = node.innerHTML;
				}
			} else {
				//Content from URL
			}
			
			if (this.addHtml(link_node, html, width)) {
				JS.Event.addListener(link_node, 'click', this.functions.openLightbox);
				return true;
			}
		}
	}
	
	return false;
};

/**
 * Reset lightbox position so that arrow points to the target argument node
 * @param {HTMLElement} target
 */
JS.Components.LightboxHtml.prototype.resetPosition = function (target, width) {
	var targ_pos = JS.Dom.getPosition(target);
	
	var x = Math.max(0, ~~(targ_pos.left + target.offsetWidth / 2 - width / 2));
	var y = ~~(targ_pos.top + target.offsetHeight);
	
	this.panel.setPosition(x + 15, y - 20);
	
	if ("WebKitPoint" in window) {	/* Detect webkit */
		var items = JS.Dom.query('TD.p-t', this.panel.element);
		var w = width - 111 /* arrow */ - 51 /* left corner */ - 90 /* right corner */;
			w = Math.ceil(w / 2) + 10;
			
		items[0].style.width = w + 'px';
		items[1].style.width = w + 'px';
	}
};