var posx = 0;
var posy = 0;
var infoBulle;
var infoBulleWidth;
var infoBulleHeight;
var infoBulleMarginLeft;
var infoBulleMarginRight;

function setupInfoBulles ()
{
	
	//createDebug();
	
	infoBulle = document.createElement('div');
	infoBulle.setAttribute('id', 'infoBulle');
	
	//scrollBar.parentNode.insertBefore(infoBulle, scrollBar);
	
	//infoBulleMarginLeft = infoBulle.offsetWidth;
	//infoBulleMarginRight = infoBulle.offsetWidth;
	
	var tgt = document.getElementById('pictures');
	var bullables = getElementsByClassName(tgt, 'img', 'bullable');
	//var bullables = tgt.getElementsByTagName('img');
	var lgt = bullables.length;
	for (var i=0; i < bullables.length; i++)
	{
		//bullables[i].onmouseover = function () { alert(this.title); };
		Utils.addEventSimple( bullables[i], "mouseover", showInfoBulle);
		Utils.addEventSimple( bullables[i], "mouseout", hideInfoBulle);
	}
}

function showInfoBulle (e)
{
	
	var evt = e || window.event;
	var evtTgt = evt.target || evt.srcElement;
	if (evtTgt.nodeType == 3) /* Older Safari versions bug */
		evtTgt = evtTgt.parentNode;
	
	placeBulle(evt);
	
	infoBulle.innerHTML = '( ' + evtTgt.alt + ' )';
	//infoBulleWidth = infoBulle.offsetWidth + infoBulleMarginLeft + infoBulleMarginRight;
	infoBulleHeight = infoBulle.offsetHeight;
	infoBulleWidth = infoBulle.offsetWidth;
	//evtTgt.title = "";
	
	//document.onmousemove = placeBulle;
	
	evt.target.parentNode.insertBefore(infoBulle, evt.target);
	
	posx = evt.target.width / 2 - infoBulleWidth / 2;
	//poxy = evt.target.y + evt.target.height / 2 - infoBulleHeight / 2;
	
	posy = 215;
	
	infoBulle.style.left = posx + 'px';
	infoBulle.style.top = posy + 'px';
	
	infoBulle.style.visibility = 'visible';
	
}

function hideInfoBulle (e)
{
	//evtTgt.title = infoBulle.innerHTML;
	infoBulle.style.visibility = 'hidden';
	//document.onmousemove = null;
}

function placeBulle (evt)
{
	posx = evt.target.x + evt.target.width / 2 - infoBulleWidth / 2;
	poxy = evt.target.y + evt.target.height / 2 - infoBulleHeight / 2;
	/*
	if (evt.pageX || evt.pageY)
	{
		if (evt.pageX + infoBulleWidth > viewportWidth)
		{
			posx = evt.pageX - infoBulleWidth;
		}
		else
		{
			posx = evt.pageX;
		}
		posy = evt.pageY;
	}
	else if (evt.clientX || evt.clientY)
	{
		if (evt.clientX + infoBulleWidth > viewportWidth)
		{
			posx = evt.clientX + document.documentElement.scrollLeft + document.body.scrollLeft - infoBulleWidth;
		}
		else
		{
			posx = evt.clientY + document.documentElement.scrollTop + document.body.scrollTop;
		}
		posy = evt.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	}
	*/
	infoBulle.style.left = posx + 'px';
	infoBulle.style.top = posy + 'px';
	
}

//Utils.addEventSimple(window, 'load', setupInfoBulles);
addDOMLoadEvent(setupInfoBulles);