/* ----------------------------------------

	Filename:				jquery.ceFlyout-0.1.js
	
	Original Author:		Scott Turner
	
	Version:				0.1

	PARAMETERS:
	
	[ Name ]				[ Data Type ]		[ Description ]
	
	flyout					( BOOLEAN )			The flyout element e.g. '#flyout'. If set to false plugin returns.
	direction				( INTEGER )			The direction that the flyout animates in. 0 = Down Right, 1 = Down Left, 2 = Up Right, 3 = Up Left.
	autoSize				( BOOLEAN )			If set to true the size of the flyout is worked out automatically, else width and height options area used instead.
	width					( INTEGER ) 		The width of the flyout. Only needed if autoSize is set to false.
	height					( INTEGER ) 		The height of the flyout. Only needed if autoSize is set to false.
	speed					( INTEGER )			The speed of which the flyout animates.
	offsetTop				( INTEGER )			The top offset of the flyout in relation to the obj the plugin was called on.
	offsetLeft				( INTEGER )			The left offset of the flyout in relation to the obj the plugin was called on.
	
-----------------------------------------*/

(function($){

	
	$.fn.ceFlyout = function(options){
	
		var defaults = {
			flyout				:	false,
			direction			:	0,
			autoSize			:	true,
			width				:	0,
			height				: 	0,
			speed				: 	500,
			offsetTop			:	0,
			offsetLeft			: 	0,
			appendToElem		: '.wrapper',
			flyoutHTML			: false,
			flyoutAbsolute		: false
		}
		
		var options = $.extend(defaults,options);

		return this.each(function() {

			var $obj 			= $(this),
				childWidth 		= new Array(),
				childHeight		= new Array(),
				fontSizes		= new Array(),
				xPos,
				yPos,
				leftPos,
				topPos,
				pointOffsetTop,
				pointOffsetLeft,
				flyoutHTML;
				
			if(!options.flyout){	
				return false;
			};
			
			//flyoutHTML = options.flyoutHTML.join('');			
			flyoutHTML = options.flyoutHTML;

			// Dynamically add the flyout to the container
			$(options.appendToElem).append(flyoutHTML);
	
			// Add CSS for flyout container
			$(options.flyout).css({
				display		: 'block',
				visibility	: 'hidden',
				position	: 'absolute'/*,
				overflow	: 'hidden'*/
			});
	
			if(options.flyoutAbsolute){
				xPos = options.offsetLeft;
				yPos = options.offsetTop;
			}
			else {
				// Work out where in relation to the obj the flyout needs to be offset to
				pointOffsetTop 	= $obj.css('top');	
				pointOffsetLeft = $obj.css('left');
				
				yPos = parseInt(pointOffsetTop.replace('px',''),10) + options.offsetTop;
				xPos = parseInt(pointOffsetLeft.replace('px',''),10) + options.offsetLeft;
			}

			// Save the widths, heights, and font sizes for each descendant in the flyout
			$(options.flyout).find('*').each(function(i){			
				childWidth[i] 	= $(this).width();
				childHeight[i]	= $(this).height();	
				fontSizes[i] 	= parseInt($(this).css('font-size'),10);
			});
			
			if(options.autoSize){
				options.width 	= $(options.flyout).width();
				options.height 	= $(options.flyout).height();
			}
			
			// Hide the flyout and all of the descendants of the flyout
			$(options.flyout).css({ display : 'none' , visibility : 'visible' , width : '0px', height : '0px', top : yPos + 'px' , left : xPos + 'px' });
			
			$(options.flyout).find('*').each(function(i){
				$(this).css({ fontSize : '0px' , width : '0px' , height : '0px' });
			});

			// Work out positions based on direction given
			if(options.direction == 0){
				leftPos = xPos;
				topPos 	= yPos;
			}
			else if(options.direction == 1) {
				leftPos = xPos - options.width;
				topPos 	= yPos;
			}
			else if(options.direction == 2){
				leftPos = xPos;
				topPos 	= yPos - options.height;
			}
			else if(options.direction == 3){
				leftPos = xPos - options.width;
				topPos 	= yPos - options.height;
			}

			$(options.flyout).css({ top : yPos + 'px' , left : xPos + 'px' }).show().animate({ 
				width 	: options.width + 'px', 
				height 	: options.height + 'px', 
				top 	: topPos + 'px', 
				left 	: leftPos + 'px'
			},options.speed,function(){
			
				$(options.flyout).addClass('open');
			
				if($.isFunction(options.onComplete)){
					options.onComplete.call(this);
				};
			
			});
			
			$(options.flyout).find('*').each(function(i){
				$(this).animate({ width : childWidth[i] + 'px' , height : childHeight[i] + 'px' , fontSize : fontSizes[i] + 'px' },options.speed);
			});

		});

	}

})(jQuery);

(function($){

	
	$.fn.ceFlyoutClose = function(options){
	
		var defaults = {
			direction	:	0,
			speed		: 	500
		}
		
		var options = $.extend(defaults,options);

		return this.each(function(){
		
			var $obj = $(this),
				width, 
				height,
				xPos,
				yPos,
				leftPos,
				topPos;
			
			width 	= $obj.width();
			height 	= $obj.height();
			
			xPos	= parseInt($obj.css('left').replace('px',''),10);
			yPos 	= parseInt($obj.css('top').replace('px',''),10);			
			
			// Work out positions based on direction given
			if(options.direction == 0){
				leftPos = xPos;
				topPos 	= yPos;
			}
			else if(options.direction == 1) {
				leftPos = xPos + width;
				topPos 	= yPos;
			}
			else if(options.direction == 2){
				leftPos = xPos;
				topPos 	= yPos + height;
			}
			else if(options.direction == 3){
				leftPos = xPos + width;
				topPos 	= yPos + height;
			}
		
			$obj.animate({ width : '0px' , height : '0px' , top : topPos + 'px' , left : leftPos + 'px' },options.speed,function(){ $(this).remove(); });
			$obj.find('*').each(function(i){
				$(this).animate({ width : '0px' , height : '0px' , fontSize : '0px' },options.speed);
			});

		});

	}

})(jQuery);