hedera-web-mindshore/web/js/htk/full-image.js

Htk.FullImage = new Class
({
	Extends: Vn.Object
	
	,img: null
	,timeout: 0
	,loading: false
	,visible: false
	,hideCalled: false
	,closed: false

	,initialize: function (props)
	{
		this.parent (props);

		var div = document.createElement ('div');
		div.className = 'htk-full-image';
		div.addEventListener ('mouseover', this.cancelHide.bind (this));
		div.addEventListener ('mouseout', this.hideNow.bind (this));
		
		var loadingBox = document.createElement ('div');
		loadingBox.className = 'htk-full-image-loader';

		var loadingImg = document.createElement ('img');
		loadingImg.src = 'image/loader-black.gif';
		loadingImg.alt = _('Loading');
		loadingBox.appendChild (loadingImg);

		this.div = div;
		this.loadingBox = loadingBox;
		this.loadingImg = loadingImg;
	}
	
	,getLeft: function (width)
	{
		return parseInt (Vn.Browser.getPageXOffset () + (Vn.Browser.getInnerWidth () - width) / 2) +'px';
	}
	
	,getTop: function (height)
	{
		return parseInt (Vn.Browser.getPageYOffset () + (Vn.Browser.getInnerHeight () - height) / 2) +'px';
	}
	
	,show: function (src)
	{		
		if (this.closed && this.src == src)
			return;
	
		this.cancelHide ();
		this.loadingBox.style.left = this.getLeft (40);
		this.loadingBox.style.top = this.getTop (40);

		this.closed = false;
		this.src = src

		this.img = document.createElement ('img');
		this.img.src = src;
		this.img.addEventListener ('load', this.imageLoaded.bind (this, this.img));
		this.img.addEventListener ('error', this.hideLoading.bind (this));

		if (!this.img.complete && !this.loading)
		{
			document.body.appendChild (this.loadingBox);
			this.loading = true;
		}
	}
	
	,imageLoaded: function (img)
	{	
		if (img != this.img || this.hideCalled)
			return;
		
		var scale = 1.0;
		var width = img.width;
		var height = img.height;
		var innerWidth = Vn.Browser.getInnerWidth () - 50;
		var innerHeight = Vn.Browser.getInnerHeight () - 50;
	
		if (width > innerWidth)
		{
			scale = width / innerWidth;
			height = parseInt (height / scale);
			width = innerWidth;
		}
		if (height > innerHeight)
		{
			scale = height / innerHeight;
			width = parseInt (width / scale);
			height = innerHeight;
		}

		this.hideLoading ();
		this.div.style.left = this.getLeft (width + 2);
		this.div.style.top = this.getTop (height + 2);
		this.div.style.width = width +'px';
		this.div.style.height = height +'px';

		if (scale !== 1.0)
		{
			img.style.width = width +'px';
			img.style.height = height +'px';
		}

		if (this.div.firstChild != null)
			this.div.replaceChild (img, this.div.firstChild);
		else
			this.div.appendChild (img);
			
		img.addEventListener ('click', this.onImageClick.bind (this));

		if (!this.visible)
		{
			document.body.appendChild (this.div);
			this.visible = true;

			this.onDocumentClickCallback = this.hideNow.bind (this);
			document.addEventListener ('click', this.onDocumentClickCallback);
		}
	}
	
	,onImageClick: function ()
	{
		this.closed = true;
	}

	,hide: function ()
	{
		this.hideCalled = true;
		this.hideLoading ();
		
		if (this.visible)
			this.timeout = setTimeout (this.hideNow.bind (this), 450);
	}
	
	,hideNow: function ()
	{
		if (this.visible)
		{
			document.body.removeChild (this.div);
			this.hideCalled = true;
			this.visible = false;
			this.timeout = 0;
		}

		document.removeEventListener ('click', this.onDocumentClickCallback);
		this.onDocumentClickCallback = null;
	}

	,cancelHide: function ()
	{
		if (this.timeout)
		{
			clearTimeout (this.timeout);
			this.timeout = 0;
		}

		this.hideCalled = false;
	}
	
	,hideLoading: function ()
	{
		if (this.loading)
		{
			document.body.removeChild (this.loadingBox);
			this.loading = false;
		}
	}
});