/**
 * @author aprian
 */


/* 
 * AJAX POPUP DETAIL
 * @example: $('a').popupDetail({ajaxScript: '/scripts/ajax/example.cfm'})
 * @options:
 * 		- ajaxScript : [optional|string|can be taken from the a href or define separately using this variable. Variable for the server side is define/taken from the a href '?var=1&var2=2']
 * 		- width : [optional|int|300 (in px)]
 * 		- beforeAjax : [optional|function|function to run before running ajax function]
 * 		- afterAjax : [optional|function|function to run after running ajax function]
 * 		- afterClose : [optional|function|function to run after running close tooltip function]
 * 		- loader : [optional|string|'/assets/images/ajax-loader.gif']
 * 		- parentDiv : parent ID or Class where the modal will attached to
 * 		- wrapper : 
 */
(function($) {
	$.fn.popupDetail = function(options) {
		/* setup the options */
		var defaults = {
			width: 300,
			ajaxScript: null,
			beforeAjax: function(){},
			afterAjax: function(){},
			loader: '/assets/images/ajax-loader.gif',
			afterClose: function(){},
			parentDiv: ''
		};
		var options = $.extend({},defaults, options);
		
		return this.each(function() {
			$(this).click(function() {
				obj = $(this);
				if(options.ajaxScript === ''){
					return true;
				} else {
					
					/* Remove tooltip if exist */
					$('.outerTooltip').closePopup({afterCloseThis: function(){
							options.afterClose.call(this);	
						}
					});
					
					/* Set tooltip position, if parentDiv is defined it will attached to the parentDiv. 
					 * If not it will attached right to the click object.
					 */ 
					var posOffset, posObj, posX, posY;
					if(options.parentDiv !== ''){
						$(options.parentDiv).css("position","relative");
						posObj = $(options.parentDiv).offset();
						posX = posObj.left;
						posY = posObj.top + 0;
					} else {
						posOffset = obj.width();
						posObj = obj.offset();
						posX= posObj.left + posOffset;
						posY = posObj.top - 0;	
					}
					
					
					/* create tooltip */
					var closeButton = $('<div></div>')
							.addClass('closePopup')
							.prepend('<a href=\"\">close</a>');
					closeButton.children('a').bind('click', function(){
						$('.outerTooltip').closePopup({afterCloseThis: function(){
								options.afterClose.call(this);	
							}
						});
						return false;
					});
							
					var innerTooltip = $('<div></div>')
							.addClass('innerTooltip')
							.css({
									'width': options.width
								})
							.hide();
					
					var outerTooltip = $('<div></div>')
							.addClass('outerTooltip')
							.css({
									'z-index': 1000,
									'position': 'absolute',
									'top': posY,
									'left': posX
								})
							.prepend(innerTooltip)
							.prependTo($('body'))	
							.hide();
							
					/* setup ajax link from the href of the clicked obj. */
					var objLink = obj.attr('href');
					var ajaxHref = objLink.split('?')[0];
					var ajaxVar = '?' + objLink.split('?')[1];
					var ajaxLink;
					if(options.ajaxScript){
						ajaxLink = options.ajaxScript + ajaxVar;	
					} else {
						if(ajaxHref === ''){
							ajaxLink = document.location.href + ajaxVar 
						} else {
							ajaxLink = objLink;
						}
					}
					
					/* setup ajax loader */
					if(options.loader !== '') {
						var ajaxLoader = '<div id=\"xloader\"><img src=\"' + options.loader +'\" /></div>';
					} else {
						var ajaxLoader = ''
					}
					
					/* setup ajax start & stop */
					$(innerTooltip).ajaxSend(function(){
						
						/* function before ajax start */
						options.beforeAjax.call(this);
						
						/* add & show loader */
						$(this).parent().append(ajaxLoader);
						$(this).parent().show();
						
					}).ajaxSuccess(function(){
						
						/* remove loader */
						setTimeout(function() {
							$('#xloader').fadeOut(function(){
								$(this).remove();
							});
						},100);
						
						/* function after ajax end */
						options.afterAjax.call(this);
						
					});
					
					/* load ajax content to the tooltip */
					$(innerTooltip).load(ajaxLink, function(){
						
						$this = $(this);
						/* show the tooltip */
						setTimeout(function() {
							$this.slideDown(700, function(){
							});
						},300);
						
						/* add close button */
						innerTooltip.prepend(closeButton);
						
					});
								
					return false;	
				}
				
			})
		});
	};
	
	/* function to close tooltip */
	$.fn.closePopup = function(options) {

		var defaults = {
			afterCloseThis: function(){}
		};
		var options = $.extend({},defaults, options);

		return this.each(function(){
			$(this).fadeOut(function(){
				$(this).remove();
			});
			options.afterCloseThis.call(this);
		});
	};
	
})(jQuery);