var Lighterbox = Class.create();

Lighterbox.prototype = {
	currentImage: null,
	popup_spacing: 10,
	resize_timeout: null,
		
	initialize: function() {
		var objBody = $$('body')[0];
		
		var popup = this.create_element("div", "lighterbox_popup");
		if (!popup) {
			return;
		}
		popup.appendChild(this.create_element("div", "lighterbox_popup_loading"));
		popup.appendChild(this.create_element("img", "lighterbox_popup_image"));
		
		objBody.appendChild(popup);
		objBody.appendChild(this.create_element("div", "lighterbox_overlay"));
		
		$("lighterbox_popup").hide();
		$("lighterbox_overlay").hide();
		
		$("lighterbox_popup").observe("click", (function() { this.hide_picture(); }).bind(this));
		$("lighterbox_overlay").observe("click", (function() { this.hide_picture(); }).bind(this));
		
		var th = this;
		
		$$(".lightbox").each(function(element) {
			element.observe("click", (function(event) {
				if (!event.isLeftClick() || event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
					return;
				}
				event.stop();
				
				this.set_size(200, 200);

				$("lighterbox_popup").show();
				$("lighterbox_popup_loading").show();
				$("lighterbox_popup_image").hide();
				$("lighterbox_overlay").show();
				
				var imgPreloader = new Image();
			    imgPreloader.onload = (function() {
			    	this.show_picture(imgPreloader);
			    }).bind(this);
			    imgPreloader.onerror = (function() {
			    	this.hide_picture(imgPreloader);
			    }).bind(this);
			    imgPreloader.src = element.href;
			    imgPreloader.alt = element.title;
			    imgPreloader.title = element.title;
			}).bind(th));
		});
		
		Event.observe(window, "resize", (function() { this.on_resize(); }).bind(this));
	},
	
	show_picture: function(img) {
		if (!$("lighterbox_popup").visible()) {
			return;
		}
		
		this.currentImage = { src: img.src, width: img.width, height: img.height, title: img.title, alt: img.alt };

		$("lighterbox_popup_image").src = this.currentImage.src;
		$("lighterbox_popup_image").alt = this.currentImage.alt;
		$("lighterbox_popup_image").title = this.currentImage.title;

		this.set_popup_size();

		$("lighterbox_popup_loading").hide();
		$("lighterbox_popup_image").show();
	},
	
	on_resize: function() {
		clearTimeout(this.resize_timeout);
		this.resize_timout = setTimeout((function() { this.on_resize_timeout(); }).bind(this), 50);
	},
	
	on_resize_timeout: function() {
		if (this.currentImage != null) {
			this.set_popup_size();
		}
	},
	
	set_popup_size: function() {
		var width = this.currentImage.width;
		var height = this.currentImage.height;
		var viewport_size = this.get_viewport_size();

		if (width > viewport_size.width) {
			height = Math.floor(height * viewport_size.width / width);
			width = viewport_size.width;
		}
		if (height > viewport_size.height) {
			width = Math.floor(width * viewport_size.height / height);
			height = viewport_size.height;
		}
		
		this.set_size(width, height);
	},
	
	hide_picture: function() {
		$("lighterbox_popup").hide();
		$("lighterbox_overlay").hide();
		
		this.currentImage = null;
	},
	
	set_size: function(width, height) {
		var viewport_size = this.get_viewport_size();
		
		var top = ((viewport_size.height - height) / 2) + this.popup_spacing;
		var left = ((viewport_size.width - width) / 2) + this.popup_spacing;
		
		$("lighterbox_popup").setStyle({ width: width + "px", height: height + "px", top: top + "px", left: left + "px" });
	},
	
	get_viewport_size : function() {
		var width = document.viewport.getWidth() - (this.popup_spacing * 2) - (this.get_style_px("lighterbox_popup", "paddingLeft") + this.get_style_px("lighterbox_popup", "paddingRight"));
		var height = document.viewport.getHeight() - (this.popup_spacing * 2) - (this.get_style_px("lighterbox_popup", "paddingTop") + this.get_style_px("lighterbox_popup", "paddingBottom"));

		return { width: width, height: height };
	},
	
	get_style_px: function(element, style) {
		return parseInt($(element).getStyle(style).replace(/px/, ""));
	},
	
	create_element: function(elementName, id) {
	    var parentElement = document.createElement("div");
	    try {
	    	parentElement.innerHTML = "<" + elementName + "></" + elementName + ">";
	    } catch(e) {}
	    var element = parentElement.firstChild || null;

	    if (element && (element.tagName.toLowerCase() != elementName.toLowerCase())) {
	    	element = element.getElementsByTagName(elementName)[0];
	    }

	    if (!element) {
	    	element = document.createElement(elementName);
	    }
	    
	    if (!element) {
	    	return null;
	    }
	    
	    element.id = id;

	    return element;
	}
}

document.observe('dom:loaded', function () { new Lighterbox(); });