API Docs for:
Show:

File: application-pictures.js

/*******************************************************************************
 * Copyright (c) 2017 Genialist Software Ltd.
 * All rights reserved.
 ******************************************************************************/

const pPictureGalleries = new pMap();

/******************************************************************************/

function getVisibleGallery() {
	return pPictureGalleries.getValue(pElement.getAttribute('view-item', 'gallery'), null);
}

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

function pPictureGalleryInstance(p_id, p_element) {
	var that = this, m_id = p_id, m_element = p_element, m_thumb_height = pStyleUtil.parseWidth(pDocument.getStyleValue('.img-picture-thumb', 'height')), resize_gallery_disabled, refresh,
		canDoPrevious, canDoNext, do_update, m_ui_slide = true, m_sortByDateTaken, h, m_effects = [ '', 'picture-trans-opactity', 'picture-trans-opactity' ], m_thumb_surround = 0;
	[ 'margin-left', 'margin-right', 'border-left', 'border-right', 'padding-left', 'padding-right' ].forEach(function(x) {
		m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', x));
	})
	/*
	m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'margin-left'));//new pStyle(x).surroundWidth();
	m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'margin-right'));
	m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'border-left'));
	m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'border-right'));
	m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'padding-left'));
	m_thumb_surround += pStyleUtil.parseWidth(pDocument.getStyleValue('.picture-thumb', 'padding-right'));*/
	
	
	
	this.tracePrefix = 'PictureGallery';
	
	//*** REGISTER
	pPictureGalleries.put(p_id, this);
	
	//*** INIT STATE
	pDocument.initHistoryState('view-item');

	this.fullScreen = false;
	
	function f_getImage(op) {
		
		if (pApplicationUI.OPTION_PICTURES_SCALE)
			if (op.height)
				if (op.height > screen.height && op.scaled && op.scaled.length>0) {
					var i;
					for(i=0 ; i<op.scaled.length ; i++) {
						if (op.scaled[i].height && op.scaled[i].height>=screen.height)
							return op.scaled[i];
					}
					for(i=0 ; i<op.scaled.length ; i++) {
						if (op.scaled[i].height && op.scaled[i].height<=screen.height)
							return op.scaled[i];
					}
					/*

					if (op.s1024x768 && op.s1024x768.height && op.s1024x768.height<screen.height)
						p_url = op.s1024x768.uri;
					if (op.s1920x1080 && op.s1920x1080.height && op.s1920x1080.height<screen.height)
						p_url = op.s1920x1080.uri;*/
				}
		
		return op;
	}
	
	function f_getURL(o) {
		o = f_getImage(o);
		return pURL.addParam(o.uri, 'v', o.lastModified);
	}

	function f_ui_removeImage() {
		var x_c = pElement.x('view-item-content'), x_cp = pElement.x('view-item-image-container'+(that.m_view));
		if (x_cp)
			x_c.removeChild(x_cp);
		
		pElement.setTextContent("picture-count", (that.images? that.images.length : '?')+' Picture(s)');
	}

	function f_ui_size(x, x_div) {
		x = pDocument.height(x);
		if (x>0) {
			x_div.style.height = x + 'px';
			x_div.style.lineHeight = x + 'px';
		}
	}
	
	function onResize() {

		//console.log('picture on resize...');
		
		var v = pElement.x('view-item'), e = pElement.x('view-item-content'), h;
		if (e) {
			if (that.fullScreen) {
				e.style.height = '100%';
				e.style.minHeight = '100%';
				e.style.maxHeight = '100%';

				pElement.addClassName(v, 'fullscreen');
				/*pElement.addClassName(i_e, 'fullscreen');
				pElement.removeClassName("view-item-close", "link");
				pElement.addClassName("view-item-close", "fullscreen");
				pElement.removeClassName("view-item-exit-fullscreen", "link");
				pElement.addClassName("view-item-exit-fullscreen", "fullscreen");*/
				
				if (that.images) {
					h = pDocument.height(e);
					that.images.forEach(function(im, i) {
						i = pElement.x("view-item-image-container"+i);
						if (i) {
							i.style.height = h + 'px';
							i.style.lineHeight = h + 'px';
						}
					});
				}
			}
			else {
				pElement.removeClassName(v, 'fullscreen');
				/*
				pElement.removeClassName(i_e, 'fullscreen');
				pElement.addClassName("view-item-close", "link");
				pElement.removeClassName("view-item-close", "fullscreen");
				pElement.addClassName("view-item-exit-fullscreen", "link");
				pElement.removeClassName("view-item-exit-fullscreen", "fullscreen");
				*/

				//var h = window.innerHeight - pDocument.top(v) - new pStyle(v).surroundHeight() - new pStyle(e).surroundHeight();
				//var h = (window.innerHeight - (150 -31 + pDocument.height('picture-toolbar')));
				pDocument.setTimeout('pic', function() {
					var top = Math.max(pDocument.height('view-item-close'), pDocument.height('view-item-title')), m = pElement.x('menu');
					
					//pConsole.info(this, v.id + '.top: ' + pDocument.top(v));
					//pConsole.info(this, v.id + '.surroundHeight: ' + new pStyle(v).surroundHeight());
					//pConsole.info(this, e.id + '.surroundHeight: ' + new pStyle(e).surroundHeight());
					//pConsole.info(this, 'view-item-close.height: ' + top);
					//pConsole.info(this, 'picture-toolbar.height: ' + pDocument.height('picture-toolbar'));
					
					h = getInnerHeight() - pDocument.height(m) - new pStyle(v).surroundHeight() - new pStyle(e).surroundHeight() - pDocument.height('picture-toolbar') - top;
					e.style.height = e.style.minHeight = e.style.maxHeight = h + 'px';
					
					//pConsole.info(this, e.id + ".style.height -> " + h);
					
					if (that.images) {
						//var h = pDocument.height(e);
						that.images.forEach(function(im, i) {
							i = pElement.x("view-item-image-container"+i);
							if (i) {
								i.style.height = h + 'px';
								i.style.lineHeight = h + 'px';
								
								//pConsole.info(this, i.id + ".style.height -> " + h);
							}
						});
					}
				}, 100);
				//i_e.style.height = i_h + 'px';
				//i_e.style.width = window.innerWidth;
				
				//window.f_resize_play();
			}
		}

		/*if (this.images) {
			var h = pDocument.height(e);
			this.images.forEach(function(im, i) {
				i = pElement.x("view-item-image-container"+i);
				if (i) {
					i.style.height = h + 'px';
					i.style.lineHeight = h + 'px';
				}
			});
		}*/
		that.updateDimensions();
		
		if (!resize_gallery_disabled)
			if (pApplicationUI.OPTION_PICTURES_RESIZE_GALLERY)// && window.innerWidth>800)
				if (!pDialog.isDialogOn())
					that.resizeImages();
		
	}
	
	function f_delete() {
		var i_curl = that.getCurrentImageURL();

		var n = that.m_view;

		that.images.splice(n, 1);

		f_ui_removeImage();

		if (that.images.length==0)
			that.viewItemClose();
		else if (that.images.length==1)
			that.viewItem(0, true);
		else if (n>that.images.length-1)
			that.viewItem(n-1, true);
		else
			that.viewItem(n, true);

		//var e = pElement.x('picture-thumb-'+n);
		//m_element.remove(e);

		refresh = true;
		//this.showImages(-1);
		//this.resizeImages();
	}
		
	function c_renameItem(n) {
		this.autostart = { name: n }; // new_name
		do_update = true;
		that.viewItemClose();
	}
	
	function c_showFullscreenButtons() {
		if (canDoPrevious)
			pDocument.showAndFadeOut('view-item-prev');
		if (canDoNext)
			pDocument.showAndFadeOut('view-item-next');

		if (this.fullScreen) {
			pDocument.showAndFadeOut('view-item-close');
			pDocument.showAndFadeOut('view-item-exit-fullscreen');
		}
	}
	
	//this.m_start = 0;

	this.m_view = -1;

	//this.first = function() { if (pDialog.isDialogOn() === false) that.viewItem(0); };
	//this.previous = function() { if (pDialog.isDialogOn() === false) that.viewItem(n-1); };
	//this.next = function() { if (pDialog.isDialogOn() === false) that.viewItem(n+1); };
	//this.last = function() { if (pDialog.isDialogOn() === false) that.viewItem(this.images.length-1); };

	this.enterFullscreen = function() {
		if (!that.fullScreen) {
			pDocument.setHistoryState('show-images-fullscreen', true);
			
			that.fullScreen = true;
			onResize();
	
			c_showFullscreenButtons();
			
			//if (!pDevice.isIOS() || pDevice.isIOS12())
			//	pDocument.fullScreen('view-item');
		}
	};
	
	this.exitFullscreen = function() {
		if (that.fullScreen) {
			//if (!pDevice.isIOS())
			//pDocument.exitFullScreen(m_element);

			pDocument.setHistoryState('show-images-fullscreen', false);
			
			that.fullScreen = false;
			onResize();
	
			pElement.removeClassName('view-item-close', 'fadeout');
			pDocument.show('view-item-close');
		}
	};
	
	pElement.x('view-item').addEventListener('dblclick', function() {
		if (!that.fullScreen)
			that.enterFullscreen();
		else
			that.exitFullscreen();
	});

	this.viewItemClose = function() {
		
		pDocument.clearTimeout('gallery');
		
		that.exitFullscreen();
		
		//*** save state
		pDocument.setHistoryState('view-item', pObject.removeMember(pDocument.getHistoryState('view-item'), 'n'));
		
		if (pDocument.componentIsShown('view-item')) {
			pDocument.hideComponent('view-item');
	
			pElement.setOnClick('toolbar-img-first', null);
			pElement.setOnClick('toolbar-img-previous', null);
			pElement.setOnClick('toolbar-img-next', null);
			pElement.setOnClick('toolbar-img-last', null);
	
			f_ui_removeImage();
			
			resize_gallery_disabled = false;
			
			if (refresh) {
				that.showImages(-1);
				refresh = false;
			}
			if (do_update) {
				that.update();
				do_update = false;
			}
		}
		
		pTouch.enableScroll();
		pDocumenti.removeOnKeyDown(that.viewItemClose, pKeys.escape, true);
		
	};

	this.getCurrentImage = function() {
		return that.images[that.m_view];
	};
	
	this.getCurrentImageURL = function() {
		return that.getCurrentImage().uri;
	};

	this.getAllImageURLs = function() {
		return that.images.map(function(img) { return img.uri });
	};
	
	this.deletePicture = function(p_doc_url) {
		if (!that.images || that.images.length<1)
			return false;

		if (pDocument.componentIsShown('view-item') === false)
			return false;

		var i_img = that.getCurrentImage(), r = {
			id: 'delete-picture',
			options: [ '!question', pImages.createDialogOption(i_img) ],
			doc_url: p_doc_url || window.location.pathname,
			play_url: i_img.uri,
			gallery: that
		};
		
		pDialog.question(r).then(function () {
			pMediaLibrary.deletePicture(r.doc_url, [ r.play_url ], f_delete, false);
		});
		return true;
	};
	
	this.deleteAllPictures = function(p_doc_url) {
		//TODO: in case of partial failure, refresh images...
		var req = { id: 'delete-all-pictures', gallery: that, doc_url: p_doc_url, play_urls: that.getAllImageURLs() };
		pDialog.question(req).then(function() {
			pMediaLibrary.deletePicture(req.doc_url, req.play_urls, req.gallery.update, false);
		});
	};

	this.convertPicture = function(p_doc_url) {
		pMediaLibrary.convertToMP4({ play_url: that.getCurrentImage().name, ximport: false, img: true }).then(c_renameItem);
	};
		
	this.renamePicture = function(p_doc_url) {
		pMediaLibrary.renameItem(p_doc_url || window.location.pathname, that.getCurrentImageURL(), c_renameItem, that.getCurrentImage().name || pString.basename(that.getCurrentImageURL()));
	};

	this.movePicture = function(p_doc_url) {
		pMediaLibrary.movePicture(p_doc_url || window.location.pathname, that.getCurrentImageURL(), f_delete);
	};

	this.moveAllPictures = function(p_doc_url) {
		//TODO: in case of partial failure, refresh images...
		pMediaLibrary.movePicture(p_doc_url || window.location.pathname, that.getAllImageURLs(), that.update);
	};
	
	this.resume = function() {
		if (!that.images || that.images.length<1)
			return false;

		if (that.m_view<0)
			that.viewItem(0);
		else if (pDocument.componentIsShown('view-item') === false) {
			if (that.m_view>=that.images.length)
				that.viewItem(that.images.length-1);
			else
				that.viewItem(that.m_view);
		}
		else
			that.viewItemClose();

		return true;
	};

	this.next = function() {
		return pElement.click('toolbar-img-next');
	};

	this.previous = function() {
		return pElement.click('toolbar-img-previous');
	};

	this.updateDimensions = function() {
		if (pDocument.componentIsShown('view-item') === true) {
			var /*i_short = true*//*pDevice.isIPhone() || pDevice.isIPod() || pDevice.isAndroid();*//*,*/ i = that.getCurrentImage(), x = pElement.x('view-item-image'+that.m_view);
			if (x) {
				var w = pPictures.width(x), h = pPictures.height(x), t = i.mime==null || pPictures.supports(i.mime);
				if (i.width!=w || i.height!=h)
					pElement.setTextContent('view-item-image-dim', '(' + (t? '':'transcoded; ') + i.width + ' x ' + i.height + ' > ' + w + ' x ' + h +')');
				else
					pElement.setTextContent('view-item-image-dim', '(' + (t? '':'transcoded; ') + i.width + ' x ' + i.height +')');
				
				setTimeout(window.f_resize_play, 100);
			}
		}
	};

	//this.n = 0;

	function f_ui_slidePictureFromRight(x_div) {
		pElement.addClassName(x_div, "view-item-image-container-right");

		setTimeout(function(){
			pElement.removeClassName(x_div, "view-item-image-container-right");
			pElement.addClassName(x_div, "view-item-image-container-center");

			that.busy = false;
		}, 1);
	}
	
	function f_ui_slidePictureFromLeft(x_div) {
		pElement.addClassName(x_div, "view-item-image-container-left");

		setTimeout(function(){
			pElement.removeClassName(x_div, "view-item-image-container-left");
			pElement.addClassName(x_div, "view-item-image-container-center");

			that.busy = false;
		}, 1);
	}

	var x_img;
	this.viewItem = function(n, p_force, p_slideshow, p_effect) {
		
		if (pDialog.isDialogOn() === true)
			return;
		if (that.busy === true)
			return;
		
		pDocument.clearTimeout('gallery');

		that.wait = setTimeout(function() { pDocument.wait(); that.wait = null; }, 100);
		resize_gallery_disabled = true;
		
		var i_current = that.m_view;
		var i_show = pDocument.componentIsShown('view-item') === false;

		if (n.name)
			n = that.images.findIndex(function(i) { return i.name == n.name; });
		
		//*** FIX n
		if (!n) n = 0;
		try {
			n = parseInt(n);
			if (n>=that.images.length) n = that.images.length-1;
			if (n<0) n=0;
		}
		catch (exception) {
			n = 0;
		}
		that.m_view = n;
		that.busy = true;
		
		//*** LOAD IMAGE
		var i_current_img = that.images[n], i_url = f_getURL(i_current_img);
		
		//*** REPORT PAGE/TIME
		if (that.reportPage) {
			if (pConsole.debugging())
				pConsole.debug(that, "Report Time (Page): " + pDate.toLocaleString(new Date()) + ': ' + n);
			pHTTPRequest.post(window.location.pathname + "?action=play-update&time=" + n);
		}

		//*** CREATE IMAGE
		var i_img = new Image();
		i_img.onerror = function() {
			if (that.wait)
				clearTimeout(that.wait);
			pDocument.stopwait();

			that.viewItemClose();
			that.busy = false;
			pApplicationUI.errorDialog({ text: 'Failed to load image: <br/>'+i_url, icon: { src: '/resources/html/images/32x32/picture_error.png' } });
		};
		
		var cl=''
		if (pApplicationUI.OPTION_PICTURES_ROTATE) {
			var o = parseInt(i_current_img.orientation);
			//if (o == 8) //turn to right
			//	cl = 'rotate-right';
			if (o == 3) //flip horizontally
				cl = 'rotate-half';
			//if (o == 6) //turn to left
			//	cl = 'rotate-left';
		}
		
		i_img.onload = function() {
			
			if (pApplicationUI.OPTION_PICTURES_ROTATE) {
				var o = parseInt(i_current_img.orientation);
				if (o == 8) //turn to right
					i_url = pPictures.turnToLeft(that.ximg);
				//if (o == 3) //flip horizontally
				//	i_url = pPictures.flipHorizontally(that.ximg);
				if (o == 6) //turn to left
					i_url = pPictures.turnToRight(that.ximg);
			}

			if (that.wait)
				clearTimeout(that.wait);
			pDocument.stopwait();
			
			//onResize();

			//var i_view = that.m_view;

			if (m_ui_slide) {

				var x_c = pElement.x('view-item-content'), x_div = pElement.create("div", "view-item-image-container"+n, "view-item-image-container " + cl), i_x = pElement.create("span"), x_cp;
				f_ui_size(x_c, x_div);

				i_x.innerHTML="&#8203;";
				//i_x.className = "noselect";
				//i_x.style.width = "0px;";
				x_div.appendChild(i_x);

				x_img = pElement.create("img", 'view-item-image'+n, "view-item-pictures-medias");
				//x_img.style.paddingTop = screen.height/2 - i_img.naturalHeight + 'px';
				pElement.setSrc(x_img, i_url);
				
				if (pApplicationUI.OPTION_PICTURES_TOOLTIPS)
					x_img.title = pPictures.tooltip(i_current_img, '\n ');
				
				//x_img.style.marginTop = -(x_img.height / 2) + 'px';
				
				x_div.appendChild(x_img);
				x_c.appendChild(x_div);

				if (null==i_current || i_current == -1 || i_show === true) {

					pElement.addClassName(x_div, "view-item-image-container-center");
					x_img.style.maxHeight = '10px';

					setTimeout(function(){
						/*if (that.fullScreen)
							x_img.style.maxHeight = '100%';
						else if (h)
							x_img.style.maxHeight = h + 'px';
						else*/
							x_img.style.maxHeight = '100%';
						
						setTimeout(function(){
							onResize();
							that.busy = false;
						}, 100);
					}, 1);
				}
				else if (n >= i_current) {
					pElement.addClassName(x_div, "view-item-image-container-right "+(p_effect || ''));

					x_cp = pElement.x('view-item-image-container'+i_current);
					if (x_cp && x_cp!=x_div) {
						pElement.addClassName(x_cp, "view-item-image-container-left "+(p_effect || ''));
						pElement.removeClassName(x_cp, "view-item-image-container-center");

						setTimeout(function(){
							pElement.removeClassName(x_div, "view-item-image-container-right");
							pElement.addClassName(x_div, "view-item-image-container-center "+(p_effect || ''));
						}, 10);

						setTimeout(function(){
							x_c.removeChild(x_cp);
							that.busy = false;
						}, 200);
					}
					else
						f_ui_slidePictureFromRight(x_div);
				}
				else {
					pElement.addClassName(x_div, "view-item-image-container-left");

					x_cp = pElement.x('view-item-image-container'+i_current);
					if (x_cp && x_cp!=x_div) {
						pElement.addClassName(x_cp, "view-item-image-container-right");
						pElement.removeClassName(x_cp, "view-item-image-container-center");

						setTimeout(function(){
							pElement.removeClassName(x_div, "view-item-image-container-left");
							pElement.addClassName(x_div, "view-item-image-container-center");
						}, 10);

						setTimeout(function(){
							x_c.removeChild(x_cp);
							that.busy = false;
						}, 200);
					}
					else
						f_ui_slidePictureFromLeft(x_div);
				}
			}
			else {

				x_img = pElement.x('view-item-image', 'view-item-image'+n);
				pElement.setSrc(x_img, p_url);
				pElement.removeClassName(x_img, 'not-visible');
				pElement.addClassName('view-item-busy', 'not-visible');

				that.busy = false;
			}
			that.images[that.m_view].dimensions = { width: this.width, height: this.height };
			that.updateDimensions();
			setTimeout(that.updateDimensions, 300);
			setTimeout(that.updateDimensions, 300);
			
			pElement.setOnClick('view-item-image', function() { window.open(p_url, '_blank'); });//pLocation.assign(p_url); });
			
			//*** AUTOMATIC SLIDESHOW
			if (p_slideshow === true && n+1<that.images.length) {
				pDocument.setTimeout('gallery', function() { that.viewItem(n+1, null, true, pArray.randomElement(m_effects)); }, 5000);
			}

			setTimeout(window.f_resize_play, 100);
			setTimeout(onResize, 100);
			
		}.bind({ ximg: i_img, img: f_getImage(i_current_img) }); // i_img.onload = function()

		//*** LOAD IMAGE
		pElement.setTextContent('view-item-title-content', (n+1)+'/'+that.images.length + ' - ' + pString.encodeHTML(pPictures.title(that.images[n])));
		
		pElement.setTextContent('view-item-image-dim', '');

		pConsole.debug(that, "Loading image: " + i_url);
		i_img.src = i_url;

		//*** LOAD PREVIOUS IMAGE
		if (n>0) {
			i_img = new Image();
			i_img.src = f_getURL(that.images[n-1]);
		}

		//*** LOAD NEXT IMAGE
		if (n+1<=that.images.length-1) {
			i_img = new Image();
			i_img.src = f_getURL(that.images[n+1]);
		}

		//*** SET BUTTONS
		if (n>0) {
			canDoPrevious = true;
			pDocument.showAndFadeOut('view-item-prev');
		}
		else {
			canDoPrevious = false;
			pDocument.hide('view-item-prev');
		}

		if (n+1<=that.images.length-1) {
			canDoNext = true;
			pDocument.showAndFadeOut('view-item-next');
		}
		else {
			canDoNext = false;
			pDocument.hide('view-item-next');
		}

		if (that.fullScreen) {
			pDocument.showAndFadeOut('view-item-close');
			pDocument.showAndFadeOut('view-item-exit-fullscreen');
		}

		//*** UPDATE TOOLBAR
		var h = pElement.x('picture-toolbar'), i_getgal = 'pPictureGalleries.getValue(\''+m_id+'\')';
		pElement.removeAllChildren(h);
		
		if (n>0) pElement.add(h, pApplicationUI.createToolbarItem('img-first', i_getgal+'.viewItem(0)', 'toolbar-img-first'));
		if (canDoPrevious) pElement.add(h, pApplicationUI.createToolbarItem('img-previous', i_getgal+'.viewItem('+(n-1)+')', 'toolbar-img-previous'));
		
		pElement.add(h, [[ 'div', "toolbar-view", "toolbar-item toolbar-view link", 'Full Size', null, [ 'onclick', 'pLocation.assign(\''+i_current_img.uri+'?v='+i_current_img.lastModified+'\')' ]]]);

		if (pResources.get('admin') === "true") {
			if (i_current_img.canWrite != false) 
				pElement.add(h, [[ 'div', "toolbar-rename-item", "toolbar-item toolbar-rename-item link", 'Rename...', null, [ 'onclick', i_getgal+'.renamePicture()' ]]]);
			if (i_current_img.canCopy != false) 
				pElement.add(h, [[ 'div', "toolbar-copy-item", "toolbar-item toolbar-copy-item link", 'Copy To...', null, [ 'onclick', "pMediaLibrary.copyPicture(null, "+i_getgal+".getCurrentImageURL())" ]]]);
			if (i_current_img.canWrite != false) 
				pElement.add(h, [[ 'div', "toolbar-move-item", "toolbar-item toolbar-move-item link", 'Move To...', null, [ 'onclick', i_getgal+'.movePicture()' ]]]);
			if (i_current_img.canWrite != false) 
				pElement.add(h, [[ 'div', "toolbar-delete-item", "toolbar-item toolbar-delete-item toolbar-delete-picture link", 'Delete...', null, [ 'onclick', i_getgal+'.deletePicture()' ]]]);
		
			pElement.add(h, pApplicationUI.createToolbarItem('file-properties', 'pMediaLibrary.getFileMetadata(null, \''+ i_current_img.name+'\')'));
			//h += '<div class="toolbar-item toolbar-properties link" id="toolbar-properties" onclick="pMediaLibrary.getFileMetadata(null, \''+ i_current_img.name+'\')">File Properties...</div>';
			pElement.add(h, [[ 'div', null, "toolbar-item toolbar-convert link", 'Convert...', pApplicationUI.OPTION_TOOLS_CONVERT? '':'display: none;', [ 'onclick', i_getgal+".convertPicture()" ]]]);
		}
		if (canDoNext) pElement.add(h, pApplicationUI.createToolbarItem('img-next', i_getgal+'.viewItem('+(n+1)+')', 'toolbar-img-next'));
		if (n!=that.images.length-1) pElement.add(h, pApplicationUI.createToolbarItem('img-last', i_getgal+'.viewLastItem()', 'toolbar-img-last'));
		pElement.add(h, pApplicationUI.createToolbarItem('img-fullscreen', i_getgal+'.enterFullscreen()'));

		//pElement.add(h, pApplicationUI.createToolbarItem('img-zoomout', i_getgal+".zoomout(event, x_img)"));
		//pElement.add(h, pApplicationUI.createToolbarItem('img-zoomin', i_getgal+"zoomin(event, x_img)"));

		//h += '<button is="google-cast-button" onclick="window.castPicture('+i_getgal+'.getCurrentImageURL)" style="width: 16px; height: 16px;"></button>';
		
		//TODO: if tags enabled
		if (pResources.get('admin') === "true") 
			pElement.add(h, pApplicationUI.createToolbarItem('img-tags', 'pMediaLibrary.selectTags()'));
		
		pElement.add(h, [[ 'div', null, "toolbar-item toolbar-more link", 'More...', null, [ 'onclick', 'pApplicationMenu.menu(\'picture-toolbar\')' ]],
						 [ 'div', null , "toolbar-end" ]]);
		//pElement.setInnerHTML('picture-toolbar', h);

		pElement.addClassName('view-item-image', 'not-visible');
		pElement.removeClassName('view-item-busy', 'not-visible');

		if (pDocument.componentIsShown('view-item') === false) {
			pDocument.showComponent('view-item', 'picture-hide');
			pElement.setAttribute('view-item', 'gallery', m_id);

			/*var resetTimeout;
			interact(pElement.x('view-item-content')).gesturable({
			   onstart: function (event) {
				  //clearTimeout(resetTimeout);
				  //scaleElement.classList.remove('reset');
				},
				onmove: function (event) {
				  alert('pincg: ' + event.ds);//scale = scale * (1 + event.ds);

				  //scaleElement.style.webkitTransform =
				  //scaleElement.style.transform =
				  //  'scale(' + scale + ')';

				  dragMoveListener(event);
				},
				onend: function (event) {
				  //resetTimeout = setTimeout(reset, 1000);
				  //scaleElement.classList.add('reset');
				}
			}) .draggable({ onmove: dragMoveListener });*/
		}
		
		pDocumenti.addOnKeyDown(that.viewItemClose, pKeys.escape, true);
		pTouch.disableScroll();

		setTimeout(window.f_resize_play, 100);
		setTimeout(onResize, 100);
		
		return true;
	};
	
	this.viewLastItem = function() {
		this.viewItem(that.images.length-1);
	};
	
	this.renderPageToolbar = function(i_imgs, m_max, p_start) {
		var h = '';
		if (m_max > 0 && i_imgs.length > m_max) {
			h += '<div class="listview-page">';
			for(var l=0 ; l<i_imgs.length ; l+=m_max) {
				var i_max = l+m_max;
				if (i_max > i_imgs.length)
					i_max = i_imgs.length;

				if (l==p_start)
					h += '<span class=\"listview-item-page listview-item-page-selected selected\">' + (l+1) + '-'+i_max + '</span>';
				else
					h += '<span class=\"listview-item-page\"><a class=\"listview-item-page-link link\" href=\"javascript:pPictureGalleries.getValue(\''+m_id+'\').showImages('+l+')\">' + (l+1) + '-'+i_max + '</a></span>';
			}
			h += '</div>';
		}
		return h;
	};
		
	var current_page_start;
	this.showImages = function(p_start) {

		if (pDocument.componentIsShown('view-item') === false)
			pDocument.show(m_element);

		var i_imgs = that.images;

		if (!i_imgs) {
			that.showAsUnavailable();
			return;
		}

		if (i_imgs.length<1) {
			pElement.setInnerHTML(m_element, '<span class="warning">This picture folder is empty.</span>');
			return;
		}
		
		const m_max = pApplicationUI.OPTION_PAGE_MAXSIZE;
		var h = '<div class="dragenter-help"><!----></div>';

		//*** FIX P_START
		if (p_start<0)
			p_start = current_page_start || pDocument.getHistoryState('show-images-start', 0);
		if (p_start>=i_imgs.length) ///TO TEST
			p_start = Math.floor(i_imgs.length / m_max) * m_max;

		//*** SAVE P_START
		current_page_start = p_start;
		pDocument.setHistoryState('show-images-start', p_start);

		//*** PAGE TOOLBAR
		h += that.renderPageToolbar(i_imgs, m_max, p_start);
		
		//*** RESIZING DATA
		var i_line_first = 0, i_first_of_line = true, i_x = pElement.x(m_element), i_prect_right = pDocument.innerWidth(i_x), i_right = 0;
		//console.log("view: " + i_prect_right);
		
		const hh = m_thumb_height, w_surround = m_thumb_surround, i_resize = false;//pApplicationUI.OPTION_PICTURES_RESIZE_GALLERY;// && window.innerWidth>800;
		
		var i_divs = [], i_tooltip = pApplicationUI.OPTION_PICTURES_TOOLTIPS;
		for(var i=p_start ; i<i_imgs.length ; i++) {
			if (m_max>0 && i>=p_start+m_max) break;
			
			var i_img = i_imgs[i], w = i_img.ww + w_surround, i_div = 'class="picture-thumb" id=\"picture-thumb-'+ i +'\">\n', i_title = '', cl = '';
			if (i_tooltip)
				i_title = pPictures.tooltip(i_img, '&#x000A;');

			if (!i_img.thumbs && pApplicationUI.OPTION_PICTURES_ROTATE) {
				var o = parseInt(i_img.orientation);
				if (o == 8) //turn to right
					cl = 'rotate-right';
				if (o == 3) //flip horizontally
					cl = 'rotate-half'
				if (o == 6)
					cl = 'rotate-left';
			}
			
			i_div += '<img class=\"img-picture-thumb '+((i<10)? 'key-'+(i+1):'')+' view-item-start '+cl+'\" src=\"'
			i_div += (i_img.thumbs)? pURL.addParam(i_img.thumbs[0].uri, 'v', i_img.thumbs[0].lastModified) : pURL.addParam(i_img.uri, 'v', i_img.lastModified);
			i_div += '\" id="img-picture-thumb-'+i+'" onclick=\"pPictureGalleries.getValue(\''+m_id+'\').viewItem('+i+')\" onerror=\"pConsole.error(this, this.src)\"';
			if (i_img.width && i_img.width>=0)
				i_div += ' org-width="'+i_img.width+'" org-height="' + i_img.height + '" ';
			i_div += ' org-or="'+i_img.orientation + '" ';
			i_div += ' attr-url=\"'+pImages.toURL(i_img)+'\" ondragstart=\"pPictures.dragStart(event);\"';
			if (i_resize) {
				if (!i_img.thumbs && pApplicationUI.OPTION_PICTURES_ROTATE) {
					var o = parseInt(i_img.orientation);
					if (o == 6 || o == 8)
						i_div += ' style="width: '+hh+'px; height: '+Math.max(hh, i_img.ww)+'px;';
					else
						i_div += ' style="width: '+i_img.ww+'px; height: '+hh+'px;';
				}
				else
					i_div += ' style="width: '+i_img.ww+'px; height: '+hh+'px;';
			}
			
			i_divs[i_divs.length] = { div: i_div, w: w, ww: i_img.ww, title: i_title, img_ml: 0 };
			
			if (!i_resize) continue;
			
			//*** RESIZE
			if (i_first_of_line) {
				i_first_of_line = false;
				i_line_first = i;
				i_right = w;
			}
			else if (i_right + w == i_prect_right) { // line break
				i_first_of_line = true;
			}
			else if (i_right + w > i_prect_right) { // line break;
				i_first_of_line = true;
				
				//var n = i - i_line_first + 1;
				var aw = w - (i_prect_right - i_right) + 1;
				//console.log(i+' aw: ' + aw + ' w: ' + w + ' rect: ' + i_prect_right + ' r: ' + i_right);
				if (aw > 0) {
					//0.9.13
					pPictures.resizeLine(i_divs.slice(i_line_first-p_start, i+1-p_start), aw);
				}
			}
			else
				i_right += w;
		}
		i_divs.forEach(function(i_div) {
			if (i_resize) {
				var w = i_div.w - w_surround;
				if (w < i_div.ww) {
					//console.log(i_i.id + ' marginLeft: ' + i_i.img_w + ' - ' + w + ' ' + (i_i.img_w - w)/2 + ' ' + Math.trunc((i_i.img_w - w)/2));
					i_div.img_ml = -Math.trunc((i_div.ww - w)/2);
				}
			
				h += '<div style="width: '+ w + 'px;" ';
				if (pString.v(i_div.title)) 
					h += ' title="'+pString.encodeHTMLLines(i_div.title)+'"';//' '+i_div.ww + ' > ' + w +' ' + i_div.img_ml + '"';
				h += i_div.div + ' margin-left: '+i_div.img_ml+'px;"/>\n';
			}
			else
				h += '<div '+((pString.v(i_div.title))? ' title="'+pString.encodeHTMLLines(i_div.title)+'" ' : ' ')+ i_div.div + '>';
			h += '</div>\n';
		});
		
		h += '<div style="clear: both;"/>';

		//*** PAGE TOOLBAR
		h += that.renderPageToolbar(i_imgs, m_max, p_start);

		//*** RENDER
		pElement.setInnerHTML(m_element, h);
		
		//*** RESIZE IMAGES
		pDocument.setTimeout('resize', that.resizeImages, 300);
		
	};

	this.resizeImages = function() {
		//return;
		
		var i_imgs = that.images;
		if (!i_imgs || i_imgs.length<1)
			return;
		
		//pConsole.info(that, "Resizing Picture Gallery...");
		
		var p_start = pDocument.getHistoryState('show-images-start', 0);
		
		var i_x = pElement.x(m_element);
		const m_max = pApplicationUI.OPTION_PAGE_MAXSIZE;
		
		var imgs = []
		for(var i=p_start ; i<i_imgs.length;i++) {
			if (m_max>0 && i>=p_start+m_max) break;
			
			imgs[imgs.length] = pElement.x('picture-thumb-' + i);
		}
		pPictures.resizeImages(i_x, imgs, m_thumb_height);
	};

	var available;
	this.showAsAvailable = function(p_request) {
		pDocument.show('movie-play-default');
		pDocument.hide('movie-play-default-unavailable');
		pDocument.hide('movie-play-default-unavailable2');
		pElement.removeClassName(pElement.c('container-movie-play-default-unavailable'), 'movie-unavailable');
		
		available = true;
	};
	this.showAsUnavailable = function() {
		pElement.setInnerHTML(m_element, '<span class="warning">This picture folder is not available or cannot be found.</span>');
		
		pDocument.hide('movie-play-default');
		pDocument.show('movie-play-default-unavailable', 'table-cell');
		pDocument.show('movie-play-default-unavailable2');
		pElement.addClassName(pElement.c('container-movie-play-default-unavailable'), 'movie-unavailable');
		
		available = false;
	};
	
	this.thumbWidth = function(i_img) {
		return pPictures.thumbWidth(i_img.width, i_img.height, m_thumb_height);
	};
	
	function f_sort(a, b) {
		if (a.date == b.date)
			return 0;
		if (a.date < b.date)
			return -1;
		return 1;
	};
	
	this.update = function(p_autostart) {
		pConsole.info(that, 'Getting pictures...');

		var u = pURL.addQueryParameter(null, [ 'action', 'contents', 'v', Math.random() ]);
		if (pApplicationUI.OPTION_PICTURES_GET_ORIENTATION) 
			u = pURL.addQueryParameter(u, 'get_orientation', '1');

		var p_prop = that.show_propname, i_autostart = p_autostart;
		pHTTPRequest.get(u, function(p_request) {

			if (pROSE.handleHTTPResponse(p_request)===false)
				return;

			try {
				//pConsole.info(that, 'Getting pictures... Response: ' + p_request.responseText);
				var i_obj = pJSON.parse(p_request.responseText);
				if (!i_obj)
					return;

				var i_imgs = i_obj.images;
				if (null==i_imgs || i_obj.exists === false) {
					that.images = null;
					that.showAsUnavailable();

					if (i_autostart != false)
						if (that.autostart!=null || pROSE.getProp(p_prop)===true || pDocument.isHidden(m_element)===false) {
							that.autostart = null;
							
							if (pDocument.getHistoryState('show-images-fullscreen', false))
								that.enterFullscreen();
							
							that.showImages(0);
						}

					that.updateToolbar();
					return;
				}

				//*** SORT BY DATE TAKEN...
				that.unsorted_images = i_imgs;
				
				if (that.sortByDateTaken)
					//if (i_obj.dates === true)
						for(var i=0 ; i<i_imgs.length ; i++)
							if (i_imgs[i].date!=null && i_imgs[i].date!='' && i_imgs[i].date!='-1') {
								pConsole.info(that, "Sort pictures by date taken...");
								
								// concat files with no date and files with date
								var i_d = i_imgs.filter(function(i) { return i.date!=null && i.date!='' && i.date!='-1'; });
								var i_nd = i_imgs.filter(function(i) { return !i_d.includes(i); });
								i_imgs = i_nd.concat(i_d.sort(f_sort));
								
								//i_imgs.sort(f_sort);
								break;
							}

				that.images = i_imgs;
				
				//*** CALC THUMB SIZE ON SCREEN
				//const h = m_thumb_height;
				that.images.forEach(function(i) {
					
					var o = parseInt(i.orientation);
					if (o == 6 || o ==8)
					{ var w = i.width; i.width = i.height; i.height = w; } 
					
					if (i.thumbs)
						i.ww = that.thumbWidth(i.thumbs[0]);
					else
						i.ww = that.thumbWidth(i);
					
					//i_img.uri = pString.decodeHTML(i_img.uri);
				});
				
				that.showAsAvailable();
				
				if (pROSE.getProp(p_prop)===true)
					that.showImages(-1); //TODO
				that.updateToolbar();

				if (i_autostart != false) {
					if (that.autostart!=null) {
						that.viewItem(that.autostart);
						that.autostart = null;
					}
					else if (pROSE.getProp(p_prop)===true || pDocument.isHidden(m_element)===false) {
						that.autostart = null;
						//TODO: ... that.showImages(0);
					}
				}
			}
			catch (ex) {
				pConsole.error(that, 'Failed to update images', ex);
			}
		}, false);

		pElement.setOnClick('view-item-content', c_showFullscreenButtons);
	};

	//*** INSTALL ESCAPE AND SPACE KEY
	pDocumenti.addOnKeyDown(function(e, k) {
		pConsole.info(that, 'keyCode: ' + k);
		/*if (k == pKeys.escape) { //Escape
			if (pDocument.componentIsShown('view-item') === true)
				that.viewItemClose();
			return true;
		}*/
		if (k == pKeys.space) //SPACE
			return that.resume();
	});

	this.updateToolbar = function() {
		
		var h = pElement.x('main-toolbar');
		pElement.removeAllChildren(h);
		
		var i_getgal = 'pPictureGalleries.getValue(\''+m_id+'\')', i_empty = that.images==null || that.images.length<1;

		pElement.add(h, [[ 'div', null, 'toolbar-item', [ [ 'span', 'picture-count', 'toolbar-text', (that.images? that.images.length : '?')+' Picture(s)' ]]]]);
		//h += '<div class="toolbar-item"><span class="toolbar-text" id="picture-count">'+((this.images)? this.images.length : '?')+' Picture(s)</span></div>';

		if (available && !i_empty) {
			if (pPage.type == "books.medias")
				pElement.add(h, pApplicationUI.createToolbarItem('read', i_getgal+'.viewItem(0)'));
			else
				pElement.add(h, pApplicationUI.createToolbarItem('play', i_getgal+'.viewItem(0)'));
			pElement.add(h, pApplicationUI.createToolbarItem('show-pictures', i_getgal+'.showImages(0)'));
			//h += '<div class="toolbar-item toolbar-show-pictures link" onclick="pPictureGallery.showImages(0)">'+pResources.resources.toolbar.showImages+'</div>';
		}
		if (available) {
			pElement.add(h, pApplicationUI.createToolbarItem('refresh', i_getgal+'.update()', 'toolbar-refresh'));
			//h += '<div class="toolbar-item toolbar-update link" onclick="pPictureGallery.update()" id="toolbar-refresh">'+pResources.resources.toolbar.refresh+'</div>';
		}

		if (pResources.get('admin') === "true") {
			if (available) {
				pElement.add(h, pApplicationUI.createToolbarItem('addpictures', 'pMediaLibrary.selectAddImage()'));
				//h += '<div class="toolbar-item toolbar-add-picture link" id="toolbar-add-picture" onclick="pMediaLibrary.selectAddImage()">'+pResources.resources.toolbar.addpictures+'</div>';
				pElement.add(h, pApplicationUI.createToolbarItem('create-folder', 'pMediaLibrary.createFolder()'));
				//h += '<div class="toolbar-item toolbar-create-folder link" id="toolbar-create-folder" onclick="pMediaLibrary.createFolder()">'+pResources.resources.toolbar.createFolder+'</div>';
				pElement.add(h, pApplicationUI.createToolbarItem('artwork', 'pMediaLibrary.selectArtworkImage()', 'toolbar-artwork'));
				//h += '<div class="toolbar-item toolbar-artwork link" id="toolbar-artwork" onclick="pMediaLibrary.selectArtworkImage()">'+pResources.resources.toolbar.selectArtwork+'</div>';
				//h += '<div class="toolbar-item toolbar-poster link" id="toolbar-poster" onclick="pMediaLibrary.selectPosterImage()">'+pResources.resources.toolbar.selectPoster+'</div>';
				//h += '<div class="toolbar-item toolbar-backdrop link" id="toolbar-backdrop" onclick="pMediaLibrary.selectBackdropImage()">'+pResources.resources.toolbar.selectBackdrop+'</div>';
			}
			
			if (available && !i_empty) {
				var i_canWrite = that.images.every(function(img) {return img.canWrite != false });
				if (that.images.every(function(img) { return img.canCopy != false })) 
					pElement.add(h, pApplicationUI.createToolbarItem('copy-item', 'pMediaLibrary.copyPicture(null, '+i_getgal+'.getAllImageURLs())', 'toolbar-copy-item'));
					//h += '<div class="toolbar-item toolbar-copy-item link" id="toolbar-copy-item" onclick="pMediaLibrary.copyPicture(null, pPictureGallery.getAllImageURLs())">Copy All Picture(s) To...</div>';
				if (i_canWrite) 
					pElement.add(h, pApplicationUI.createToolbarItem('move-item', i_getgal+'.moveAllPictures()', 'toolbar-move-item'));
					//h += '<div class="toolbar-item toolbar-move-item link" id="toolbar-move-item" onclick="'+">Move All Picture(s) To...</div>';
				if (i_canWrite) 
					pElement.add(h, pApplicationUI.createToolbarItem('delete-allpictures', i_getgal+'.deleteAllPictures()', 'toolbar-delete-allitems'));
					//h += '<div class="toolbar-item toolbar-delete-allitems toolbar-delete-allpictures link" id="toolbar-delete-allitems" onclick="'+i_getgal+'.deleteAllPictures()">Delete All Picture(s)...</div>';
			}
			
			if (available) {
				var tid = pMediaLibrary.getLIDfromURL().split('.')[0];
	
				//if (pResources.get('library.list.('+tid+'.authors).enabled') != 'false')
				//	h += '<div class="toolbar-item toolbar-author link" onclick="pMediaLibrary.selectAuthors()">'+pResources.resources.toolbar.selectAuthors+'</div>';
				//if (pResources.get('library.list.('+tid+'.genres).enabled') != 'false')
				//	h += '<div class="toolbar-item toolbar-genres link" onclick="pMediaLibrary.selectGenres()">'+pResources.resources.toolbar.selectGenres+'</div>';
				if (pResources.get('library.list.('+tid+'.tags).enabled') != 'false')
					pElement.add(h, pApplicationUI.createToolbarItem('select-tags', 'pMediaLibrary.selectTags()'));
					//h += '<div class="toolbar-item toolbar-tags link" onclick="pMediaLibrary.selectTags()">'+pResources.resources.toolbar.selectTags+'</div>';
				//if (tid=='pictures' && pResources.get('library.list.('+tid+'.models).enabled') != 'false')
				//	h += '<div class="toolbar-item toolbar-models link" onclick="pMediaLibrary.selectModels()">'+pResources.resources.toolbar.selectModels+'</div>';
			}
			
			pElement.add(h, pApplicationUI.createToolbarItem('set-access', 'pMediaLibrary.setAccess()'));
			//h += '<div class="toolbar-item toolbar-set-access link" onclick="pMediaLibrary.setAccess()">'+pResources.resources.toolbar.access+'</div>';

			pElement.add(h, pApplicationUI.createToolbarItem('file-properties', 'pResources.fileProperties()', 'toolbar-properties'));
			//h += '<div class="toolbar-item toolbar-properties toolbar-properties-pictures-medias link" id="toolbar-properties" onclick="pResources.fileProperties()">'+pResources.resources.fileProperties_title+'</div>';

			//0.9.18
			if (available) {
				pElement.add(h, pApplicationUI.createToolbarItem('reimport-parent-folder', 'pMediaLibrary.reImportParentFolder()'));
				pElement.add(h, pApplicationUI.createToolbarItem('rename-parent-folder', 'pMediaLibrary.renameParentFolder()'));
			}
			
			pElement.add(h, pApplicationUI.createToolbarItem('remove', 'pMediaLibrary.removeThis()'));
			//h += '<div class="toolbar-item toolbar-remove link" onclick="">'+pResources.resources.toolbar.remove+'</div>';
			if (available) {
				pElement.add(h, pApplicationUI.createToolbarItem('reimport', 'pMediaLibrary.reImport()'));
				//h += '<div class="toolbar-item toolbar-reimport link" onclick="">'+pResources.resources.toolbar.reimport+'</div>';
				pElement.add(h, pApplicationUI.createToolbarItem('optimize', 'pMediaLibrary.optimize()'));
				//h += '<div class="toolbar-item toolbar-optimize link" onclick="">'+pResources.resources.toolbar.optimize+'</div>';
			}
		}
		
		pElement.add(h, pApplicationUI.createToolbarItem('more', 'pApplicationMenu.menu(\'main-toolbar\')'));
		//h += '<div class="toolbar-item toolbar-more link" onclick="">'+pResources.resources.toolbar.more+'</div>';
				
		pElement.add(h, [[ 'div', null, 'toolbar-end' ]]);
		//h += '<div class="toolbar-end"><!----></div>';

		//pElement.setInnerHTML('main-toolbar', h);

		pApplicationUI.initDragAndDrop();
	};

	// "show_propname" property
	var m_show_propname;
	Object.defineProperty(this, "show_propname", { get: function() { return m_show_propname || 'view-user-advanced-show-images' }, set: function(v) { 
		if (typeof v == "string") 
			m_show_propname = v; 
		}});

	// "sortByDateTaken" property
	var user_sortByDateTaken;
	Object.defineProperty(this, "sortByDateTaken", { get: function() { 
		return user_sortByDateTaken? m_sortByDateTaken : pApplicationUI.OPTION_PICTURES_SORT_DATETAKEN 
	}, set: function(v) { user_sortByDateTaken = true; m_sortByDateTaken = v; }});
	
	// "canExitFullscreen" property
	var m_canExitFullscreen = true;
	Object.defineProperty(this, "canExitFullscreen", { get: function() { m_canExitFullscreen; }, set: function(v) { if (typeof v == "boolean") m_canExitFullscreen = v; }});

	// "reportPage" property
	var m_reportPage = true;
	Object.defineProperty(this, "reportPage", { get: function() { m_reportPage; }, set: function(v) { if (typeof v == "boolean") m_reportPage = v; }});
	
	this.zoomin = function(event, p_img) {
		p_img.style.maxHeight = "none";
		p_img.style.maxWidth = "none";

		var resize = 150; // resize amount in percentage
        var origH  = p_img.height;  // original image height
        var origW  = p_img.width; // original image width
        var mouseX = event.x;
        var mouseY = event.y;
        var newH   = origH * (resize / 100);
        var newW   = origW * (resize / 100);

        // Set the new width and height
        p_img.style.height = newH;// p_img.style.maxHeight = "none";
        p_img.style.width  = newW;// p_img.style.maxWidth = "none";

        var c = this.parentNode;
        if (c) {
	        // Work out the new center
	        c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
	        c.scrollTop  = (mouseY * (resize / 100)) - (newH / 2) / 2;
        }
	};
	
	this.zoomout = function(event, p_img) {
		p_img.style.maxHeight = "none";
		p_img.style.maxWidth = "none";
		
		var resize = 150; // resize amount in percentage
        var origH  = p_img.height;  // original image height
        var origW  = p_img.width; // original image width
        var mouseX = event.x;
        var mouseY = event.y;
        var newH   = origH * (100 / resize);
        var newW   = origW * (100 / resize);

        // Set the new width and height
        p_img.style.height = newH;// p_img.style.maxHeight = "none";
        p_img.style.width  = newW;// p_img.style.maxWidth = "none";

        var c = this.parentNode;
        if (c) {
	        // Work out the new center
	        c.scrollLeft = (mouseX * (100 / resize)) - (newW / 2) / 2;
	        c.scrollTop  = (mouseY * (100 / resize)) - (newH / 2) / 2;
        }
	};
	
	//*** LISTEN FOR IMAGE EVENTS
	window.addEventListener('storage', function(e) {
		if (that.images && that.images.find(function(i) { return i.uri == e.key; }))
			that.update();
	});
	
	//*** TOUCH GESTURES
	if (pTouch) {
		pTouch.enable('view-item-content');
		
		var t = pTouch.getData('view-item-content');
		t.onleft = function() { that.next(); return true; };
		t.onright = function() { that.previous(); return true; };
	}

	//*** SAVE STATE
	window.addEventListener('beforeunload', function() { 
		pDocument.setHistoryState('view-item', pObject.setMember(pDocument.getHistoryState('view-item'), 'n', pDocument.componentIsShown('view-item')? that.m_view : null)); 
	});
	
	//*** ON PAGE RESIZE...
	pDocument.addOnResize(onResize);
	
	//*** RESIZE
	onResize();
};

/******************************************************************************/
/***  END OF FILE  ************************************************************/
/******************************************************************************/