window.addEvent('domready',
    function() {
        //----------------------------------------------------------------------------------------------------------------------------------------------------------------
        //Auto Grow Text boxes on the page, as content is typed
        //----------------------------------------------------------------------------------------------------------------------------------------------------------------        
        $$('textarea').each(function(el, i) {
            new AutoGrow(el);
            el.setStyles({ 'height': (el.scrollHeight + 50), 'overflow': 'hidden' });            
        });    
    }
);

//----------------------------------------------------------------------------------------------------------------------------------------------------------------
//::CLASS:: Auto Grow Text boxes on the page, as content is typed
//----------------------------------------------------------------------------------------------------------------------------------------------------------------        
var AutoGrow = new Class({

    Implements: [Options, Events],

    options: {
        interval: 333, // update interval in milliseconds
        margin: 10, // gap (in px) to maintain between last line of text and bottom of textarea
        minHeight: 0 // minimum height of textarea
    },

    initialize: function(textarea, options) {
        this.textarea = $(textarea);
        this.options.minHeight = textarea.clientHeight;
        this.setOptions(options);
        this.dummy = new Element("div", {
            styles: {
                "overflow-x": "hidden",
                "position": "absolute",
                "top": 0,
                "left": "-9999px"
            }
        }).setStyles(this.textarea.getStyles("font-size", "font-family", "width", "line-height", "padding")).inject(document.body);
        this.resize.periodical(this.options.interval, this);
    },

    resize: function() {
        var html = this.textarea.get('value').replace(/\n|\r\n/g, '<br>X');
        if (this.dummy.get("html").toLowerCase() != html.toLowerCase()) {
            this.dummy.set("html", html);
            var triggerHeight = this.dummy.getSize().y + this.options.margin;
            if (this.textarea.clientHeight != triggerHeight) {
                var newHeight = Math.max(this.options.minHeight, triggerHeight);
                this.textarea.tween("height", newHeight);
            }
        }
    }

});

//----------------------------------------------------------------------------------------------------------------------------------------------------------------
//ToolTip code so that we can show tips, when a user mouses over an element (great for HELP INFO, and STATUS INFO)
//----------------------------------------------------------------------------------------------------------------------------------------------------------------        
function mpnTip(element, msgTxt, msgPlacement) {
    var sMsgBox = '';
    var elMargin = '';                     //Default margin (for arrow)
    var arrowImg = '../images/tipBox_bp.png'; //Default image
    var elPosition = 'centerTop';          //Default placement
    var edPosition = 'centerBottom';       //Default placement

    switch (msgPlacement.toString().toLowerCase()) {
        case 'top':
            arrowImg = 'images/tipBox_bp.png';
            elMargin = 'margin-bottom: 8px';
            elPosition = 'centerTop';
            edPosition = 'centerBottom';
            break;
        case 'left':
            arrowImg = 'images/tipBox_rp.png';
            elMargin = 'margin-right: 8px';
            elPosition = 'leftCenter';
            edPosition = 'rightCenter';
            break;
        case 'bottom':
            arrowImg = 'images/tipBox_tp.png';
            elMargin = 'margin-top: 8px';
            elPosition = 'bottomCenter';
            edPosition = 'topCenter';
            break;
        case 'right':
            arrowImg = 'images/tipBox_lp.png';
            elMargin = 'margin-left: 8px';
            elPosition = 'rightCenter';
            edPosition = 'leftCenter';
            break;
        default:
            break;
    }

    sMsgBox = '<table cellpadding="0" cellspacing="0" border="0">';
    //Top Edges
    sMsgBox += '<tr>';
    sMsgBox += '<td class="tipBox_tl"></td>';
    sMsgBox += '<td class="tipBox_b"></td>';
    sMsgBox += '<td class="tipBox_tr"></td>';
    sMsgBox += '</tr>';
    //Message Section
    sMsgBox += '<tr>';
    sMsgBox += '<td class="tipBox_b"></td>';
    sMsgBox += '<td class="tipBox_txt">' + msgTxt + '</td>';
    sMsgBox += '<td class="tipBox_b"></td>';
    sMsgBox += '</tr>';
    //Bottom Edges
    sMsgBox += '<tr>';
    sMsgBox += '<td class="tipBox_bl"></td>';
    sMsgBox += '<td class="tipBox_b"></td>';
    sMsgBox += '<td class="tipBox_br"></td>';
    sMsgBox += '</tr>';
    sMsgBox += '</table>';

    var dvHTML = new Element('div', {
        'class': null,
        html: sMsgBox,
        styles: {
            visibility: 'hidden',
            display: 'none',
            position: 'relative'
        }
    }).inject(document.body);
    dvHTML.set('style', elMargin);

    var tipArrow = new Element('img', {
        'src': arrowImg,
        'height': (msgPlacement.toString().toLowerCase() == 'top' || msgPlacement.toString().toLowerCase() == 'bottom') ? '8' : '16',
        'width': (msgPlacement.toString().toLowerCase() == 'top' || msgPlacement.toString().toLowerCase() == 'bottom') ? '16' : '8',
        'class': null,
        styles: {
            visibility: 'hidden',
            display: 'none',
            position: 'relative'
        }
    }).inject(document.body);

    dvHTML.position({
        relativeTo: element,
        position: elPosition,
        edge: edPosition
    });

    tipArrow.position({
        relativeTo: element,
        position: elPosition,
        edge: edPosition
    });

    dvHTML.show();
    tipArrow.reveal();

    //Attach the hide event
    element.addEvent('mouseleave',
        function() {
            dvHTML.dissolve();
            tipArrow.dissolve();
        }
    );
}