// Animates the dimensional changes resulting from altering element contents
// Usage examples: 
//    $("#myElement").showHtml("new HTML contents");
//    $("div").showHtml("new HTML contents", 400);
//    $(".className").showHtml("new HTML contents", 400, 
//                    function() {/* on completion */});
(function($)
{
   $.fn.animateLoad = function(parentObj, uri, speed, callback)
   {
      return this.each(function()
      {
         // The element to be modified
         var el = $(this);

         // Preserve the original values of width and height - they'll need 
         // to be modified during the animation, but can be restored once
         // the animation has completed.
         var finish = {width: this.style.width, height: this.style.height};

         // The original width and height represented as pixel values.
         // These will only be the same as `finish` if this element had its
         // dimensions specified explicitly and in pixels. Of course, if that 
         // was done then this entire routine is pointless, as the dimensions 
         // won't change when the content is changed.
         var cur = {height: el.height()+'px'};
		parentObj.css(cur);

         // Modify the element's contents. Element will resize.
         //el.html(html);
		el.load(uri,function()
		{
			// Capture the final dimensions of the element 
	         // (with initial style settings still in effect)
	         var next = {height: $(this).height()+'px'};

	         parentObj.css(cur) // restore initial dimensions
	            .animate(next, speed, function()  // animate to final dimensions
	            {
	               //parentObj.css(finish); // restore initial style settings
	               if ( $.isFunction(callback) ) callback();
	            });
		});

         
      });
   };


})(jQuery);

(function($)
{
   $.fn.animateFade = function(parentObj, showObj, speed, callback)
   {
      return this.each(function()
      {
         // The element to be modified
         var el = $(this);

         // Preserve the original values of width and height - they'll need 
         // to be modified during the animation, but can be restored once
         // the animation has completed.
         var finish = {width: this.style.width, height: this.style.height};

         // The original width and height represented as pixel values.
         // These will only be the same as `finish` if this element had its
         // dimensions specified explicitly and in pixels. Of course, if that 
         // was done then this entire routine is pointless, as the dimensions 
         // won't change when the content is changed.
         var cur = {height: el.height()+'px'};
		$(parentObj).css(cur);

         // Modify the element's contents. Element will resize.
         //el.html(html);
		el.fadeOut(speed,function()
		{
			// Capture the final dimensions of the element 
	         // (with initial style settings still in effect)
	         var next = {height: $(showObj).height()+'px'};

	         $(parentObj).css(cur) // restore initial dimensions
	            .animate(next, speed, function()  // animate to final dimensions
	            {
					$(showObj).fadeIn(speed,function()
					{
						if ( $.isFunction(callback) ) callback();
					});
	               
	               
	            });
		});

         
      });
   };


})(jQuery);