document.write('<style type="text/css">div.help{display: none;}</style>');

var TheCarbonAccount = window.TheCarbonAccount || {};
TheCarbonAccount.help = (function() {
    var helpDiv;
    var helpInner;
    var helpSpan;
    var helpContent;
    
    var helpCache = {};
    var currentDisplayedHelp = null;

    function showHelp() {
        /*
        <div class="helpTip"><div class="helpInner">
            <span class="helpClose">X</span>
            <div id="helpContent">Lorem ipsum dolor</div>
        </div></div>
        */
        if (!helpDiv) {
            helpDiv = document.createElement('div');
            helpDiv.className = 'helpTip';
            helpInner = document.createElement('div');
            helpInner.className = 'helpInner';
            helpSpan = document.createElement('span');
            helpSpan.className = 'helpClose';
            helpSpan.appendChild(document.createTextNode('X'));
            helpInner.appendChild(helpSpan);
            helpDiv.appendChild(helpInner);
            helpContent = document.createElement('div');
            helpContent.id = 'helpContent';
            helpInner.appendChild(helpContent);
            document.body.appendChild(helpDiv);
            
            YAHOO.util.Event.on(helpSpan, 'click', function(ev) {
                YAHOO.util.Event.stopEvent(ev);
                hideHelp();
            });
        }
        helpDiv.style.display = 'block';
        return helpDiv;
    }
    
    function hideHelp() {
        currentDisplayedHelp = null;
        if (helpDiv) { // helpDiv may not exist, if help has never been shown
            helpDiv.style.display = 'none';
            // Event saying we've stopped covering part of the page
            TheCarbonAccount.hooks.uncoverArea.fire();
        }
    }

    function alignHelpToElement(element) {
        /* Align the help box so the arrow is pointing at a point on the middle
           right of the element. */
        var r = YAHOO.util.Dom.getRegion(element);
        //console.log(r);
        // Figure out the XY we want the arrow to point at
        var arrowPoint = [
            r.right + 2, // 2 px for space
            r.top + ((r.bottom - r.top) / 2)
        ];
        //console.log(arrowPoint);
        var helpDiv = showHelp();
    
        var r2 = YAHOO.util.Dom.getRegion(helpDiv);
        var helpDivHeight = r2.bottom - r2.top;
        // We shift the helpDiv to have its center aimed at the arrow point
        helpDivPos = [arrowPoint[0], arrowPoint[1] - (helpDivHeight / 2)];
    
        // If this results in the helpDiv going off the top of the screen, we 
        // reposition it to 10 px below the top of the screen
        if (helpDivPos[1] < 10) {
            helpDivPos[1] = 10;
        }
    
        // Finally, figure out background position needed to display the arrow
        // in the right place.
        var arrowOffset = 479 + (38 / 2); // Magic numbers from arrow dimensions
    
        var backgroundOffset = (arrowPoint[1] - helpDivPos[1]) - arrowOffset;
    
        //console.log('Help div position: ' + helpDivPos);
        //console.log('Background offset: ' + backgroundOffset);
    
        helpDiv.style.backgroundPosition = '0 ' + backgroundOffset + 'px';
    
        YAHOO.util.Dom.setXY(helpDiv, helpDivPos);
        
        /* Finally, trigger an event saying we've just covered part of the 
           page. ie-select-hover.js listens for this event and inserts an 
           IE specific hack when it happens. */
        TheCarbonAccount.hooks.coverArea.fire(helpDiv);
    }

    function setHelp(el) {
        var helpDiv = showHelp();
        helpInner.style.height = 'auto';
        while (helpContent.firstChild) {
            helpContent.removeChild(helpContent.firstChild);
        }
        helpContent.appendChild(el);
    
        var region = YAHOO.util.Dom.getRegion(helpInner);
        var height = region.bottom - region.top;
        //console.log('Height is ' + height);
    
        if (height < 38) {
            helpInner.style.height = (38 - 6 - 6 - 2)+'px';
            // - 6 - 6 - 2 is for padding and border
        }
    }
    
    function getHelpById(id) {
        /* Given an ID, return the DOM fragment for the corresponding help
           text. If it's in our cache, use that; otherwise, find it in the 
           page's DOM. */
        if (helpCache[id]) {
            return helpCache[id];
        }
        var help = document.getElementById(id);
        if (!help) {
            help = document.createElement('span');
            help.appendChild(document.createTextNode('No help available'));
        }
        help.className = ''; // Don't want it being invisible any more
        helpCache[id] = help;
        return help;
    }
    
    function activateHelp(el) {
        if (el) {
            var id = el.href.split('#')[1];
            showHelp();
            currentDisplayedHelp = id;
            setHelp(getHelpById(id));
            alignHelpToElement(el);
        }
    }
    
    function clickHandler(ev) {
        YAHOO.util.Event.stopEvent(ev);
        var id = this.href.split('#')[1];
        if (id == currentDisplayedHelp) {
            hideHelp();
        } else {
            activateHelp(this);
        }
    }
	
	function overHandler(ev) {
        YAHOO.util.Event.stopEvent(ev);
        $(this).children("img").attr("alt", "");
        var id = this.href.split('#')[1];
        
            activateHelp(this);
     
    }
	
	function outHandler(ev) {
        YAHOO.util.Event.stopEvent(ev);
        var id = this.href.split('#')[1];
        
            hideHelp();
    }
    
    function addHandlers() {
        /* Adds handler to all links with class = 'help' on the page. This can 
           be called multiple times - it 'flags' the links it has already 
           done to ensure they won't be enhanced more than once. */
        var links = document.getElementsBySelector('a.help');
        for (var link, i = 0; link = links[i]; i++) {
            if (link.helpEnhanced) {
                continue;
            }
            link.helpEnhanced = 1;
            YAHOO.util.Event.on(link, 'mouseover', overHandler);
            YAHOO.util.Event.on(link, 'mouseout', outHandler);
        }
    }
    
    return {
        addHandlers: addHandlers,
        hideHelp: hideHelp,
        showHelp: showHelp,
        setHelp: setHelp,
        alignHelpToElement: alignHelpToElement,
        activateHelp: activateHelp
    }
})();

YAHOO.util.Event.onDOMReady(TheCarbonAccount.help.addHandlers);