(function($){

/*
http://vimeo.com/21081764
http://player.vimeo.com/video/21081764

<iframe src="http://player.vimeo.com/video/21081764" width="400" height="225" frameborder="0"></iframe>

<div id="video-root">
  <div> // overlay </div>
  <div>
    <iframe />
    <div class="close"></div>
  </div>
</div>
*/

var ns = 'Video';

window[ns] = function ( id, width, height ) {
  this.data = {
    source: "http://player.vimeo.com/video/" + id + "?autoplay=1",
    width:  width  || 720,
    height: height || 405
  };
  
  this.html = "<iframe src=\"" + this.data.source + "\" width=\"" + this.data.width + "\" height=\"" + this.data.height + "\" frameborder=\"0\"></iframe>";
  
  this.prepare();

  this.position();
  this.show();
  
  this.observe();
};

window[ns].prototype = {
  
  prepare: function () {
    /* root */
    this.root = $('<div>').appendTo('body').attr('id', 'video-root').hide();
    this.root.css({
        position: 'absolute',
        top: 0,
        left: 0
      })
    new FullWindow( this.root );
    
    /* overlay */
    this.overlay = $('<div>').appendTo(this.root);
    this.overlay.css({
        position: 'absolute',
        background: 'black',
        opacity: 0.85,
        top: 0,
        left: 0
      });
    new FullWindow( this.overlay );

    /* video */
    this.scene = $('<div>').appendTo(this.root).html(this.html);
    this.scene.css({
        position: 'absolute',
        width: this.data.width,
        height: this.data.height
      });
    
    /* close */
    this.close = $('<div>').appendTo(this.root).addClass('close').text('');
    
  },
  
  position: function () {
    var win = $(window);
    var left = ( win.width()  - this.data.width  ) / 2;
    var top  = ( win.height() - this.data.height ) / 2;
    
    if ( left < 20 ) left = 20;
    if ( top < 20 ) top = 20;
    
    this.scene.css({
      left: left,
      top: top
    });
    
    this.close.css({
      left: left + this.data.width - this.close.width(),
      top: top - 20
    });
  },
  
  show: function () {
    this.root.fadeIn();
  },
  
  observe: function () {
    this.close.click( $.proxy( this.exit, this ) );
    $(window).resize( $.proxy( this.resize, this ) );
  },
  
  resize: function () {
    this.position();
  },
  
  exit: function ( event ) {
    this.scene.empty();
    this.root.fadeOut( function(){$(this).remove();} );
  }

}

})(jQuery);