/**
 * -----------------------------------------------------------------------------------
 *	Bubblebox v0.9, 
 *	by Andreas Both, 2007-01-18
 *	shows an bubble with a html formatted text under an element
 *	follows the principles of unobtrusive Javascript
 *	
 *	works with almost all elements
 *	requests prototype (testet with prototype 1.4.0)
 *	
 *	2 ways to use:
 *		1. 	the straight way: add explicit function calls to your element
 *			<a href="url" onmouseover="bubblebox_show(this,'my <b>text</b>');" onmouseout="bubblebox_hide();">....</a>
 *		2. 	just add the class bubblebox and set the title attribute, bubblebox_init does the rest
 *			<a href="url" class="bubblebox" title="my <b>text</b>">....</a>
 *
 * -----------------------------------------------------------------------------------
 **/

/* Attribute für Tooltip */
var BubbleboxDivId = 'bubblebox';
var BubbleboxTextId = 'bubblebox_text';
var BubbleboxMaxWidth = 300; // px
var BubbleboxError = false;
var BubbleboxWithDelay = false;
var BubbleboxClassname = 'bubblebox';
var BubbleboxEffect;

/* ************************************************************ */
/* Bubblebox anzeigen */
var para1;
var para2;

function bubblebox_show(base, mytext)
{
	/** HACK **/
	para1 = base;
	para2 = mytext;
	if( BubbleboxWithDelay  )
	{
		window.setTimeout('bubblebox_show_delay();' , 500 ); // falls ein verzögertes einblenden gewollt ist 
	}
	else
	{
		bubblebox_show_delay();
	}
}

function bubblebox_show_delay()
{
	bubblebox_show_body(para1, para2);
}

function bubblebox_show_body(base, mytext)
{
	if( tooltip=document.getElementById(BubbleboxDivId) )
	{
// 		tooltip.removeAttribute('style');
		document.getElementById(BubbleboxTextId).innerHTML = mytext;

		positionBubblebox(base, tooltip , 5, 0 );
 		bubblebox_showIfHidden(BubbleboxDivId);
// 		Element.show(BubbleboxDivId);

		divwidth = getBoxWidth(tooltip) ;
		if( divwidth > BubbleboxMaxWidth)
		{
			tooltip.style.width = BubbleboxMaxWidth+'px'; 
		}
		return true;
	}
	else
	if(!BubbleboxError)
	{
// 		alert(BubbleboxDivId+' nicht gefunden');
		BubbleboxError = true;

		bubblebox_init();

		return false;
	}
	else
	{
		return false;
	}
}
/* ************************************************************ */
/* versteckt tooltip wieder */
function bubblebox_hide() 
{
// 	bubblebox_hideIfShown(BubbleboxDivId);	
	Element.hide(BubbleboxDivId);
	return true;
}

function bubblebox_init()
{
	if( !document.body )
	{
		window.setTimeout('bubblebox_init', 500);
		return;
	}
	

html = '<div style="width:300px;display:none;"  class="box" id="bubblebox" onmouseout="bubblebox_hide();">'+
'<div class="box_frame box_top box_top_corner">'+
	'<div class="box_lt box_height box_left">'+
		'<div class="box_rt box_height box_right">'+
			'<div class="box_t  box_height box_middle">'+
				'<div class="box_top_corner_edge box_height"></div>'+
			'</div>'+
		'</div>'+
	'</div>'+
'</div>'+
'<div class="box_l">'+
'<div class="box_r">'+
	'<div class="box_text_bg">'+
		'<div class="box_text" id="bubblebox_text">'+
		'</div>'+
	'</div>'+
'</div>'+
'</div>'+
'<div class="box_frame box_bottom">'+
	'<div class="box_lb box_height box_left">'+
		'<div class="box_rb box_height box_right">'+
			'<div class="box_b  box_height box_middle">'+
				'<div class="box_bottom_corner_edge box_height"></div>'+
			'</div>'+
		'</div>'+
	'</div>'+
'</div>'+
'</div>';
		mydiv=document.createElement('div');
		mydiv.innerHTML += html;
		document.body.appendChild(mydiv);

		bubblebox_hide();

		bubblebox_init_elements();
}

/* add onmouseover/onmouseout event to all elements with the class bubblebox */
// function bubblebox_init_elements(elementtag) 
function bubblebox_init_elements() 
{
	myelements = document.getElementsByClassName(BubbleboxClassname);
	for( var i=0; i<myelements.length; i++ )
	{
		bubblebox_make_bubblebox_event(myelements[i]);
	}
	

//     	if (!document.getElementsByTagName) return;
//     	myelements = document.getElementsByTagName(elementtag);
// 
//     	for (ti=0;ti<myelements .length;ti++) 
// 	{
// 		myelement= myelements[ti];
// 		if ( (' '+myelement.className+' ').indexOf("bubblebox") != -1)  
// 		{
// 			bubblebox_make_bubblebox_event(myelement);
// 		}
//     	}
}


function bubblebox_make_bubblebox_event(myelement)
{
	if( myelement.title )
	{
		myelement.setAttribute('bubbleboxtitle', myelement.title);
		myelement.title = '';
		Event.observe(myelement, 'mouseover', function(event) { bubblebox_show(myelement,myelement.getAttribute('bubbleboxtitle') ); } );
		Event.observe(myelement, 'mouseout', bubblebox_hide );
	}
}


/* ************************************************************ */
/* bestimmt die Weite eines Elements */
function getBoxWidth(element)
{
	if( element.clip ) // Netspace
	{
		if (element.clip.width )
		{
			return(element.clip.width);
		}
	}

	if( element.style )
	{
		if( element.style.pixelWidth )
		{
			return(element.style.pixelWidth );
		}
	}
	
	if( element.offsetWidth )
	{
		return(element.offsetWidth);
	}

	return(0);
}


function positionBubblebox(/* base */ el , /* move this */ div, x_offset, y_offset)
{
		var x = 0;
		var y = el.offsetHeight;
	
		while (el.offsetParent && el.tagName.toUpperCase() != 'BODY')
		{
			x += el.offsetLeft;
			y += el.offsetTop;
			el = el.offsetParent;
		}

		x += el.offsetLeft;
		y += el.offsetTop;

		div.style.left = x + x_offset + 'px';
		div.style.top = y + y_offset + 'px';
};



function bubblebox_showIfHidden(id)
{
	bubblebox_showandhidePermanent(id, 1);
}
// 
// function bubblebox_hideIfShown(id)
// {
// 	bubblebox_showandhidePermanent(id, 0);
// }
// 
function bubblebox_showandhidePermanent(id, state) 
{
	if(document.getElementById(id))
 	{
		if(!document.getElementById(id).style)
		{
			document.getElementById(id).setAttribute('style', '' );
		}

 		if( 1 == state  ) 
 		{
 			document.getElementById(id).style.display = "block";
 		}
 		else 
 		{ 		
	 		document.getElementById(id).style.display = "none";
 		}
  	}
}



// Event.observe(window, 'load', bubblebox_init );
// addEvent(window, "load", bubblebox_show);
// window.onload = function() { bubblebox_init(); }