overlay = null;
window.addEvent('domready', function() {
				
	window.CBwidth = 532;
	window.CBheight = 494;
									 
	var callbackButton = $('callbackbutton');

	callbackButton.addEvent('click', function() {
        overlay = new Element('div', {
            'styles': {
                'width': '100%',
                'height': '100%',
                'background': '#000',
                'filter': 'alpha(opacity=0)',
                '-moz-opacity': '0',
                '-khtml-opacity': '0',
                'opacity': '0',
                'position': 'fixed',
                'z-index': '100'
            }
		})
        $$('body')[0].grab(overlay, 'top');
		
		var overlayTween = new Fx.Tween(overlay, {
			onComplete: function() {
				var htmlBoxContainer = new Element('div', {
					'id': 'htmlBoxContainer',
					'styles': {
						'position': 'fixed',
						'z-index': '1000',
						'overflow': 'hidden'
					}
				})
				$$('body')[0].grab(htmlBoxContainer, 'top');
				resize(htmlBoxContainer);
				htmlBoxContainer.setStyles({
					'width': 0,
					'height': 0,
					'background': '#fff',
					'display': 'block'
				})
				
				var htmlFrame = new Element('iframe', {
					'src': 'callback.html',
					'styles': {
						'width': CBwidth + 20,
						'height': CBheight + 20,
						'margin': 0,
						'border': 'none'
					}
				})
				htmlBoxContainer.grab(htmlFrame);
				resize(htmlBoxContainer)
				
				var containerMorph = new Fx.Morph(htmlBoxContainer, {
					duration: 'long',
					transition: Fx.Transitions.Sine.easeOut,
					onComplete: function() {

					}
				});
				containerMorph.start({
					'width': CBwidth,
					'height': CBheight
				});
				
				window.addEvent('resize', function() {
					resize(htmlBoxContainer)
				})
			}
		}).start('opacity', '0.3');
		
        overlay.addEvent('click', function() {
            var htmlBoxContainer = $('htmlBoxContainer');
            htmlBoxContainer.destroy();
            overlay.destroy();
			window.removeEvents('resize');
		  })
	})

	var resize = function(element) {
        var container = element;
        var windowSize = window.getSize();
        
        if (windowSize.x > CBwidth)
			container.setStyle('left', (windowSize.x - CBwidth) / 2);
		else
			container.setStyle('left', 0);
			
        if (windowSize.y > CBheight)
			container.setStyle('top', (windowSize.y - CBheight) / 2);
		else
			container.setStyle('top', 0);
	}

})
function closeThis() {
            var htmlBoxContainer = $('htmlBoxContainer');
            htmlBoxContainer.destroy();
            overlay.destroy();
			window.removeEvents('resize');
		  }