document.observe("dom:loaded", function() {
	
	var clickers	= $$( '.hide.abs' );
	clickers.each( function( e ) {
		
		// insert click element
		var click = new Element( 'span', { 'class': 'clicker' }).insert( '+' );
		e.previous( '.mod' ).insert( click );
				
		click.observe( 'click', function( el ) {
			var to			= {};
			var fromLeft 	= e.offsetLeft;
			var fromTop		= e.offsetTop;
			var totalHeight	= document.viewport.getHeight();
			var totalWidth	= document.viewport.getWidth();
			if( totalHeight/2 - fromTop > 0 )
				to.vert	= 'bottom';
			else
				to.vert = 'top';
				
			if( totalWidth/2 - fromLeft > 0 )
				to.hor	= 'right';
			else
				to.hor	= 'left';
				
			if( clickies = e.previous( '.mod' ).select( '.clicker' )) {
				clickies.each( function( e ) { e.toggle(); });
			}
			if( e.down( '.closer' )) {
				e.removeClassName( 'hide' );
			} else {
				e.setStyle({ 'position': 'absolute', 'z-index': 99 }).removeClassName( 'hide' ).insert( closer = new Element( 'span', { 'class': 'closer' }).insert( 'x' ));
			}
						
			closer.observe( 'click', function( elem ) {	e.addClassName( 'hide' ); });
			
			if( clickies )
				clickies.each( function( e ) { e.toggle(); });
			
		});
	});
});