(function($){

var ns = 'CenterImage';

window[ns] = function ( option ) {
  this.root  = option.root;
  this.image = option.image;
  
  this.initialize();

  this.position();
  this.show();

  this.observe();
};

window[ns].prototype = {
  
  initialize: function () {
    this.image.css({
      position: 'absolute',
      top:0, left:0,
      opacity:0
    });
    this.image.appendTo(this.root);
  
    this.width  = this.image.width();
    this.height = this.image.height();
    this.ratio  = this.width / this.height;
  },
  
  position: function () {
    var win = $(window),
        winWidth  = win.width(),
        winHeight = win.height(),
        winRatio  = winWidth/winHeight;
    
    if ( this.ratio > winRatio ) {
      var new_value = winHeight * this.ratio;
      var offset = - ( ( new_value - winWidth ) / 2 );
      
      this.image.css({
          height: winHeight,
          width: new_value,
          top: 0,
          left: offset
        });
    } else {
      var new_value = winWidth / this.ratio;
      var offset = - ( ( new_value - winHeight ) / 2 );
      
      this.image.css({
          height: new_value,
          width: winWidth,
          top: offset,
          left: 0
        });
    }
    
  },
  
  show: function () {
    this.image.animate({opacity: 1.0});
  },
  
  hide: function () {
    this.image.fadeOut(function(){$(this).remove();});
  },
  
  observe: function () {
    $(window).resize( $.proxy( this.position, this ) );
  }
  
}

})(jQuery);