var speed = 200;

function doit(width, height, ibig, name, top)
{
	jQuery('.popUp').css('margin-left', '-100px');
	jQuery('.popUp').css('margin-top', '-100px');
	
	if (top) {
		jQuery('.popUp').css('top', top + 'px');
	}
	else {
		jQuery('.popUp').css('top', (jQuery(document).height() / 2) + 'px');	
	}
	
	jQuery('.overlay').css('opacity', 0.7);
	
	jQuery('.popUp .description').hide();
	jQuery('.popUp img').hide();
	
	jQuery('.popUp .description').html(name);
	
	jQuery('.overlay').height(jQuery(document).height());
	//jQuery('.overlay').width(jQuery(document).width());
	
	jQuery('.overlay').fadeIn(500,
		function () {
			jQuery('.popUp').show();
			jQuery('.popUp img').attr('src', ibig);

			jQuery(document).click(hideGallery);

		}
	);
	
	
	return false;

}


function showImage() {

	jQuery('.popUp').css('margin-left', -(jQuery('.popUp img').width() / 2) + 'px');
	jQuery('.popUp').css('margin-top', -(jQuery('.popUp img').height() / 2) + 'px');
	
	jQuery('.popUp img').show();
	jQuery('.popUp .description').show();
}


function hideGallery() {

	jQuery('.popUp').hide();
	jQuery('.overlay').fadeOut(500);
	
	jQuery(document).unbind('click', hideGallery);

	return false;
	
}



/*

html:
 
<div class="overlay"></div>
<div class="popUp">
	<div class="border">
		<a href="#" onclick="return hideGallery();"></a>
		<img src="" onload="showImage()"/>
		<div class="description"></div>
	</div>
</div>

css:


.overlay {
	position: absolute;
	background-color: #000;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 50;
}

.popUp {
	position: absolute;
	z-index: 60;
	top: 50%;
	left: 50%;
	background: #fff url(../i/ajax-loader.gif) 50% 50% no-repeat;
	
	min-width: 200px;
	min-height: 200px;
	//height: 200px;
	//width: 200px;
	
}

.overlay, .popUp {
	display: none;

}

.popUp a {
	position: absolute;
	right: -20px;
	top: -20px;
	background: url(../i/close_2.gif)  no-repeat;
	z-index: 70;
	width: 40px;
	height: 40px;
	font-size: 0;
}

.popUp .border {
	position: relative;
	padding: 10px;
}


*/