/***
	CONFIRM PLUGIN USING MODAL
***/

$.ajaxSetup ({
    // Disable caching of AJAX responses */
    cache: false
});

// Extend jquery without clogging namespace
(function($) {
		  
	// Centers something
	jQuery.fn.center = function () {
		this.css("position","fixed");
		this.css("top", ( $(window).height() - this.height() ) / 2+ "px");
		this.css("left", ( $(window).width() - this.width() ) / 2+ "px");
		return this;
	}
	
	// Show modal
	$.fn.showModal = function(){
		// Show the modal
		$(this).show();
		$(this).animate({
			//opacity: 'show'
		});
		
		
		// Center the modal
		$(this).find('#modalContent').center();
		
	}
	// Hide modal
	$.fn.hideModal = function(){
		$(this).hide();
	}
	
	$.fn.modal = function(settings) {
		// Defaults
		settings = jQuery.extend({
			 ajaxHref: false
		}, settings);	
		
		// Loop through each item
		this.each(function() {
						   
			$(this).focus(function(){
						
				$.ajax({
					type: "GET",
					url: "index.php?component=media&view=files&render=component",
					success: function(data){
						
						// Show the modal
						$('#modalBox').showModal(); 
						
						$('#modalContent').html(data);
						
						// Set some CSS and center it
						$('#modalContent').css({
							marginLeft: '0px',
							marginTop: '0px',
							width: '700px',
							height: '400px',
							padding:'10px',
							background: 'white',
							overflow: 'auto'
						}).center();
						
						Init('#modalBox');

					}
				});
								   
			});
						   
		});
	}

	// plugin is confirm()
	$.fn.confirm = function(settings) {
									
		// Defaults
		settings = jQuery.extend({
			 message: "Are you sure?",
			 title: "Confirm:",
			 yesValue: "Yes",
			 noValue: "No",
			 width: "200px",
			 template: $('#modalContent').html(),
			 modal: $('#modalBox').html(),
			 ajaxHref: false
		}, settings);	
								
		// Confirm function, returns true or false to callback
		function confirm(callBack)
		{
			// When the user clicks the confirm button, envoke call back
			$('#modalBox input[value='+settings.yesValue+']').click(function(){				
				callBack.call(this,true);									 
			});
			
			// When the user clicks cancel button, envoke call back
			$('#modalBox input[value='+settings.noValue+']').click(function(){
				callBack.call(this,false);									 
			});	
			
		}
		
		// Loop through each item
		this.each(function() {
						
			// element-specific code here
			if (this.tagName == 'FORM')
			{
				return confirm('are you sure?');
			}
			else
			{
				// If we click this item
				$(this).click(function(){
									   
					$("#modalBackdrop").show();		   
														
					// Reset the modal to the original html
					$('#modalBox').html(settings.modal);
					
					// If we click the backdrop
					$("#modalBackdrop").click(function(){
						
						// Hide the modal
						$('#modalBox').hideModal();
						
						$(this).hide();
						
						// Reset the modals html
						$('#modalBox').html(settings.modal);
						
					});
					
					// Set some CSS and center it
					$('#modalContent').css({
						marginLeft: '0px',
						marginTop: '0px',
						width: 'auto',
						height: 'auto'
					}).center();
					
					// If this item has the complete class (IE the user has confirmed
					if ($(this).hasClass('complete'))
					{
						// Remove this class
						$(this).removeClass('complete');
						
						// Hide the modal
						$('#modalBox').hide();
						
						// Return yes to the object
						return true;	
					}
								
					// Set the options
					$('#modalContent').html(settings.template);
					$('#modalMessage').html(settings.message);
					$('#modalHeading').html(settings.title);
					$('#modalYesValue').attr('value', settings.yesValue);
					$('#modalNoValue').attr('value', settings.noValue);
					$('#modalContent').css('width', settings.width);
					
					// This is the trigger
					var trigger = this;	
					
					confirm(function(result){
						
						// This is the callback, result will be true (confirmed) or false (canceled)
						if (result)
						{
							// Add the complete class, and mimic the click event (starting the whole process again, but this time with the complete class so it instantly returns true
							$(trigger).addClass('complete');
							$(trigger).click();	
						}
						else
						{
							// hide the modal
							$('#modalBox').hideModal();
							$('#modalBackdrop').hide();
						}
						
					});
					
					// Are we going to inject some ajax
					if(settings.ajaxHref)
					{
						// Assume image (need to fix this)
						var img = new Image();
						
						// What is the href
						var href = $(this).attr('href');
							
						// Set the heading
						$('#modalHeading').html($(this).attr('title')).hide();
						
						// Set the body
						$('#modalBody').html('<img src="/aeh/templates/system/images/ajax-loader.gif" style="padding:20px;" id="modalLoading" alt="Loading Please Wait."/>');
						
						// Show the modal
						$('#modalBox').showModal(); 
						
						// Add in the image
						$('#modalBody').append('<img style="display:none;" id="obj" src="'+href+'" />');
																		
						// Check to see if the image has loaded
						$("#obj").load(function(){
							
							// Remove the loading gif
							$('#modalLoading').remove();
							
							// Show the modal
							$('#modalBox').showModal();
							
							// This is the height of the modal without the image
							heightAdjust = $('#modalContent').height();
							widthAdjust = 0;
							
							// Show the modal
							$('#modalContent').show();
							
							$('#modalContent').css({
								
								width: $(this).width()+'px',
								height: ($(this).height()+heightAdjust)+'px'
												   
							});
							$('#modalContent').center();
							$("#obj").show();
							
							/*
							// Animate this badboy (expand from the middle outwards to the size of the image + its heightAdjust
							$('#modalContent').animate({
								width: $(this).width()+'px',
								height: ($(this).height()+heightAdjust)+'px',
								marginLeft: -($(this).width()/2)+'px',
								marginTop: -($(this).height()/2)+'px'
													   
							// Once complete fadein the image (called #obj)
							}, function(){
								$("#obj").fadeIn();
							});
							*/
																			   
						});
					}
					else
					{
						// Show the modal
						$('#modalBox').showModal(); 
					}
					
					
					
					return false;
					
				});	
			}
		
		});	
		
		//$('#modalBox').remove();
		
		// SO people can add functions after this is called
		return this;
		
	};

})(jQuery);