/* ImageViewer class. Copyright by ADenis (adeniss@ukr.net) */

function ImageViewer(buttons){
	
	var overlay = null;
	var container = null;
	var image = null;
	var title = null;
	var comment = null;
	var buttonsPanel = null;
	var closeButton = null;
	
	this.listener = null;
	this.onHide = null;
	this.onClick = null;
	this.onLoad = null;
	
	this.title = "";
	this.comment = "";
	
	var preloader = new PreLoader();
	var dragManager = new DragManager(document.body, this);	
	
	var x = "0px";
	var y = "0px";
	
	this.loaded = true;
	this.buttons = null;
	
	this.createOverlay = function (buttons){		
		overlay = document.createElement("div");		
		overlay.setAttribute("id","greyOverlay");
		overlay.style.display = "none";
		
		var pageSize = getPageSize();
		overlay.style.width = pageSize[0]+"px";
		overlay.style.height = pageSize[1]+"px";

		container = document.createElement("div");
		container.setAttribute("id","imageContainer");
		container.style.display = "none";
		
		title = document.createElement("div");
		title.className = "image-viewer-title";

		comment = document.createElement("div");
		comment.className = "image-viewer-comment";
		
		image = document.createElement("img");
		image.src = "";
		image.setAttribute("id","viewImage");
		
		buttonsPanel = document.createElement("div");
		buttonsPanel.className = "buttons-panel";
		
		this.initiateButtons(buttons);
		
		x = (pageSize[0])/2;
		y = document.documentElement.scrollTop + (document.body.clientHeight)/2;
		
		if(x < 0)
			x = 0;
		if(y < 0)
			y = 0;
		
		x = x + "px";
		y = y + "px";
		
		image.style.left = x;
		image.style.top = y;
		
		document.body.insertBefore(overlay, document.body.firstChild);
		
		container.appendChild(title);
		container.appendChild(comment);
		container.appendChild(image);		
		container.appendChild(buttonsPanel);
		
		document.body.appendChild(container);
	}
	
	this.initiateButtons = function(buttons){
		
		if(buttons){
			var count = buttons.length;
			if(count){
				this.buttons = new Array();
				for(var i=0; i < count; i++){
					this.buttons[i] = buttonsPanel.appendChild(buttons[i].button);
				}
			}
		}
		
		closeButton = new ViewerButtonPrototype("close", "x", this, this.hideOverlay);
		buttonsPanel.appendChild(closeButton.button);
	}
	
	this.load = function (url, title, comment){

		document.body.style.overflow = "hidden";
		
		/*if(image && image.src != ""){
			image.src = "";
			image.setAttribute("id","");
			var _image = document.createElement("img");
			image.parentNode.replaceChild(_image, image);
			image = _image;
		}else{
			image = document.createElement("img");
		}*/
		
		image.src = "";
		image.setAttribute("id","viewImage");

		this.loaded = false;
		
		if(title)
			this.title = title;
		else
			this.title = "";
		
		if(comment)
			this.comment = comment;
		else
			this.comment = "";
		
		image.alt = this.title;
		
		removeListener(image, "onmousedown", this, this.onMouseDown);
		
		container.style.display = "block";
		overlay.style.display = "block";

		image.style.display = "none";
		image.style.position = "absolute";
		image.setAttribute("wasDragged", 1);
				
		if(image.src != url && url){
			image.style.width = "auto";
			image.style.height = "auto";

			preloader.addLoader(overlay);
			addListener(image, "onload", this, this.showImage, true);
			
			image.src = url;
		}else{
			this.showImage();
		}
	}
	
	this.hideOverlay = function (){
		container.style.display = "none";
		overlay.style.display = "none";
		
		preloader.removeLoader(overlay);
		removeListener(image, "onclick", this, this.hideOverlay);
		
		if(this.onHide){
			if(this.listener){
				this.onHide.call(this.listener);
			}else{
				this.onHide();
			}
		}
		
		document.body.style.overflow = "visible";
		
		return false;
	}
	
	this.showImage = function (){
		//alert("showImage");
		this.loaded = true;
		
		preloader.removeLoader(overlay);
		
		//container.style.display = "block";		
		image.style.display = "block";
		
		var pageSize = getPageSize();

		var imageSize = this.getImageSize(image);
		
		image.style.width = imageSize[0] + "px";
		image.style.height = imageSize[1] + "px";
		
		var width = image.clientWidth;
		var height = image.clientHeight;
				
		//alert(pageSize[0] + " " + pageSize[1]+ " " + width + " " + height);
		
		x = (pageSize[0] - width)/2;
		y = document.documentElement.scrollTop + (document.body.clientHeight- height)/2;
		
		if(x < 0)
			x = 0;
		if(y < 0)
			y = 0;
		
		x = x + "px";
		y = y + "px";
		
		image.style.left = x;
		image.style.top = y;
		
		buttonsPanel.style.left = parseInt(image.style.left) + image.clientWidth - buttonsPanel.clientWidth + 5 + "px";
		buttonsPanel.style.top = parseInt(image.style.top) + 5 + "px";

		title.innerHTML = this.title;
		comment.innerHTML = this.comment;

		title.style.left = parseInt(image.style.left) + (image.clientWidth - title.clientWidth)/2 + "px";
		title.style.top = parseInt(image.style.top) - 15 + "px";

		comment.style.left =parseInt(image.style.left) + (image.clientWidth - comment.clientWidth)/2 + "px";
		comment.style.top = parseInt(image.style.top) + image.clientHeight + 15 + "px";

		image.title = this.title;
		image.alt = this.title;
		
		removeListener(image, "onload", this, this.showImage);
		
		addListener(image, "onclick", this, this.onMouseDown, false, true);

		if(this.onLoad){
			if(this.listener){
				this.onLoad.call(this.listener);
			}else{
				this.onLoad();
			}
		}
	}
	
	this.onMouseDown = function (){
		if(this.loaded){
			x = image.style.left;
			y = image.style.top;
			
			//dragManager.startDrag(image, true, true, true);
			if(this.onClick){
				if(this.onClick){
					if(this.listener){
						this.onClick.call(this.listener);
					}else{
						this.onClick();
					}
				}					
			}else
				this.hideOverlay();
		}
	}
	
	this.onStopDrag = function(object){
		if(x != image.style.left && y != image.style.top){
			;
		}else{
			this.hideOverlay();
		}
	}
	
	this.getImageSize = function(image){
		var windowWidth = screen.availWidth * 0.8;
		var windowHeight = screen.availHeight * 0.8;

		var imageWidth = image.width;
		var imageHeight = image.height;
		var resizeK = 1;
		//alert(windowWidth + " x " + windowHeight + "\n" + imageWidth + " x " + imageHeight);
		
		if(imageWidth > windowWidth || imageHeight > windowHeight){
			if(imageWidth/imageHeight >  windowWidth/windowHeight){
				resizeK = windowWidth/imageWidth;
			}else{
				resizeK = windowHeight/imageHeight;
			}
		}
		
		imageWidth = parseInt(imageWidth*resizeK);
		imageHeight = parseInt(imageHeight*resizeK);
		
		//alert(windowWidth + " x " + windowHeight + "\n" + imageWidth + " x " + imageHeight);
		
		return new Array(imageWidth, imageHeight);
	}
	
	this.createOverlay(buttons);
}

function ViewerButtonPrototype(name, label, onclickListener, onclickHandler){
	this.name = name;
	this.label = label;
	this.onclickListener = onclickListener;
	this.onclickHandler = onclickHandler;
	
	this.initiate = function(){
		this.button = document.createElement("button");
		this.button.innerHTML = label;
		this.button.className = "view-control-button";
		addListener(this.button, "onclick", onclickListener, onclickHandler);
	}
	
	this.initiate();
}