/*
targetSelector = 'area'
targetSelector = 'div[class=infoBoxAnchor]'

<div class="infoBoxAnchor" title="This is the text to show in the infobox"></div>

*/
function InfoBox() {
    var fadeBox = true;
    var fadeInDuration = 0.2;
    var fadeOutDuration = 0.1;

    var infoBox = new Element('div', { id: 'infoBox', style: 'display:none;' });
    var infoBoxContent = new Element('div', { id: 'infoBoxContent' });

    Element.insert(document.body, { top: infoBox });
    Element.insert(infoBox, infoBoxContent);


    this.setUseFade = function(useFade) {
      fadeBox = useFade;
    };

    this.setFadeInDuration = function(newDuration) {
        fadeInDuration = newDuration;
    };

    this.setFadeOutDuration = function(newDuration) {
        fadeOutDuration = newDuration;
    };


    this.attachTo = function(targetSelector) {
        var infoItems = $$(targetSelector);

        infoItems.each(function(item) {
            item.writeAttribute('boxtext', item.title);
            item.removeAttribute('title');

            item.observe('mouseover', function(event) {
                infoBoxContent.innerHTML = item.getAttribute('boxtext');

                infoBox.setStyle({
                    left: Event.pointerX(event) + 25 + 'px',
                    top: Event.pointerY(event) + 15 + 'px'
                });

                if (!fadeBox) {
                    infoBox.show();
                }
                else {
                    Effect.Appear('infoBox', { duration: fadeInDuration });
                }

            });

            item.observe('mouseout', function(event) {
                if (!fadeBox) {
                    infoBox.hide();
                }
                else {
                    Effect.Fade('infoBox', { duration: fadeOutDuration });
                }
            });
        });
    }
}