A Jquery Pane UI Plugin

panes.ion.ui.jquery.src.js

(function($){	
	var IONPANE_ORIENTATIONS_HORZ = 1,
	    IONPANE_ORIENTATIONS_VERT = 2,
	    IONPANE_USE_CONTAINER = 'container',
	    IONPANE_USE_DOCUMENT = 'document';
	    
	$.widget('ion.panes' , {
		version : '0.0.0',
		options : {
			orientation : IONPANE_ORIENTATIONS_VERT,
			size : '30%',
			resizeable : true,
			minSize : '10%',
			use : IONPANE_USE_CONTAINER
		},
		pane1 : null,
		pane2 : null,
		currentSize : null,
		pxMinSize : 0,
		_create : function() 
		{				
			var self = this,
				options = self.options;

			    self.pane1 = $.el('div' , {'class' : 'pane1 pane'}).css('height' , self.getTotal(true));
				self.pane2 = $.el('div' , {'class' : 'pane2 pane'}).css('height' , self.getTotal(true));	

				self.element.append(self.pane1).append(self.pane2)
				self.pxMinSize = options.minSize.match(/(\d+)%/mg) ? self.convertToPx(options.minSize) : options.minSize;

				var intial = options.size.match(/(\d+)%/mg) ? self.convertToPx(options.size) : options.size;
				self.resizeBy(intial , false);

				if ( options.resizeable ) { 
					self.element.append(self.addResizeHandle()); 
					self.logSize();
				}
		},

		getTotal : function( other ) 
		{
			var rel = this.options.use == IONPANE_USE_CONTAINER ? this.element : $(document);
			
			if ( other != undefined && other ) {
				return this.options.orientation == IONPANE_ORIENTATIONS_VERT ? rel.height() : rel.width();
			}
			return this.options.orientation == IONPANE_ORIENTATIONS_VERT ? rel.width() : rel.height();
		},

		resizeBy : function( size , log , bind )
		{
			if ( bind == undefined ) {
				bind = this;
			}

			console.log(size)

			if ( typeof(size) !== 'number') {
				size = parseInt(size.replace(/(\D)*/mg , '') , 10);
			}
			if ( size >= (bind.getTotal() - bind.pxMinSize)) {
				size = bind.getTotal() - bind.pxMinSize;
			}

			if ( size <= bind.pxMinSize ) {
				size = bind.pxMinSize;
			}

			var pane2 = bind.getTotal() - size;
			
			dimension = bind.options.orientation == IONPANE_ORIENTATIONS_VERT ? 'width' : 'height';
			bind.pane1.css(dimension , size+'px');
			bind.pane2.css(dimension , pane2+'px');  

			if ( log == undefined || log ) {
				bind.logSize();
			}
		},

		logSize : function() 
		{
			this.currentSize = this.options.orientation == IONPANE_ORIENTATIONS_VERT ? this.pane1.width() : this.pane1.height()
				
		},

		convertToPx : function( number ) 
		{
			number = parseInt(number.replace(/(\D)*/mg , '') , 10);		
			return ((this.getTotal() / 100) * number);
		},

		addResizeHandle : function() 
		{
			var handle = $.el('div' , {'class' : 'resizerHandle'}),
			    intial = this.options.size.match(/(\d+)%/mg) ? this.convertToPx(this.options.size) : this.options.size,
				self = this;

			if ( self.options.orientation == IONPANE_ORIENTATIONS_VERT ) {
				handle.css({
					position : 'absolute',
					left : intial,
					top : 0,
					width : '4px',
					height : self.getTotal(true),
					cursor : 'w-resize'
				})
			}
			else if ( self.options.orientation == IONPANE_ORIENTATIONS_HORZ ) {
				handle.css({
					position : 'absolute',
					top : initial,
					left : 0,
					width : self.getTotal(true),
					height : '4px',
					cursor : 'h-resize'
				})
			}

			handle.draggable({
				axis : ( self.options.orientation == IONPANE_ORIENTATIONS_VERT ? 'x' : 'y')
			})

			handle.bind('drag' , function(e , ui){
				var position = self.options.orientation == IONPANE_ORIENTATIONS_VERT ? $(this).position().left : $(this).position().top;
				self.resizeBy(position);
			});

			handle.bind('stop' , function(e , ui){
				var position = self.options.orientation == IONPANE_ORIENTATIONS_VERT ? $(this).position().left : $(this).position().top;
				self.resizeBy(position);				
			})

			handle.dblclick(function(e){
				self._minMax(e , self);
			});

			return handle;
		},

		_minMax : function(e , bind) {
				var el = $('.resizerHandle'),
				position = bind.options.orientation == IONPANE_ORIENTATIONS_VERT ? 'left' : 'top';

				if ( el.hasClass('min') ) {
					var newSize = bind.currentSize;
					el.removeClass('min').draggable('enable');
					bind.pane1.off('dbclick');
				}
				else {
					var newSize = bind.pxMinSize;
					el.addClass('min').draggable('disable');
					bind.pane1.on('dblclick' , function(e){
						bind._minMax(e , bind);
					})
				}

				bind.resizeBy( newSize, false , bind);	
				el.css(position , newSize);
		}, 

		_setOption : function( key , value ) 
		{
			if ( this.options[key] != undefined ) {
				this.options[key] = value;
			}
			else {
				throw key+' is not a valid option'
			}
		},

		_destroy : function() 
		{
			
		}
	});
})(jQuery);