var $elist = new Array();

function UIHtmlEditor(id)
{
    this.ID = id;
    $elist[this.ID] = this;

    this.CssClass = "eb";
    this.ShowSave = false;
    this.ShowClose = false;
    this.ShowTitle = false;
    this.Height = null;
    this.Width = null;

    this.Render = function(content, title)
    {
        var tbArrWithSave = new Array("save", "bold", "italic", "underline",
        "justifyLeft", "justifyCenter", "justifyRight", "justifyFull",
        "strikeThrough", "subscript", "superscript", "undo", "redo");

        var tbArrWithNoSave = new Array("bold", "italic", "underline",
        "justifyLeft", "justifyCenter", "justifyRight", "justifyFull",
        "strikeThrough", "subscript", "superscript","undo","redo");

        var tbArr = (this.ShowSave ? tbArrWithSave : tbArrWithNoSave);

        if (!title) title = "Editor";
        var styleAttr = "";
        if (this.Height) styleAttr += "height:" + this.Height + ";";
        if (this.Width) styleAttr += "width:" + this.Width + ";";
        if (styleAttr != "") styleAttr = " style='" + styleAttr + "' ";

        var retVal = "<div class='" + this.CssClass + "'>";
        if (this.ShowTitle)
        {
            retVal += "<div class='" + this.CssClass + "_title'><span style='float:left'>" + title + "</span>";
            if (this.ShowClose)
            {
                retVal += "<span style='float:right'><a href='#' onclick='return $dlg.Hide();'>X</a></span>";
            }
            retVal += "</div>";
        }
        retVal += "<div class='" + this.CssClass + "_tb'>";
        for (var i = 0; i < tbArr.length; i++)
        {
            var clsName = this.CssClass + "_btn eb_" + tbArr[i];
            var action = tbArr[i];
            retVal += "<button class='" + clsName + "' title='" + tbArr[i] + "' title='" + tbArr[i] + "'"
            + " onmouseover=\"javascript:this.className='" + clsName + " eb_btn_hover';\""
            + " onmouseout=\"javascript:this.className='" + clsName + "';\""
            + " onclick=\"javascript:return $elist['" + this.ID + "'].OnAction('" + action + "');\"></button>";
        }
        retVal += "</div>";
        retVal += "<div id='" + this.ID + "_editor' contenteditable='true' class='" + this.CssClass + "_cnt'" + (styleAttr != "" ? styleAttr : "") + ">"
        + (content ? content : "") + "</div>";
        retVal += "</div>";

        return retVal;
    }

    this.Focus = function()
    {
        try
        {
            var ed = document.getElementById(this.ID + "_editor");
            ed.focus();
        } 
        catch (ex)
        {
        }
    }

    this.GetContentHtml = function()
    {
        var ed = document.getElementById(this.ID + "_editor");
        return ed.innerHTML;
    }

    this.OnAction = function(action)
    {
        if (action == "save")
        {
            this.OnSave();
        }
        else
        {
            var ed = document.getElementById(this.ID + "_editor");
            try
            {
                document.execCommand(action, false, null);
            }
            catch (ex) { }
            ed.focus();
        }
        return false;
    }

    this.OnSave = function()
    {

    }
}