﻿$(document).ready(function() {
    //initRainbowTooltip();
});


/*
* Currently not in use. It is an example of how regions in an image map
* can be highlighted.
*/
function initRainbowImagemap() {
    jQuery("#rainbowMap-container area").mouseover(function() {
        var regionMap = '.' + $(this).attr('id') + '-map';
        jQuery(regionMap).css('display', 'inline');

        var regionLi = '.' + $(this).attr('id') + '-li';
        jQuery(regionLi).css('display', 'inline');
    }).mouseout(function() {
        var regionMap = '.' + $(this).attr('id') + '-map';
        jQuery(regionMap).css('display', 'none');

        var regionLi = '.' + $(this).attr('id') + '-li';
        jQuery(regionLi).css('display', 'none');
    });
}

/*
* This function replaces the standard tooltip with a javascript generated
* tooltip. We use the jquery.tooltip plugin.
*/
function initRainbowTooltip() {
    $("#rainbowMap-container a").tooltip(
    {
        delay: 250,
        showURL: false,
        extraClass: "rainbowArea",
        positionLeft: true,
        top: -45,
        left: -10
    });
}

/*
* Currently we do not use QTip because it does not fit the size of the tip
* to the amount of text properly. If they fix that we might start to use it.
*/
function initRainbowQTip() {

    // Use the each() method to gain access to each elements attributes
    
    $('#rainbowMap-container area').each(function() {
        $(this).qtip(
        {
            content: $(this).attr('alt'), // Use the ALT attribute of the area map
            position: {
                corner: {
                    target: 'topLeft',
                    tooltip: 'bottomRight'
                }
            },
            style: {
                padding: '0 0 0 5',
                background: '#3f3f3f',
                name: 'dark', // Give it the preset dark style
                border: {
                    width: 1,
                    radius: 2,
                    color: '#8F0000'
                },
                tip: true //{ corner: 'bottomRight', color: '#D1E6BB'} // Apply a tip at the default tooltip corner
            }
        });
    });
}
