var WebElements;

if(!WebElements) WebElements = {};

WebElements.ImageViewer = function(options) {
	
	this.animated = true;
	
	this.background = null;
	this.background_enable = true;
	this.background_id = "darkener";
	this.background_color = "#000";
	this.background_opacity = 0.7;
	this.background_duration = 300;
	this.background_form = "linear";
	this.background_attached = false;
	
	this.imagebox = null;
	this.imagebox_id = "imagepopup";
	this.imagebox_classname = "imagepopup";
	this.imagebox_duration = 300;
	this.imagebox_form = "linear";
	this.imagebox_attached = false;
	
	this.button_close = null;
	
	this.image = null;
	this.caption = null;
	
	this.fps = 60;
	this.animator = null;
	
	this.setOptions(options);
	
	this.init();
}

WebElements.ImageViewer.prototype.setOptions = function(options) {
	
	if(options)
	{
		for(var optionname in options)
		{
			this[optionname] = options[optionname];
		}
		
		return true;
	}
	
	return false;
}

WebElements.ImageViewer.prototype.init = function() {
	
	//if(this.background_enable) this.createBackground();
}

WebElements.ImageViewer.prototype.createBackground = function() {
	
	this.background = document.createElement("div");
		
	this.background.id = this.background_id;
	
	this.background.style.position = "absolute";
	this.background.style.top = "0px";
	this.background.style.left = "0px";
	this.background.style.width = WebElements.Utils.maxPageWidth() + "px";
	this.background.style.height = WebElements.Utils.maxPageHeight() + "px";
	this.background.style.zIndex = "50";
	this.background.style.backgroundColor = this.background_color;
	this.background.style.opacity = 0;
	this.background.style.filter = "alpha(opacity=0)";
}

WebElements.ImageViewer.prototype.attachBackground = function() {
	
	document.body.appendChild(this.background);
		
	this.background_attached = true;
}

WebElements.ImageViewer.prototype.detachBackground = function() {
	
	document.body.removeChild(this.background);
			
	this.background_attached = false;
}

WebElements.ImageViewer.prototype.createImageBox = function() {
	
	// create div box for image with borders
	this.imagebox = document.createElement("div");
	this.imagebox.id = this.imagebox_id;
	this.imagebox.className = this.imagebox_classname;
	this.imagebox.style.visibility = "hidden";
	this.imagebox.style.position = "absolute";
	this.imagebox.style.zIndex = "100";
	
	var top = document.createElement("div");
	top.className = "left_top";
	top.innerHTML = "<div class=\"right_top\"><div class=\"top\"></div></div>";
	
	var left = document.createElement("div");
	left.className = "left";
	
	var right = document.createElement("div");
	right.className = "right";
	
	var middle = document.createElement("div");
	middle.className = "middle";
	
	left.appendChild(right);
	right.appendChild(middle);
	middle.appendChild(this.image);
	
	var leftbottom = document.createElement("div");
	leftbottom.className = "left_bottom";
	
	var rightbottom = document.createElement("div");
	rightbottom.className = "right_bottom";
	
	var bottom = document.createElement("div");
	bottom.className = "bottom";
	
	if(this.caption != null)
	{
		var caption = document.createElement("div");
		caption.className = "caption";
		caption.innerHTML = this.caption;
		
		bottom.appendChild(caption);
	}
	
	var buttonbar = document.createElement("div");
	buttonbar.className = "buttonbar";
	
	this.button_close = document.createElement("div");
	this.button_close.className = "button close";
	this.button_close.innerHTML = "close";
	
	buttonbar.appendChild(this.button_close);
	bottom.appendChild(buttonbar);
	
	leftbottom.appendChild(rightbottom);
	rightbottom.appendChild(bottom);
	
	this.imagebox.appendChild(top);
	this.imagebox.appendChild(left);
	this.imagebox.appendChild(leftbottom)
}

WebElements.ImageViewer.prototype.centerImageBox = function() {
	
	// calculate the center position for the imagebox
	var windowwidth = WebElements.Utils.windowWidth();
	var windowheight = WebElements.Utils.windowHeight();
	
	var boxwidth = this.imagebox.offsetWidth;
	var boxheight = this.imagebox.offsetHeight;
	
	var centerx = ((windowwidth - boxwidth) / 2) + WebElements.Utils.pageXOffset();
	var centery = ((windowheight - boxheight) / 2) + WebElements.Utils.pageYOffset();
	
	// center the imagebox
	this.imagebox.style.top = Math.round(centery) + "px";
	this.imagebox.style.left = Math.round(centerx) + "px";
	this.imagebox.style.width = this.imagebox.offsetWidth + "px";
}

WebElements.ImageViewer.prototype.showImageBox = function() {
	
	if(this.animated && (!this.animator || !this.animator.running))
	{
		this.image.style.opacity = 0;
		this.image.style.filter = "alpha(opacity=0)";
		this.imagebox.style.visibility = "";
		
		this.animator = new WebElements.Animator(new WebElements.AnimationChain(), this.fps, null);
			
		var animation_1 = new WebElements.AnimationObject(this.image, "opacity", 0, 1, "", this.imagebox_duration, null, this.imagebox_form);
		
		this.animator.animation_chain.addAnimationGroup(new WebElements.AnimationGroup(animation_1));
		
		this.animator.start();
	}
	else
	{
		this.imagebox.style.visibility = "";
	}
}

WebElements.ImageViewer.prototype.hideImageBox = function(callback) {
	
	if(this.animated && (!this.animator || !this.animator.running))
	{
		this.animator = new WebElements.Animator(new WebElements.AnimationChain(), this.fps, callback);
			
		var animation_1 = new WebElements.AnimationObject(this.image, "opacity", 1, 0, "", this.imagebox_duration, null, this.imagebox_form);
		
		this.animator.animation_chain.addAnimationGroup(new WebElements.AnimationGroup(animation_1));
		
		this.animator.start();
	}
	else
	{
		this.imagebox.style.visibility = "hidden";
		
		callback();
	}
}

WebElements.ImageViewer.prototype.attachImageBox = function() {
	
	document.body.appendChild(this.imagebox);
		
	this.imagebox_attached = true;
}

WebElements.ImageViewer.prototype.detachImageBox = function() {
	
	document.body.removeChild(this.imagebox);
			
	this.imagebox_attached = false;
}

WebElements.ImageViewer.prototype.darkenScreen = function(callback) {
	
	if(!this.background_attached)
	{
		this.createBackground();
		this.attachBackground();
		
		if(this.animated && (!this.animator || !this.animator.running))
		{
			this.animator = new WebElements.Animator(new WebElements.AnimationChain(), this.fps, callback);
			
			var animation_1 = new WebElements.AnimationObject(this.background, "opacity", 0, this.background_opacity, "", this.background_duration, null, this.background_form);
			
			this.animator.animation_chain.addAnimationGroup(new WebElements.AnimationGroup(animation_1));
			
			this.animator.start();
		}
		else
		{
			this.background.style.opacity = this.background_opacity;
			this.background.style.filter = "alpha(opacity=" + (this.background_opacity * 100) + ")";
			
			callback();
		}
	}
	else callback();
}

WebElements.ImageViewer.prototype.brightenScreen = function() {
	
	if(this.background_attached)
	{
		if(this.animated && (!this.animator || !this.animator.running))
		{
			var self = this;
			
			this.animator = new WebElements.Animator(new WebElements.AnimationChain(), this.fps, function(){ self.detachBackground(); });
			
			var animation_1 = new WebElements.AnimationObject(this.background, "opacity", this.background_opacity, 0, "", this.background_duration, null, this.background_form);
			
			this.animator.animation_chain.addAnimationGroup(new WebElements.AnimationGroup(animation_1));
			
			this.animator.start();
		}
		else
		{
			this.detachBackground();
		}
	}
}

WebElements.ImageViewer.prototype.viewImage = function() {
	
	// create imagebox
	this.createImageBox();
	
	// append imagebox to document
	this.attachImageBox();
	
	// center the imagebox
	this.centerImageBox();
	
	// show imagebox
	this.showImageBox();
	
	// add event listener for closing the box
	var self = this;
	
	WebElements.Utils.addEventListener(this.button_close, "click", function(){ self.closeImage(); })
}

WebElements.ImageViewer.prototype.hideImage = function() {
	
	// remove imagebox from html code
	this.detachImageBox();
	
	// brighten the screen
	if(this.background_enable)
	{
		this.brightenScreen();
	}
}

WebElements.ImageViewer.prototype.openImage = function(file, caption) {

	// create image node
	this.image = document.createElement("img");
	this.image.src = file;
	
	// don't create text node to keep possible html tags in the caption string
	this.caption = caption;
	
	var self = this;
	var viewImage = function() { self.viewImage(); };
	
	// darken the screen
	if(this.background_enable)
	{
		this.darkenScreen(viewImage);
	}
	else
	{
		this.viewImage();
	}
}

WebElements.ImageViewer.prototype.closeImage = function() {
	
	var self = this;
	var hideImage = function() { self.hideImage(); };
	
	// hide the imagebox
	this.hideImageBox(hideImage);
}