filterablecamera CommonJS style.

app.js

filterablecamera = require('filterablecamera').Filterablecamera({
	squared: true,
	showControls: true,
	animated: false,
	autohide: true,
	saveToPhotoGallery: true,
	quality: 'Photo',
	backgroundImage: null
});

filterablecamera.showCamera({
	success: function(e){
		Ti.API.info(e);
	},
	error: function(e){
		Ti.API.info(e);
	},
	cancel: function(e){
		Ti.API.info(e);
	}
});

filterablecamera.js

var exports = exports || this;
exports.Filterablecamera = (function(global){
	var K = function(){};

	var Filterablecamera = function(options) {
		var self;

		if (this instanceof Filterablecamera) {
			self = this;
		} else {
			self = new K();
		}

		if (!options) { options = {}; }

		self.squared = options.squared || true;
		self.showControls = options.showControls || true;
		self.animated = options.animated || false;
		self.autohide = options.autohide || true;
		self.saveToPhotoGallery = options.saveToPhotoGallery || true;
		self.quality = options.quality || 'High';
		self.backgroundImage = options.backgroundImage || null;

		self.overlay = null;
		self.activeFilter = 'Normal';

		self.module = require('jp.msmc.filterablecamera');

		self.module.addEventListener('change', function(e){
			switch (e.target) {
				case 'inputSource':
					self.module.inputSource = self.module.inputSource === self.module.INPUT_SOURCE_BACK ? self.module.INPUT_SOURCE_FRONT : self.module.INPUT_SOURCE_BACK;
					break;
				case 'tiltshift':
					self.overlay.showTiltshift({
						callback: function(e){
							self.module.tiltshift = e;
						}
					});
					break;
				case 'flashMode':
					self.overlay.showFlashMode({
						callback: function(e){
							self.module.flashMode = e;
						}
					});
					break;
				case 'activeFilter':
					self.overlay.showActiveFilter({
						callback: function(e){
							self.module.activeFilter = e.filter;
							self.activeFilter = e.title;
						}
					});
					break;
			}
		});

		return self;
	};

	K.prototype = Filterablecamera.prototype;

	Filterablecamera.prototype.showCamera = function(options){
		var self = this;

		if (!options) { options = {}; }

		self.overlay = self.createOverlay();

		self.module.showCamera({
			squared: self.squared,
			showControls: self.showControls,
			animated: self.animated,
			autohide: self.autohide,
			saveToPhotoGallery: self.saveToPhotoGallery,
			quality: self.quality,
			backgroundImage: self.backgroundImage,
			overlay: self.overlay,
			success: options.success,
			error: options.error,
			cancel: options.cancel
		});
	};

	Filterablecamera.prototype.createOverlay = function(){
		var self = this;

		var callback;
		var selector;

		var settingView = Ti.UI.createView({
			opacity: 0.0
		});

		var settingShow = function(){
			settingView.animate({
				duration: 200,
				opacity: 0.9
			});
		};

		var settingHide = function(selected){
			settingView.animate({
				duration: 200,
				opacity: 0.0
			}, function(){
				selector.getChildren().forEach(function(value, key, array){
					selector.remove(value);
				});
				settingView.remove(selector);

				if (callback) {
					callback(selected);
				}
			});
		};

		settingView.showTiltshift = function(params){
			var tiltshift = [
				{
					image: 'images/tiltshift_off.png',
					value: self.module.TILTSHIFT_OFF
				},
				{
					image: 'images/tiltshift_circle.png',
					value: self.module.TILTSHIFT_CIRCLE
				},
				{
					image: 'images/tiltshift_line.png',
					value: self.module.TILTSHIFT_LINE
				}
			];

			var selectorView = Ti.UI.createView({
				top: 50,
				left: 180,
				width: 48,
				height: 40 * tiltshift.length + 8,
				backgroundImage: 'images/bg.png',
				borderWidth: 2.0,
				borderColor: '#cccccc',
				borderRadius: 15.0
			});
			settingView.add(selectorView);
			selector = selectorView;

			tiltshift.forEach(function(value, key, array){
				var imageView = Ti.UI.createImageView({
					top: ((key === 0) ? 8 : 8 * (key + 1)) + key * 32,
					left: 8,
					width: 32,
					height: 32,
					image: value.image,
					tiltshift: value.value,
					borderRadius: 6
				});
				selectorView.add(imageView);

				imageView.addEventListener('click', function(e){
					settingHide(this.tiltshift);
				});
			});

			if (params.callback) {
				callback = params.callback;
			}

			settingShow();
		};

		settingView.showFlashMode = function(params){
			var flashMode = [
				{
					image: 'images/flash_off.png',
					value: self.module.FLASH_MODE_OFF
				},
				{
					image: 'images/flash_on.png',
					value: self.module.FLASH_MODE_ON
				},
				{
					image: 'images/flash_auto.png',
					value: self.module.FLASH_MODE_AUTO
				}
			];

			var selectorView = Ti.UI.createView({
				top: 50,
				left: 267,
				width: 48,
				height: 40 * flashMode.length + 8,
				backgroundImage: 'images/bg.png',
				borderWidth: 2.0,
				borderColor: '#cccccc',
				borderRadius: 15.0
			});
			settingView.add(selectorView);
			selector = selectorView;

			flashMode.forEach(function(value, key, array){
				var imageView = Ti.UI.createImageView({
					top: ((key === 0) ? 8 : 8 * (key + 1)) + key * 32,
					left: 8,
					width: 32,
					height: 32,
					image: value.image,
					flashMode: value.value,
					borderRadius: 6
				});
				selectorView.add(imageView);

				imageView.addEventListener('click', function(e){
					settingHide(this.flashMode);
				});
			});

			if (params.callback) {
				callback = params.callback;
			}

			settingShow();
		};

		settingView.showActiveFilter = function(params){
			var filters = [];

			filters.push({
				title: 'Normal',
				image: 'images/normal.png',
				filter: new self.module.Filter(function(){})
			});

			filters.push({
				title: 'Gray',
				image: 'images/gray.png',
				filter: new self.module.Filter(function(){
					this.grayscale();
				})
			});

			filters.push({
				title: 'Vintage',
				image: 'images/vintage.png',
				filter: new self.module.Filter(function(){
					this.sepia(0.8)
						.vignette(0.8, 0.5); 
				})
			});

			filters.push({
				title: 'OrangePeel',
				image: 'images/orangepeel.png',
				filter: new self.module.Filter(function(){
					this.curves({
						chan:'rgb', 
						start:[0.0, 0.0], 
						ctrl1:[0.4, 0.19], 
						ctrl2:[0.55, 0.78], 
						end:[1.0, 1.0]})
						.vibrance(-0.3)
					    .saturation(-0.3)
					    .colorize('#ff9000', 0.3)
					    .contrast(-0.05)
					    .gamma(1.4);
				})
			});

			filters.push({
				title: 'Lomo',
				image: 'images/lomo.png',
				filter: new self.module.Filter(function(){
					this.brightness(0.15)
					    .exposure(0.15)
					    .curves({ 
					    	chan:'rgb', 
					    	start:[0.0, 0.0], 
					    	ctrl1:[0.78, 0.0], 
					    	ctrl2:[0.6, 1.0], 
					    	end:[1.0, 1.0]})
					    .saturation(-0.2)
					    .gamma(1.8)
					    .vignette(0.5, 0.6)
					    .brightness(0.05);
				})
			});

			filters.push({
				title: 'Love',
				image: 'images/love.png',
				filter: new self.module.Filter(function(){
					this.brightness(0.05)
					    .exposure(0.08)
					    .colorize('#c42007', 0.3)
					    .vibrance(0.5)
					    .gamma(1.3);
				})
			});

			var selectorView = Ti.UI.createScrollView({
				bottom: 44,
				height: 64,
				contentWidth: 'auto',
				contentHeight: 64
			});
			settingView.add(selectorView);
			selector = selectorView;

			filters.forEach(function(value, key, array){
				var imageView = Ti.UI.createImageView({
					top: 4,
					left: ((key === 0) ? 8 : 8 * (key + 1)) + key * 48,
					right: (key + 1 === array.length && array.length >= 6 ? 8 : null),
					width: 48,
					height: 48,
					image: value.image,
					title: value.title,
					activeFilter: value.filter,
					borderRadius: 6,
					borderColor: '#2b3540'
				});
				selectorView.add(imageView);

				imageView.addEventListener('click', function(e){
					settingHide({ title: this.title, filter: this.activeFilter });
				});

				var textView = Ti.UI.createLabel({
					bottom: 0,
					left: ((key === 0) ? 8 : 8 * (key + 1)) + key * 48,
					right: (key + 1 === array.length && array.length >= 6 ? 8 : null),
					width: 48,
					color: self.activeFilter === value.title ? '#ffcc44' : '#fff',
					text: value.title,
					height: 14,
					font: { fontSize: 10 },
					textAlign: 'center'
				});
				selectorView.add(textView);
			});

			if (params.callback) {
				callback = params.callback;
			}

			settingShow();
		};

		return settingView;
	};

	return Filterablecamera;
})(this);