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

	Filename:				jquery.ceAnnotation-1.0.1.js
	
	Original Author:		Scott Turner
	
	Version:				1.0.1
	
	Depends on:				jQuery ui framework (For easing animations only - developed with version: jquery-ui-1.8.16 )

	PARAMETERS:
	
	[ Name ]				[ Data Type ]		[ Description ]
	
	direction				( INTEGER )			The direction of the line. 0 = down, 1 = left, 2 = top, 3 = right
	posX					( INTEGER )			The left offset where the annotation starts from
	posY					( INTEGER )			The top offset where the annotation starts from
	distance				( INTEGER )			How many pixels the line will be
	startDelay				( INTEGER )			Delay in milliseconds before the beginning dot appears
	stageSpeed				( INTEGER ) 		Delay in milliseconds before the line begins rendering
	pulsate					( BOOLEAN )			If set to true the point will pulsate to the size specified in the pulseSize paramter
	pulseSpeed				( INTEGER )			The speed of the pulse
	lineSize				( INTEGER )			The overall depth of the line
	lineEffect				( EASING )			Easing effect for the line animation
	lineEffectSpeed			( INTEGER )			How fast the easing effect runs

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

(function($){

	$.fn.ceAnnotation = function(options){
	
		var defaults = {
			direction		: 0,
			posX			: 50,
			posY			: 50,
			distance		: 150,
			startDelay		: 500,
			stageSpeed		: 250,
			pulsate			: false,
			pulseSize		: 48,
			pulseSpeed		: 200,
			lineSize		: 5,
			lineEffect		: 'easeInOutCirc',
			lineEffectSpeed	: 200
		};
		
		var options = $.extend(defaults,options);
		
		var addCallback = {
		
			onComplete: function(){
				if($.isFunction(options.onComplete)){
					options.onComplete.call(this);
				};
			}
			
		}
	
		return this.each(function() {

			var $obj 			= $(this),
				$point			= $obj.find('.point'),
				offset  		= $obj.offset(),
				interval		= null,
				intervalSpeed	= null,
				pointX,
				pointY,
				annotationHeight,
				annotationWidth,
				pointTop,
				pointLeft,
				originalWidth,
				originalHeight,
				currentStage	= 0;
				
			// Add class to obj based on direction
			if(options.direction == 0 ){
				$obj.addClass('ceAnnotationDown');
			}
			else if(options.direction == 1 ){
				$obj.addClass('ceAnnotationLeft');
			}
			else if(options.direction == 2 ){
				$obj.addClass('ceAnnotationUp');
			}
			else if(options.direction == 3 ){
				$obj.addClass('ceAnnotationRight');
			};

			// Do initial delay
			interval = setTimeout(function(){
				currentStage = 1;
			},options.startDelay);

			intervalSpeed = options.stageSpeed;
			
			interval = setInterval(function(){
				if(currentStage == 1){
					
					$obj.css({ visibility : 'visible' , left : options.posX , top : options.posY + 'px' });
					
					originalWidth	= $point.width();
					originalHeight	= $point.height();

					pointTop		= $point.height();
					pointLeft		= $point.width();
					
					$obj.fadeIn(200);
					currentStage = 2;
					
				}
				else if(currentStage == 2){

					if(options.direction == 0){
					
						pointTop = options.distance;
						pointLeft = (pointLeft - options.lineSize) / 2;
						$point.css({ visibility : 'visible' , top : pointTop + 'px' , left : '-' + pointLeft + 'px'  });

						$obj.animate({ height : options.distance }, options.lineEffectSpeed, options.lineEffect,function(){
						
							if(options.pulsate){
								pulsePosX 		= (options.pulseSize - options.lineSize) / 2;
								originalPosX	= (originalWidth - options.lineSize) / 2;

								$point.animate({ width : options.pulseSize + 'px' , height : options.pulseSize + 'px' , left : '-' + pulsePosX +'px' },options.pulseSpeed,function(){	
									$point.animate({ width :  originalWidth + 'px' , height : originalHeight + 'px' , left : '-' + originalPosX + 'px' },options.pulseSpeed);
								});
							};
							
							addCallback.onComplete();

						});

					}
					else if(options.direction == 1){

						pointTop = (pointTop - options.lineSize) / 2;
						$point.css({ visibility : 'visible' , left : '-' + originalWidth + 'px' , top : '-' + pointTop + 'px' });

						options.posX -= options.distance - options.lineSize;
						$obj.animate({  width : options.distance + 'px' , left : options.posX + 'px'  }, options.lineEffectSpeed, options.lineEffect,function(){
						
							if(options.pulsate){
								pulsePosX		= options.pulseSize;
								pulsePosY 		= (options.pulseSize - options.lineSize) / 2;
								
								originalPosX	= (originalWidth - options.lineSize) / 2;
								originalPosY	= (originalHeight - options.lineSize) / 2;

								
								$point.animate({ width : options.pulseSize + 'px' , height : options.pulseSize + 'px' , top : '-' + pulsePosY + 'px' , left : '-' + pulsePosX + 'px' },options.pulseSpeed,function(){
									$point.animate({ width :  originalWidth + 'px' , height : originalHeight + 'px' , top : '-' + originalPosY + 'px' , left : '-' + originalWidth + 'px' },options.pulseSpeed);
								});
							};
							
							addCallback.onComplete();
						
						});
					
					}
					else if(options.direction == 2){

						pointLeft = (originalWidth - options.lineSize) / 2;
						$point.css({ visibility : 'visible' , top : '-' + originalHeight + 'px' , left : '-' + pointLeft + 'px' });
						
						options.posY -= options.distance - options.lineSize;
						$obj.animate({  height : options.distance + 'px' , top : options.posY + 'px'  }, options.lineEffectSpeed, options.lineEffect,function(){
						
						
							if(options.pulsate){
								pulsePosX		= (options.pulseSize - options.lineSize) / 2;
								pulsePosY 		= (options.pulseSize - options.lineSize) / 2;
								originalPosX	= (originalWidth - options.lineSize) / 2;
				
								$point.animate({ width : options.pulseSize + 'px' , height : options.pulseSize + 'px' , left : '-' + pulsePosX +'px' , top : '-' + options.pulseSize +'px' },options.pulseSpeed,function(){
									$point.animate({ width :  originalWidth + 'px' , height : originalHeight + 'px' , top : '-' + originalHeight + 'px' , left : '-' + originalPosX + 'px' },options.pulseSpeed);
								});
							};
							
							addCallback.onComplete();
						
						});
					
					}
					else if(options.direction == 3){
					
						pointTop 	= (originalHeight - options.lineSize) / 2;
						$point.css({ visibility : 'visible' , left: options.distance + 'px' , top : '-' + pointTop + 'px' });

						$obj.animate({  width : options.distance + 'px' }, options.lineEffectSpeed, options.lineEffect,function(){
						
							if(options.pulsate){
								pulsePosY 		= (options.pulseSize - options.lineSize) / 2;
								originalPosX	= (originalWidth - options.lineSize) / 2;
								originalPosY	= (originalHeight - options.lineSize) / 2;

								$point.animate({ width : options.pulseSize + 'px' , height : options.pulseSize + 'px', top : '-' + pulsePosY + 'px'  },options.pulseSpeed,function(){
									$point.animate({ width :  originalWidth + 'px' , height : originalHeight + 'px' , top : '-' + originalPosY + 'px' },options.pulseSpeed);
								});
							};
							
							addCallback.onComplete();
						
						});

					}
					
					currentStage = 3;
		
				}
				else if(currentStage == 3){
				
					clearInterval(interval);
					
				}
				
			},intervalSpeed);

		});

	}

})(jQuery);