$(document).ready(function() {
    /*
    This classes is used by the tooltip.tag. It is the original usage. The tooltip will display a question mark
    and the tooltip will show up when clicking on the questionmark.
     */
    $('.cluetip').cluetip({
        arrows: true,
        dropShadow: false,
        sticky: true,
        mouseOutClose: false,
        closePosition: 'title',
        closeText: '<img src="/images/cross.png" alt="close" />',
        local: true,
        cluetipClass: 'vm',
        positionBy: 'mouse',
        activation: 'toggle'
    });
    /*
    This one is mainly for form inputs. It is activated when onFocus is executed.
     */
    $('.focuscluetip').cluetip({
        arrows: true,
        dropShadow: true,
        sticky: true,
        mouseOutClose: false,
        closePosition: 'title',
        closeText: '<img src="/images/cross.png" alt="close" />',
        local: true,
        cluetipClass: 'vm',
        positionBy: 'fixed',
        topOffset: 8,
        activation: 'focus',
        attribute: 'alt'
    });
    /*
    This is a special onClick activated version. Slighly different that .cluetip version. used mainly in special cases.
     */
    $('.clickcluetip').cluetip({
        arrows: true,
        dropShadow: true,
        sticky: true,
        mouseOutClose: false,
        closePosition: 'title',
        closeText: '<img src="/images/cross.png" alt="close" />',
        local: true,
        cluetipClass: 'vm',
        positionBy: 'fixed',
        topOffset: 8,
        activation: 'click',
        attribute: 'alt'
    });
    /*
    clases used to close tooltips. Put on the non-tool tip form inputs.
    Not always necesary. Only if an input's onblur is not closing the tooltip (eg tinyMCE or tooltipspacergif impl)
     */
    $('.closecluetip').click(function() {
        $(document).trigger('hideCluetip');
    });
    $('.closecluetip').focus(function() {
        $(document).trigger('hideCluetip');
    });
    /*
    Classes used to open tooltips that are not directly attached to the form element.
     */
    $('.attachcluetip').focus(function() {
        $( $(this).attr('alt')).focus();
    });
    $('.attachcluetip').click(function() {
        $( $(this).attr('alt')).focus();
    });
    $('.attachcluetip').blur(function() {
        $(document).trigger('hideCluetip');
    });
    /*
    If you would like the tooltip to open automatically put both the focuscluetip and this class
     */
    $('.autoopencluetip').focus();
    $('.autoopencluetip').click();
});