
var Videobox = Class.create(
{
  initialize: function(image)
  {
    this.sizex = 600;
    this.sizey = 420;
    
    obj = this;
    $$('.videobox').each(function(el) { 
      el.observe('click', 
        (function(event) {
          this.open(el.href);
          event.stop();
        })
        .bindAsEventListener(obj)
      )
    });
    
    var objBody = $$('body')[0];

		objBody.appendChild(Builder.node('div',{id:'overlay'}));
	
        objBody.appendChild(Builder.node('div',{id:'videobox'}, [
            Builder.node('div',{id:'outerImageContainer'}, [
                Builder.node('div',{id:'imageContainer'}),
                Builder.node('div',{id:'navCloseContainer'},
                    Builder.node('a', {href: '#'}, Builder.node('img', {id:'navClose', src: image}))
                  )
                ]
            )
        ]));
    
		$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
		$('videobox').hide().observe('click', (function(event) { if (event.element().id == 'videobox') this.end(); }).bind(this));
		$('navClose').observe('click', (function(event) { this.end(); event.stop(); }).bindAsEventListener(this));
		$('outerImageContainer').setStyle({ width: this.sizex+20+'px', height: this.sizey+20+'px' });
		
		this.overlay = $('overlay');
		this.videobox = $('videobox');
  },
  open: function(link)
  {
    var res = new RegExp('watch\\?v=([a-zA-Z0-9]+)').exec(link);
    if(res == null) this.end();
    res = res[1];
    
    this.video = '<object width="'+this.sizex+'" height="'+this.sizey+'"><param name="movie" value="http://www.youtube.com/v/'+res+'&hl=cs&fs=1&autoplay=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+res+'&hl=cs&fs=1&autoplay=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="'+this.sizex+'" height="'+this.sizey+'"></embed></object>'
    $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
    
    var arrayPageSize = this.getPageSize();
    this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
    
    new Effect.Appear(this.overlay, { duration: 0.5, from: 0.0, to: 0.5 })
    
    var arrayPageScroll = document.viewport.getScrollOffsets();
    var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
    var lightboxLeft = arrayPageScroll[0];
    this.videobox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
    
    $('imageContainer').innerHTML = this.video;
  },
  end: function()
  {
    this.videobox.hide();
    new Effect.Fade(this.overlay, { duration: 0.5 });
    $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
  },
  getPageSize: function()
  {        
	  var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}
		
		return [pageWidth,pageHeight];
	}
});
