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 );
}

$(document).ready(function() {
    $("a[rel='detailImage']").fancybox();
    $(".detailImages img").each(function(){
        var title;
        if( title = $(this).attr('alt') ) {
            $(this).mouseover( function() {
                clearTimeout(hideDiv);
                $( '#tooltipHtml' ).html( title );
                $( '#tooltip' ).css( 'visibility', 'visible' );
                $( '#tooltip' ).css( 'top', $(this).offset().top + $(this).height() + 3 );
                $( '#tooltip' ).css( 'left', $(this).offset().left + ( $(this).width() - $('#tooltip').outerWidth() ) / 2 )
            });
            $(this).mouseout( function() {
                $( '#tooltip' ).css( 'visibility', 'hidden' );
            });
        }
    });
})