Merge branch '3.0'

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / js / WCF.ImageViewer.js

"use strict";

/**
 * Enhanced image viewer for WCF.
 * 
 * @author	Alexander Ebert
 * @copyright	2001-2018 WoltLab GmbH
 * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
 */
WCF.ImageViewer = Class.extend({
	/**
	 * trigger element to mimic a slideshow button
	 * @var	jQuery
	 */
	_triggerElement: null,
	
	/**
	 * Initializes the WCF.ImageViewer class.
	 */
	init: function() {
		this._triggerElement = $('<span class="wcfImageViewerTriggerElement" />').data('disableSlideshow', true).hide().appendTo(document.body);
		this._triggerElement.wcfImageViewer({
			enableSlideshow: 0,
			imageSelector: '.jsImageViewerEnabled',
			staticViewer: true
		});
		
		WCF.DOMNodeInsertedHandler.addCallback('WCF.ImageViewer', $.proxy(this._domNodeInserted, this));
		WCF.DOMNodeInsertedHandler.execute();
	},
	
	/**
	 * Executes actions upon DOMNodeInserted events.
	 */
	_domNodeInserted: function() {
		this._initImageSizeCheck();
		this._rebuildImageViewer();
	},
	
	/**
	 * Rebuilds the image viewer.
	 */
	_rebuildImageViewer: function() {
		var $links = $('a.jsImageViewer');
		if ($links.length) {
			$links.removeClass('jsImageViewer').addClass('jsImageViewerEnabled').click($.proxy(this._click, this));
		}
	},
	
	/**
	 * Handles click on an image with image viewer support.
	 * 
	 * @param	object		event
	 */
	_click: function(event) {
		// ignore clicks while ctrl key is being pressed
		if (event.ctrlKey) {
			return;
		}
		
		event.preventDefault();
		event.stopPropagation();
		// skip if element is in a popover
		if ($(event.currentTarget).closest('.popover').length) return;
		
		this._triggerElement.wcfImageViewer('open', null, $(event.currentTarget).wcfIdentify());
	},
	
	/**
	 * Initializes the image size check.
	 */
	_initImageSizeCheck: function() {
		$('.jsResizeImage').each($.proxy(function(index, image) {
			if (image.complete) this._checkImageSize({ currentTarget: image });
		}, this));
		
		$('.jsResizeImage').on('load', $.proxy(this._checkImageSize, this));
	},
	
	/**
	 * Checks the image size.
	 */
	_checkImageSize: function(event) {
		var $image = $(event.currentTarget);
		if (!$image.is(':visible')) {
			$image.off('load');
			
			return;
		}
		
		$image.removeClass('jsResizeImage');
		
		// check if image falls within the signature, in that case ignore it
		if ($image.closest('.messageSignature').length) {
			return;
		}
		
		// setting img { max-width: 100% } causes the image to fit within boundaries, but does not reveal the original dimenions
		var $imageObject = new Image();
		$imageObject.src = $image.attr('src');
		
		var $maxWidth = $image.closest('div.messageText, div.messageTextPreview').width();
		if ($maxWidth < $imageObject.width) {
			if (!$image.parents('a').length) {
				$image.wrap('<a href="' + $image.attr('src') + '" class="jsImageViewerEnabled embeddedImageLink" />');
				$image.parent().click($.proxy(this._click, this));
				
				if ($image.css('float') == 'right') {
					$image.parent().addClass('messageFloatObjectRight');
				}
				else if ($image.css('float') == 'left') {
					$image.parent().addClass('messageFloatObjectLeft');
				}
				$image[0].style.removeProperty('float');
				$image[0].style.removeProperty('margin');
			}
		}
		else {
			$image.removeClass('embeddedAttachmentLink');
		}
	}
});

/**
 * Provides a focused image viewer for WCF.
 * 
 * Usage:
 * $('.triggerElement').wcfImageViewer({
 * 	shiftBy: 5,
 * 	
 * 	enableSlideshow: 1,
 * 	speed: 5,
 * 	
 * 	className: 'wcf\\data\\foo\\FooAction'
 * });
 */
$.widget('ui.wcfImageViewer', {
	/**
	 * active image index
	 * @var	integer
	 */
	_active: -1,
	
	/**
	 * active image object id
	 * @var	integer
	 */
	_activeImage: null,
	
	/**
	 * image viewer container object
	 * @var	jQuery
	 */
	_container: null,
	
	/**
	 * initialization state
	 * @var	boolean
	 */
	_didInit: false,
	
	/**
	 * overrides slideshow settings unless explicitly enabled by user
	 * @var	boolean
	 */
	_disableSlideshow: false,
	
	/**
	 * event namespace used to distinguish event handlers using $.proxy
	 * @var	string
	 */
	_eventNamespace: '',
	
	/**
	 * list of available images
	 * @var	array<object>
	 */
	_images: [ ],
	
	/**
	 * true if image viewer uses the mobile-optimized UI
	 * @var	boolean
	 */
	_isMobile: false,
	
	/**
	 * true if image viewer is open
	 * @var	boolean
	 */
	_isOpen: false,
	
	/**
	 * number of total images
	 * @var	integer
	 */
	_items: -1,
	
	/**
	 * maximum dimensions for enlarged view
	 * @var	object<integer>
	 */
	_maxDimensions: {
		height: 0,
		width: 0
	},
	
	/**
	 * action proxy object
	 * @var	WCF.Action.Proxy
	 */
	_proxy: null,
	
	/**
	 * true if slideshow is currently running
	 * @var	boolean
	 */
	_slideshowEnabled: false,
	
	/**
	 * visible width of thumbnail container
	 * @var	integer
	 */
	_thumbnailContainerWidth: 0,
	
	/**
	 * right margin of a thumbnail
	 * @var	integer
	 */
	_thumbnailMarginRight: 0,
	
	/**
	 * left offset of thumbnail list
	 * @var	integer
	 */
	_thumbnailOffset: 0,
	
	/**
	 * outer width of a thumbnail (includes margin)
	 * @var	integer
	 */
	_thumbnailWidth: 0,
	
	/**
	 * slideshow timer object
	 * @var	WCF.PeriodicalExecuter
	 */
	_timer: null,
	
	/**
	 * list of interface elements
	 * @var	object<jQuery>
	 */
	_ui: {
		buttonNext: null,
		buttonPrevious: null,
		header: null,
		image: null,
		imageContainer: null,
		imageList: null,
		slideshow: {
			container: null,
			enlarge: null,
			next: null,
			previous: null,
			toggle: null
		}
	},
	
	/**
	 * list of options parsed during init
	 * @var	object<mixed>
	 */
	options: {
		// navigation
		shiftBy: 5, // thumbnail slider control
		
		// slideshow
		enableSlideshow: 1,
		speed: 5, // time in seconds
		
		// ajax
		className: '', // must be an instance of \wcf\data\IImageViewerAction
		
		// alternative mode - static view
		imageSelector: '',
		staticViewer: false
	},
	
	/**
	 * Creates a new wcfImageViewer instance.
	 */
	_create: function() {
		this._active = -1;
		this._activeImage = null;
		this._container = null;
		this._didInit = false;
		this._disableSlideshow = (this.element.data('disableSlideshow'));
		this._eventNamespace = this.element.wcfIdentify();
		this._images = [ ];
		this._isMobile = false;
		this._isOpen = false;
		this._items = -1;
		this._maxDimensions = {
			height: document.documentElement.clientHeight,
			width: document.documentElement.clientWidth
		};
		this._proxy = new WCF.Action.Proxy({
			success: $.proxy(this._success, this)
		});
		this._slideshowEnabled = false;
		this._thumbnailContainerWidth = 0;
		this._thumbnailMarginRight = 0;
		this._thumbnailOffset = 0;
		this._thumbnaiLWidth = 0;
		this._timer = null;
		this._ui = { };
		
		this.element.click($.proxy(this.open, this));

		window.addEventListener('popstate', (function(event) {
			if (event.state != null && event.state.name === 'imageViewer') {
				if (event.state.container === this._eventNamespace) {
					this.open(event);
					this.showImage(event.state.image);
					
					return;
				}
			}
			
			this.close(event);
		}).bind(this));
	},
	
	/**
	 * Opens the image viewer.
	 * 
	 * @param	object		event
	 * @param	string		targetImageElementID
	 * @return	boolean
	 */
	open: function(event, targetImageElementID) {
		if (event) event.preventDefault();
		
		if (this._isOpen) {
			return false;
		}
		
		// add history item for the image viewer
		if (!event || event.type !== 'popstate') {
			window.history.pushState({
				name: 'imageViewer'
			}, '', '');
		}
		
		if (this.options.staticViewer) {
			var $images = this._getStaticImages();
			this._initUI();
			this._createThumbnails($images, true);
			this._render(true, undefined, targetImageElementID);
			
			this._isOpen = true;
			
			WCF.System.DisableScrolling.disable();
			WCF.System.DisableZoom.disable();
			
			// switch to fullscreen mode on smartphones
			if ($.browser.touch) {
				setTimeout($.proxy(function() {
					if (this._isMobile && !this._container.hasClass('maximized')) {
						this._toggleView();
					}
				}, this), 500);
			}
		}
		else {
			if (this._images.length === 0) {
				this._loadNextImages(true);
			}
			else {
				this._render(false, this.element.data('targetImageID'));
				
				if (this._items > 1 && this._slideshowEnabled) {
					this.startSlideshow();
				}
				
				this._isOpen = true;
				
				WCF.System.DisableScrolling.disable();
				WCF.System.DisableZoom.disable();
			}
		}
		
		this._bindListener();
		
		document.documentElement.classList.add('pageOverlayActive');
		
		return true;
	},
	
	/**
	 * Closes the image viewer.
	 * 
	 * @return	boolean
	 */
	close: function(event) {
		if (event) event.preventDefault();
		
		// clear history item of the image viewer
		if (!event || event.type !== 'popstate') {
			window.history.back();
			return;
		}
		
		if (!this._isOpen) {
			return false;
		}
		
		this._container.removeClass('open');
		if (this._timer !== null) {
			this._timer.stop();
		}
		
		this._unbindListener();
		
		this._isOpen = false;
		
		WCF.System.DisableScrolling.enable();
		WCF.System.DisableZoom.enable();
		
		document.documentElement.classList.remove('pageOverlayActive');
		
		return true;
	},
	
	/**
	 * Enables the slideshow.
	 * 
	 * @return	boolean
	 */
	startSlideshow: function() {
		if (this._disableSlideshow || this._slideshowEnabled) {
			return false;
		}
		
		if (this._timer === null) {
			this._timer = new WCF.PeriodicalExecuter($.proxy(function() {
				var $index = this._active + 1;
				if ($index == this._items) {
					$index = 0;
				}
				
				this.showImage($index);
			}, this), this.options.speed * 1000);
		}
		else {
			this._timer.resume();
		}
		
		this._slideshowEnabled = true;
		
		this._ui.slideshow.toggle.children('span').removeClass('fa-play').addClass('fa-pause');
		
		return true;
	},
	
	/**
	 * Disables the slideshow.
	 * 
	 * @param	boolean		disableSlideshow
	 * @return	boolean
	 */
	stopSlideshow: function(disableSlideshow) {
		if (!this._slideshowEnabled) {
			return false;
		}
		
		this._timer.stop();
		if (disableSlideshow) {
			this._ui.slideshow.toggle.children('span').removeClass('fa-pause').addClass('fa-play');
		}
		
		this._slideshowEnabled = false;
		
		return true;
	},
	
	/**
	 * Binds event listeners.
	 */
	_bindListener: function() {
		$(document).on('keydown.' + this._eventNamespace, $.proxy(this._keyDown, this));
		$(window).on('resize.' + this._eventNamespace, $.proxy(this._renderImage, this));
	},
	
	/**
	 * Unbinds event listeners.
	 */
	_unbindListener: function() {
		$(document).off('keydown.' + this._eventNamespace);
		$(window).off('resize.' + this._eventNamespace);
	},
	
	/**
	 * Closes the slideshow on escape.
	 * 
	 * @param	object		event
	 * @return	boolean
	 */
	_keyDown: function(event) {
		switch (event.which) {
			// close slideshow
			case $.ui.keyCode.ESCAPE:
				this.close();
			break;
			
			// show previous image
			case $.ui.keyCode.LEFT:
				this._previousImage();
			break;
			
			// show next image
			case $.ui.keyCode.RIGHT:
				this._nextImage();
			break;
			
			// enable fullscreen mode
			case $.ui.keyCode.UP:
				if (!this._container.hasClass('maximized')) {
					this._toggleView();
				}
			break;
			
			// disable fullscreen mode
			case $.ui.keyCode.DOWN:
				if (this._container.hasClass('maximized')) {
					this._toggleView();
				}
			break;
			
			// jump to image page or full version
			case $.ui.keyCode.ENTER:
				var $link = this._ui.header.find('h1 > a');
				if ($link.length == 1) {
					// forward to image page
					window.location = $link.prop('href');
				}
				else {
					// forward to full version
					this._ui.slideshow.full.trigger('click');
				}
			break;
			
			// toggle play/pause (80 = [p])
			case 80:
				this._ui.slideshow.toggle.trigger('click');
			break;
			
			default:
				return true;
			break;
		}
		
		return false;
	},
	
	/**
	 * Renders the image viewer UI.
	 * 
	 * @param	boolean		initialized
	 * @param	integer		targetImageID
	 * @param	string		targetImageElementID
	 */
	_render: function(initialized, targetImageID, targetImageElementID) {
		this._container.addClass('open');
		
		var $thumbnail = null;
		if (initialized) {
			$thumbnail = this._ui.imageList.children('li:eq(0)');
			this._thumbnailMarginRight = parseInt($thumbnail.css('marginRight').replace(/px$/, '')) || 0;
			this._thumbnailWidth = $thumbnail.outerWidth(true);
			this._thumbnailContainerWidth = this._ui.imageList.parent().innerWidth();
			
			if (this._items > 1 && this.options.enableSlideshow && !targetImageID && !targetImageElementID) {
				this.startSlideshow();
			}
		}
		
		if (targetImageID) {
			this._ui.imageList.children('li').each($.proxy(function(index, item) {
				var $item = $(item);
				if ($item.data('objectID') == targetImageID) {
					$item.trigger('click');
					this.moveToImage($item.data('index'));
					
					return false;
				}
			}, this));
		}
		else if (targetImageElementID) {
			var $i = 0;
			$(this.options.imageSelector).each(function(index, element) {
				if ($(element).wcfIdentify() == targetImageElementID) {
					$i = index;
					
					return false;
				}
			});
			
			var $item = this._ui.imageList.children('li:eq(' + $i + ')');
			
			// check if currently active image does not exist anymore
			if (this._active !== -1) {
				var $clear = false;
				if (this._active != $item.data('index')) {
					$clear = true;
				}
				
				if (this._ui.images[this._activeImage].prop('src') != this._images[this._active].image.url) {
					$clear = true;
				}
				
				if ($clear) {
					// reset active state
					this._active = -1;
				}
			}
			
			$item.trigger('click');
			this.moveToImage($item.data('index'));
		}
		else if ($thumbnail !== null) {
			$thumbnail.trigger('click');
		}
			
		this._toggleButtons();
		
		// check if there is enough space to load more thumbnails
		this._preload();
	},
	
	/**
	 * Attempts to load the next images.
	 */
	_preload: function() {
		if (this._images.length < this._items) {
			var $thumbnailsWidth = this._images.length * this._thumbnailWidth;
			if ($thumbnailsWidth - this._thumbnailOffset < this._thumbnailContainerWidth) {
				this._loadNextImages(false);
			}
		}
	},
	
	/**
	 * Displays image on thumbnail click.
	 * 
	 * @param	object		event
	 */
	_showImage: function(event) {
		this.showImage($(event.currentTarget).data('index'), true);
	},
	
	/**
	 * Displays an image by index.
	 * 
	 * @param	integer		index
	 * @param	boolean		disableSlideshow
	 * @return	boolean
	 */
	showImage: function(index, disableSlideshow) {
		if (this._active == index) {
			return false;
		}
		
		this.stopSlideshow(disableSlideshow || false);
		
		// reset active marking
		if (this._active != -1) {
			this._images[this._active].listItem.removeClass('active');
		}
		
		this._active = index;
		
		// store latest image in history entry
		window.history.replaceState({
			name: 'imageViewer',
			container: this._eventNamespace,
			image: this._active
		}, '', '');
		
		var $image = this._images[index];
		
		this._ui.imageList.children('li').removeClass('active');
		$image.listItem.addClass('active');
		
		var $dimensions = this._ui.imageContainer.getDimensions('inner');
		var $newImageIndex = (this._activeImage ? 0 : 1);
		
		if (this._activeImage !== null) {
			this._ui.images[this._activeImage].removeClass('active');
		}
		
		this._activeImage = $newImageIndex;
		var $currentActiveImage = this._active;
		this._ui.imageContainer.addClass('loading');
		this._ui.images[$newImageIndex].off('load').prop('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='); // 1x1 pixel transparent gif
		this._ui.images[$newImageIndex].on('load', $.proxy(function() {
			this._imageOnLoad($currentActiveImage, $newImageIndex);
		}, this));
		
		this._renderImage($newImageIndex, $image, $dimensions);
		
		// user
		if (!this.options.staticViewer) {
			var $link = this._ui.header.find('> div > a').prop('href', $image.user.link).prop('title', $image.user.username);
			$link.children('img').prop('src', $image.user.avatarURL);
		}
		
		// meta data
		var $title = WCF.String.escapeHTML($image.image.title);
		if ($image.image.link) $title = '<a href="' + $image.image.link + '">' + $title + '</a>';
		this._ui.header.find('h1').html($title);
		
		if (!this.options.staticViewer) {
			var $seriesTitle = ($image.series && $image.series.title ? WCF.String.escapeHTML($image.series.title) : '');
			if ($image.series.link) $seriesTitle = '<a href="' + $image.series.link + '">' + $seriesTitle + '</a>';
			this._ui.header.find('h2').html($seriesTitle);
		}
		
		this._ui.header.find('h3').text(WCF.Language.get('wcf.imageViewer.seriesIndex').replace(/{x}/, $image.listItem.data('index') + 1).replace(/{y}/, this._items));
		
		this._ui.slideshow.full.data('link', ($image.image.fullURL ? $image.image.fullURL : $image.image.url));
		
		this.moveToImage($image.listItem.data('index'));
		
		this._toggleButtons();
		
		return true;
	},
	
	/**
	 * Callback function for the image 'load' event.
	 * 
	 * @param	integer		currentActiveImage
	 * @param	integer		activeImageIndex
	 */
	_imageOnLoad: function(currentActiveImage, activeImageIndex) {
		// image did not load in time, ignore
		if (currentActiveImage != this._active) {
			return;
		}
		
		this._ui.imageContainer.removeClass('loading');
		this._ui.images[activeImageIndex].addClass('active');
		
		if (this.options.staticViewer) {
			this._renderImage(activeImageIndex, null);
		}
		
		this.startSlideshow();
	},
	
	/**
	 * Renders target image, leaving 'imageData' undefined will invoke the rendering process for the currently active image.
	 * 
	 * @param	integer		targetIndex
	 * @param	object		imageData
	 * @param	object		containerDimensions
	 */
	_renderImage: function(targetIndex, imageData, containerDimensions) {
		var $checkForComplete = true;
		if (!imageData) {
			targetIndex = this._activeImage;
			imageData = this._images[this._active];
			
			containerDimensions = {
				height: $(window).height() - (this._container.hasClass('maximized') || this._container.hasClass('wcfImageViewerMobile') ? 0 : 200),
				width: this._ui.imageContainer.innerWidth()
			};
			
			$checkForComplete = false;
		}
		
		// simulate padding
		containerDimensions.height -= 22;
		containerDimensions.width -= 20;
		
		var $image = this._ui.images[targetIndex];
		if ($image.prop('src') !== imageData.image.url) {
			// assigning the same exact source again breaks Internet Explorer 10
			$image.prop('src', imageData.image.url);
		}
		
		if ($checkForComplete && $image[0].complete) {
			$image.trigger('load');
		}
		
		if (this.options.staticViewer && !imageData.image.height && $image[0].complete) {
			// Firefox and Safari returns bogus values if attempting to read the real dimensions
			if ($.browser.mozilla || $.browser.safari) {
				var $img = new Image();
				$img.src = imageData.image.url;
				
				imageData.image.height = $img.height || $image[0].naturalHeight;
				imageData.image.width = $img.width || $image[0].naturalWidth;
			}
			else {
				$image.css({
					height: 'auto',
					width: 'auto'
				});
				
				imageData.image.height = $image[0].height;
				imageData.image.width = $image[0].width;
			}
		}
		
		var $height = imageData.image.height;
		var $width = imageData.image.width;
		var $ratio = 0.0;
		
		// check if image exceeds dimensions on the Y axis
		if ($height > containerDimensions.height) {
			$ratio = containerDimensions.height / $height;
			$height = containerDimensions.height;
			$width = Math.floor($width * $ratio);
		}
		
		// check if image exceeds dimensions on the X axis
		if ($width > containerDimensions.width) {
			$ratio = containerDimensions.width / $width;
			$width = containerDimensions.width;
			$height = Math.floor($height * $ratio);
		}
		
		var $left = Math.floor((containerDimensions.width - $width) / 2);
		this._ui.images[targetIndex].css({
			height: $height + 'px',
			left: ($left + 10) + 'px',
			marginTop: (Math.round($height / 2) * -1) + 'px',
			width: $width + 'px'
		});
	},
	
	/**
	 * Initializes the user interface.
	 * 
	 * @return	boolean
	 */
	_initUI: function() {
		if (this._didInit) {
			return false;
		}
		
		this._didInit = true;
		
		this._container = $('<div class="wcfImageViewer' + (this.options.staticViewer ? ' wcfImageViewerStatic' : '') + '" />').appendTo(document.body);
		var $imageContainer = $('<div><img /><img /></div>').appendTo(this._container);
		var $imageList = $('<footer><span class="wcfImageViewerButtonPrevious icon fa-angle-double-left" /><div><ul /></div><span class="wcfImageViewerButtonNext icon fa-angle-double-right" /></footer>').appendTo(this._container);
		var $slideshowContainer = $('<ul />').appendTo($imageContainer);
		var $slideshowButtonPrevious = $('<li class="wcfImageViewerSlideshowButtonPrevious"><span class="icon icon48 fa-angle-left" /></li>').appendTo($slideshowContainer);
		var $slideshowButtonToggle = $('<li class="wcfImageViewerSlideshowButtonToggle pointer"><span class="icon icon48 fa-play" /></li>').appendTo($slideshowContainer);
		var $slideshowButtonNext = $('<li class="wcfImageViewerSlideshowButtonNext"><span class="icon icon48 fa-angle-right" /></li>').appendTo($slideshowContainer);
		var $slideshowButtonEnlarge = $('<li class="wcfImageViewerSlideshowButtonEnlarge pointer jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.button.enlarge') + '"><span class="icon icon48 fa-expand" /></li>').appendTo($slideshowContainer);
		var $slideshowButtonFull = $('<li class="wcfImageViewerSlideshowButtonFull pointer jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.button.full') + '"><span class="icon icon48 fa-external-link" /></li>').appendTo($slideshowContainer);
		
		this._ui = {
			buttonNext: $imageList.children('span.wcfImageViewerButtonNext'),
			buttonPrevious: $imageList.children('span.wcfImageViewerButtonPrevious'),
			header: $('<header><div' + (this.options.staticViewer ? '>' : ' class="box64"><a class="jsTooltip"><img /></a>' ) + '<div><h1 /><h2 /><h3 /></div></div></header>').appendTo(this._container),
			imageContainer: $imageContainer,
			images: [
				$imageContainer.children('img:eq(0)').on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { $(this).removeClass('animateTransformation'); }),
				$imageContainer.children('img:eq(1)').on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function() { $(this).removeClass('animateTransformation'); })
			],
			imageList: $imageList.find('> div > ul'),
			slideshow: {
				container: $slideshowContainer,
				enlarge: $slideshowButtonEnlarge,
				full: $slideshowButtonFull,
				next: $slideshowButtonNext,
				previous: $slideshowButtonPrevious,
				toggle: $slideshowButtonToggle
			}
		};
		
		this._ui.buttonNext.click($.proxy(this._next, this));
		this._ui.buttonPrevious.click($.proxy(this._previous, this));
		
		$slideshowButtonNext.click($.proxy(this._nextImage, this));
		$slideshowButtonPrevious.click($.proxy(this._previousImage, this));
		$slideshowButtonEnlarge.click($.proxy(this._toggleView, this));
		$slideshowButtonToggle.click($.proxy(function() {
			if (this._items < 2) {
				return;
			}
			
			if (this._slideshowEnabled) {
				this.stopSlideshow(true);
			}
			else {
				this._disableSlideshow = false;
				this.startSlideshow();
			}
		}, this));
		$slideshowButtonFull.click(function(event) { window.location = $(event.currentTarget).data('link'); });
		
		// close button
		$('<span class="wcfImageViewerButtonClose icon icon48 fa-times pointer jsTooltip" title="' + WCF.Language.get('wcf.global.button.close') + '" />').appendTo(this._ui.header).click($.proxy(this.close, this));
		
		if (!$.browser.mobile) {
			// clicking on the inner container should close the dialog, but it should not be available on mobile due to
			// the lack of precision causing accidental closing, the close button is big enough and easily reachable
			$imageContainer.click((function(event) {
				if (event.target === $imageContainer[0]) {
					this.close();
				}
			}).bind(this));
		}
		
		WCF.DOMNodeInsertedHandler.execute();
		
		enquire.register('(max-width: 767px)', {
			match: $.proxy(this._enableMobileView, this),
			unmatch: $.proxy(this._disableMobileView, this)
		});
		
		return true;
	},
	
	/**
	 * Enables the mobile-optimized UI.
	 */
	_enableMobileView: function() {
		this._container.addClass('wcfImageViewerMobile');
		
		var self = this;
		this._ui.imageContainer.swipe({
			swipeLeft: function(event) {
				if (self._container.hasClass('maximized')) {
					self._nextImage(event);
				}
			},
			swipeRight: function(event) {
				if (self._container.hasClass('maximized')) {
					self._previousImage(event);
				}
			},
			tap: function(event, element) {
				// tap fires before click, prevent conflicts
				switch (element.tagName) {
					case 'DIV':
					case 'IMG':
						self._toggleView();
					break;
				}
			}
		});
		
		this._isMobile = true;
	},
	
	/**
	 * Disables the mobile-optimized UI.
	 */
	_disableMobileView: function() {
		this._container.removeClass('wcfImageViewerMobile');
		this._ui.imageContainer.swipe('destroy');
		
		this._isMobile = false;
	},
	
	/**
	 * Toggles between normal and fullscreen view.
	 */
	_toggleView: function() {
		this._ui.images[this._activeImage].addClass('animateTransformation');
		this._container.toggleClass('maximized');
		this._ui.slideshow.enlarge.toggleClass('active').children('span').toggleClass('fa-expand').toggleClass('fa-compress');
		
		this._renderImage(null, undefined, null);
	},
	
	/**
	 * Shifts the thumbnail list.
	 * 
	 * @param	object		event
	 * @param	integer		shiftBy
	 */
	_next: function(event, shiftBy) {
		if (this._ui.buttonNext.hasClass('pointer')) {
			if (shiftBy == undefined) {
				this.stopSlideshow(true);
			}
			
			var $maximumOffset = Math.max((this._items * this._thumbnailWidth) - this._thumbnailContainerWidth - this._thumbnailMarginRight, 0);
			this._thumbnailOffset = Math.min(this._thumbnailOffset + (this._thumbnailWidth * (shiftBy ? shiftBy : this.options.shiftBy)), $maximumOffset);
			this._ui.imageList.css('marginLeft', (this._thumbnailOffset * -1));
		}
		
		this._preload();
		
		this._toggleButtons();
	},
	
	/**
	 * Unshifts the thumbnail list.
	 * 
	 * @param	object		event
	 * @param	integer		shiftBy
	 */
	_previous: function(event, unshiftBy) {
		if (this._ui.buttonPrevious.hasClass('pointer')) {
			if (unshiftBy == undefined) {
				this.stopSlideshow(true);
			}
			
			this._thumbnailOffset = Math.max(this._thumbnailOffset - (this._thumbnailWidth * (unshiftBy ? unshiftBy : this.options.shiftBy)), 0);
			this._ui.imageList.css('marginLeft', (this._thumbnailOffset * -1));
		}
		
		this._toggleButtons();
	},
	
	/**
	 * Displays the next image.
	 * 
	 * @param	object		event
	 */
	_nextImage: function(event) {
		if (this._ui.slideshow.next.hasClass('pointer')) {
			this._disableSlideshow = true;
			
			this.stopSlideshow(true);
			this.showImage(this._active + 1);
			
			if (event) {
				event.preventDefault();
				event.stopPropagation();
			}
		}
	},
	
	/**
	 * Displays the previous image.
	 * 
	 * @param	object		event
	 */
	_previousImage: function(event) {
		if (this._ui.slideshow.previous.hasClass('pointer')) {
			this._disableSlideshow = true;
			
			this.stopSlideshow(true);
			this.showImage(this._active - 1);
			
			if (event) {
				event.preventDefault();
				event.stopPropagation();
			}
		}
	},
	
	/**
	 * Moves thumbnail list to target thumbnail.
	 * 
	 * @param	integer		seriesIndex
	 */
	moveToImage: function(seriesIndex) {
		// calculate start and end of thumbnail
		var $start = (seriesIndex - 3) * this._thumbnailWidth;
		var $end = $start + (this._thumbnailWidth * 5);
		
		// calculate visible offsets
		var $left = this._thumbnailOffset;
		var $right = this._thumbnailOffset + this._thumbnailContainerWidth;
		
		// check if thumbnail is within boundaries
		var $shouldMove = false;
		if ($start < $left || $end > $right) {
			$shouldMove = true;
		}
		
		// try to shift until the thumbnail itself and the next/previous 2 thumbnails are visible
		if ($shouldMove) {
			var $shiftBy = 0;
			
			// unshift
			if ($start < $left) {
				while ($start < $left) {
					$shiftBy++;
					$left -= this._thumbnailWidth;
				}
				
				this._previous(null, $shiftBy);
			}
			else {
				// shift
				while ($end > $right) {
					$shiftBy++;
					$right += this._thumbnailWidth;
				}
				
				this._next(null, $shiftBy);
			}
		}
	},
	
	/**
	 * Toggles control buttons.
	 */
	_toggleButtons: function() {
		// button 'previous'
		if (this._thumbnailOffset > 0) {
			this._ui.buttonPrevious.addClass('pointer');
		}
		else {
			this._ui.buttonPrevious.removeClass('pointer');
		}
		
		// button 'next'
		var $maximumOffset = (this._images.length * this._thumbnailWidth) - this._thumbnailContainerWidth - this._thumbnailMarginRight;
		if (this._thumbnailOffset >= $maximumOffset) {
			this._ui.buttonNext.removeClass('pointer');
		}
		else {
			this._ui.buttonNext.addClass('pointer');
		}
		
		// slideshow controls
		if (this._active > 0) {
			this._ui.slideshow.previous.addClass('pointer');
		}
		else {
			this._ui.slideshow.previous.removeClass('pointer');
		}
		
		if (this._active + 1 < this._images.length) {
			this._ui.slideshow.next.addClass('pointer');
		}
		else {
			this._ui.slideshow.next.removeClass('pointer');
		}
		
		if (this._items < 2) {
			this._ui.slideshow.toggle.removeClass('pointer');
		}
		else {
			this._ui.slideshow.toggle.addClass('pointer');
		}
	},
	
	/**
	 * Inserts thumbnails.
	 * 
	 * @param	array<object>	images
	 */
	_createThumbnails: function(images) {
		if (this.options.staticViewer) {
			this._images = [ ];
			this._ui.imageList.empty();
		}
		
		for (var $i = 0, $length = images.length; $i < $length; $i++) {
			var $image = images[$i];
			
			var $listItem = $('<li class="loading pointer"><img src="' + $image.thumbnail.url + '" /></li>').appendTo(this._ui.imageList);
			$listItem.data('index', this._images.length).data('objectID', $image.objectID).click($.proxy(this._showImage, this));
			var $img = $listItem.children('img');
			if ($img.get(0).complete) {
				// thumbnail is read from cache
				$listItem.removeClass('loading');
				
				// fix dimensions
				if (this.options.staticViewer) {
					this._fixThumbnailDimensions($img);
				}
			}
			else {
				var self = this;
				$img.on('load', function() {
					var $img = $(this);
					$img.parent().removeClass('loading');
					
					if (self.options.staticViewer) {
						self._fixThumbnailDimensions($img);
					}
				});
			}
			
			$image.listItem = $listItem;
			this._images.push($image);
		}
	},
	
	/**
	 * Fixes thumbnail dimensions within static mode.
	 * 
	 * @param	jQuery		image
	 */
	_fixThumbnailDimensions: function(image) {
		var $image = new Image();
		$image.src = image.prop('src');
		
		var $height = $image.height;
		var $width = $image.width;
		
		// quadratic, scale to 80x80
		if ($height == $width) {
			$height = $width = 80;
		}
		else if ($height < $width) {
			// landscape, use width as reference
			var $scale = 80 / $width;
			$width = 80;
			$height *= $scale;
		}
		else {
			// portrait, use height as reference
			var $scale = 80 / $height;
			$height = 80;
			$width *= $scale;
		}
		
		image.css({
			height: $height + 'px',
			width: $width + 'px'
		});
	},
	
	/**
	 * Loads the next images via AJAX.
	 * 
	 * @param	boolean		init
	 */
	_loadNextImages: function(init) {
		this._proxy.setOption('data', {
			actionName: 'loadNextImages',
			className: this.options.className,
			interfaceName: 'wcf\\data\\IImageViewerAction',
			objectIDs: [ this.element.data('objectID') ],
			parameters: {
				maximumHeight: this._maxDimensions.height,
				maximumWidth: this._maxDimensions.width,
				offset: this._images.length,
				targetImageID: (init && this.element.data('targetImageID') ? this.element.data('targetImageID') : 0)
			}
		});
		this._proxy.setOption('showLoadingOverlay', false);
		this._proxy.sendRequest();
	},
	
	/**
	 * Builds the list of static images and returns it.
	 * 
	 * @return	array<object>
	 */
	_getStaticImages: function() {
		var $images = [ ];
		
		$(this.options.imageSelector).each(function(index, link) {
			var $link = $(link);
			var $thumbnail = $link.find('> img, .attachmentThumbnailImage > img').first();
			if (!$thumbnail.length) {
				$thumbnail = $link.parentsUntil('.formAttachmentList').last().find('.attachmentTinyThumbnail');
			}
			
			$images.push({
				image: {
					fullURL: $thumbnail.data('source') ? $thumbnail.data('source').replace(/\\\//g, '/') : $link.prop('href'),
					link: '',
					title: $link.prop('title'),
					url: $link.prop('href')
				},
				series: null,
				thumbnail: {
					url: $thumbnail.prop('src')
				},
				user: null
			});
		});
		
		this._items = $images.length;
		
		return $images;
	},
	
	/**
	 * Handles successful AJAX requests.
	 * 
	 * @param	object		data
	 * @param	string		textStatus
	 * @param	jQuery		jqXHR
	 */
	_success: function(data, textStatus, jqXHR) {
		if (data.returnValues.items) {
			this._items = data.returnValues.items;
		}
		
		var $initialized = this._initUI();
		
		this._createThumbnails(data.returnValues.images);
		
		var $targetImageID = (data.returnValues.targetImageID ? data.returnValues.targetImageID : 0);
		this._render($initialized, $targetImageID);
		
		if (!this._isOpen) {
			this._isOpen = true;
			
			WCF.System.DisableScrolling.disable();
			WCF.System.DisableZoom.disable();
		}
	}
});