/****************************************************************
   author: Menny Rachmanny                                      *
   site: Blind Janitor                                          *
   date: 24/09/2004                                             *
   compliancy: internet explorer, mozilla, ns                   *
   description:                                                 * 
	   displays a table element that holds a caption.           *
	   when mouse moves over a specific element in the document *
	   the caption follows the mouse                            *
*****************************************************************/

//global settings here

//set position
var mouseX = 0;
var mouseY = 0;
var sCode = ""; 
//set caption style
sFeatures = new Array(2);
sFeatures[0] = new Array("#000000","#FFFFFF","#FFFFFF","#872631");
sFeatures[1] = new Array("#000000","#FFFFFF","#FFFFFF","#CB3232") ;

//set event handler
var IE = document.all?true:false;
if (!IE) 
{
	document.captureEvents(Event.MOUSEOVER);
	document.captureEvents(Event.MOUSEMOVE);
}

/*
	function: showCaption()
	@id - string: the div id that will hold the caption
	@caption - string: header of the caption
	@text - string: text of the caption
	@align - string: left/right
	@dir - string: rtl/ltr
	@style - int: which sFeatures to use
	@yOffset - int: offset from the mouse
	@xOffset - int: offset from the mouse
*/
function  showCaption(id, caption, text, align, dir, style)
{
	if (caption == text && text == 'Picture place')
	{
		caption = 'Picture place';
		text = 'The first picture located inside a text will be places on the right side, while the fallowing picture will be placed on the left side and so on...<br />If the picture width is more than 400 pixles, the picture will be placed in it\'s own row.';
	}
	if (sCode=="")
	{
		document.onmousemove = getMouseXY;
		document.onmouseover = getMouseXY;
		sText = sFeatures[style][0];
		sBackground = sFeatures[style][1];
		sCaptionText = sFeatures[style][2];
		sCaptionBackground = sFeatures[style][3];
		sCode = "<table border='1' cellpadding='0' cellspacing='0' style='border:1px solid " + sCaptionBackground + ";'>";
		sCode = sCode + "<tr>" + "<td dir='" + dir + "' style='align:" + align + " ;font-size:12px;font-family:Arial;font-weight:bold;color:" + sCaptionText + ";background-color:" + sCaptionBackground + ";border:1px solid " + sCaptionBackground + "; padding-" + align + ":3px; padding-top:0px; padding-bottom:0px'>" + caption + "</td>" +"</tr>";
		sCode = sCode + "<tr>" + "<td dir='" + dir + "' style='align:" + align + " ;font-size:10px;font-family:Arial;color:" + sText + ";padding-right:3;padding-bottom:3;padding-left:3;padding-top:3; background-color:" + sBackground + ";'>" + text + "</td>" +"</tr>" +"</table>";
		document.getElementById(id).innerHTML = sCode;
		document.getElementById(id).style.display = "block";
		document.getElementById(id).style.position = 'absolute';
	}
	
	document.getElementById(id).style.left = mouseX + 15 + "px";
	document.getElementById(id).style.top = mouseY  + 15 + "px";
}

/*
	function: hideCaption()
	@id - string: the div id that holds the caption
*/
function hideCaption(id)
{
	sCode = "";
	document.onmousemove = null;
	document.onmouseover = null;
	document.getElementById(id).style.display = "none";
}

function getMouseXY(e) {
  if (IE) 
  { // grab the x-y pos.s if browser is IE
    mouseX = event.clientX + document.body.scrollLeft
    mouseY = event.clientY + document.body.scrollTop
  } 
  else 
  {  // grab the x-y pos.s if browser is NS
    mouseX = e.pageX
    mouseY = e.pageY
  }  
  
  // catch possible negative values in NS4
  if (mouseX < 0)
  	mouseX = 0;
  if (mouseY < 0)
  	mouseY = 0;  
  
  return true
}



/*
	explenation:
	the page holds it should have a div container whit the property 'display:none'
	the div will hold the caption. 
	the element that will triger the caption will implement the fallowing:
		onMouseOver="showCaption('mydivContainer', 'caption', 'text', 'left', 'ltr', 0);"
		onMouseMove="showCaption('mydivContainer', 'caption', 'text', 'left', 'ltr', 0);"
		onMouseOut="hideCaption('mydivContainer');"
	example:
		<div id="mydiv" style="display:none;"></div>
		<span id="myspan1" onMouseOver="showCaption('mydiv', 'caption', 'text', 'left', 'ltr', 0);" 
		onMouseMove="showCaption('mydiv', 'caption', 'text', 'left', 'ltr', 0);"
		onMouseOut="hideCaption('mydiv');" >kukukukukuk</span>
*/