hideDiv = false;

/**
 * shows tooltip and changes image
 *
 * @param {object} icon object
 * @param {string} text which should be displayed in tooltip
 */
function showTooltip( icon, tooltipText ) {
    document.getElementById('tooltipHtml').innerHTML = tooltipText;
    clearTimeout(hideDiv);
    document.getElementById('tooltip').style.visibility = 'visible';
    positioningTooltip( icon );
    /*if( icon.src ) {
        splitted = icon.src.split( '.' );
        icon.src = splitted[0] + '_red.' + splitted[1];
    }*/
}

/**
 * hides tooltip and changes image back
 *
 * @param {object} icon object
 */
function hideTooltip( icon ) {
    clearTimeout(hideDiv);
    hideDiv = window.setTimeout("document.getElementById('tooltip').style.visibility = 'hidden';", 100);
    /*if( icon.src ) {
        splitted = icon.src.split( '_red' );
        icon.src = splitted[0] + splitted[1];
    }*/
}

/**
 * sets position of tooltip
 *
 * @param {object} icon object
 */
function positioningTooltip( icon ) {
    var yahooRegionObject = YAHOO.util.Region
    var yahooDomObject = YAHOO.util.Dom

    var tooltip = yahooRegionObject.getRegion( document.getElementById('tooltip') );
    tooltipWidth = tooltip['right'] - tooltip['left'];

    var icon = yahooRegionObject.getRegion( icon );
    iconWidth = icon['right'] - icon['left'];
    iconHeight = icon['top'] - icon['bottom'];

    var difference = ( iconWidth - tooltipWidth ) / 2;

    var newX = icon['left'] + difference;
    var newY = icon['bottom'];

    yahooDomObject.setX( document.getElementById('tooltip'), newX );
    yahooDomObject.setY( document.getElementById('tooltip'), newY );
}