simplepastiefile.js

var url = 'path/to/file.jpg';
var extension = 'jpg';
var geometry = {'width':640,'height':480};
var autoplay = 'false';

Element.addMethods({
  resizeToOverlay: function(element){
    var element = $(element);
    var width = element.getWidth();
    var height = element.getHeight();
    var ratio = Math.round((parseInt(width,10) / parseInt(height,10)) * 100) / 100;
    var screen = document.viewport.getDimensions();
    var screen_ratio = Math.round((parseInt(screen.width,10) / parseInt(screen.height,10)) * 100) / 100;
    if(ratio > screen_ratio){
      //photo is wide format, screen is not so go width-wise first, then set height
      if (width > (screen.width * .8)){
        var new_width = (Math.round(screen.width * .8));
        element.setStyle('width:' + new_width.toString() + 'px; height:' + Math.round(new_width / ratio).toString() + 'px');
      }
    }else{
      //go height-wise first, then set width
      if(element.getHeight() > (screen.height * .8)){
        var new_height = (Math.round(screen.height * .8));
        new_width = Math.round(new_height * ratio);
        element.setStyle('height:' + new_height.toString() + 'px; width:' + new_width.toString() + 'px');
      }
    }
    element.setStyle('top:' + (Math.floor(screen.height - element.getHeight()) / 2 + document.viewport.getScrollOffsets().top).toString() + 'px; left:' + ((Math.floor(screen.width - element.getWidth()) / 2) - $('PageDiv').positionedOffset().left).toString() + 'px;');
    element.setOpacity(1);
  }
});
//center the player in the window
function center_player(){
  var elm = $('_player');
  var view = document.viewport.getDimensions();
  var container = elm.getDimensions();
  elm.setStyle('top:' + (Math.floor(view.height - container.height) / 2 + document.viewport.getScrollOffsets().top).toString() + 'px; left:' + ((Math.floor(view.width - container.width) / 2) - $('PageDiv').positionedOffset().left).toString() + 'px;');
  return Element.setOpacity.delay(0.1,elm,1);
}

if($('_player')) $('_player').remove();
var player = new Element('div',{
  id:'_player',
  'class':'overlay'
});
$('PageDiv').insert(player);
player.setOpacity(0);
//close the player when the close box is clicked
document.observe('click',function(evt){
  var elm;
  if( evt.findElement('#_closer') ){
    if($('_player')){
      $('_player').remove();
    }
  }
});
//hide the player on stray touch events (iOS only)
document.observe('touchstart',function(evt){
  if(evt.findElement('#_player') || evt.findElement('a.popup')){
    //ignore
  }else if(evt.findElement('#_closer')){
    if($('_player')){
      $('_player').remove();
    }
  }else{
    if($('_player')){
      $('_player').remove();
    }
  }
});
//load the overlay at window:load
Event.observe(window, 'load', function(evt){
  if(geometry && $w('mov m4v mp4').include(extension)){
    player.setStyle('width:' + (geometry.width) + 'px; height:' + (geometry.height + 16) + 'px;');
    var qt = new Template('<p><object width="#{width}" height="#{height}" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="#{src}"/> <param name="controller" value="true"/> <param name="autoplay" value="#{autoplay}"/> <embed src="#{src}" width="#{width}" height="#{height}" controller="true" scale="tofit" cache="true" autoplay="#{autoplay}" pluginspage="http://www.apple.com/quicktime/download/" /></object></p>');
    vars = {'height':(geometry.height + 16), 'width':geometry.width, 'src':elm.href, 'autoplay' : autoplay};
    player.update(qt.evaluate(vars));
    window.setTimeout(center_player,1);
  }
  if(geometry && extension == 'swf'){
    player.setStyle('width:' + geometry.width + 'px; height:' + geometry.height + 'px;');
    var swf = new Template('<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="#{width}" height="#{height}" align="middle"><param name="allowScriptAccess" value="sameDomain"/><param name="movie" value="#{src}"/><param name="quality" value="high"/><embed src="#{src}" quality="high" width="#{width}" height="#{height}" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object></p>');
    vars = {'height':geometry.height, 'width':geometry.width, 'src':elm.href};
    player.update(swf.evaluate(vars));
    window.setTimeout(center_player,1);
  }
  if($w('jpg jpeg png gif').include(extension)){
    var img = new Template('<p><img src="#{src}" class="popup" alt="#{src}" /></p>');
    player.update(img.evaluate({'src':elm.href}));
    if (!!geometry){
      player.setStyle('width:' + geometry.width + 'px; height:' + geometry.height + 'px;');
    }else{
      if(player.down('img')){
        geometry = player.down('img').getDimensions();
        player.setStyle('width:' + geometry.width + 'px; height:' + geometry.height + 'px;');
      }
    }
    Element.resizeToOverlay.delay(0.1,player);
  }
  player.insert({top:'<span id="_closer"></span>'});
  });
});