DIV center is not workin

DIV center is not workin

Dear All


I am using following code from above web page
  1. (function($){
  2.     $.fn.extend({
  3.         center: function () {
  4.             return this.each(function() {
  5.                 var top = ($(window).height() - $(this).outerHeight()) / 2;
  6.                 var left = ($(window).width() - $(this).outerWidth()) / 2;
  7.                 $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
  8.             });
  9.         }
  10.     }); 
  11. })(jQuery);

  13. $('#imagedisplay').center();
  14. $('#imagedisplay').show(1000); /* Not displayed */
  15. $(window).resize(function(){
  16.    $('#imagedisplay').center();
  17. });


when i use code as follow

  1. $('#imagedisplay').center();
  2. $('#imagedisplay').show(1000); /* Not displayed */
The DIV is not displayed

where as when I use 
  1. $('#imagedisplay').show(1000); /*  displayed */
  2. $('#imagedisplay').center();
The DIV with id " imagedisplay" is displayed (though not centered)

pls help me to use thsi code so as to centralise the DIV

refer Web 

click on scrolling image