/**
 * $Id: JSTextScriptEditBox.js,v 1.1 2011-07-04 05:49:56 anna Exp $
 *
 * Script editor box
 */

function JSTextScriptEditBox( propInfo, format )
{
    JSInput.call(this, propInfo, format); // call parent constructor
    this.objectClassName = "JSTextScriptEditBox";
};

JSTextScriptEditBox.prototype = new JSInput();
JSTextScriptEditBox.superClass = JSInput.prototype;

// override
JSTextScriptEditBox.prototype.createHTMLNode = function()
{
    var propName = this.propInfo.getName();
	
    var width = 220;
	this.node = $('<div/>');

    this.HTMLNode = document.createElement("input");
    this.HTMLNode.type = "text";
    this.HTMLNode.readOnly = true;
    this.HTMLNode.id = this.createNodeId(propName);
    if( this.changeListener != null )
    {
        addModificationListener(this.HTMLNode, this.changeListener);
    }
    $(this.HTMLNode).mousedown(function()
    {
        _this.onMouseDown(propName);
    });
    
    this.HTMLNode.style.width = width+"px";
	this.controlWidth = width;
    
    var detailsButton = $("<input type='button' class='button' value='...'/>").addClass("ui-corner-all").addClass("ui-state-default");
    
    this.node.append(this.HTMLNode);
    this.node.append(detailsButton);
    
    var _this = this;

    $(detailsButton).click(function() {_this.showScriptEditor();});
    return this.node.get(0);
};

JSTextScriptEditBox.prototype.getValue = function()
{
	return this.value;
};

JSTextScriptEditBox.prototype.setValue = function(val)
{
    var oldValue = this.value;
    this.value = val;
    fitElement(this.getHTMLNode(), val, true, this.controlWidth);
    this.fireChangeListeners(oldValue, val);
}

JSTextScriptEditBox.prototype.showScriptEditor = function()
{
    var _this = this;
    var editorId = "TextScriptEditor";
    this.dialogContent = $('<div><div id="' + editorId + '" style="width:100%; height:100%"><textarea id="' + editorId + '_area"></textarea></div></div>');
    
    this.dialogContent.dialog(
    {
        modal: true,
        autoOpen: true,
        width: 600,
        height: 400,
        title: "JavaScript editor",
        open: function(event, ui) {
            editAreaLoader.init(
            {
                id: editorId,
                start_highlight: true,
                allow_resize: "no",
                allow_toggle: false,
                word_wrap: false,
                language: "en",
                syntax: "js",
                toolbar: "go_to_line, |, undo, redo, |, select_font"
            });
            editAreaLoader.setValue(editorId, _this.getValue()); 
        },
        buttons: 
        {
            "Cancel": function()
            {
                $(this).dialog("close");
                $(this).remove();
            },
            "Ok": function()
            {
                _this.setValue(editAreaLoader.getValue(editorId));
                $(this).dialog("close");
                $(this).remove();
            }
        }
    });
};