File "jquery.vanillabox.js"

Full Path: /home/cananyalcin/public_html/webpanel/js/vanillabox/jquery.vanillabox.js
File size: 59.03 KB
MIME-type: text/plain
Charset: utf-8

/**
 * @license Vanillabox
 * (C) 2013 cocopon.
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/mit-license.php
 */(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var Util = require('./util.js');

/**
 * @namespace
 */
var Animation = {};

Animation.None = {
	showMask: function showMask(mask) {
		return mask.getElement().show().promise();
	},

	hideMask: function hideMask(mask) {
		return mask.getElement().hide();
	},

	showFrame: function showFrame(frame) {
		Animation.None.resizeFrame(frame);
		return frame.getElement().show().promise();
	},

	hideFrame: function hideFrame(frame) {
		return frame.getElement().hide();
	},

	resizeFrame: function resizeFrame(frame) {
		var container = frame.getContainer();
		var containerSize = container.getSize();
		var offset = frame.getPreferredOffset(containerSize);

		container.getElement().css({
			width: containerSize.width,
			height: containerSize.height
		});

		frame.getElement().css({
			left: offset.left,
			top: offset.top
		});

		return Util.Deferred.emptyPromise();
	},

	showContent: function showContent(content) {
		return content.getElement().show().promise();
	},

	hideContent: function hideContent(content) {
		return content.getElement().hide().promise();
	}
};

Animation.Default = {
	showMask: function showMask(mask) {
		return mask.getElement().fadeIn(200).promise();
	},

	hideMask: function hideMask(mask) {
		return mask.getElement().fadeOut(300).promise();
	},

	animateFrame_: function animateFrame_(frame, containerSize, offset, duration) {
		var container = frame.getContainer();
		var containerElem = container.getElement();
		containerElem.stop();
		var containerPromise = containerElem.animate({
			width: containerSize.width,
			height: containerSize.height
		}, duration);

		var frameElem = frame.getElement();
		frameElem.stop();
		var framePromise = frameElem.animate({
			left: offset.left,
			top: offset.top
		}, duration);

		return $.when(containerPromise, framePromise);
	},

	showFrame: function showFrame(frame) {
		var container = frame.getContainer();
		var containerSize = container.getSize();
		var offset = frame.getPreferredOffset(containerSize);

		container.getElement().css({
			width: containerSize.width,
			height: containerSize.height
		});

		frame.getElement().css({
			left: offset.left,
			top: offset.top
		});

		return Util.Deferred.emptyPromise();
	},

	hideFrame: function hideFrame() {
		return Util.Deferred.emptyPromise();
	},

	resizeFrame: function resizeFrame(frame) {
		var container = frame.getContainer();
		var containerSize = container.getSize();
		var offset = frame.getPreferredOffset(containerSize);

		return Animation.Default.animateFrame_(frame, containerSize, offset, 300);
	},

	showContent: function showContent(content) {
		return content.getElement().fadeIn(200).promise();
	},

	hideContent: function hideContent(content) {
		return content.getElement().fadeOut(300).promise();
	}
};

module.exports = Animation;

},{"./util.js":20}],2:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Animation = require('./animation.js');

/**
 * @alias AnimationProvider
 */

var AnimationProvider = (function () {
	function AnimationProvider() {
		_classCallCheck(this, AnimationProvider);
	}

	_createClass(AnimationProvider, null, [{
		key: 'get',
		value: function get(id) {
			var animation = AnimationProvider.ANIMATIONS_[id];
			return animation || AnimationProvider.getDefault();
		}
	}, {
		key: 'getDefault',
		value: function getDefault() {
			return Animation.Default;
		}
	}]);

	return AnimationProvider;
})();

AnimationProvider.ANIMATIONS_ = {
	'none': Animation.None,
	'default': Animation.Default
};

module.exports = AnimationProvider;

},{"./animation.js":1}],3:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Events = require('./events.js');
var Util = require('./util.js');

/**
 * @constructor
 */

var Button = (function () {
	function Button(config) {
		_classCallCheck(this, Button);

		this.cls_ = config.cls;
		this.disabled_ = Util.getOrDefault(config.disabled, false);

		this.setup_();
	}

	_createClass(Button, [{
		key: 'setup_',
		value: function setup_() {
			var elem = $('<div>');
			elem.addClass(Util.CSS_PREFIX + 'button');
			if (this.cls_) {
				elem.addClass(this.cls_);
			}

			// Enable :active pseudo-class on touch device
			elem.attr('ontouchstart', 'void(0)');

			this.elem_ = elem;

			this.attach_();
		}
	}, {
		key: 'dispose',
		value: function dispose() {
			this.elem_ = null;
		}
	}, {
		key: 'attach_',
		value: function attach_() {
			var elem = this.getElement();
			elem.on('click', $.proxy(this.onClick_, this));
		}
	}, {
		key: 'detach_',
		value: function detach_() {
			var elem = this.getElement();
			elem.off('click', this.onClick_);
		}
	}, {
		key: 'getElement',
		value: function getElement() {
			return this.elem_;
		}
	}, {
		key: 'isDisabled',
		value: function isDisabled() {
			return this.disabled_;
		}
	}, {
		key: 'setDisabled',
		value: function setDisabled(disabled) {
			var elem = this.elem_;

			this.disabled_ = disabled;

			if (this.disabled_) {
				elem.addClass(Util.CSS_PREFIX + 'disabled');
			} else {
				elem.removeClass(Util.CSS_PREFIX + 'disabled');
			}
		}
	}, {
		key: 'onClick_',
		value: function onClick_(e) {
			e.stopPropagation();

			if (!this.isDisabled()) {
				$(this).trigger(Events.CLICK);
			}
		}
	}]);

	return Button;
})();

module.exports = Button;

},{"./events.js":9,"./util.js":20}],4:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var AnimationProvider = require('./animation_provider.js');
var Events = require('./events.js');
var Util = require('./util.js');

/**
 * @constructor
 */

var Container = (function () {
	function Container(opt_config) {
		_classCallCheck(this, Container);

		var config = opt_config || {};

		this.animation_ = Util.getOrDefault(config.animation, AnimationProvider.getDefault());
		this.adjustToWindow_ = Util.getOrDefault(config.adjustToWindow, 'both');

		this.setup_();
	}

	_createClass(Container, [{
		key: 'setup_',
		value: function setup_() {
			var elem = $('<div>');
			elem.addClass(Util.CSS_PREFIX + 'container');
			this.elem_ = elem;

			this.attach_();
		}
	}, {
		key: 'dispose',
		value: function dispose() {
			this.detach_();
			this.elem_ = null;
		}
	}, {
		key: 'attach_',
		value: function attach_() {}
	}, {
		key: 'detach_',
		value: function detach_() {
			this.detachContent_();
		}
	}, {
		key: 'attachContent_',
		value: function attachContent_() {
			var content = this.getContent();

			$(content).on(Events.COMPLETE, $.proxy(this.onContentComplete_, this));
		}
	}, {
		key: 'detachContent_',
		value: function detachContent_() {
			var content = this.getContent();
			if (!content) {
				return;
			}

			$(content).off(Events.COMPLETE, this.onContentComplete_);
		}
	}, {
		key: 'getElement',
		value: function getElement() {
			return this.elem_;
		}
	}, {
		key: 'getContent',
		value: function getContent() {
			return this.content_;
		}
	}, {
		key: 'setContent',
		value: function setContent(content) {
			var _this = this;

			var animation = this.animation_;

			if (content === this.content_) {
				return;
			}

			if (this.content_) {
				(function () {
					_this.detachContent_();

					var prevContent = _this.content_;
					animation.hideContent(prevContent).done(function () {
						_this.onContentHide_(prevContent);
					});
				})();
			}

			this.content_ = content;
			if (!this.content_) {
				return;
			}

			this.attachContent_();

			if (this.maxContentSize_) {
				this.applyMaxContentSize_();
			}

			var elem = this.getElement();
			var contentElem = this.content_.getElement();
			var contentElems = elem.find('> *');
			if (contentElems.length === 0) {
				elem.append(contentElem);
			} else {
				// Insert newer content behind all existing contents
				contentElem.insertBefore(contentElems.first());
			}

			animation.showContent(this.content_).done(function () {
				_this.onContentShow_();
			});
		}
	}, {
		key: 'getSize',
		value: function getSize() {
			var content = this.getContent();

			var contentSize = {
				width: 0,
				height: 0
			};
			if (content) {
				contentSize = content.getSize();
			}

			return {
				width: Math.max(contentSize.width, Container.MIN_WIDTH),
				height: Math.max(contentSize.height, Container.MIN_HEIGHT)
			};
		}
	}, {
		key: 'needsAdjustment',
		value: function needsAdjustment(direction) {
			return this.adjustToWindow_ === true || this.adjustToWindow_ === 'both' || this.adjustToWindow_ === direction;
		}
	}, {
		key: 'updateMaxContentSize_',
		value: function updateMaxContentSize_() {
			var safetyMargin = Container.CONTENT_SIZE_SAFETY_MARGIN;
			this.maxContentSize_ = {
				width: this.needsAdjustment('horizontal') ? Util.Dom.getViewportWidth() - safetyMargin : Number.MAX_VALUE,
				height: this.needsAdjustment('vertical') ? Util.Dom.getViewportHeight() - safetyMargin : Number.MAX_VALUE
			};

			var content = this.content_;
			if (!content) {
				return;
			}

			this.applyMaxContentSize_();
		}
	}, {
		key: 'applyMaxContentSize_',
		value: function applyMaxContentSize_() {
			var content = this.getContent();
			var maxSize = this.maxContentSize_;

			content.setMaxContentSize(Math.max(maxSize.width, Container.MIN_WIDTH), Math.max(maxSize.height, Container.MIN_HEIGHT));
		}
	}, {
		key: 'layout',
		value: function layout() {
			var content = this.getContent();
			var contentSize = content.getSize();

			content.setOffset(-Math.round(contentSize.width / 2), -Math.round(contentSize.height / 2));
		}
	}, {
		key: 'onContentComplete_',
		value: function onContentComplete_() {
			this.layout();
		}
	}, {
		key: 'onContentShow_',
		value: function onContentShow_() {
			$(this).trigger(Events.CONTENT_SHOW, [this, this.getContent()]);
		}
	}, {
		key: 'onContentHide_',
		value: function onContentHide_(content) {
			$(this).trigger(Events.CONTENT_HIDE, [this, content]);
		}
	}]);

	return Container;
})();

Container.CONTENT_SIZE_SAFETY_MARGIN = 100;
Container.MIN_WIDTH = 200;
Container.MIN_HEIGHT = 150;

module.exports = Container;

},{"./animation_provider.js":2,"./events.js":9,"./util.js":20}],5:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Events = require('./events.js');
var Util = require('./util.js');

/**
 * @constructor
 */

var Content = (function () {
	function Content(opt_config) {
		_classCallCheck(this, Content);

		var config = opt_config || {};

		this.loaded_ = false;
		this.success_ = false;

		this.path_ = config.path;
		this.title_ = Util.getOrDefault(config.title, '');

		this.setup_();
	}

	_createClass(Content, [{
		key: 'setup_',
		value: function setup_() {
			var elem = $('<div>');
			elem.addClass(Util.CSS_PREFIX + 'content');
			this.elem_ = elem;

			this.setupInternal_();
			this.attach_();
		}
	}, {
		key: 'setupInternal_',
		value: function setupInternal_() {}
	}, {
		key: 'attach_',
		value: function attach_() {}
	}, {
		key: 'detach_',
		value: function detach_() {}
	}, {
		key: 'dispose',
		value: function dispose() {
			this.detach_();
			this.elem_.remove();
			this.elem_ = null;
		}
	}, {
		key: 'shouldUnloadOnHide',
		value: function shouldUnloadOnHide() {
			return false;
		}
	}, {
		key: 'isLoaded',
		value: function isLoaded() {
			return this.loaded_;
		}
	}, {
		key: 'getElement',
		value: function getElement() {
			return this.elem_;
		}
	}, {
		key: 'getTitle',
		value: function getTitle() {
			return this.title_;
		}
	}, {
		key: 'getSize',
		value: function getSize() {
			var elem = this.getElement();

			return {
				width: elem.width(),
				height: elem.height()
			};
		}
	}, {
		key: 'setOffset',
		value: function setOffset(left, top) {
			var elem = this.getElement();

			elem.css({
				marginLeft: left,
				marginTop: top
			});
		}
	}, {
		key: 'setMaxContentSize',
		value: function setMaxContentSize(width, height) {
			this.getElement().css({
				maxWidth: width,
				maxHeight: height
			});
		}
	}, {
		key: 'load',
		value: function load() {
			var elem = this.getElement();

			elem.addClass(Util.CSS_PREFIX + 'loading');

			if (this.loaded_) {
				this.onComplete_(this.success_);
				return;
			}

			this.loadInternal_();
		}
	}, {
		key: 'loadInternal_',
		value: function loadInternal_() {}
	}, {
		key: 'unload',
		value: function unload() {
			this.unloadInternal_();
			this.loaded_ = false;
		}
	}, {
		key: 'unloadInternal_',
		value: function unloadInternal_() {}
	}, {
		key: 'onComplete_',
		value: function onComplete_(success) {
			var elem = this.getElement();

			this.loaded_ = true;
			this.success_ = success;

			elem.removeClass(Util.CSS_PREFIX + 'loading');
			if (!success) {
				elem.addClass(Util.CSS_PREFIX + 'error');
			}

			$(this).trigger(Events.COMPLETE, success);
		}
	}]);

	return Content;
})();

module.exports = Content;

},{"./events.js":9,"./util.js":20}],6:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var IframeContent = require('./iframe_content.js');
var ImageContent = require('./image_content.js');

/**
 * @alias ContentFactory
 */

var ContentFactory = (function () {
	function ContentFactory() {
		_classCallCheck(this, ContentFactory);
	}

	_createClass(ContentFactory, null, [{
		key: 'create',
		value: function create(target, options) {
			var factoryFn = ContentFactory.FACTORIES_[options.type];

			if (!factoryFn) {
				throw new VanillaException(VanillaException.Types.INVALID_TYPE);
			}

			return factoryFn(target, options);
		}
	}]);

	return ContentFactory;
})();

ContentFactory.FACTORIES_ = {
	'image': function image(target) {
		return new ImageContent({
			path: target.attr('href'),
			title: target.attr('title')
		});
	},
	'iframe': function iframe(target, options) {
		return new IframeContent({
			path: target.attr('href'),
			preferredWidth: options.preferredWidth,
			preferredHeight: options.preferredHeight,
			title: target.attr('title')
		});
	}
};

module.exports = ContentFactory;

},{"./iframe_content.js":12,"./image_content.js":13}],7:[function(require,module,exports){
'use strict';

module.exports = {
	'animation': 'default',
	'closeButton': false,
	'adjustToWindow': 'both',
	'keyboard': true,
	'loop': false,
	'preferredHeight': 600,
	'preferredWidth': 800,
	'repositionOnScroll': false,
	'type': 'image',
	'grouping': true
};

},{}],8:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Content = require('./content.js');
var Events = require('./events.js');
var Util = require('./util.js');

/**
 * @constructor
 * @extends Content
 */

var EmptyContent = (function (_Content) {
	_inherits(EmptyContent, _Content);

	function EmptyContent() {
		_classCallCheck(this, EmptyContent);

		_get(Object.getPrototypeOf(EmptyContent.prototype), 'constructor', this).apply(this, arguments);
	}

	_createClass(EmptyContent, [{
		key: 'setup_',
		value: function setup_() {
			_get(Object.getPrototypeOf(EmptyContent.prototype), 'setup_', this).call(this);

			this.elem_.addClass(Util.CSS_PREFIX + 'empty');
		}
	}, {
		key: 'load',
		value: function load() {
			var _this = this;

			setTimeout(function () {
				$(_this).trigger(Events.COMPLETE, true);
			}, 0);
		}
	}]);

	return EmptyContent;
})(Content);

module.exports = EmptyContent;

},{"./content.js":5,"./events.js":9,"./util.js":20}],9:[function(require,module,exports){
'use strict';

var Util = require('./util.js');

/**
 * @alias Events
 */
var Events = {
	CHANGE: Util.EVENT_PREFIX + 'change',
	CLICK: Util.EVENT_PREFIX + 'click',
	COMPLETE: Util.EVENT_PREFIX + 'complete',
	CONTENT_HIDE: Util.EVENT_PREFIX + 'content_hide',
	CONTENT_SHOW: Util.EVENT_PREFIX + 'content_show',
	HIDE: Util.EVENT_PREFIX + 'hide',
	LOAD: Util.EVENT_PREFIX + 'load',
	SHOW: Util.EVENT_PREFIX + 'show'
};

module.exports = Events;

},{"./util.js":20}],10:[function(require,module,exports){
/**
 * @constructor
 */
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var VanillaException = (function () {
	function VanillaException(type) {
		_classCallCheck(this, VanillaException);

		this.type_ = type;
	}

	_createClass(VanillaException, [{
		key: 'getType',
		value: function getType() {
			return this.type_;
		}
	}]);

	return VanillaException;
})();

VanillaException.Types = {
	INVALID_TYPE: 'invalid_type',
	NO_IMAGE: 'no_image'
};

module.exports = VanillaException;

},{}],11:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Container = require('./container.js');
var Util = require('./util.js');

/**
 * @constructor
 */

var Frame = (function () {
	function Frame(opt_config) {
		_classCallCheck(this, Frame);

		var config = opt_config || {};

		var container = new Container({
			animation: config.animation,
			adjustToWindow: config.adjustToWindow
		});
		this.container_ = container;

		this.setup_();
		this.attach_();
	}

	_createClass(Frame, [{
		key: 'setup_',
		value: function setup_() {
			var elem = $('<div>');
			elem.addClass(Util.CSS_PREFIX + 'frame');
			this.elem_ = elem;

			var container = this.container_;
			this.elem_.append(container.getElement());
		}
	}, {
		key: 'dispose',
		value: function dispose() {
			this.container_.dispose();
			this.container_ = null;

			this.detach_();
			this.elem_ = null;
		}
	}, {
		key: 'attach_',
		value: function attach_() {
			this.elem_.on('click', $.proxy(this.onClick_, this));
		}
	}, {
		key: 'detach_',
		value: function detach_() {
			this.elem_.off('click', this.onClick_);
		}
	}, {
		key: 'getElement',
		value: function getElement() {
			return this.elem_;
		}
	}, {
		key: 'getContainer',
		value: function getContainer() {
			return this.container_;
		}
	}, {
		key: 'getPreferredOffset',
		value: function getPreferredOffset(contentSize) {
			var container = this.getContainer();
			var containerElem = container.getElement();

			// Save current size
			var w = containerElem.width();
			var h = containerElem.height();

			// Set specified size temporarily
			containerElem.width(contentSize.width);
			containerElem.height(contentSize.height);

			// Get preferred position
			var $window = $(window);
			var elem = this.getElement();
			var ow = Util.Dom.getViewportWidth();
			var oh = Util.Dom.getViewportHeight();
			var left = Math.round($window.scrollLeft() + (ow - elem.outerWidth()) / 2);
			var top = Math.max(Math.round($window.scrollTop() + (oh - elem.outerHeight()) / 2), 0);

			// Restore original size
			containerElem.width(w);
			containerElem.height(h);

			return {
				left: left,
				top: top
			};
		}
	}, {
		key: 'onClick_',
		value: function onClick_(e) {
			e.stopPropagation();
		}
	}]);

	return Frame;
})();

Frame.RESIZE_TIMEOUT_DELAY = 500;

module.exports = Frame;

},{"./container.js":4,"./util.js":20}],12:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Content = require('./content.js');
var Util = require('./util.js');

/**
 * @constructor
 * @extends Content
 */

var IframeContent = (function (_Content) {
	_inherits(IframeContent, _Content);

	function IframeContent(opt_config) {
		_classCallCheck(this, IframeContent);

		var config = opt_config || {};

		_get(Object.getPrototypeOf(IframeContent.prototype), 'constructor', this).call(this, config);

		this.preferredWidth_ = config.preferredWidth;
		this.preferredHeight_ = config.preferredHeight;
	}

	_createClass(IframeContent, [{
		key: 'setupInternal_',
		value: function setupInternal_() {
			var iframeElem = $('<iframe>');
			iframeElem.attr({
				'frameborder': 0, // Need to disable border in IE
				'allowfullscreen': true
			});
			this.elem_.append(iframeElem);
			this.iframeElem_ = iframeElem;
		}
	}, {
		key: 'dispose',
		value: function dispose() {
			_get(Object.getPrototypeOf(IframeContent.prototype), 'dispose', this).call(this);

			this.iframeElem_ = null;
		}
	}, {
		key: 'shouldUnloadOnHide',
		value: function shouldUnloadOnHide() {
			return true;
		}
	}, {
		key: 'attach_',
		value: function attach_() {
			var iframeElem = this.iframeElem_;
			iframeElem.on('load', $.proxy(this.onLoad_, this));
			iframeElem.on('error', $.proxy(this.onError_, this));
		}
	}, {
		key: 'detach_',
		value: function detach_() {
			var iframeElem = this.iframeElem_;
			iframeElem.off('load', this.onLoad_);
			iframeElem.off('error', this.onError_);
		}
	}, {
		key: 'getFlexibleElement',
		value: function getFlexibleElement() {
			// In iOS, cannot restrict a size of an iframe element
			// so return an outer element instead
			return Util.Browser.isIos() ? this.getElement() : this.iframeElem_;
		}
	}, {
		key: 'getSize',
		value: function getSize() {
			var elem = this.getFlexibleElement();
			return {
				width: elem.width(),
				height: elem.height()
			};
		}
	}, {
		key: 'setMaxContentSize',
		value: function setMaxContentSize(width, height) {
			var elem = this.getFlexibleElement();
			elem.css({
				maxWidth: width,
				maxHeight: height
			});
		}
	}, {
		key: 'loadInternal_',
		value: function loadInternal_() {
			this.iframeElem_.attr('src', this.path_);
		}
	}, {
		key: 'unloadInternal_',
		value: function unloadInternal_() {
			this.iframeElem_.attr('src', IframeContent.EMPTY_SRC);

			var elem = this.getFlexibleElement();
			elem.width('');
			elem.height('');
		}
	}, {
		key: 'onLoad_',
		value: function onLoad_() {
			var iframeElem = this.iframeElem_;

			var src = iframeElem.attr('src');
			if (!src) {
				// Ignore unwanted load event that is fired when appending to DOM
				return;
			}
			if (src === IframeContent.EMPTY_SRC) {
				return;
			}

			var elem = this.getFlexibleElement();
			elem.width(this.preferredWidth_);
			elem.height(this.preferredHeight_);

			this.onComplete_(true);
		}
	}, {
		key: 'onError_',
		value: function onError_() {
			this.onComplete_(false);
		}
	}]);

	return IframeContent;
})(Content);

IframeContent.EMPTY_SRC = 'about:blank';

module.exports = IframeContent;

},{"./content.js":5,"./util.js":20}],13:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Content = require('./content.js');

/**
 * @constructor
 * @extends Content
 */

var ImageContent = (function (_Content) {
	_inherits(ImageContent, _Content);

	function ImageContent(opt_config) {
		_classCallCheck(this, ImageContent);

		_get(Object.getPrototypeOf(ImageContent.prototype), 'constructor', this).call(this, opt_config);
	}

	_createClass(ImageContent, [{
		key: 'setupInternal_',
		value: function setupInternal_() {
			var imgElem = $('<img>');
			this.elem_.append(imgElem);
			this.imgElem_ = imgElem;
		}
	}, {
		key: 'dispose',
		value: function dispose() {
			_get(Object.getPrototypeOf(ImageContent.prototype), 'dispose', this).call(this);
			this.imgElem_ = null;
		}
	}, {
		key: 'attach_',
		value: function attach_() {
			var imgElem = this.imgElem_;
			imgElem.on('load', $.proxy(this.onLoad_, this));
			imgElem.on('error', $.proxy(this.onError_, this));
		}
	}, {
		key: 'detach_',
		value: function detach_() {
			var imgElem = this.imgElem_;
			imgElem.off('load', this.onLoad_);
			imgElem.off('error', this.onError_);
		}
	}, {
		key: 'setMaxContentSize',
		value: function setMaxContentSize(width, height) {
			this.imgElem_.css({
				maxWidth: width,
				maxHeight: height
			});
		}
	}, {
		key: 'loadInternal_',
		value: function loadInternal_() {
			this.imgElem_.attr('src', this.path_);
		}
	}, {
		key: 'unloadInternal_',
		value: function unloadInternal_() {
			this.imgElem_.attr('src', ImageContent.EMPTY_SRC);
		}
	}, {
		key: 'onLoad_',
		value: function onLoad_() {
			if (this.imgElem_.attr('src') === ImageContent.EMPTY_SRC) {
				return;
			}

			this.onComplete_(true);
		}
	}, {
		key: 'onError_',
		value: function onError_() {
			this.onComplete_(false);
		}
	}]);

	return ImageContent;
})(Content);

ImageContent.EMPTY_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

module.exports = ImageContent;

},{"./content.js":5}],14:[function(require,module,exports){
'use strict';

var AnimationProvider = require('./animation_provider.js');
var DefaultConfig = require('./default_config.js');
var Vanillabox = require('./vanillabox.js');

$.fn.vanillabox = function (opt_config) {
	var config = {};
	$.extend(config, DefaultConfig);
	$.extend(config, opt_config);

	var targetElems = $(this);
	var animation = AnimationProvider.get(config['animation']);

	var box = new Vanillabox({
		animation: animation,
		closeButton: config['closeButton'],
		adjustToWindow: config['adjustToWindow'],
		keyboard: config['keyboard'],
		loop: config['loop'],
		preferredHeight: config['preferredHeight'],
		preferredWidth: config['preferredWidth'],
		repositionOnScroll: config['repositionOnScroll'],
		targets: targetElems,
		type: config['type'],
		grouping: config['grouping']
	});

	return box;
};

},{"./animation_provider.js":2,"./default_config.js":7,"./vanillabox.js":21}],15:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Util = require('./util.js');

/**
 * @constructor
 */

var Label = (function () {
	function Label(config) {
		_classCallCheck(this, Label);

		this.cls_ = config.cls;

		this.setup_();
	}

	_createClass(Label, [{
		key: 'setup_',
		value: function setup_() {
			var elem = $('<div>');
			elem.addClass(Util.CSS_PREFIX + 'label');
			if (this.cls_) {
				elem.addClass(this.cls_);
			}
			this.elem_ = elem;
		}
	}, {
		key: 'dispose',
		value: function dispose() {
			this.elem_ = null;
		}
	}, {
		key: 'getElement',
		value: function getElement() {
			return this.elem_;
		}
	}, {
		key: 'getText',
		value: function getText() {
			return this.elem_.text();
		}
	}, {
		key: 'setText',
		value: function setText(text) {
			this.elem_.text(text);
		}
	}]);

	return Label;
})();

module.exports = Label;

},{"./util.js":20}],16:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Events = require('./events.js');
var Util = require('./util.js');

/**
 * @constructor
 */

var Mask = (function () {
	function Mask() {
		_classCallCheck(this, Mask);

		this.setup_();
	}

	_createClass(Mask, [{
		key: 'setup_',
		value: function setup_() {
			var $elem = $('<div>');
			$elem.addClass(Util.CSS_PREFIX + 'mask');

			this.elem_ = $elem;
			this.attach_();
		}
	}, {
		key: 'dispose',
		value: function dispose() {
			this.detach_();
			this.elem_ = null;
		}
	}, {
		key: 'attach_',
		value: function attach_() {
			$(window).on('resize', $.proxy(this.onWindowResize_, this));

			var elem = this.getElement();
			elem.on('click', $.proxy(this.onClick_, this));
		}
	}, {
		key: 'detach_',
		value: function detach_() {
			$(window).off('resize', this.onWindowResize_);

			var elem = this.getElement();
			elem.off('click', this.onClick_);
		}
	}, {
		key: 'getElement',
		value: function getElement() {
			return this.elem_;
		}
	}, {
		key: 'layout',
		value: function layout() {
			var elem = this.getElement();

			elem.width('');
			elem.height('');

			var $window = $(window);
			var $document = $(document);
			var w = Math.max($document.width(), $window.width());
			var h = Math.max($document.height(), $window.height());

			elem.width(w);
			elem.height(h);
		}
	}, {
		key: 'onWindowResize_',
		value: function onWindowResize_() {
			this.layout();
		}
	}, {
		key: 'onClick_',
		value: function onClick_() {
			$(this).trigger(Events.CLICK);
		}
	}]);

	return Mask;
})();

module.exports = Mask;

},{"./events.js":9,"./util.js":20}],17:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Events = require('./events.js');
var Util = require('./util.js');

/**
 * The pager class manages a current page.
 * @constructor
 */

var Pager = (function () {
	function Pager(opt_config) {
		_classCallCheck(this, Pager);

		var config = opt_config || {};

		this.totalPages_ = Util.getOrDefault(config.totalPages, 1);
		this.allowsLoop_ = Util.getOrDefault(config.loop, false);

		this.setPage(Util.getOrDefault(config.page, 0));
	}

	/**
 * @return {Number} Current page of the pager.
 */

	_createClass(Pager, [{
		key: 'getPage',
		value: function getPage() {
			return this.currentPage_;
		}

		/**
  * @param {Number} page Current page of the pager.
  */
	}, {
		key: 'setPage',
		value: function setPage(page) {
			var currentIndex = this.currentPage_;
			var totalPages = this.getTotalPages();
			var newIndex = Math.min(Math.max(page, 0), totalPages - 1);

			this.currentPage_ = newIndex;

			if (currentIndex !== newIndex) {
				$(this).trigger(Events.CHANGE);
			}
		}

		/**
  * @return {Number} Total number of pages of the pager.
  */
	}, {
		key: 'getTotalPages',
		value: function getTotalPages() {
			return this.totalPages_;
		}

		/**
  * @return {Boolean} true if the current page has a previous page
  */
	}, {
		key: 'hasPrevious',
		value: function hasPrevious() {
			if (this.allowsLoop_) {
				return true;
			}

			return this.currentPage_ > 0;
		}

		/**
  * @return {Boolean} true if the current page has a next page
  */
	}, {
		key: 'hasNext',
		value: function hasNext() {
			if (this.allowsLoop_) {
				return true;
			}

			var totalPages = this.getTotalPages();
			return this.currentPage_ < totalPages - 1;
		}

		/**
  * Sets the current page to the next page.
  */
	}, {
		key: 'next',
		value: function next() {
			var totalPages = this.getTotalPages();
			var currentIndex = this.currentPage_;
			var nextIndex = currentIndex + 1;

			if (nextIndex > totalPages - 1) {
				nextIndex = this.allowsLoop_ ? 0 : totalPages - 1;
			}
			this.currentPage_ = nextIndex;

			if (currentIndex !== nextIndex) {
				$(this).trigger(Events.CHANGE);
			}
		}

		/**
  * Sets the current page to the previous page.
  */
	}, {
		key: 'previous',
		value: function previous() {
			var totalPages = this.getTotalPages();
			var currentIndex = this.currentPage_;
			var prevIndex = currentIndex - 1;

			if (prevIndex < 0) {
				prevIndex = this.allowsLoop_ ? totalPages - 1 : 0;
			}
			this.currentPage_ = prevIndex;

			if (currentIndex !== prevIndex) {
				$(this).trigger(Events.CHANGE);
			}
		}
	}]);

	return Pager;
})();

module.exports = Pager;

},{"./events.js":9,"./util.js":20}],18:[function(require,module,exports){
'use strict';

require('./jquery_fn.js');
require('./test.js');

},{"./jquery_fn.js":14,"./test.js":19}],19:[function(require,module,exports){
'use strict';

var Container = require('./container.js');
var DefaultConfig = require('./default_config.js');
var Events = require('./events.js');
var Pager = require('./pager.js');
var Util = require('./util.js');
var Vanillabox = require('./vanillabox.js');
var VanillaException = require('./exception.js');

// For testing of private classes
$.fn.vanillabox['privateClasses_'] = {
	'Container': Container,
	'Events': Events,
	'DEFAULT_CONFIG': DefaultConfig,
	'Pager': Pager,
	'Util': Util,
	'Vanillabox': Vanillabox,
	'VanillaException': VanillaException
};

},{"./container.js":4,"./default_config.js":7,"./events.js":9,"./exception.js":10,"./pager.js":17,"./util.js":20,"./vanillabox.js":21}],20:[function(require,module,exports){
/**
 * @namespace
 */
'use strict';

var Util = {
	/**
  * @constant
  * @type {String}
  */
	ROOT_CSS: 'vnbx',

	/**
  * @constant
  * @type {String}
  */
	CSS_PREFIX: 'vnbx-',

	/**
  * @constant
  * @type {String}
  */
	EVENT_PREFIX: 'vnbx_',

	/**
  * @param {*} value
  * @return {Boolean} true if the value is defined
  */
	isDefined: function isDefined(value) {
		return value !== undefined;
	},

	/**
  * @param {*} value
  * @param {*} defaultValue
  * @return {*}
  */
	getOrDefault: function getOrDefault(value, defaultValue) {
		return Util.isDefined(value) ? value : defaultValue;
	}
};

Util.Array = {
	forEach: function forEach(array, fn, opt_scope) {
		var scope = opt_scope || undefined;
		var len = array.length;

		for (var i = 0; i < len; i++) {
			fn.call(scope, array[i], i);
		}
	},

	map: function map(array, fn, opt_scope) {
		var scope = opt_scope || undefined;
		var result = [];
		var len = array.length;

		for (var i = 0; i < len; i++) {
			result.push(fn.call(scope, array[i], i));
		}

		return result;
	},

	indexOf: function indexOf(array, item) {
		var len = array.length;

		for (var i = 0; i < len; i++) {
			if (array[i] === item) {
				return i;
			}
		}
		return -1;
	}
};

Util.Deferred = {
	emptyPromise: function emptyPromise() {
		var d = new $.Deferred();

		setTimeout(function () {
			d.resolve();
		}, 0);

		return d.promise();
	}
};

Util.Dom = {
	getViewportWidth: function getViewportWidth() {
		return window.innerWidth || document.documentElement.clientWidth;
	},

	getViewportHeight: function getViewportHeight() {
		return window.innerHeight || document.documentElement.clientHeight;
	}
};

Util.Browser = {
	isIos: function isIos() {
		var ua = navigator.userAgent;
		return !!ua.match(/(ipod|iphone|ipad)/ig);
	}
};

module.exports = Util;

},{}],21:[function(require,module,exports){
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var AnimationProvider = require('./animation_provider.js');
var Button = require('./button.js');
var ContentFactory = require('./content_factory.js');
var EmptyContent = require('./empty_content.js');
var Events = require('./events.js');
var Frame = require('./frame.js');
var Label = require('./label.js');
var Mask = require('./mask.js');
var Pager = require('./pager.js');
var Util = require('./util.js');
var VanillaException = require('./exception.js');

/**
 * @param {Object} config Config options.
 * @constructor
 */

var Vanillabox = (function () {
	function Vanillabox(config) {
		_classCallCheck(this, Vanillabox);

		if (!config.targets || config.targets.length === 0) {
			throw new VanillaException(VanillaException.Types.NO_IMAGE);
		}

		this.showed_ = false;

		this.targetElems_ = config.targets;
		this.animation_ = Util.getOrDefault(config.animation, AnimationProvider.getDefault());
		this.repositionOnScroll_ = config.repositionOnScroll;
		this.supportsKeyboard_ = config.keyboard;
		this.closeButtonEnabled_ = config.closeButton;
		this.adjustToWindow_ = config.adjustToWindow;
		this.grouping_ = config.grouping;

		this.contentOptions_ = {
			preferredWidth: config.preferredWidth,
			preferredHeight: config.preferredHeight,
			type: config.type
		};

		this.pager_ = new Pager({
			loop: config.loop,
			totalPages: this.targetElems_.length
		});

		this.setup_();
	}

	/** @private */

	_createClass(Vanillabox, [{
		key: 'setup_',
		value: function setup_() {
			var mask = new Mask();
			var maskElem = mask.getElement();
			maskElem.addClass(Util.ROOT_CSS);
			maskElem.hide();
			$('body').append(maskElem);
			this.mask_ = mask;

			this.setupRootCss_();

			var frame = new Frame({
				animation: this.animation_,
				adjustToWindow: this.adjustToWindow_
			});
			var frameElem = frame.getElement();
			this.frame_ = frame;
			maskElem.append(frameElem);

			var titleLabel = new Label({
				cls: Util.CSS_PREFIX + 'title'
			});
			this.titleLabel_ = titleLabel;
			frameElem.append(titleLabel.getElement());

			var pagerLabel = new Label({
				cls: Util.CSS_PREFIX + 'pager'
			});
			this.pagerLabel_ = pagerLabel;
			frameElem.append(pagerLabel.getElement());

			var prevButton = new Button({
				cls: Util.CSS_PREFIX + 'prev'
			});
			this.prevButton_ = prevButton;
			frameElem.append(prevButton.getElement());

			var nextButton = new Button({
				cls: Util.CSS_PREFIX + 'next'
			});
			this.nextButton_ = nextButton;
			frameElem.append(nextButton.getElement());

			var closeButton = new Button({
				cls: Util.CSS_PREFIX + 'close'
			});
			if (!this.closeButtonEnabled_) {
				closeButton.getElement().hide();
			}
			this.closeButton_ = closeButton;
			frameElem.append(closeButton.getElement());

			this.attach_();

			this.setupContents_();
		}

		/** @private */
	}, {
		key: 'setupRootCss_',
		value: function setupRootCss_() {
			var rootElem = this.mask_.getElement();

			if (Util.Browser.isIos()) {
				rootElem.addClass(Util.CSS_PREFIX + 'ios');
			}
			if (this.closeButtonEnabled_) {
				rootElem.addClass(Util.CSS_PREFIX + 'close-button-enabled');
			}
			if (this.grouping_ && this.pager_.getTotalPages() > 1) {
				rootElem.addClass(Util.CSS_PREFIX + 'group');
			}
		}

		/**
  * Disposes the component.
  */
	}, {
		key: 'dispose',
		value: function dispose() {
			this.detachWindow_();
			this.detach_();

			this.disposeAllContents_();

			this.titleLabel_.dispose();
			this.titleLabel_ = null;

			this.pagerLabel_.dispose();
			this.pagerLabel_ = null;

			this.closeButton_.dispose();
			this.closeButton_ = null;

			this.prevButton_.dispose();
			this.prevButton_ = null;

			this.nextButton_.dispose();
			this.nextButton_ = null;

			this.frame_.dispose();
			this.frame_ = null;

			this.mask_.getElement().remove();
			this.mask_.dispose();
			this.mask_ = null;
		}

		/** @private */
	}, {
		key: 'setupContents_',
		value: function setupContents_() {
			var _this = this;

			this.contents_ = Util.Array.map(this.targetElems_, function (target) {
				var targetElem = $(target);
				return ContentFactory.create(targetElem, _this.contentOptions_);
			});

			var emptyContent = new EmptyContent();
			this.setContent_(emptyContent);
		}

		/** @private */
	}, {
		key: 'disposeAllContents_',
		value: function disposeAllContents_() {
			var container = this.frame_.getContainer();
			container.setContent(null);

			if (this.contents_) {
				Util.Array.forEach(this.contents_, function (content) {
					content.dispose();
				});
				this.contents_ = null;
			}
		}

		/** @private */
	}, {
		key: 'attach_',
		value: function attach_() {
			this.targetElems_.on('click', $.proxy(this.onTargetElementClick_, this));

			$(this.mask_).on(Events.CLICK, $.proxy(this.onMaskClick_, this));

			var container = this.frame_.getContainer();
			$(container).on(Events.CONTENT_HIDE, $.proxy(this.onContentHide_, this));

			var pager = this.pager_;
			$(pager).on(Events.CHANGE, $.proxy(this.onPagerChange_, this));

			$(this.closeButton_).on(Events.CLICK, $.proxy(this.onCloseButtonClick_, this));
			$(this.prevButton_).on(Events.CLICK, $.proxy(this.onPreviousButtonClick_, this));
			$(this.nextButton_).on(Events.CLICK, $.proxy(this.onNextButtonClick_, this));
		}

		/** @private */
	}, {
		key: 'detach_',
		value: function detach_() {
			this.targetElems_.off('click', this.onTargetElementClick_);

			$(this.mask_).off(Events.CLICK, this.onMaskClick_);

			var container = this.frame_.getContainer();
			$(container).off(Events.CONTENT_HIDE, this.onContentHide_);

			var pager = this.pager_;
			$(pager).off(Events.CHANGE, this.onPagerChange_);

			$(this.closeButton_).off(Events.CLICK, this.onCloseButtonClick_);
			$(this.prevButton_).off(Events.CLICK, this.onPreviousButtonClick_);
			$(this.nextButton_).off(Events.CLICK, this.onNextButtonClick_);

			this.detachContent_();
			this.content_ = null;
		}

		/** @private */
	}, {
		key: 'attachWindow_',
		value: function attachWindow_() {
			var $window = $(window);
			var $document = $(document);

			$window.on('resize', $.proxy(this.onWindowResize_, this));
			$window.on('scroll', $.proxy(this.onWindowScroll_, this));
			$document.on('keyup', $.proxy(this.onDocumentKeyUp_, this));
		}

		/** @private */
	}, {
		key: 'detachWindow_',
		value: function detachWindow_() {
			var $window = $(window);
			var $document = $(document);

			$window.off('resize', this.onWindowResize_, this);
			$window.off('scroll', this.onWindowScroll_, this);
			$document.off('keyup', this.onDocumentKeyUp_, this);
		}

		/** @private */
	}, {
		key: 'attachContent_',
		value: function attachContent_() {
			var content = this.getContent_();
			$(content).on(Events.COMPLETE, $.proxy(this.onContentComplete_, this));

			var contentElem = content.getElement();
			contentElem.on('click', $.proxy(this.onContentClick_, this));
		}

		/** @private */
	}, {
		key: 'detachContent_',
		value: function detachContent_() {
			var content = this.getContent_();
			if (!content) {
				return;
			}
			$(content).off('complete', this.onContentComplete_);

			var contentElem = content.getElement();
			contentElem.off('click', this.onContentClick_);
		}

		/**
  * Shows the component.
  * @param {Number} opt_index Index of a content to show.
  * @return {Promise} Promise object for showing animation.
  */
	}, {
		key: 'show',
		value: function show(opt_index) {
			var _this2 = this;

			var animation = this.animation_;

			if (this.showed_) {
				return Util.Deferred.emptyPromise();
			}
			this.showed_ = true;

			if (this.contents_ === null) {
				this.setupContents_();
			}

			this.attachWindow_();

			var container = this.frame_.getContainer();
			container.updateMaxContentSize_();

			var mask = this.mask_;
			mask.layout();
			var maskPromise = animation.showMask(mask);

			var framePromise = animation.showFrame(this.frame_);

			var pager = this.pager_;
			var index = Util.getOrDefault(opt_index, 0);
			var triggeredPagerEvent = index !== pager.getPage();
			pager.setPage(index);
			if (!triggeredPagerEvent) {
				this.updateContent_();
			}

			return $.when(maskPromise, framePromise).then(function () {
				$(_this2).trigger(Events.SHOW);
			});
		}

		/**
  * Hides the component.
  * @return {Promise} promise Promise object for hiding operation.
  */
	}, {
		key: 'hide',
		value: function hide() {
			var _this3 = this;

			if (!this.showed_) {
				return Util.Deferred.emptyPromise();
			}

			return $.when(this.animation_.hideFrame(this.frame_), this.animation_.hideMask(this.mask_)).then(function () {
				_this3.detachWindow_();
				_this3.showed_ = false;

				Util.Array.forEach(_this3.contents_, function (content) {
					if (content.shouldUnloadOnHide()) {
						content.unload();
					}
				});

				$(_this3).trigger(Events.HIDE);
			});
		}

		/** @private */
	}, {
		key: 'setTitle_',
		value: function setTitle_(title) {
			var titleLabel = this.titleLabel_;

			titleLabel.setText(title);
		}

		/**
  * Shows the previous content.
  */
	}, {
		key: 'previous',
		value: function previous() {
			if (!this.grouping_) {
				return;
			}

			this.pager_.previous();
		}

		/**
  * Shows the next content.
  */
	}, {
		key: 'next',
		value: function next() {
			if (!this.grouping_) {
				return;
			}

			this.pager_.next();
		}

		/** @private */
	}, {
		key: 'getContent_',
		value: function getContent_() {
			var container = this.frame_.getContainer();

			return container.getContent();
		}

		/** @private */
	}, {
		key: 'setContent_',
		value: function setContent_(content) {
			var container = this.frame_.getContainer();

			var prevContent = this.getContent_();
			if (prevContent && prevContent.isLoaded() && prevContent === content) {
				// Already loaded a same content
				container.layout();
				return;
			}

			this.detachContent_();

			container.setContent(content);

			this.attachContent_();
			this.setTitle_(content.getTitle());

			content.load();
			container.layout();
		}

		/** @private */
	}, {
		key: 'layout_',
		value: function layout_(forceLayout) {
			var needsResizing = forceLayout || this.repositionOnScroll_;

			if (needsResizing) {
				this.animation_.resizeFrame(this.frame_);
			}
		}

		/** @private */
	}, {
		key: 'updatePager_',
		value: function updatePager_() {
			var pager = this.pager_;

			var page = pager.getPage();
			var totalPages = pager.getTotalPages();
			var text = String(page + 1) + ' of ' + String(totalPages);

			var label = this.pagerLabel_;
			label.setText(text);

			this.prevButton_.setDisabled(!pager.hasPrevious());
			this.nextButton_.setDisabled(!pager.hasNext());
		}

		/** @private */
	}, {
		key: 'updateContent_',
		value: function updateContent_() {
			this.updatePager_();

			var index = this.pager_.getPage();
			var content = this.contents_[index];
			this.setContent_(content);
		}

		/** @private */
	}, {
		key: 'delayedLayout_',
		value: function delayedLayout_(forceLayout) {
			var _this4 = this;

			if (this.layoutTimeout_) {
				clearTimeout(this.layoutTimeout_);
			}

			this.layoutTimeout_ = setTimeout(function () {
				_this4.layout_(forceLayout);
			}, Vanillabox.DELAYED_LAYOUT_DELAY);
		}

		/** @private */
	}, {
		key: 'onWindowResize_',
		value: function onWindowResize_() {
			this.delayedLayout_(false);
		}

		/** @private */
	}, {
		key: 'onWindowScroll_',
		value: function onWindowScroll_() {
			this.delayedLayout_(false);
		}

		/** @private */
	}, {
		key: 'onDocumentKeyUp_',
		value: function onDocumentKeyUp_(e) {
			if (!this.supportsKeyboard_) {
				return;
			}

			switch (e.keyCode) {
				case 27:
					// Escape
					this.hide();
					break;
				case 37:
					// Left
					this.previous();
					break;
				case 39:
					// Right
					this.next();
					break;
			}
		}

		/** @private */
	}, {
		key: 'onTargetElementClick_',
		value: function onTargetElementClick_(e) {
			var index = this.targetElems_.index(e.delegateTarget);

			if (index < 0) {
				return;
			}

			e.preventDefault();

			this.show(index);
		}

		/** @private */
	}, {
		key: 'onPagerChange_',
		value: function onPagerChange_() {
			this.updateContent_();
		}

		/** @private */
	}, {
		key: 'onMaskClick_',
		value: function onMaskClick_() {
			if (!this.closeButtonEnabled_) {
				this.hide();
			}
		}

		/** @private */
	}, {
		key: 'onCloseButtonClick_',
		value: function onCloseButtonClick_() {
			if (!this.closeButtonEnabled_) {
				return;
			}

			this.hide();
		}

		/** @private */
	}, {
		key: 'onPreviousButtonClick_',
		value: function onPreviousButtonClick_() {
			this.previous();
		}

		/** @private */
	}, {
		key: 'onNextButtonClick_',
		value: function onNextButtonClick_() {
			this.next();
		}

		/** @private */
	}, {
		key: 'onContentComplete_',
		value: function onContentComplete_(e, success) {
			this.layout_(true);

			var content = e.target;
			var index = Util.Array.indexOf(this.contents_, content);
			if (index >= 0) {
				$(this).trigger(Events.LOAD, [success, content, index]);
			}
		}

		/** @private */
	}, {
		key: 'onContentClick_',
		value: function onContentClick_(e) {
			var pager = this.pager_;

			e.stopPropagation();

			if (!this.grouping_) {
				this.hide();
				return;
			}

			if (!pager.hasNext()) {
				this.hide();
			} else {
				this.next();
			}
		}

		/** @private */
	}, {
		key: 'onContentHide_',
		value: function onContentHide_(e, container, content) {
			if (content.shouldUnloadOnHide()) {
				content.unload();
			}
		}
	}]);

	return Vanillabox;
})();

Vanillabox.DELAYED_LAYOUT_DELAY = 300;

module.exports = Vanillabox;

},{"./animation_provider.js":2,"./button.js":3,"./content_factory.js":6,"./empty_content.js":8,"./events.js":9,"./exception.js":10,"./frame.js":11,"./label.js":15,"./mask.js":16,"./pager.js":17,"./util.js":20}]},{},[18]);