$('document').ready(function() {
	$('a.overlay').click(function(event){
		event.preventDefault();
		showBox($(this).attr('rel'));		
	});
	
	$("#overlay").livequery('click', function(event) { 
		hideBox(); 
    }); 
	
	$("#close").click(function(event){ 
		hideBox(); 
    }); 
});

function showBox(id){
	$('#overlay').show();
    center('#box', id);
    return false;
}

function hideBox(){
    $('#box').hide();
    $('#overlay').hide();
    $('#close').hide();
    return false;
}

function center(element, id){
	try{
        element = $(element);
    }catch(e){
        return;
    }

    var my_width  = 0;
    var my_height = 0;

    if ( typeof( window.innerWidth ) == 'number' ){
        my_width  = window.innerWidth;
        my_height = window.innerHeight;
    }else if ( document.documentElement && 
             ( document.documentElement.clientWidth ||
               document.documentElement.clientHeight ) ){
        my_width  = document.documentElement.clientWidth;
        my_height = document.documentElement.clientHeight;
    }
    else if ( document.body && 
            ( document.body.clientWidth || document.body.clientHeight ) ){
        my_width  = document.body.clientWidth;
        my_height = document.body.clientHeight;
    }
    
    wrapper_height = $('#wrapper').height();
    if(wrapper_height > my_height)
    	$('#overlay').height(wrapper_height);
    else
    	$('#overlay').height(my_height);
    
    element.css({
    	'position': 'absolute',
    	'z-index': '99'
    });

    var scrollY = 0;

    if ( document.documentElement && document.documentElement.scrollTop ){
        scrollY = document.documentElement.scrollTop;
    }else if ( document.body && document.body.scrollTop ){
        scrollY = document.body.scrollTop;
    }else if ( window.pageYOffset ){
        scrollY = window.pageYOffset;
    }else if ( window.scrollY ){
        scrollY = window.scrollY;
    }
    
    var setX = ( my_width  - element.width()  ) / 2;
    var setY = ( my_height - element.height() ) / 2 + scrollY;
    
    setX = ( setX < 0 ) ? 0 : setX;
    setY = ( setY < 0 ) ? 0 : setY;
    
    element.find('.clearfix').hide();
    element.css({
    	'left': setX+'px',
    	'top': setY+'px',
    	'display': 'block'
    });
    $("#close").css({
    	'left': (setX+element.width()-45)+'px',
    	'top': (setY+15)+'px',
    	'display': 'block',
    	'z-index': '999'
    });
    element.find('#'+id).show();
}