image picker with full size editing

imagePicker.js

var createEditingWindow = function(image){
	var window = Ti.UI.createWindow({
		navBarHidden:true,
		backgroundColor:'black',
		orientationModes:[
	        Ti.UI.PORTRAIT
		]
	});
	
	var flexSpace = Ti.UI.createButton({
        systemButton:Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
	});
	
	var cancel = Ti.UI.createButton({
		title:'Cancel',
		style:Ti.UI.iPhone.SystemButtonStyle.BORDERED		
	});
	
	var choose = Ti.UI.createButton({
		title:'Choose',
		style:Ti.UI.iPhone.SystemButtonStyle.DONE		
	});
	
	var title = Ti.UI.createLabel({
		text:'Move and Scale',
		color:'white',
		font:{
			fontWeight:'bold',
			fontSize:16,
		},
		shadowColor:'#555555',
		shadowOffset:{x:0.0, y:1.0}			
	});

	var occupiedHeight = 64; // toolbar:44 statusbar:20

	var platform = {
		width:Ti.Platform.displayCaps.platformWidth,
		height:Ti.Platform.displayCaps.platformHeight - occupiedHeight
	}
	
	if(platform.width > platform.height){
		alert('This device not supported.');
	}
	
	var zoomScale = 1.0;
	var contentSize = { width:image.width, height:image.height};
	
	if(image.width > image.height){
		zoomScale = platform.width / image.width; // fit to shorter side
		contentSize.width  = image.width + 2;
		contentSize.height = (platform.height + 2) / zoomScale ;			
	}else{
		zoomScale = platform.width / image.height; // fit to shorter side
		contentSize.width =  (platform.width + 2) / zoomScale;
		contentSize.height = image.height + (platform.height - platform.width) / zoomScale;
	}
	
	var scrollView = Ti.UI.createScrollView({
		top:0,
		width:platform.width,
		height:platform.height,
		contentWidth:contentSize.width,
		contentHeight:contentSize.height,
    		minZoomScale:zoomScale,
		maxZoomScale:0.5,
		zoomScale:zoomScale,
    	});
	window.add(scrollView);
	
	var squareFrame = Ti.UI.createView({
		center:{
			x:platform.width / 2.0,
			y:platform.height / 2.0
		},
		backgroundColor:'transparent',
		borderWidth:1,
		borderColor:'white',
		touchEnabled:false,
		width:Math.min(platform.width, platform.height),
		height:Math.min(platform.width, platform.height)
	});
	window.add(squareFrame);
	
	var topPlate = Ti.UI.createView({
		top:0,
		height:(platform.height - platform.width) / 2.0,
		backgroundColor:'black',
		opacity:0.5
	});
	window.add(topPlate);
	
	var bottomPlate = Ti.UI.createView({
		bottom:44,
		height:(platform.height - platform.width) / 2.0,
		backgroundColor:'black',
		opacity:0.5
	});
	window.add(bottomPlate);

	var imageView = Ti.UI.createImageView({
		center:{
			x:scrollView.contentWidth  / 2.0,
			y:scrollView.contentHeight / 2.0
		},
		width:image.width,
		height:image.height
	});
	scrollView.add(imageView);
	
	var toolBar = Ti.UI.createToolbar({
		items:[cancel, flexSpace, title, flexSpace, choose],
		bottom:0,
		height:44
	});
	window.add(toolBar);
	
	var cropImage = function(image){
		var offset = { x:0.0, y:0.0 }
		if(scrollView.contentOffset){
			offset = scrollView.contentOffset;
		}
		
		var x = offset.x / scrollView.scale;
		var y = offset.y / scrollView.scale; 
		var w = scrollView.width / scrollView.scale;
		var h = scrollView.height / scrollView.scale;
		
		x -= (scrollView.contentWidth - image.width) / 2.0;
		y -= (scrollView.contentHeight - image.height) / 2.0;
		y += (h - w) / 2.0;			

		if(x < 0.0) { 
			x = 0.0; 
		}
		
		if(y < 0.0) {
			 y = 0.0; 
		}
		
		var l = Math.min(w, h);
		var cropRect = { 
			x:x, 
			y:y, 
			width:l,
			height:l
		};
		
		return {
			cropRect:cropRect,
			cropImage:image.imageAsResized(image.width, image.height).imageAsCropped(cropRect)
		}
	};

	var choosed = null;
	
	choose.addEventListener('click', function(){
		choosed = cropImage(image);
		window.close();
	});
	
	cancel.addEventListener('click', function(){
		choosed = null;
		window.close();
	});
	
	window.addEventListener('open', function(){
		imageView.image = image;
	});
	
	window.addEventListener('close', function(){
		if(choosed){
			window.fireEvent('success', { 
				cropRect:choosed.cropRect,
				media:choosed.cropImage,
				original:image
			});		
		}else{
			window.fireEvent('cancel', {
				original:image
			});
		}
	});
	
	return window;
}

var openPhotoGallery = function(args){
	var allowEditing = false;
	
	if(args && typeof args.allowEditing !== 'undefined'){
		allowEditing = args.allowEditing;
	}

	var success = function(e) {
		if(allowEditing){
			var editingWindow = createEditingWindow(e.media);
			
			editingWindow.addEventListener('success', function(e){
				if(args && args.success){
					args.success(e);
				}
			});
			
			editingWindow.addEventListener('cancel', function(e){
				if(args && args.cancel){
					args.cancel(e);					
				}
			});
			editingWindow.open({ modal:true })
		}else{
			if(args && args.success){
				args.success(e);
			}
		}
	};	
	
	var cancel = function(e){
		if(args.cancel){
			args.cancel(e);
		}
	};	
	
	var error  = function(e) {
		if(args.error){
			args.error(e);			
		}
	};
	
	Ti.Media.openPhotoGallery({
		allowEditing:false,
		success:success,
		cancel:cancel,
		error:error
	});
};

exports.openPhotoGallery = openPhotoGallery;