/**
 * When you include this javascript file, it will search for <a rel="video-overlay" href="foo.flv?width=480;height=272">...</a> tags, and 
 * display a video player for "foo.flv" which is 480px wide and 272px tall.
 * 
 * If you do not specify a width or height, the default of 640x385 will be used.
 */

var VideoOverlayController = Class.create({
  currentPlayer: false,
  
  initialize:function()
  {
    // find all thumbs and attach click event
    $$('a[rel=video-overlay]').each(function(el) {
      el.observe('click', this.thumbClicked.bind(this));
    }.bind(this));
  },
  
  thumbClicked:function(theEvent)
  {
    // cancel the event
    theEvent.stop();
    
    // find the href of the thumb
    var thumbEl = theEvent.findElement('a[rel=video-overlay]');
    var url = thumbEl.href.toString().match(/^([^\?]*)/)[1];
    
    // extract the width and height from the url
    var width = thumbEl.href.toString().match(/\?.*width=([0-9]+)/)[1];
    if (typeof(width) == 'undefined')
      width = 640;
    var height = thumbEl.href.toString().match(/\?.*height=([0-9]+)/)[1];
    if (typeof(height) == 'undefined')
      height = 385;
    
    // show video
    this.insertPageBlackoutElement();
    this.insertSWFContainerElement(width, height);
    this.insertPlayer(url);
  },
  
  hideVideo:function(theEvent)
  {
    // was this click inside the video?
    var clickedDiv = theEvent.element().up('div');
    if (clickedDiv && clickedDiv.id == 'video_overlay_video')
      return;
    
    // cancel event and hide video
    theEvent.stop();
    this.currentPlayer.unload();
    $('video_overlay_blackout').remove();
    $('video_overlay_video_wrapper').remove();
  },
  
  insertPageBlackoutElement:function()
  {
    var el = new Element('div', {
      'id': 'video_overlay_blackout',
      'style': 'position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: 0.5; filter: alpha(opacity=50); z-index: 1000;'
    });
    document.body.appendChild(el);
    
    el.observe('click', this.hideVideo.bind(this));
    
    // handle IE 6's lack of position: fixed support
    if (this.isIE6()) {
      el.style.position='absolute';
    }
  },
  
  insertSWFContainerElement:function(width, height)
  {
    // create wrapper el (full page element)
    var wrapperEl = new Element('div', {
      'id': 'video_overlay_video_wrapper',
      'style': 'position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1010;'
    });
    
    var html = '<table cellpadding="0" cellspacing="0" style="height: 100%; width: '+width+'px; margin: 0 auto;"><tr><td style="vertical-align: middle; width: '+width+'px; height: '+height+'px;">';
    html += '<div id="video_overlay_video" style="width: '+width+'px; height: '+height+'px; background-color: #fff;">';
    html += '<p>You must install the latest <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Flash Player</a> to watch this video.</p>';
    html += '</div>';
    html += '</td></tr></table>';
    wrapperEl.innerHTML = html;
    
    // add to page
    document.body.appendChild(wrapperEl);
    
    // observe clicks to close
    wrapperEl.observe('click', this.hideVideo.bind(this));
    
    // handle IE 6's lack of position: fixed support
    if (this.isIE6()) {
      document.body.style.height = '100%';
      wrapperEl.style.position='absolute';
      this.ie6Scroll();
      window.onscroll = this.ie6Scroll;
    }
  },
  
  insertPlayer:function(flvUrl)
  {
    this.currentPlayer = $f($('video_overlay_video'), '/scripts/flowplayer-3.1.5.swf', flvUrl);
    this.currentPlayer.load();
  },
  
  isIE6:function()
  {
    return (navigator.userAgent.match(/MSIE 6\./));
  },
  
  ie6Scroll:function()
  {
    var wrapperEl = document.getElementById('video_overlay_video_wrapper');
    if(wrapperEl) {
      wrapperEl.style.top = document.documentElement.scrollTop;
      wrapperEl.style.left = document.documentElement.scrollLeft;
    }
    
    var blackoutEl = document.getElementById('video_overlay_blackout');
    if(blackoutEl) {
      blackoutEl.style.top = document.documentElement.scrollTop;
      blackoutEl.style.left = document.documentElement.scrollLeft;
    }
    
    
    document.recalc();
  }
  
});
 
document.observe('dom:loaded', function() {
  new VideoOverlayController();
});

/*
var linkVideo = function(linkId) {
  var player = false;
  
  $("a[rel=div.overlay]").overlay({
    onLoad: function(event) {
      document.getElementById(linkId).href = this.getTrigger().attr('href');
      
      player = $f(linkId, "/scripts/flowplayer-3.1.5.swf");
      player.load();
    },
    
    onClose: function(event) {
      player.unload();
      player = false;
    }
  });
};
*/