var overlay, viewer;
var viewerOpts = {width: 500, height: 385};

function viewVideoOnMain(id) {
	showOverlay(true);
	
	viewer = jQuery('<div class="viewer">&nbsp;</div>').appendTo(document.body);
	var url = '/view_video.php?id=' + id + '';
	
	jQuery(viewer).load(url, null, function() {
		
		w = viewerOpts.width;
		h = viewerOpts.height;
		
		var ww = jQuery(window).width();
		var wh = jQuery(window).height();

		if (h > wh - 50) h = wh - 50;
		if (w > ww - 50) w = ww - 50;

		jQuery(viewer).css('left', (ww-w) / 2 + 'px');
		jQuery(viewer).width(w);

		if (jQuery.browser.msie) {
			var top = (wh-h) / 2;
			
			jQuery(viewer).css('position', 'absolute');
      jQuery(viewer).css('top', (((wh-h) / 2) + parseInt($(window).scrollTop(), 10)) + 'px');
			//jQuery(viewer).get(0).style.setExpression('top', 'parseInt(document.body.scrollTop, 10) + ' + top + ' + "px"');
		}
		else {
			jQuery(viewer).css('top', (wh-h) / 2 + 'px');
		}
		jQuery(viewer).height(h + 10);
		jQuery(viewer).css('overflowX', 'hidden');
		jQuery(viewer).css('overflowY', 'auto');
		jQuery(viewer).css('overflow', 'hidden');
		
		viewer.show();
	});
	
	return false;
}

function closeViewer() {
	if (!viewer) return false;
	
	viewer.remove();
	viewer = null;
	
	showOverlay(false);
	
	return false;
}

function showOverlay(show) {
	if (show && !overlay) {
		 jQuery(document.body).append('<div class="modal-overlay">&nbsp;</div>');
		 overlay = jQuery('div.modal-overlay').get(0);
		 if (jQuery.browser.msie) jQuery(this.overlay).css('opacity', 0.2);
	}

	jQuery(overlay).css('height', document.body.scrollHeight + 'px');
	show ? jQuery(overlay).show() : jQuery(overlay).hide();
}