ghooghe
6/11/2013 - 3:20 PM

obox - custom lightbox made for PE/emeeting needs

obox - custom lightbox made for PE/emeeting needs

//obox
var obox = {
    resize: function(container) {
			var frame = $(window);
			
			// Resize
			container.css('width', frame.width() + 'px');
			container.css('height', frame.height() + 'px');
			
			// Center
			var content = $(container.find('.obox-content')[0]);
			content.css('left', (frame.width() - content.width())/2 + 'px');
		},
		
		getOBox: function(modal) {
			var container = $('<div class="obox" />'),
				mask = $('<div class="obox-mask" />'),
				close = $('<div class="obox-close">&#10006;</div>');
			mask.appendTo(container);
			var content = $('<div class="obox-content" />');
			close.appendTo(content);
			content.appendTo(container);
			
			// Handle window resizing
			$(window).bind('resize', _.debounce(function() {
				obox.resize(container);
			}, 250));
			
			container.appendTo(document.body);
			
			obox.resize(container);
			
			if (! modal) {
				close.on('tap', function(evt) {
					this.close();
				}.bind(this));
				mask.on('tap', function(evt) {
					this.close();
				}.bind(this));
			}
			return content;
		},
		
		close: function() {
			$('.obox').remove();
		}
};