// JavaScript Document
$(document).ready(function(){
	$('#content_box').css('float','left')
	var width = $('#content_box').width();
	var height = $('#content_box').height();
	var content = $('#content_box').html();
	if (content != '') {
		$('#content_box').detach();
		$('body, html').css({
			margin:'0px',
			height:'100%'
		});
		$('<div/>',{
			css:{
				width:'0%',
				opacity: '0',
				height:'0%',
				position:'absolute',
				top:'50%',
				left:'50%',
				background:'#000',
				zIndex:'50',
				cursor:'pointer'
			}
		}).appendTo('body')
		.addClass('square')
		.click(function(){
			$('div.square').detach();
			$('div.square2').detach();
		})
		.animate({
			height:'100%',
			width:'100%',
			top:'0',
			left:'0',
			opacity: '0.75'
		},500,function(){
			$('<div/>',
			{
				css:{
					width:'0px',
					height:'0px',
					position:'absolute',
					background:'#D6D6D6',
					top:'50%',
					left:'50%',
					zIndex:'51',
					opacity:'0'
				}
			}).appendTo('body')
			.addClass('square2');
			var position = $('div.square2').position();
			$('div.square2')
			.animate({
				width:width+'px',
				height:height+'px',
				top:position.top - (height/2)+'px',
				left:position.left - (width/2)+'px',
				opacity:'1'
			},500,function(){
				$('<div/>',
				{
					css:{
						background:'#FFF',
						position:'absolute',
						bottom:$(this).height(),
						overflow:'visible',
						right:'0px',
						zIndex:'52',
						padding:'0 5px',
						cursor:'pointer',
						display:'none'
					}
				}).click(function(){
					$('div.square').detach();
					$('div.square2').detach();
				}).html('Fechar')
				.appendTo('div.square2')
				.fadeIn(300)
			})
			.append(content)
		});
	}
})