var g_MessageDisplay_Cnt = 0;

function MessageDisplay(parentDivID) {
    g_MessageDisplay_Cnt++;
    this.autoScroll = true;
    this.parent = $(parentDivID);
    var pnlID = "__pnlDispMsg__" + g_MessageDisplay_Cnt;
    var arrowID = "__btnArrow__" + g_MessageDisplay_Cnt;

    var str = '<div id="' + pnlID + '" style="background-color: White;border-color:black; border-style: solid; border-width: 1px; height: 95%; overflow: scroll; display: block; width: 100%; overflow-x: hidden; line-height: 105%; padding-top: 10px;margin:0 0 0 0;"></div>';
    str += '<a id="' + arrowID + '" onclick = "noPrompt();" href="javascript:MessageDisplay_ScrollToEnd_Internal(\'' + arrowID + '\');" style="display:none;position=absolute;top=239px;left=509;"><img src="images/AnimDownArrow.gif" style="border:none"/></a>';
    this.parent.innerHTML = str;
    this.panel = $(pnlID);
    this.panel.__MessageDisplay = this;
    this.panel.onscroll = MessageDisplay_OnScroll; 
    this.downArrow = $(arrowID);
    this.downArrow.__MessageDisplay = this;

    this.lastElement = null;
    this.escapeHtml = false;
}

MessageDisplay.prototype = {
    writeHtml: MessageDisplay_WriteHtml,
    showDownArrow: MessageDisplay_ShowDownArrow,
    hideDownArrow: MessageDisplay_HideDownArrow,
    scrollToEnd: MessageDisplay_ScrollToEnd,
    clear: function() {
        this.panel.innerHTML = "";
    },
    scrollToView:MessageDisplay_SmoothScrollIntoView
}


function MessageDisplay_WriteHtml(html, className, _escapeHtml) {
    var originalScrollHeight = this.panel.scrollHeight;
    var pElem = document.createElement("p");
    this.lastElement = pElem;
    //pElem.style.position = "aboslute";
    if (typeof (className) != "undefined" && className != null && className != "") {
        pElem.className = className; //"DisplayMessageLine";
    }

    var shouldEscapeHtml = this.escapeHtml;
    // if _escapeHtml not provided use the default one
    if (typeof (_escapeHtml) != "undefined") {
        shouldEscapeHtml = _escapeHtml;
    }

    if (shouldEscapeHtml) {
        html = htmlEncode(html);
    }
    
    pElem.innerHTML = encodeEmoticon(html);// + '<img src="images/emoticons/lol.gif" />';
    this.panel.appendChild(pElem);
    var yposition = this.panel.scrollTop + this.panel.clientHeight;
    if (yposition < originalScrollHeight && !this.autoScroll) {
        this.showDownArrow();
    } else {
    //pElem.scrollIntoView();
        this.scrollToView(this.panel, pElem);
    }
}

//function MessageDisplay_SmoothScrollIntoView(panel, element) {
//    element.scrollIntoView();
//}

function MessageDisplay_SmoothScrollIntoView(panel, element) {
    panel.scrollTop = panel.scrollHeight - panel.clientHeight;
}

function MessageDisplay_ShowDownArrow() {
    this.downArrow.style.position = 'absolute';
    // the style.posLeft, style.posTop, style.posWidth, style.posHeight not supported in Firefox
    if (Prototype.Browser.Gecko) {
        this.downArrow.style.left = (parseInt(this.parent.style.width) - 40) + "px";
        this.downArrow.style.top = (parseInt(this.parent.style.height) - 35) + "px";
    } else {
        this.downArrow.style.posLeft = this.parent.style.posWidth - 40;
        this.downArrow.style.posTop = this.parent.style.posHeight - 35;
    }

    this.downArrow.style.zIndex = 999;
    this.downArrow.style.display = 'inline';
}

function MessageDisplay_HideDownArrow() {
    this.downArrow.style.display = 'none';
}

function MessageDisplay_ScrollToEnd_Internal(btnID) {
    var btn = $(btnID);
    if (typeof (btn.__MessageDisplay) != "undefined") {
        var msgdisp = btn.__MessageDisplay;
        msgdisp.hideDownArrow();
        if (msgdisp.lastElement != null) {
            msgdisp.scrollToView(msgdisp.panel, msgdisp.lastElement);
            msgdisp.autoScroll = true;
        }
    }
}

function MessageDisplay_ScrollToEnd() {
    if (this.lastElement != null) {
        this.scrollToView(this.panel, this.lastElement);
        //this.lastElement.scrollIntoView();
    }
}

function MessageDisplay_OnScroll() {
    if (typeof (this.__MessageDisplay) != "undefined") {
        var msgdisp = this.__MessageDisplay;
        var originalScrollHeight = this.scrollHeight;
        var yposition = this.scrollTop + this.clientHeight;
        if (yposition >= originalScrollHeight - 5) { // give it some margin to consider it as autoscroll
            msgdisp.hideDownArrow();
            msgdisp.autoScroll = true;
        } else {
            msgdisp.autoScroll = false;
        }
    }
}

function encodeEmoticon(input) {
    if (input == undefined) {
        alert("error in encodeEmoticon: input undefined");
        return;
    }
    //input	=	trim(input.toString());

    var replace_with = '<img src="images/emoticons/happy.gif" />';
    // The 'g' in the first argument is used to tell the function 'replace' 
    // that all occurences (g = global)
    // of the character in between slashes have to be replaced.
    input = input.replace(/(:\))/g, replace_with);

    replace_with = '<img src="images/emoticons/veryhappy.gif" />';
    input = input.replace(/(:[Dd])/g, replace_with);

    replace_with = '<img src="images/emoticons/angel.gif" />';
    input = input.replace(/(\((A|a)\))/g, replace_with);

    replace_with = '<img src="images/emoticons/astonished.gif" />';
    input = input.replace(/:[Oo]/g, replace_with);

    replace_with = '<img src="images/emoticons/cool.gif" />';
    input = input.replace(/\-[Oo]}/g, replace_with);

    replace_with = '<img src="images/emoticons/sad.gif" />';
    input = input.replace(/:\(/g, replace_with);

    replace_with = '<img src="images/emoticons/suspicious.gif" />';
    input = input.replace(/:[Ss]/g, replace_with);

    return input;
}