var BrowserWidthHeight = Class.create({
  initialize: function() {
    this._altWidth = (document.documentElement &&
      (document.compatMode=='CSS1Compat' || ! document.compatMode));
    this._altHeight = this.altWidth;
    this._body = $(document.body);
  },
  getWidth: function() {
    var w = 0;
    if (this._altWidth) {
      var rt = this._body.style.marginRight || 0;
      var lt = this._body.style.marginLeft || 0;
      w = Math.max(this._body.offsetWidth + lt + rt,
        document.documentElement.clientWidth);
    } else {
      w = Math.max(this._body.clientWidth, this._body.scrollWidth);
    }
    return w;
  },
  getHeight: function() {
    var h = 0;
    if (typeof window.innerHeight == 'number') {
      h = window.innerHeight;
    }
    if (this._altHeight) {
      var t = this._body.style.marginTop || 0;
      var b = this._body.style.marginBottom || 0;
      return Math.max(this._body.offsetHeight + t + b,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight, h);
    }
    return Math.max(this._body.scrollHeight, this._body.clientHeight, h);
  }
});

var FlashBox = Class.create({
  initialize: function(triggerSelector, containerWidth, containerHeight) {
    if (typeof BrowserWidthHeight == 'undefined') {
      throw Error('The BrowserWidthHeight object is required.');
    }
    if (typeof swfobject == 'undefined') {
      throw Error('swfobject is required.');
    }
    this._browserWH = new BrowserWidthHeight();
    this._overlay = new Element('div', {style:'display:none;'});
    this._flashDiv = new Element('div', {style:'display:none;'});
    $(document.body).insert({bottom:this._overlay}).insert({bottom:this._flashDiv});
    this._overlay.setOpacity(0.7).setStyle({
      backgroundColor: '#333',
      position: 'absolute',
      top: 0,
      left: 0,
      zIndex: 100
    });
    this._flashDiv.setOpacity(0).setStyle({
      backgroundColor: '#000',
      position: 'absolute',
      zIndex: 101,
      width: containerWidth + 'px',
      height: containerHeight + 'px'
    }).update('<div id="flash-div"></div>');
    $$(triggerSelector).invoke('observe', 'click', this._triggerAction.bind(this));
    this._overlay.observe('click', this._closeFlashBox.bind(this));
    Event.observe(window, 'resize', this._resize.bind(this));
  },
  _triggerAction: function(evt) {
    var anch = evt.element();
    if (anch.tagName == 'IMG') {
      anch = anch.up('a');
    }

    evt.stop();

    var rel = anch.readAttribute('rel');
    if (rel == 'undefined') return;

    var relSplit = rel.split(',');
    var flash = '';
    var flashWidth = '';
    var flashHeight = '';
    for (var i = 0; i < relSplit.length; i++) {
      if (relSplit[i].indexOf('flash:') == 0) {
        flash = relSplit[i].replace('flash:', '');
      } else if (relSplit[i].indexOf('width:') == 0) {
        flashWidth = relSplit[i].replace('width:', '');
      } else if (relSplit[i].indexOf('height:') == 0) {
        flashHeight = relSplit[i].replace('height:', '');
      }
    }
    if (flash == '') return; // No flash set
    if (flashWidth == '') flashWidth = this._flashDiv.getWidth();
    if (flashHeight == '') flashHeight = this._flashDiv.getHeight();

    var dimensions = document.viewport.getDimensions();
    var offsets = document.viewport.getScrollOffsets();
    var flashDivTop = (dimensions.height / 2) - (this._flashDiv.getHeight() / 2);
    var flashDivLeft = (dimensions.width / 2) - (this._flashDiv.getWidth() / 2);

    this._overlay.setStyle({
      width: this._browserWH.getWidth() + 'px',
      height: this._browserWH.getHeight() + 'px'
    }).show();
    this._flashDiv.setStyle({
      top: offsets.top + flashDivTop + 'px',
      left: offsets.left + flashDivLeft + 'px'
    }).show();
    swfobject.embedSWF(flash, 'flash-div', flashWidth, flashHeight,
      '9.0.0', null, null, {mode:'transparent'});
  },
  _resize: function() {
    if (this._overlay.style.display == 'none') return;
    this._overlay.setStyle({
      width: this._browserWH.getWidth() + 'px',
      height: this._browserWH.getHeight() + 'px'
    });
    this._adjustFlashDiv();
  },
  _adjustFlashDiv: function() {
    if (this._overlay.style.display == 'none') return;
    var dimensions = document.viewport.getDimensions();
    var offsets = document.viewport.getScrollOffsets();
    var flashDivTop = (dimensions.height / 2) - (this._flashDiv.getHeight() / 2);
    var flashDivLeft = (dimensions.width / 2) - (this._flashDiv.getWidth() / 2);
    this._flashDiv.setStyle({
      top: offsets.top + flashDivTop + 'px',
      left: offsets.left + flashDivLeft + 'px'
    });
  },
  _closeFlashBox: function() {
    this._flashDiv.hide();
    this._overlay.hide();
    this._flashDiv.update('<div id="flash-div"></div>');
  }
});
document.observe('dom:loaded', function() {
  var flashBox = new FlashBox('.show-video', 320, 280);
});