Structure/comx_sdk.node/js/kul_editor_pane.js

//System Pre-define functions Start

//var fs = parent.require('fs');

function COMX_DEBUG(msg)
{
    //console.log('' + msg);
}

function COMX_ERROR(msg)
{
    console.error('' + msg);
}

function OnViewPictures()
{
    model.viewIcons(ui.units.value);
    //unit.form.picture_mgr.Show();
}

//var old_id = false;
function OnHighLight(id, rclick)
{
    //if(old_id == id && rclick == false)return;

    //old_id = id;

    ui.tree.content_menu = false;

    if(ui.cb_pickup_in_preview.valid)
    {
        ui.tree.position = id;
        OnClickTreeItem();

	if(rclick)
	{
	    OnRClickTreeItem();
	}
    }
}

function OnTest(){OnDistribute();}
function OnDistribute()
{
}

function initEslint()
{
    ui.listEslintModel.table = ui.listEslintCallback.table =
        [['Row', 'Column', 'Static Syntax Error List ( Number : 0 )']];
    
    ui.listEslintModel.head_size  = ui.listEslintCallback.head_size = [-1,-1,0];
    ui.listEslintModel.visible    = ui.listEslintCallback.visible   = false;
}


var g_geo_x = 0;
var g_geo_y = 0;
var g_geo_width  = 0;
var g_geo_height = 0;

function _initAttachmentGeometry()
{
    //deal with attachment geometry begin.
    var glo = ui.geometry;
    var sub = ui.GetWidgetGeometry(ui.callback.handle);

    g_geo_width  = glo.width  - sub.width;
    g_geo_height = glo.height - sub.height;
    
    g_geo_x = sub.x - glo.x;
    g_geo_y = sub.y - glo.y;
    
    g_geo_init = true;
    //deal with attachment geometry end.
}

function _initializeData()
{
    _initAttachmentGeometry();
    
    model.distributeAddon();
    
    ui.compile_type.index = 1;
    
    ui.list.tabel = [
	['Property','Value']
    ];
    ui.tree.enable = false;
    ui.list.enable = false;
    ui.pbaf.enable = false;
    ui.pbau.enable = false;
    ui.pbn_execute.enable = false;
    ui.callback_fn_list.list = [];
    ui.model_fn_list.list = [];
        
    model.createDataFolder();
    COMX_DEBUG('OnInitializeData()');
    
    ui.pb_preview.valid = true;

    ui.tree.node = {name : 'form', icon : 'form', id : 0};
        
    //Initialize Copyright Info.
    initCopyrightInfo();

    //Initialize Callback Editor.
    initCallbackEditor();
 
    //Initialize Model Editor.
    //ui.model.lexer="javascript";
    initModelEditor();
    
    ui.gyp.lexer="javascript";
    ui.plugin_src.lexer="cpp";
    ui.append_plugin_btn.enable        = false;
    ui.plugin_sample_codes_flag.enable = false;
    ui.cueline_stack.index = 1;

    //Initialize Kul Editor
    //InitKulEditor();

    //Initialize Plugin Editor
    
    
    //Initialize Lesson Menu Pane.
    InitLessaonPane();

    //Initialize Plugin Pane
    initPluginPane();
    
    //Initialize Unit List
    updateUnitList(true);

    /*
    if(ui.units.value != '')
    {
	OnUnitChanged();
	//Initialize Form List
	updateFormList();
    }
    */

    //Disable Save Button
    ui.pb_save.enable = false;
    
    ui.hot_key = [
        {
            key : "Ctrl+S",
            id : 1
        },
        { 
            key : "Ctrl+E",
            id : 2
        },
        {
            key : "Ctrl+M",
            id : 3
        },
        {
            key : "Ctrl+P",
            id : 4
        },
        {
            key : "Ctrl+R",
            id : 5
        },
        {
            key : "Ctrl+Q",
            id : 6
        },
        {
            key : "Ctrl+F",
            id : 7
        },
        {
            key : "Ctrl+I",
            id : 8
        },
        {
            key : "Ctrl+H",
            id : 9
        }
    ];
        
    ui.cb_pickup_in_preview.valid = true;
}

function OnInitializeData()
{
    ui.pb_plugin_vs.visible = model.isWin32();
    initEslint();
    initJavascriptEditorReadonlyProp();

    model.createShortcut();
}

function OnOpenPluginInVS()
{
    outputInfo('<span style="color:red">警告: 使用Visual Studio打开Plugin解决方案后, 如果再次使用DCiP环境配置/编译Plugin, VS中的自定义配置将被自动清空; VS编译好的.node文件需手动部署(拷贝)到相应的addon文件夹中。</span>');

    var top_ns = (ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value;
    var     ns = ui.plugin_ns.value;
    model.openPluginSolutionInVisualStudio(top_ns, ns);
}

function OnHideSolutionPane()
{
    g_side_docker.hide();
}

function OnChildDockerMessage(type, para){
    if(type == 'exit')
    {
        pane.Close();
    }
    
    if(type == 'develop')
    {
        ui.toolbar_index.index = 0;
    }
    if(type == 'lesson')
    {
        ui.toolbar_index.index = 1;
    }

    if(type == 'copyright')
    {
        ui.toolbar_index.index = 2;
    }

    if(type == 'expend')
    {
        g_tool_bar.show();
    }

    if(type == 'fold')
    {
        g_tool_bar.hide();
    }
}

var g_side_docker = false;
var g_status_bar = false;
var g_toolbar = false;
var g_topmenu = false;
var g_code_snip = false;
var g_log_sidepane = false;
var g_logplugin_sidepane = false;

function _initDockPane()
{
    g_topmenu = ui.docker.load('cw_topmenu', 4, '');
    g_topmenu.setSizePolicy(2);
    
    g_tool_bar = ui.docker.load('toolbarpane_new', 4, '');
    g_tool_bar.setSizePolicy(2);

    g_topmenu.split(g_tool_bar, 2);
    
    g_status_bar  = ui.docker.load('statuspane', 8, '');
    g_status_bar.setSizePolicy(2);
    
    g_side_docker = ui.docker.load('sidepane', 1, "Unit Manager Panel");
    
    parent.setTimeout(()=>{
        g_log_sidepane = ui.docker.load('log_sidepane', 8, 'Log Information Panel');
        //g_log_sidepane.setSizePolicy(2);

        g_logplugin_sidepane = ui.docker.load('logplugin_sidepane', 8, 'Plugin Inform Panel');
        //g_logplugin_sidepane.setSizePolicy(2);
                
        g_log_sidepane.split(g_status_bar, 2);
        g_log_sidepane.split(g_logplugin_sidepane, 1);
        g_log_sidepane.hide();
        g_logplugin_sidepane.hide();

        ui.global_log_info.value = model.loadGlobalLogInfo();
        ui.global_log_info.index = 10000000000000;
        ui.global_log_info.lexer = 'javasciprt';

        ui.plugin_log.keywords = ['gyp', 'info'];
        ui.plugin_log.lexer = 'cpp';
    },1000);

    ui.pb_unit.visible = false;
}

function OnLogFlagChange()
{
    if(ui.log_flag.valid)
    {
        g_logplugin_sidepane.hide();
        g_log_sidepane.show();
    }
    else
    {
        g_log_sidepane.hide();
    }

    //OnGeometryChange();
}

var g_cueline_init = false;
function OnReady()
{
    _initDockPane();

    ui.preview_visible.valid = true;
    setCuelineInfo('Initializing ...');

    _initializeData();

    parent.setTimeout(()=>{

        if(!g_cueline_init)
        {
            g_cueline_init = true;
            resetCueline();
        }

        if(ui.geometry.width > ui.GetScreenGeometry().width ||
           ui.geometry.height > ui.GetScreenGeometry().height)
        {
            ui.show(0);
            ui.show(1);
        }
    }, 1500);
}

function OnCallbackEslintView()
{
    var list = ui.listEslintCallback.list;
    var row    = parseInt(list[0]);
    var column = parseInt(list[1]);

    ui.callback.row    = row - 1;
    ui.callback.column = column - 1;
}

function OnModelEslintView()
{
    var list = ui.listEslintModel.list;
    var row    = parseInt(list[0]);
    var column = parseInt(list[1]);

    ui.model.row    = row - 1;
    ui.model.column = column - 1;
}

function beautifyPluginEntry(cb)
{
    var row     = ui.plugin.row;

    //ui.plugin.range.low  = -1;
    //ui.plugin.range.high = -1;

    var firstVisibleLine = ui.plugin.firstVisibleLine;

    var content = ui.plugin.document;
    
    model.beautifyCpp(content, result=>{
	if(result)
	{
            ui.block_event = true;

            ui.plugin.document = result;
	    ui.plugin.row = row;

	    ui.plugin.firstVisibleLine = firstVisibleLine;

            ui.block_event = false;
	}
	cb();
    });
}

function beautifyPluginCurrentSourceCodes(cb)
{
    var row     = ui.plugin_src.row;
    
    //ui.plugin_src.range.low  = -1;
    //ui.plugin_src.range.high = -1;

    var firstVisibleLine = ui.plugin_src.firstVisibleLine;

    var content = ui.plugin_src.document;
    
    model.beautifyCpp(content, result=>{
	if(result)
	{
            ui.block_event = true;
            
	    ui.plugin_src.document = result;
	    ui.plugin_src.row   = row;
	    ui.plugin_src.firstVisibleLine = firstVisibleLine;

            ui.block_event = false;
	}
	cb();
    });
}

function OnBeautifyPlugin()
{
    if(ui.plugin_ns.value == "") return;

    enableKulEditor(false);
    setCuelineInfo('Saving with automatic code beautification ...');
    beautifyPluginEntry(()=>{
	beautifyPluginCurrentSourceCodes(()=>{
	    savePluginSourceCodesSync();
            resetCueline();
            enableKulEditor(true);
	});
    });
}

function OnPluginLogInfo()
{
    if(ui.plugin_info_btn.valid)
    {
        g_log_sidepane.hide();
        g_logplugin_sidepane.show();
    }
    else
        g_logplugin_sidepane.hide();
}

function isCallbackTab(){ return ui.main_tabctrl.value == 'Callback'; } //index-0
function isModelTab()   { return ui.main_tabctrl.value == 'Model'; }    //index-1
function isLibraryTab() { return ui.main_tabctrl.value == 'Library'; }  //index-2
function isPluginTab()  { return ui.main_tabctrl.value == 'Plugin'; }   //index-3
function isLogTab()     { return ui.main_tabctrl.value == 'Log'; }      //index-4

function OnCloseForm()
{
    OnSaveEx();

    var is_preview = ui.pb_preview.valid;
    
    ui.pb_preview.valid = false;
    OnPreview();
    
    var timeID = parent.setTimeout(()=>{
	parent.clearTimeout(timeID);

	if(ui.MessageBox('DCiP | Message Prompt', 'This application will be closed! Are you sure?',
			 MessageBox.Icon.Information,
			 MessageBox.Button.Yes | MessageBox.Button.No) == MessageBox.Button.Yes)
	{
	    model.saveGlobalLogInfo(ui.global_log_info.value);
	    process.exit();
	}
	else
	{
	    ui.pb_preview.valid = is_preview;
	    OnPreview();
    	}
    }, 300);

    return false;
}

//System Pre-define functions End

//////////////////////////////////////////////////////////////////////////////////
// Widget Callback 

function OnModelFind()
{
    ui.model.regex = ui.model_find.value;
}

function OnCallbackFind()
{
    ui.callback.regex = ui.callback_find.value;
}

function OnSaveEx()
{
    if(g_save_lock) return;
    if(!ui.pb_save.enable) return;
    ui.pb_save.enable = false;
    
    if(isJavaScriptCodeDirty())
    {
        OnSave();
    }

    if(isPluginDirty())
    {
        OnBeautifyPlugin();
    }

    if(isJavaScriptCodeDirty() && isPluginDirty())
    {
        setTimedCueline('When you see this message means that there is a bug in the IDE, please contact zhangxk@dlut.edu.cn.', 5000);
    }
}

function OnHotKey()
{
    if(ui.hot_key == 1)
    {
        OnSaveEx();
    }
        
    if(ui.hot_key == 2)
    {
        OnExecute();
    }
    
    if(ui.hot_key == 3)
    {
        OnFrame();
    }
    
    if(ui.hot_key == 4)
    {
        ui.pb_preview.valid = !ui.pb_preview.valid;
        OnPreview();
    }
    
    if(ui.hot_key == 5)
    {
        OnRegister();
    }
    
    if(ui.hot_key == 6)
    {
        pane.Close();
    }
    
    if(ui.hot_key == 7)
    {
        if(isCallbackTab() && ui.callback.range.low != 0)
        {
            ui.callback_find.value = ui.callback.value;
            OnCallbackFind();
        }
	
        if(isModelTab() && ui.model.range.low != 0)
        {
            ui.model_find.value = ui.model.value;
            OnModelFind();
        }
	if(isPluginTab() && ui.plugin.range.low != 0 &&
           ui.plugin_tab.index == 0)
        {
	    OnPluginEntryFind();
        }
	
	if(isPluginTab() && ui.plugin_src.range.low != 0 &&
           ui.plugin_tab.index == 2)
        {
	    OnPluginSrcFind();
        }
    }

    if(ui.hot_key == 8 && g_snip_buffer)
    {
        ui.callback.inserter = g_snip_buffer;//ui.clipboard;
        OnSave(true, ()=>{
            ui.SetFocus(ui.callback.handle);
            g_callback_dirty = true;
            ui.pb_save.enable = true;
        });
    }

    if(ui.hot_key == 9 && ui.preview_visible.enable)
    {
        ui.preview_visible.valid = !ui.preview_visible.valid;
        OnPreviewVisible();
    }
}

var g_callback_dirty = false;

function checkStaticJavascriptCodes(sci, list)
{
    var row = sci.row;
    var firstVisibleLine = sci.firstVisibleLine;
    
    var content = sci.document;

    if(sci.document == '') return true;
    var ret = false;

    var keysReserve = [];
    var keysReserveModel = acCallbackOfModel(ui.model)(['']);
    if(keysReserveModel) keysReserve = keysReserve.concat(keysReserveModel);
    var keysReserveCallback = acCallbackOfCallback(['']);
    if(keysReserveCallback) keysReserve = keysReserve.concat(keysReserveCallback);
    keysReserve = keysReserve.map(item=>{
	var idx = item.indexOf('?');

	return idx == -1 ? item : item.substring(0, idx);
    });

    //console.log(keysReserve);
    
    if(content)
    {
	//var res = model.beautifyJS(content, ui.units.value);
	var res = model.syntaxStaticCheckJavascript(content, ui.units.value, keysReserve, !ui.pb_preview.valid);
	if(res.fixed)
	{
	    content = res.output;
	    
	    sci.document = content;
	    sci.row = row;
	    sci.firstVisibleLine = firstVisibleLine;
	}

	list.visible = false;
	ret = true;
	if(res.messages && res.messages.length > 0)
	{
	    list.table   = [['Row', 'Column', 'Static Syntax Error List ( Number : ' + res.messages.length + ' )']]
		.concat(res.messages);
	    list.visible = true;
	    list.head_size = [-1,-1,0];

	    //list.color = [0,0,'#EEEEEE'];
	    //list.color = [0,1,'#EEEEEE'];
	    //list.color = [0,2,'#EEEEEE'];

	    list.head_color = '#FFB4B4';

	    ret = false;

	    if(ui.ignore_syntax.valid)
	    {
		ret = true;
	    }
	}
	else
	{
	    list.table   = [['Row', 'Column', 'Static Syntax Error List ( Number : ' + res.messages.length + ' )']];
	}
    }

    return ret;
}


function OnPluginEntryFind()
{
    if(ui.plugin.range.low != 0 && ui.plugin_tab.index == 0 && isPluginTab())
    {
	ui.plugin_entry_find.value = ui.plugin.value;
	ui.plugin.regex = ui.plugin_entry_find.value;
    }

    if(ui.plugin_entry_find.value && ui.plugin_tab.index == 0 && isPluginTab())
    {
	ui.plugin.regex = ui.plugin_entry_find.value;
    }
}

function OnPluginSrcFind()
{
    if(ui.plugin_src.range.low != 0 && ui.plugin_tab.index == 2 && isPluginTab())
    {
	ui.plugin_src_find.value = ui.plugin_src.value;
	ui.plugin_src.regex = ui.plugin_src_find.value;
    }

    if(ui.plugin_src_find.value && ui.plugin_tab.index == 2 && isPluginTab())
    {
	ui.plugin_src.regex = ui.plugin_src_find.value;
    }
}

function OnRegister()
{
    unit.form.register_form.Show();
}

function OnGoCallbackLine()
{
    ui.callback.row = ui.callback_line_no.value - 1;
}

function OnCallbackLineChange()
{
    ui.callback_line_no.value = ui.callback.row + 1;
}

function OnGoModelLine()
{
    ui.model.row = ui.model_line_no.value - 1;
}

function OnModelLineChange()
{
    var require_list = model.getModelPackage(ui.units.value);
    modelRequireAutoComplete(ui.model, require_list);
    
    ui.model_line_no.value = ui.model.row + 1;
}

function getCurrentLineOfScintilla(sci)
{
    return sci.line.replace(/\r|\n/g, '');
}

function isJavascriptRequireMode(sci)
{
    var bIsGlobalMode = /require\('/.test(sci.line);
    var start = sci.line.indexOf('require(\'');
    if(start != -1) start += 8;
    
    var end   = sci.line.indexOf('\')');
    if(end == -1) end = getCurrentLineOfScintilla(sci).length;
    
    return bIsGlobalMode && (sci.column > start && sci.column <= end);
}

function modelRequireAutoComplete(sci, require_list)
{
    if(isJavascriptRequireMode(sci))
    {
	var offset = sci.column - sci.line.indexOf('require(\'') - 9;
	var word = sci.line.substring(sci.line.indexOf('require(\'') + 9, sci.column);

	//var require_list = model.getModelPackage(ui.units.value);
	
	sci.activateAutoComplete(require_list.filter(item=>{
	    return word == '' ? true : item.indexOf(word) == 0;
	}).map(item=>{
	    return item + '?13';
	}), offset);
    }
}

function initJavascriptEditorReadonlyProp()
{
    ui.callback.readonly = true;
    ui.model.readonly    = true;
}

function updateJavascriptEditorReadonlyProp()
{
    ui.callback.readonly = (ui.units.value == 'comx_sdk');
    ui.model.readonly = (ui.units.value == 'comx_sdk');
}

function updateJavascriptEslint()
{
    if(ui.units.value == 'comx_sdk'){
	ui.listEslintModel.visible    = false;
	ui.listEslintCallback.visible = false;
	
	return;
    }
            
    var bPassCallback = checkStaticJavascriptCodes(ui.callback, ui.listEslintCallback);

    var bPassModel    = checkStaticJavascriptCodes(ui.model, ui.listEslintModel);
    
    if(ui.listEslintCallback.table.length >= 2)
    {
	ui.main_tabctrl.index = 0;
    }
    else if(ui.listEslintModel.table.length >= 2)
    {
	ui.main_tabctrl.index = 1;
    }

    return bPassCallback && bPassModel;
}

function OnDocumentChanged()
{
    refreshDocumentModifiedStatus();

    updateApiCallTip();
    updateJavascriptEditorReadonlyProp();
}

async function CheckJavascriptSyntaxBeforeSaveASync()
{
    return new Promise(resolve=>{

        if(!updateJavascriptEslint())
        {
            resolve(false);
            return;
        }

        model.CheckJavascriptSyntax(
	    ui.units.value,
	    ui.forms.value,
	    ui.callback.document,
	    ui.model.document,
	    (err, msg)=>{
		if(err)
		{
		    outputError(msg);
		    resolve(false);
		}
		else
		{
		    resolve(true);
		}
	    }
        );

    }).catch(error=>{
	console.log(error);
    });
}

function OnSave(is_silent, silent_cb)
{
    outputInfo('');

    CheckJavascriptSyntaxBeforeSaveASync().then(success=>{
	if(success)
	{
            ui.cueline_stack.index = 1;
            
            OnSave_(is_silent);
	    outputInfo('');
	    
	    updateFunctionList();

	    if(is_silent && silent_cb) silent_cb(true);
	}
        else
        {
            g_save_lock = false;
            ui.pb_save.enable = true;
        }
    });
}

function OnSave_(is_slient)
{
    model.saveJavascript(
	ui.units.value, ui.forms.value,
	ui.callback.document, ui.model.document);

    ui.callback.dirty = false;
    ui.model.firty = false;

    ui.pb_save.enable = false;

    if(is_slient)
    {
	return;
    }

    ui.callback.dirty = false;
    ui.model.dirty = false;

    var is_preview = ui.pb_preview.valid;

    model.closePreviewForm(ui.forms.value, function(err, result){
	if(err){outputError(result); return;}
	
	if(ui.units.value == 'comx_sdk' && ui.forms.value == 'kul_editor')
	{
	    return;
	}

	ui.pb_preview.valid = is_preview;
	if(ui.pb_preview.valid)
	{
            enableKulEditor(false);
            setCuelineInfo('Save successfully, reloading the form context ...');

	    model.previewForm(ui.units.value, ui.forms.value, function(err, result){
		if(err) {outputError(result); return;}

                model.updateGeometryToPreviewForm(ui.forms.value, getUiGeometry(),()=>{
                    resetCueline();
                    enableKulEditor(true);
                }, !ui.preview_visible.valid);
                
	    }, ui.preview_visible.valid);
	}
    });
}

function OnException(err)
{
    outputError(err);
}

function OnPreviewVisible()
{
    if(!ui.pb_preview.valid) return;

    //OnPreview();
    model.closePreviewForm(ui.forms.value, function(err, result){
	if(err){outputError(result); return}
        ui.pb_preview.valid = true;
        
        if(ui.pb_preview.valid)
        {
            enableKulEditor(false);
            if(ui.preview_visible.valid){
                setCuelineInfo('Loading Preview Form ...');
            }
            else
            {
                setCuelineInfo('Hiding Preview Form ...');
            }
            
            model.previewForm(ui.units.value, ui.forms.value, function(err, result){
                if(err) {outputError(result); return;}
                
                model.updateGeometryToPreviewForm(
                    ui.forms.value,
                    getUiGeometry(),
                    ()=>{
                        // post-process
                        // nothing
                        
                        //parent.setTimeout(()=>{
                        OnClickTreeItem();
                        enableKulEditor(true);
                        resetCueline();
                        //});
                    },
                    !ui.preview_visible.valid
                );
            }, ui.preview_visible.valid);
        }
    });
}

function OnPreview(force_close)
{
    ui.preview_visible.enable = ui.pb_preview.valid;

    var closePreviewForm = model.closePreviewForm;
    if(force_close) closePreviewForm = model.killPreviewForm;
    
    closePreviewForm(ui.forms.value, function(err, result){
	if(err){outputError(result); return}
        if(ui.pb_preview.valid)
        {
            enableKulEditor(false);
            if(ui.preview_visible.valid)
            {
                setCuelineInfo('Loading Preview Form ...');
            }
            else
            {
                setCuelineInfo('Loading Preview Form Context...');
            }

            model.previewForm(ui.units.value, ui.forms.value, function(err, result){
                if(err) {outputError(result); return;}
                
                model.updateGeometryToPreviewForm(
                    ui.forms.value,
                    getUiGeometry(),
                    ()=>{
                        // post-process
                        // nothing
                        
                        resetCueline();
                        enableKulEditor(true);
                    },
                    !ui.preview_visible.valid
                );
            }, ui.preview_visible.valid);
        }
    });
}

function OnGeometryChange()
{
    if(g_side_docker){
        if(ui.preview_visible.valid)model.updateGeometryToPreviewForm(ui.forms.value, getUiGeometry());
    }
}

var g_bUnitChangedLock = false;

function OnAppendUnit()
{
    var new_unit = ui.units.value;
    model.createUnit(new_unit, function(err, ret){
	if(err){ outputError(err); return;}
	outputInfo(ret);

	g_bUnitChangedLock = true;
	updateUnitList(false);

	for(var idx in ui.units.list)
	{
	    if(ui.units.list[idx] == new_unit)
	    {
		ui.units.index = idx;
	    }
	}
	g_bUnitChangedLock = false;

	ui.forms.value = 'mainfrm';
	OnAppendForm();

	//Refresh Plugin Information.
	updatePlugin();
    });
}

function OnFormAccepted()
{
    model.formExists(ui.units.value, ui.forms.value, function(err, result){
	//ui.pbaf.enable = err;
	if(err)
	{
	    OnAppendForm();
	}
	else
	{
	    OnFormChanged();
	}
    });
}

function OnAppendForm()
{
    ui.tree.enable = true;
    ui.list.enable = true;
    ui.pbn_execute.enable = true;
    
    COMX_DEBUG('OnAppendForm caller is ' + OnAppendForm.caller);
    model.createForm(ui.units.value, ui.forms.value, function(err, info){
	if(err) {outputError(info); return;}

	outputInfo(info);

	updateFormList(true);

	//g_current_form_name = false;
	//ui.forms.index = ui.forms.list.length - 1;

	ui.pbaf.enable = false;
    });
}

function OnUnitChangedLight()
{
    model.unitExists(ui.units.value, function(err, result){
	ui.pbau.enable = err;
    });
}

function OnUnitChanged()
{
    if(g_bUnitChangedLock) return;
    
    COMX_DEBUG('OnUnitChanged caller is ' + OnUnitChanged.caller);
    model.unitExists(ui.units.value, function(err, result){
	//ui.pbau.enable = err;
	if(err)
	{
	    OnAppendUnit();
	}
	else
	{
	    updateFormList(false);
	    updatePlugin();
	}
    });
}

function OnUnitIndexChanged()
{
    COMX_DEBUG('OnUnitIndexChanged caller is ' + OnUnitIndexChanged.caller);
    OnUnitChanged();
}

function OnUnitAccepted()
{
    COMX_DEBUG('OnUnitAccepted caller is ' + OnUnitAccepted.caller);
    OnUnitChanged();
}

var g_current_unit_name = false;
var g_current_form_name = false;

function OnFormChangedLight()
{
    model.formExists(ui.units.value, ui.forms.value, function(err, result){
	ui.pbaf.enable = err;
    });
}

var g_bOnFormChangedLock = false;

var g_save_lock = false;
function enableKulEditor(flag)
{
    ui.pb_preview.enable = flag;
    ui.execute_type.enable = flag;
    ui.pb_package.enable = flag;
    ui.pb_distribute.enable = flag;
    ui.preview_visible.enable = flag;

    g_save_lock = !flag;
    //ui.callback.readonly = !flag;
    //ui.model.readonly = !flag;
    //ui.plugin.readonly = !flag;
    //ui.gyp.readonly = !flag;
    //ui.plugin_src.readonly = !flag;
}

function OnFormChanged()
{   
    g_cueline_init = true;
    
    if(g_bOnFormChangedLock) return;
    
    if(g_current_unit_name == ui.units.value &&
       g_current_form_name == ui.forms.value)
    {
	return;
    }

    ui.pb_preview.enable = true;
    ui.execute_type.enable = true;
    ui.pb_package.enable = true;
    ui.pb_distribute.enable = true;
    ui.preview_visible.enable = true;
    
    g_current_unit_name = ui.units.value;
    g_current_form_name = ui.forms.value;
    
    if(ui.forms.value == '<empty>')
    {
	ui.pbaf.enable = false;
	ui.forms.value = '';
	return;
    }

    COMX_DEBUG('OnFormChanged caller is ' + OnFormChanged.caller);

    //ui.codes.value    = ""; // clear possible range states
    ui.callback.document = ""; // clear possible range states
    ui.model.document    = ""; // clear possible range states

    initJavascriptEditorReadonlyProp();
  
    model.formExists(ui.units.value, ui.forms.value, function(err, result){
	//ui.pbaf.enable = err;

	if(err) return;

	model.isDefaultForm(ui.units.value, ui.forms.value, function(err, result){
	    if(err){ outputError(result); return;}
	    
	    ui.cbDF.valid  = result;
	    ui.cbDF.enable = !result; 
	});

	model.loadFormFiles(ui.units.value, ui.forms.value, function(err, result){
	    if(err){ outputError(result); return;}

	    //ui.codes.value    = result.ui_codes;

	    ui.callback.document = result.callback;
	    ui.model.document    = result.model;

	    //ui.codes.dirty    = false;
	    ui.callback.dirty = false;
	    ui.model.dirty    = false;

	    OnDocumentChanged();
            updateJavascriptEslint();
	});

	model.switchCurrentFormDB(ui.units.value, ui.forms.value, function(err, result){
	    if(err){ /*COMX_ERROR(result);*/ return; }

	    //COMX_DEBUG(result.tree);
	    ui.tree.tree = result.tree;
	    OnClickTreeItem();
	});

	var is_preview = ui.pb_preview.valid;

        ui.cueline_stack.index = 1;
        ui.pb_save.enable = false;

	model.closePreviewForm(ui.forms.value, function(err, result){
	    if(err){outputError(result); return}
	    
	    if(ui.units.value == 'comx_sdk' && ui.forms.value == 'kul_editor')
	    {
		return;
	    }
	    ui.pb_preview.valid = is_preview;
            if(ui.pb_preview.valid)
            {
                enableKulEditor(false);
                setCuelineInfo('Loading Preview Form ...');
                
                model.previewForm(ui.units.value, ui.forms.value, function(err, result){
                    if(err) {outputError(result); return;}
                    model.updateGeometryToPreviewForm(
                        ui.forms.value,
                        getUiGeometry(),
                        ()=>{
                            // post-process
                            // nothing
                            resetCueline();
                            enableKulEditor(true);
                        },
                        !ui.preview_visible.valid
                    );
                }, ui.preview_visible.valid);
            }
	});

	updateFunctionList();
	updateCompositeFormList();
    });
}

function OnFormIndexChanged()
{
    COMX_DEBUG('ui.forms.index is ' +  ui.forms.index);
    COMX_DEBUG('OnFormIndexChanged caller is ' + OnFormIndexChanged.caller);
    //OnFormChanged();
    OnFormAccepted();
}

function OnSetDefaultForm()
{
     model.setFormAsDefault(ui.units.value, ui.forms.value, function(err, result){
	 if(err){ outputError(result); return;}

	 outputInfo(JSON.stringify(result));
	 ui.cbDF.enable = false;
    });
}

function OnExecute()
{
    if(ui.execute_type.index == 0)
	model.executeUnit(ui.units.value, ui.forms.value);
    else
	model.executeUnit(ui.units.value, 'mainfrm');
}

function OnDebug()
{
    let geo = ui.GetWidgetGeometry(ui.callback.handle);
    ui.pb_preview.valid = false;
    OnPreview(false);

    setCuelineInfo('<span style="color:darkblue">Starting debugger, please wait a moment ...</span>');
    parent.setTimeout(()=>{
        setCuelineInfo('Ready.'); 
    }, 15000);
    
    ui.debug_btn.visible = false;
    ui.stop_debug_btn.visible = true;
    model.debugUnit(ui.units.value, geo, ()=>{
        ui.debug_btn.visible = true;
        ui.stop_debug_btn.visible = false;
        setCuelineInfo('Ready.'); 
    },()=>{
        setCuelineInfo('Ready.'); 
    });
}

function OnStopDebug()
{
    model.stopDebugUnit(ui.units.value);
}

function OnFrame()
{
    model.executeUnit('comx_sdk', 'kul_editor');
}

function getParentTabIndex()
{
    var ret = [];

    var init_pos = ui.tree.position;
    
    while(true)
    {
	var cur_pos = ui.tree.position;
	var parent_pos = ui.tree.parent;
	if(parent_pos == 1)
	{
	    break;
	}

	ui.tree.position = parent_pos;
	if(isTabctrlTreeNode())
	{
	    var children = ui.tree.children;
	    for(var idx = 0; idx < children.length; ++idx)
	    {
		if(children[idx] == cur_pos)
		{
		    ret.push({id : ui.tree.position, index : idx});
		    break;
		}
	    }
	}
    }

    ui.tree.position = init_pos;
    return ret;
}

function isCompositeWidgetPropList(table)
{
    var ret = false;
    if(!Array.isArray(table))
    {
	return ret;
    }

    table.forEach((item)=>{
	if(item[0] == 'style' &&
	   item[1] == 'composite')
	{
	    ret = true;
	}
    });

    return ret;
}

function clickTreeItem()
{
    var id = ui.tree.position;
    var type = ui.tree.node.name;

    model.getListViewByID(id, type, function(err, result){
	if(err){ outputError(result); return;}

        if(type == 'hbox' || type == 'vbox')
        {
            var scroll_ignore = (result.table[3][1] == 'false');
            if(scroll_ignore)
            {
                result.table = result.table.slice(0,4);
                result.filters = result.filters.slice(0, 2);
            }
        }

	ui.block_event = true;
	if(id == 1 &&
	   isCompositeWidgetPropList(result.table))
	{
	    ui.list.table = [[ 'Property', 'Value' ],
			     [ 'style',    'composite']];
	    
	    ui.list.head_size = [0, 0];
	    ui.list.filter = [0, 1, ['popup', 'composite']];
	}
	else
	{
	    ui.list.table = result.table;
	    ui.list.head_size = [0, 0];
	    
	    for(var prop in result.filters)
	    {
		ui.list.filter = result.filters[prop];
		//COMX_DEBUG((result.filters[prop]));
	    }
	    
	    for(var prop in result.list_buttons)
	    {
		ui.list.button = result.list_buttons[prop];
	    }
	}

	var rows = ui.list.table.length - 1;
	for(var row = 0; row < rows; ++ row)
	{
	    ui.list.readOnly = [row, 0, true];
	}

	ui.block_event = false;
    });

    model.highlightWidget(id);
}

function OnClickTreeItem(bModify)
{
    COMX_DEBUG('OnClickTreeItem caller is ' + OnClickTreeItem.caller);

    clickTreeItem();

    if(ui.tree.position == 1) return;

    model.saveFormDBToKul(
	ui.units.value, ui.forms.value,
	function(err, result){
	    if(err){outputError(result); return;}
	    if(ui.units.value == 'comx_sdk' && ui.forms.value == 'kul_editor')
	    {
		return;
	    }
		
	    if(ui.preview_visible.valid)
            {
                model.reloadPreviewForm(
		    ui.forms.value,
		    getParentTabIndex(),
		    function(err, result){
		        if(err) {if(result != false)outputError(result); return;}
		        if(ui.preview_visible.valid)
                        {
                            model.updateGeometryToPreviewForm(ui.forms.value,  getUiGeometry());
                        }
		    });
            }
	});
}

var g_old_list = false;
function OnPropertyDClick()
{
    outputInfo('');
    g_old_list = ui.list.list;
}

function isInArray(arr, val)
{
    for(var loop = 0; loop < arr.length; ++loop)
    {
	if(arr[loop] == val)
	{
	    return true;
	}
    }

    return false;
}

function isEventProp(prop)
{
    var event_list = model.getEventList();
    
    if(!event_list)
    {
	return false;
    }

    return isInArray(event_list, prop);
}

function createCallbackTemplate(prop, value, cb)
{
    if(!value)
    {
	if(cb)cb(false);
	
	return;
    }
    
    if(isEventProp(prop))
    {
	var fn = pickupCallbackFunctionName(value);
	var callback = "\n\nfunction " + fn + "(){\n\n}\n";

	var cur_cb_list = ui.callback_fn_list.list;

	if(!isInArray(cur_cb_list, fn) && fn)
	{
	    ui.callback.regex = '641a254c-ef3e-11ea-bc8a-379bb908bdd7';
	    ui.callback.column = ui.callback.line.length - 1;
	    ui.callback.inserter = callback;

	    OnSave(true, cb);
	}
	else
	{
	    cb(false);
	}
    }
    else
    {
	cb(false);
    }
}

function isInteger(value)
{
    return /^[0-9]\d*$/.test( '' + value);
}

function isDataProp(value)
{
    return /^\d*[ \t]*,[ \t]*\d*[ \t]*,[ \t]*\d*$/.test('' + value);
}

function checkPropValue(prop, value)
{
    if(prop == 'width' || prop == 'height')
    {
	if(ui.tree.position == 1 && value == 'auto')
	{
	    return true;
	}

	return isInteger(value);
    }

    if(prop == 'size')
    {
	return value == 'auto' || isInteger(value);
    }

    if(prop == 'data' &&
       (ui.tree.node.name == 'hprogbar' ||
	ui.tree.node.name == 'vprogbar' ||
	ui.tree.node.name == 'hslider'  ||
	ui.tree.node.name == 'vslider'  ||
	ui.tree.node.name == 'spin'
       ))
    {
	return isDataProp(value);
    }

    if(prop == 'margin' ||
       prop == 'group_id' ||
       prop == 'icon_size' ||
       prop == 'icon_hint')
    {
	return isInteger(value);
    }

    return true;
}

var g_OnPropertyChange_lock = false;

function OnPropertyClick()
{
    var row    = arguments[0];
    var column = arguments[1];

    ui.list.row = row;
    
    var prop  = ui.list.list[0];
    var value = ui.list.list[1];

    if(prop == 'bitmap' ||
       prop == 'picture' ||
       prop == 'icon')
    {
	unit.form.picture_mgr.Show();
    }
}
 
function OnPropertyChange()
{
    if(g_OnPropertyChange_lock) return;
    
    var row    = arguments[0];
    var column = arguments[1];

    if(column == 0)
    {
	if(g_old_list)
	{
	    ui.list.list = g_old_list;
	    g_old_list = false;
	}
	
	return;
    }

    ui.list.row = row;

    //if(ui.list.column == 1)
    {
	var prop  = ui.list.list[0];
	var value = ui.list.list[1];

	value = value.replace(/(^[\s\t]*)|([\s\t]*$)/g, "");
	
	if(isEventProp(prop))
	{
	    if(value)
	    {
		var fn = pickupCallbackFunctionName(value);
		if(fn == '')
		{
		    g_OnPropertyChange_lock = true;

		    ui.list.list = g_old_list;
		    g_old_list = false;
		    
		    g_OnPropertyChange_lock = false;
		    
		    outputError('The input value[\'' + value + '\'] of property[\'' + prop + '\'] is invalid!');
		    
		    return;
		}
	    }
	}

	if(!checkPropValue(prop, value))
	{
	    g_OnPropertyChange_lock = true;
	    
	    ui.list.list = g_old_list;
	    g_old_list = false;
	    
	    g_OnPropertyChange_lock = false;
	    
	    outputError('The input value[\'' + value + '\'] of property[\'' + prop + '\'] is invalid!');
	    
	    return;
	}

	createCallbackTemplate(prop, value, (flag)=>{

	    //var value = ui.list.value;
	    //var prop = ui.list.value;
	    
	    //COMX_DEBUG('the ID of current DB is ' + ui.tree.position);
	    //COMX_DEBUG('prop[' + prop + ']\'s value is ' + value);

	    //console.log('value is ' + value);
	    //console.log('prop is ' + prop);
	    model.updateWidgetPropertyToDB(ui.tree.position, prop, value, function(err, result){
		if(err){outputError(result); return;}

                var type = ui.tree.node.name;
                if(prop == 'scroll' && (type == 'hbox' || type == 'vbox'))
                {
                    clickTreeItem();
                }
		
		model.saveFormDBToKul(
		    ui.units.value, ui.forms.value,
		    function(err, result){
			if(err){outputError(result); return;}
			
		        outputInfo('');

			if(ui.tree.position == 1 &&
			   (prop == 'resize' ||
			    prop == 'maximum_box' ||
			    prop == 'minimum_box'
			   ))
			{
			    clickTreeItem();
			}

			if(ui.tree.position == 1 &&
			   prop == 'style')
			{
			    parent.setTimeout(clickTreeItem, 0);
			}

			if(!ui.pb_preview.valid)
			{
			    return;
			}

			if(ui.tree.position == 1 || flag)
			{
			    var is_preview = ui.pb_preview.valid;
			    model.closePreviewForm(ui.forms.value, function(err, result){
				if(err){console.log(err);outputError(result); return}
				if(ui.units.value == 'comx_sdk' && ui.forms.value == 'kul_editor')
				{
				    return;
				}
				ui.pb_preview.valid = is_preview;

                                enableKulEditor(false);
                                setCuelineInfo('Property has been saved,reloading the form context ...');

				model.previewForm(
				    ui.units.value,
				    ui.forms.value,
				    function(err, result){
					if(err) {outputError(result); return;}
					model.updateGeometryToPreviewForm(
					    ui.forms.value, getUiGeometry(),()=>{
                                                resetCueline();
                                                enableKulEditor(true);
                                            },
                                            !ui.preview_visible.valid
                                        );
					
				    }, ui.preview_visible.valid);
			    });
			}
			else
			{
			    if(ui.units.value == 'comx_sdk' && ui.forms.value == 'kul_editor')
			    {
				return;
			    }
			    
			    enableKulEditor(false);
                            setCuelineInfo('Property has been saved,reloading the form context ...');
                            
                            model.reloadPreviewForm(ui.forms.value, 0, function(err, result){
				if(err) {outputError(result); return;}

                                model.updateGeometryToPreviewForm(
                                    ui.forms.value,
                                    getUiGeometry(),
                                    ()=>{
                                        resetCueline();
                                        enableKulEditor(true);
                                    },
                                    !ui.preview_visible.valid
                                );
                            }, !ui.preview_visible.valid);
			}
		    });
	    });
	});
	// restore column 
	// ui.list.column = 1;
    }
}

function getParentTreeNodeType()
{
    var old_position = ui.tree.position;
    ui.tree.position = ui.tree.parent;
    var type = ui.tree.node.name;
    ui.tree.position = old_position;

    return type;
}

function getParentTreeNodeID()
{
    var old_position = ui.tree.position;
    ui.tree.position = ui.tree.parent;
    var id = ui.tree.node.id;
    ui.tree.position = old_position;

    return id;
}

function isContrainTreeNode()
{
    var type = ui.tree.node.name;
    return type == 'hbox' || type == 'vbox' || type == 'stack' || type == "tabctrl";
}

function isTabctrlTreeNode()
{
    var type = ui.tree.node.name;
    return type == "tabctrl";
}

function isFormTreeNode()
{
    var type = ui.tree.node.name;
    return type == 'form';
}

function isHBoxConstrainTreeNode()
{
    var type = ui.tree.node.name;
    return type == 'hbox';
}

function isVBoxConstrainTreeNode()
{
    var type = ui.tree.node.name;
    return type == 'vbox';
}

function isPlainConstrainTreeNode()
{
    var type = ui.tree.node.name;
    return type == 'hbox' || type == 'vbox';
}

function isPlainConstrainParentTreeNode()
{
    var type = getParentTreeNodeType();
    return type == 'hbox' || type == 'vbox';
}

function isHBoxConstrainParentTreeNode()
{
    var type = getParentTreeNodeType();
    return type == 'hbox';
}

function isVBoxConstrainParentTreeNode()
{
    var type = getParentTreeNodeType();
    return type == 'vbox';
}

function isStackConstrainTreeNode()
{
    var type = ui.tree.node.name;
    return type == 'stack';
}

function isPlainConstrainParentTreeNode()
{
    var type = getParentTreeNodeType();
    return type == 'hbox' || type == 'vbox';
}

function isLeafTreeNode()
{
    return (!isContrainTreeNode()) && (!(isFormTreeNode()));
}

function hasChildTreeNode()
{
    return ui.tree.children != undefined;
}

function popupFormContentMenu()
{
    if(!isFormTreeNode()) return;

    if(!hasChildTreeNode())
    {
	var menu = [
	    {
		name : 'Append a Top Constrain',
		icon : '',
		id   : '1',
                children : [
		    {
                        name : 'Horizontal Box',
                        icon : 'hbox',
                        id   : '11'
		    },
		    {
                        name : 'Vertical Box',
                        icon : 'vbox',
                        id   : '12'
                    },
                    {
                        name : 'Tabctrl',
                        icon : 'tabctrl',
                        id   : '14'
                    }
                ]
	    },
	    {
		name : '-'
	    }];

	if(parseWidgetFromClipboard())
	{
	    menu.push({
                name : 'Append from Clipboard',
                icon : 'paste1',
                id : '5'    
            });
	}
	
	ui.tree.content_menu = menu;
    }
    else
    {
	ui.tree.content_menu = [
	    {
		name : 'Clear all Sub Widget',
		icon : 'clear',
		id   : '2'
	    }  
	];
    }
}

function parseWidgetFromClipboard()
{
    var clipcontent = ui.clipboard;
        
    try
    {
        var obj = JSON.parse(clipcontent);
        if(obj.node && obj.db)
        {
            var travelArray = [];
            travelArray.push(obj.db);
            
            for(var loop = 0; loop < travelArray.length; ++loop)
            {
                var node = travelArray[loop];
                var props = node.property;
                
                for(var idx = 0; idx < props.length; ++idx)
                {
                    var prop_item = props[idx];
		    
                    var value = "";
                    if(prop_item._)
                        value = prop_item._;
                    
                    var name = prop_item.$.name;
                    
                    if(name == 'name' && value != '')
                    {
                        prop_item._ = '';
                    }
		    
		    if(isEventProp(name) && value != '')
		    {
			prop_item._ = '';
		    }
                }
                
                if(node.widget)
                {
                    for(var sub_loop = 0; sub_loop < node.widget.length; ++sub_loop)
                    {
                        travelArray.push(node.widget[sub_loop]);
                    }
                }
            }
            
            return obj;
        }
    }
    catch(e)
    {
        return false;
    }
}

function popupConstrainContentMenu()
{
    if(!isContrainTreeNode()) return;
            
    var content_menu = [
	{
	    name : 'Append a Constrain',
	    icon : '',
	    id   : '1',
            children : [
                {
                    name : 'Horizontal Box',
                    icon : 'hbox',
                    id   : '11'
                },
                {
                    name : 'Vertical Box',
                    icon : 'vbox',
                    id   : '12'
                },
                {
                    name : 'Stack',
                    icon : 'stack',
                    id   : '13'
                },
                {
                    name : 'Tabctrl',
                    icon : 'tabctrl',
                    id   : '14'
                }
            ]
	},
        {
           name : 'Append a Widget',
           icon : '',
           id   : '1',
           children : [
                {
                    name : 'Bitmap',
                    icon : 'bitmap',
                    id   : '17'
                },
                {
                    name : 'Checkbutton',
                    icon : 'checkbutton',
                    id   : '18'
                },
                {
                    name : 'Combobox',
                    icon : 'combobox',
                    id   : '19'
                },
                {
                    name : 'Edit',
                    icon : 'edit',
                    id   : '20'
                },
	        {
                    name : 'Glcanvas',
                    icon : 'glcanvas',
                    id   : '33'
                },
                {
                    name : 'Label',
                    icon : 'label',
                    id   : '21'
                },
                {
                    name : 'Listbox',
                    icon : 'listbox',
                    id   : '22'
                },
                {
                    name : 'List',
                    icon : 'list',
                    id   : '23'
                },
                {
                    name : 'Horizontal Progressbar',
                    icon : 'hprogbar',
                    id   : '24'
                },
                {
                    name : 'Vertical Progressbar',
                    icon : 'vprogbar',
                    id   : '25'
                },
                {
                    name : 'Pushbutton',
                    icon : 'pushbutton',
                    id   : '26'
                },
                {
                    name : 'Radiobutton',
                    icon : 'radiobutton',
                    id   : '27'
                },
                {
                    name : 'Scintilla',
                    icon : 'edit',
                    id   : '28'
                },
                {
                    name : 'Horizontal Slider',
                    icon : 'hslider',
                    id   : '29'
                },
                {
                    name : 'Vertical Slider',
                    icon : 'vslider',
                    id   : '30'
                },
                {
                    name : 'Spin',
                    icon : 'spin',
                    id   : '31'
                },
                {
                    name : 'Tree',
                    icon : 'tree',
                    id   : '32'
                },
                {
                    name : 'Constrain',
                    icon : 'constrain',
                    id   : '35'
                },
                {
		   name : 'Webview',
		   icon : 'webview',
		   id   : '36'
	       }
           ]
        }	
    ];
        
    if(isStackConstrainTreeNode())
    {
        content_menu = [
            {
                name : 'Append a Constrain',
                icon : '',
                id   : '1',
                children : [
                    {
                        name : 'Horizontal Box',
                        icon : 'hbox',
                        id   : '11'
                    },
                    {
                        name : 'Vertical Box',
                        icon : 'vbox',
                        id   : '12'
                    },
                    {
			name : 'Stack',
			icon : 'stack',
			id   : '13'
                    }
                ]
            },
            {
                name : 'Append a Widget',
                icon : '',
                id   : '1',
                children : [
                    {
                        name : 'Bitmap',
                        icon : 'bitmap',
                        id   : '17'
                    },
                    {
                        name : 'Checkbutton',
                        icon : 'checkbutton',
                        id   : '18'
                    },
                    {
                        name : 'Combobox',
                        icon : 'combobox',
                        id   : '19'
                    },
                    {
                        name : 'Edit',
                        icon : 'edit',
                        id   : '20'
                    },
		    {
			name : 'Glcanvas',
			icon : 'glcanvas',
			id   : '33'
		    },
                    {
                        name : 'Label',
                        icon : 'label',
                        id   : '21'
                    },
                    {
                        name : 'Listbox',
                        icon : 'listbox',
                        id   : '22'
                    },
                    {
                        name : 'List',
                        icon : 'list',
                        id   : '23'
                    },
                    {
                        name : 'Horizontal Progressbar',
                        icon : 'hprogbar',
                        id   : '24'
                    },
                    {
                        name : 'Vertical Progressbar',
                        icon : 'vprogbar',
                        id   : '25'
                    },
                    {
                        name : 'Pushbutton',
                        icon : 'pushbutton',
                        id   : '26'
                    },
                    {
                        name : 'Radiobutton',
                        icon : 'radiobutton',
                        id   : '27'
                    },
                    {
                        name : 'Scintilla',
                        icon : 'edit',
                        id   : '28'
                    },
                    {
                        name : 'Horizontal Slider',
                        icon : 'hslider',
                        id   : '29'
                    },
                    {
                        name : 'Vertical Slider',
                        icon : 'vslider',
                        id   : '30'
                    },
                    {
                        name : 'Spin',
                        icon : 'spin',
                        id   : '31'
                    },
                    {
                        name : 'Tree',
                        icon : 'tree',
                        id   : '32'
                    },
                    {
                        name : 'Constrain',
                        icon : 'constrain',
                        id   : '35'
                    },
		    {
			name : 'Webview',
			icon : 'webview',
			id   : '36'
		    }
                ]
            }
        ];
    }

    if(isPlainConstrainTreeNode())
    {
	if(isHBoxConstrainTreeNode())
	{
             content_menu.push(
	    {
		name : 'Append a Stretch',
		icon : '',
		id   : '1',
                children : [
                    {
                        name : 'Space',
                        icon : 'hspace',
                        id   : '15'
                    },
                    {
                        name : 'Separator',
                        icon : 'vseparator',
                        id   : '16'
                    }
                ]
	    });
	}

	if(isVBoxConstrainTreeNode())
	{
             content_menu.push(
	    {
		name : 'Append a Stretch',
		icon : '',
		id   : '1',
                children : [
                    {
                        name : 'Space',
                        icon : 'vspace',
                        id   : '15'
                    },
                    {
                        name : 'Separator',
                        icon : 'hseparator',
                        id   : '16'
                    }
                ]
	    });
	}
    }

    content_menu.push(
	{
	    name : '-'
	});

    if(getParentTreeNodeType() != 'form')
    {
	content_menu.push(
	    {
		name : 'Insert a Constrain',
		icon : '',
		id   : '6',
		children : [
                    {
			name : 'Horizontal Box',
			icon : 'hbox',
			id   : '111'
                    },
                    {
			name : 'Vertical Box',
			icon : 'vbox',
			id   : '112'
                    },
                    {
			name : 'Stack',
			icon : 'stack',
			id   : '113'
                    },
                    {
			name : 'Tabctrl',
			icon : 'tabctrl',
			id   : '114'
                    }
		]
	    });
	
	content_menu.push(
	    {
		name : 'Insert a Widget',
		icon : '',
		id   : '6',
		children : [
                    {
			name : 'Bitmap',
			icon : 'bitmap',
			id   : '117'
                    },
                    {
			name : 'Checkbutton',
			icon : 'checkbutton',
			id   : '118'
                    },
                    {
			name : 'Combobox',
			icon : 'combobox',
			id   : '119'
                    },
                    {
			name : 'Edit',
			icon : 'edit',
			id   : '120'
                    },
	            {
			name : 'Glcanvas',
			icon : 'glcanvas',
			id   : '133'
                    },
                    {
			name : 'Label',
			icon : 'label',
			id   : '121'
                    },
                    {
			name : 'Listbox',
			icon : 'listbox',
			id   : '122'
                    },
                    {
			name : 'List',
			icon : 'list',
			id   : '123'
                    },
                    {
			name : 'Horizontal Progressbar',
			icon : 'hprogbar',
			id   : '124'
                    },
                    {
			name : 'Vertical Progressbar',
			icon : 'vprogbar',
			id   : '125'
                    },
                    {
			name : 'Pushbutton',
			icon : 'pushbutton',
			id   : '126'
                    },
                    {
			name : 'Radiobutton',
			icon : 'radiobutton',
			id   : '127'
                    },
                    {
			name : 'Scintilla',
			icon : 'edit',
			id   : '128'
                    },
                    {
			name : 'Horizontal Slider',
			icon : 'hslider',
			id   : '129'
                    },
                    {
			name : 'Vertical Slider',
			icon : 'vslider',
			id   : '130'
                    },
                    {
			name : 'Spin',
			icon : 'spin',
			id   : '131'
                    },
                    {
			name : 'Tree',
			icon : 'tree',
			id   : '132'
                    },
                    {
			name : 'Constrain',
			icon : 'constrain',
			id   : '135'
                    },
		    {
			name : 'Webview',
			icon : 'webview',
			id   : '135'
		    }
		]
            });
	
	if(isPlainConstrainParentTreeNode())
	{
	    if(isHBoxConstrainParentTreeNode())
	    {
		content_menu.push(
		    {
			name : 'Insert a Stretch',
			icon : '',
			id   : '6',
			children : [
			    {
				name : 'Space',
				icon : 'hspace',
				id   : '115'
			    },
			    {
				name : 'Separator',
				icon : 'vseparator',
				id   : '116'
			    }
			]
		    });
	    }
	    
	    if(isVBoxConstrainParentTreeNode())
	    {
		content_menu.push(
		    {
			name : 'Insert a Stretch',
			icon : '',
			id   : '6',
			children : [
			    {
				name : 'Space',
				icon : 'vspace',
				id   : '115'
			    },
			    {
				name : 'Separator',
				icon : 'hseparator',
				id   : '116'
			    }
			]
		    });
	    }
	}
    
	content_menu.push(
	    {
		name : '-'
	    });
    }
    content_menu.push(
	{
	    name : 'Clear all Sub Widget',
	    icon : 'clear',
	    id   : '2'
	});
    content_menu.push(
	{
	    name : 'Delete this Constrain',
	    icon : 'delete1',
	    id   : '3'
	});
    content_menu.push(
	{
	    name : '-'
	});
        
     if(parseWidgetFromClipboard())
    {
        content_menu.push(
            {
                name : 'Append from Clipboard',
                icon : 'paste1',
                id : '5'    
            });
        
        var parent_type = getParentTreeNodeType();
        if(parent_type == 'hbox' ||
           parent_type == 'vbox' ||
           parent_type == 'stack' ||
           parent_type == 'tabctrl')
        {
            content_menu.push(
                {
                    name : 'Insert from Clipboard',
                    icon : 'paste1',
                    id : '51'    
                });
        }
    }
    
    content_menu.push(
	{
	    name : 'Copy to Clipboard',
            icon : 'copy',
            id : '4'    
	});
    
    if(g_composite_widget_list.length != 0)
    {
	var cw_list = g_composite_widget_list;
	
	var appendWidgetMenu = content_menu[1].children;
	
	var insertWidgetMenu = false;
	
	for(var loop = 0; loop < content_menu.length; ++loop)
	{
	    if(content_menu[loop].name == 'Insert a Widget')
	    {
		insertWidgetMenu = content_menu[loop].children;
		break;
	    }
	}
	
	var current_form_name = ui.forms.value;
	
	var isCurrentComposite = false;
	
	for(var loop = 0; loop < cw_list.length; ++loop)
	{
	    if(cw_list[loop] == current_form_name)
	    {
		isCurrentComposite = true;
		break;
	    }
	}
	
	if(cw_list.length != 0 && !isCurrentComposite)
	{
	    var cw_children_append = [];
	    var cw_children_insert = [];
	    for(var loop = 0; loop < cw_list.length; ++loop)
	    {
		cw_children_append.push({
		    name : cw_list[loop],
		    icon : 'cw',
		    id   : 1024 + loop
		});
		
		cw_children_insert.push({
		    name : cw_list[loop],
		    icon : 'cw',
		    id   : 2024 + loop
		});
	    }
	    
	    appendWidgetMenu.push({
		name : '-'
	    });
	    
	    appendWidgetMenu.push({
		name : 'Composite Widget',
		icon : 'composite',
		id   : '34',
		children : cw_children_append
	    });
	    
	    if(insertWidgetMenu)
	    {
		insertWidgetMenu.push({
		    name : '-'
		});
		
		insertWidgetMenu.push({
		    name : 'Composite Widget',
		    icon : 'composite',
		    id   : '34',
		    children : cw_children_insert
		});
	    }
	}
    }
    
    ui.tree.content_menu = content_menu;
}

function getTypeFromID(id)
{
    if(id > 200) id -= 100;
    if(id > 100) id -= 100;

    if(id == 11) return 'hbox';
    if(id == 12) return 'vbox';
    if(id == 13) return 'stack';
    if(id == 14) return 'tabctrl';
    if(id == 17) return 'bitmap';
    if(id == 18) return 'checkbutton';
    if(id == 19) return 'combobox';
    if(id == 20) return 'edit';
    if(id == 21) return 'label';
    if(id == 22) return 'listbox';
    if(id == 23) return 'list';
    if(id == 24) return 'hprogbar';
    if(id == 25) return 'vprogbar';
    if(id == 26) return 'pushbutton';
    if(id == 27) return 'radiobutton';
    if(id == 28) return 'scintilla';
    if(id == 29) return 'hslider';
    if(id == 30) return 'vslider';
    if(id == 31) return 'spin'; 
    if(id == 32) return 'tree';
    if(id == 33) return 'glcanvas';
    if(id == 34) return 'composite';
    if(id == 35) return 'constrain';
    if(id == 36) return 'webview';

    if(id == 15) return 'space';
    if(id == 16) return 'separator';
}

function getIconFromID(id)
{
    if(id > 200) id -= 100;
    if(id > 100) id -= 100;

    if(id > 1000) id = 34;
    
    if(id == 11) return 'hbox';
    if(id == 12) return 'vbox';
    if(id == 13) return 'stack';
    if(id == 14) return 'tabctrl';
    if(id == 17) return 'bitmap';
    if(id == 18) return 'checkbutton';
    if(id == 19) return 'combobox';
    if(id == 20) return 'edit';
    if(id == 21) return 'label';
    if(id == 22) return 'listbox';
    if(id == 23) return 'list';
    if(id == 24) return 'hprogbar';
    if(id == 25) return 'vprogbar';
    if(id == 26) return 'pushbutton';
    if(id == 27) return 'radiobutton';
    if(id == 28) return 'scintilla';
    if(id == 29) return 'hslider';
    if(id == 30) return 'vslider';
    if(id == 31) return 'spin'; 
    if(id == 32) return 'tree';
    if(id == 33) return 'glcanvas';
    if(id == 34) return 'composite';
    if(id == 35) return 'constrain';
    if(id == 36) return 'webview';

    if(getParentTreeNodeType() == 'hbox')
    {
	if(id == 15) return 'hspace';
	if(id == 16) return 'vseparator';
    }
    else
    {
	if(id == 15) return 'vspace';
	if(id == 16) return 'hseparator';
    }
}

function popupLeafWidgetContentMenu()
{
    if(!isLeafTreeNode()) return;
    if(isContrainTreeNode() || isFormTreeNode()) return ;

    ///////////////////////////////////////////////////////////
    var content_menu = [
	{
	    name : 'Append a Constrain',
	    icon : '',
	    id   : '1',
            children : [
                {
                    name : 'Horizontal Box',
                    icon : 'hbox',
                    id   : '11'
                },
                {
                    name : 'Vertical Box',
                    icon : 'vbox',
                    id   : '12'
                },
                {
                    name : 'Stack',
                    icon : 'stack',
                    id   : '13'
                },
                {
                    name : 'Tabctrl',
                    icon : 'tabctrl',
                    id   : '14'
                }
            ]
	},
        {
           name : 'Append a Widget',
           icon : '',
           id   : '1',
           children : [
                {
                    name : 'Bitmap',
                    icon : 'bitmap',
                    id   : '17'
                },
                {
                    name : 'Checkbutton',
                    icon : 'checkbutton',
                    id   : '18'
                },
                {
                    name : 'Combobox',
                    icon : 'combobox',
                    id   : '19'
                },
                {
                    name : 'Edit',
                    icon : 'edit',
                    id   : '20'
                },
	        {
                    name : 'Glcanvas',
                    icon : 'glcanvas',
                    id   : '33'
                },
                {
                    name : 'Label',
                    icon : 'label',
                    id   : '21'
                },
                {
                    name : 'Listbox',
                    icon : 'listbox',
                    id   : '22'
                },
                {
                    name : 'List',
                    icon : 'list',
                    id   : '23'
                },
                {
                    name : 'Horizontal Progressbar',
                    icon : 'hprogbar',
                    id   : '24'
                },
                {
                    name : 'Vertical Progressbar',
                    icon : 'vprogbar',
                    id   : '25'
                },
                {
                    name : 'Pushbutton',
                    icon : 'pushbutton',
                    id   : '26'
                },
                {
                    name : 'Radiobutton',
                    icon : 'radiobutton',
                    id   : '27'
                },
                {
                    name : 'Scintilla',
                    icon : 'edit',
                    id   : '28'
                },
                {
                    name : 'Horizontal Slider',
                    icon : 'hslider',
                    id   : '29'
                },
                {
                    name : 'Vertical Slider',
                    icon : 'vslider',
                    id   : '30'
                },
                {
                    name : 'Spin',
                    icon : 'spin',
                    id   : '31'
                },
                {
                    name : 'Tree',
                    icon : 'tree',
                    id   : '32'
                },
                {
                    name : 'Constrain',
                    icon : 'constrain',
                    id   : '35'
                },
	        {
		   name : 'Webview',
		   icon : 'webview',
		   id   : '36'
	        }
           ]
        }	
    ];

    if(getParentTreeNodeType() == 'stack')
    {
        content_menu = [
            {
                name : 'Append a Constrain',
                icon : '',
                id   : '1',
                children : [
                    {
                        name : 'Horizontal Box',
                        icon : 'hbox',
                        id   : '11'
                    },
                    {
                        name : 'Vertical Box',
                        icon : 'vbox',
                        id   : '12'
                    },
                    {
			name : 'Stack',
			icon : 'stack',
			id   : '13'
                    }
                ]
            },
            {
                name : 'Append a Widget',
                icon : '',
                id   : '1',
                children : [
                    {
                        name : 'Bitmap',
                        icon : 'bitmap',
                        id   : '17'
                    },
                    {
                        name : 'Checkbutton',
                        icon : 'checkbutton',
                        id   : '18'
                    },
                    {
                        name : 'Combobox',
                        icon : 'combobox',
                        id   : '19'
                    },
                    {
                        name : 'Edit',
                        icon : 'edit',
                        id   : '20'
                    },
		    {
			name : 'Glcanvas',
			icon : 'glcanvas',
			id   : '33'
		    },
                    {
                        name : 'Label',
                        icon : 'label',
                        id   : '21'
                    },
                    {
                        name : 'Listbox',
                        icon : 'listbox',
                        id   : '22'
                    },
                    {
                        name : 'List',
                        icon : 'list',
                        id   : '23'
                    },
                    {
                        name : 'Horizontal Progressbar',
                        icon : 'hprogbar',
                        id   : '24'
                    },
                    {
                        name : 'Vertical Progressbar',
                        icon : 'vprogbar',
                        id   : '25'
                    },
                    {
                        name : 'Pushbutton',
                        icon : 'pushbutton',
                        id   : '26'
                    },
                    {
                        name : 'Radiobutton',
                        icon : 'radiobutton',
                        id   : '27'
                    },
                    {
                        name : 'Scintilla',
                        icon : 'edit',
                        id   : '28'
                    },
                    {
                        name : 'Horizontal Slider',
                        icon : 'hslider',
                        id   : '29'
                    },
                    {
                        name : 'Vertical Slider',
                        icon : 'vslider',
                        id   : '30'
                    },
                    {
                        name : 'Spin',
                        icon : 'spin',
                        id   : '31'
                    },
                    {
                        name : 'Tree',
                        icon : 'tree',
                        id   : '32'
                    },
                    {
                        name : 'Constrain',
                        icon : 'constrain',
                        id   : '35'
                    },
		    {
			name : 'Webview',
			icon : 'webview',
			id   : '36'
		    }
                ]
            }
        ];
    }

    if(getParentTreeNodeType() == 'hbox' || getParentTreeNodeType() == 'vbox')
    {
	if(getParentTreeNodeType() == 'hbox')
	{
            content_menu.push(
	    {
		name : 'Append a Stretch',
		icon : '',
		id   : '1',
                children : [
                    {
                        name : 'Space',
                        icon : 'hspace',
                        id   : '15'
                    },
                    {
                        name : 'Separator',
                        icon : 'vseparator',
                        id   : '16'
                    }
                ]
	    });
	}

	if(getParentTreeNodeType() == 'vbox')
	{
            content_menu.push(
	    {
		name : 'Append a Stretch',
		icon : '',
		id   : '1',
                children : [
                    {
                        name : 'Space',
                        icon : 'vspace',
                        id   : '15'
                    },
                    {
                        name : 'Separator',
                        icon : 'hseparator',
                        id   : '16'
                    }
                ]
	    });
	}
    }

    content_menu.push(
	{
	    name : '-'
	});

    if(getParentTreeNodeType() != 'form')
    {
	if(getParentTreeNodeType() == 'stack')
	{
	    content_menu.push(
	    {
		name : 'Insert a Constrain',
		icon : '',
		id   : '6',
		children : [
                    {
			name : 'Horizontal Box',
			icon : 'hbox',
			id   : '111'
                    },
                    {
			name : 'Vertical Box',
			icon : 'vbox',
			id   : '112'
                    },
                    {
			name : 'Stack',
			icon : 'stack',
			id   : '113'
                    }
		]
	    });
	}
	else
	{
	    content_menu.push(
	    {
		name : 'Insert a Constrain',
		icon : '',
		id   : '6',
		children : [
                    {
			name : 'Horizontal Box',
			icon : 'hbox',
			id   : '111'
                    },
                    {
			name : 'Vertical Box',
			icon : 'vbox',
			id   : '112'
                    },
                    {
			name : 'Stack',
			icon : 'stack',
			id   : '113'
                    }
		]
	    });
	}
	
	content_menu.push(
	    {
		name : 'Insert a Widget',
		icon : '',
		id   : '6',
		children : [
                    {
			name : 'Bitmap',
			icon : 'bitmap',
			id   : '117'
                    },
                    {
			name : 'Checkbutton',
			icon : 'checkbutton',
			id   : '118'
                    },
                    {
			name : 'Combobox',
			icon : 'combobox',
			id   : '119'
                    },
                    {
			name : 'Edit',
			icon : 'edit',
			id   : '120'
                    },
	            {
			name : 'Glcanvas',
			icon : 'glcanvas',
			id   : '133'
                    },
                    {
			name : 'Label',
			icon : 'label',
			id   : '121'
                    },
                    {
			name : 'Listbox',
			icon : 'listbox',
			id   : '122'
                    },
                    {
			name : 'List',
			icon : 'list',
			id   : '123'
                    },
                    {
			name : 'Horizontal Progressbar',
			icon : 'hprogbar',
			id   : '124'
                    },
                    {
			name : 'Vertical Progressbar',
			icon : 'vprogbar',
			id   : '125'
                    },
                    {
			name : 'Pushbutton',
			icon : 'pushbutton',
			id   : '126'
                    },
                    {
			name : 'Radiobutton',
			icon : 'radiobutton',
			id   : '127'
                    },
                    {
			name : 'Scintilla',
			icon : 'edit',
			id   : '128'
                    },
                    {
			name : 'Horizontal Slider',
			icon : 'hslider',
			id   : '129'
                    },
                    {
			name : 'Vertical Slider',
			icon : 'vslider',
			id   : '130'
                    },
                    {
			name : 'Spin',
			icon : 'spin',
			id   : '131'
                    },
                    {
			name : 'Tree',
			icon : 'tree',
			id   : '132'
                    },
                    {
			name : 'Constrain',
			icon : 'constrain',
			id   : '135'
                    },
		    {
			name : 'Webview',
			icon : 'webview',
			id   : '136'
		    }
		]
            });
	
	if(isPlainConstrainParentTreeNode())
	{
	    if(isHBoxConstrainParentTreeNode())
	    {
		content_menu.push(
		    {
			name : 'Insert a Stretch',
			icon : '',
			id   : '6',
			children : [
			    {
				name : 'Space',
				icon : 'hspace',
				id   : '115'
			    },
			    {
				name : 'Separator',
				icon : 'vseparator',
				id   : '116'
			    }
			]
		    });
	    }
	    
	    if(isVBoxConstrainParentTreeNode())
	    {
		content_menu.push(
		    {
			name : 'Insert a Stretch',
			icon : '',
			id   : '6',
			children : [
			    {
				name : 'Space',
				icon : 'vspace',
				id   : '115'
			    },
			    {
				name : 'Separator',
				icon : 'hseparator',
				id   : '116'
			    }
			]
		    });
	    }
	}
    
	content_menu.push(
	    {
		name : '-'
	    });
    }
    
    content_menu.push(
	{
	    name : '-'
	});
    content_menu.push(
	{
	    name : 'Delete This Widget',
	    icon : 'delete1',
	    id   : '2'
	});
    
    content_menu.push(
	{
	    name : '-'
	});
    
    if(parseWidgetFromClipboard())
    {
	content_menu.push(
            {
                name : 'Append from Clipboard',
                icon : 'paste1',
                id : '5'    
            });
        
        content_menu.push(
            {
                name : 'Insert from Clipboard',
                icon : 'paste1',
                id : '51'    
            });
    }
    
    content_menu.push(
	{
	    name : 'Copy to Clipboard',
            icon : 'copy',
            id : '4'    
	});

    if(g_composite_widget_list.length != 0)
    {
	var cw_list = g_composite_widget_list;

	var appendWidgetMenu = content_menu[1].children;
	//var insertWidgetMenu = content_menu[5].children;

	var insertWidgetMenu = false;

	for(var loop = 0; loop < content_menu.length; ++loop)
	{
	    if(content_menu[loop].name == 'Insert a Widget')
	    {
		insertWidgetMenu = content_menu[loop].children;
		break;
	    }
	}

	var current_form_name = ui.forms.value;

	var isCurrentComposite = false;
	for(var loop = 0; loop < cw_list.length; ++loop)
	{
	    if(cw_list[loop] == current_form_name)
	    {
		isCurrentComposite = true;
		break;
	    }
	}

	if(cw_list.length != 0 && !isCurrentComposite)
	{
	    var cw_children_append = [];
	    var cw_children_insert = [];
	    for(var loop = 0; loop < cw_list.length; ++loop)
	    {
		cw_children_append.push({
		    name : cw_list[loop],
		    icon : 'cw',
		    id   : 1024 + loop
		});

		cw_children_insert.push({
		    name : cw_list[loop],
		    icon : 'cw',
		    id   : 2024 + loop
		});
	    }

	    appendWidgetMenu.push({
		name : '-'
	    });

	    appendWidgetMenu.push({
		name : 'Composite Widget',
		icon : 'composite',
		id   : '34',
		children : cw_children_append
	    });

	    if(insertWidgetMenu)
	    {
		insertWidgetMenu.push({
		    name : '-'
		});

		insertWidgetMenu.push({
		    name : 'Composite Widget',
		    icon : 'composite',
		    id   : '34',
		    children : cw_children_insert
		});
	    }
	}
    }
    
    ui.tree.content_menu = content_menu;
}

function OnRClickTreeItem()
{
    //clickTreeItem();
    
    popupFormContentMenu();
    popupConstrainContentMenu();
    popupLeafWidgetContentMenu();

    parent.setTimeout(OnClickTreeItem);
}

function OnContentMenu()
{
    OnContentMenuAsync(function(err, result, cb){
	if(err){ outputError(result); return;}

	OnClickTreeItem(true);
    });
}

function insertFromClipboard(cb)
{
    var obj = parseWidgetFromClipboard();
    
    model.insertWidgetsToDB(ui.tree.parent, ui.tree.position, obj.db, function(err, result){
        
        function getChildWidget(node)
        {
            return node.widget;
        }
        
        if(err) COMX_ERROR(result);
        
        if(!err)
	{
            var nid = model.generateNewWidgetID();
            
            var travelDBArray = [];
            var travelTreeArray = [];
            travelDBArray.push(obj.db);
            travelTreeArray.push(ui.tree.position);
            for(var idx = 0; idx < travelDBArray.length; ++idx)
            {
                ui.tree.position = travelTreeArray[idx];
                nid = model.generateNewWidgetID();
                var node = travelDBArray[idx];
                
                var name = node.$.type;
                var icon = node.$.type;
		
                if(name == 'space')
                {
                    icon = 'hspace';
                    //COMX_DEBUG(parent.name);
                    if(getParentTreeNodeType() == 'vbox')
                    {
                        icon = 'vspace';
                    }
                }
		
                if(name == 'separator')
                {
                    if(getParentTreeNodeType() == 'vbox')
                    {
                        icon = 'hseparator';
                    }
		    
                    /*if(tree_node.name == 'hbox')
                      {
                      icon = 'vseparator';
                      }*/
                }
                
                if(idx == 0)
                {
                    ui.tree.inserter = {
                        name : name, 
                        icon : icon,
                        id : nid
                    };
                }
                else if(ui.tree.children && ui.tree.children.length)
                {
                    ui.tree.position = ui.tree.children[0];
                    ui.tree.tail = {
                        name : name, 
                        icon : icon,
                        id : nid
                    };
                }
                else
                {
                    ui.tree.node = [
                        {
                            name : name, 
                            icon : icon,
                            id : nid
                        }
                    ];
                }
                
                result.list[nid] = node;
                
                var children  = getChildWidget(node);
                if(!children)
                {
                    continue;
                }
		
                for(var sub_idx = 0; sub_idx < children.length; ++sub_idx)
                {
                    var child = children[sub_idx];
                    travelDBArray.push(child);
                    travelTreeArray.push(nid);
                }
            }
            
	    cb();
        }
    });
}

function appendFromClipboard(cb)
{
    var obj = parseWidgetFromClipboard();
        
    model.appendWidgetsToDB(ui.tree.position, obj.db, function(err, result){
        
        function getChildWidget(node)
        {
            return node.widget;
        }
        
        if(err) COMX_ERROR(result);
        
	if(!err)
	{
	    //ui.tree.position = nid;
            var nid = model.generateNewWidgetID();
            
            var travelDBArray = [];
            var travelTreeArray = [];
            travelDBArray.push(obj.db);
            travelTreeArray.push(ui.tree.position);
            for(var idx = 0; idx < travelDBArray.length; ++idx)
            {
                ui.tree.position = travelTreeArray[idx];
                nid = model.generateNewWidgetID();
                var node = travelDBArray[idx];
                
                var name = node.$.type;
                var icon = node.$.type;
		
                if(name == 'space')
                {
                    icon = 'hspace';
                    //COMX_DEBUG(parent.name);
                    if(getParentTreeNodeType() == 'vbox')
                    {
                        icon = 'vspace';
                    }
                }
		
                if(name == 'separator')
                {
                    if(getParentTreeNodeType() == 'vbox')
                    {
                        icon = 'hseparator';
                    }
		    
                    /*if(tree_node.name == 'hbox')
                      {
                      icon = 'vseparator';
                      }*/
                }
                
                if(ui.tree.children && ui.tree.children.length)
                {
                    ui.tree.position = ui.tree.children[0];
                    ui.tree.tail = {
                        name : name, 
                        icon : icon,
                        id : nid
                    };
                }
                else
                {
                    ui.tree.node = [
                        {
                            name : name, 
                            icon : icon,
                            id : nid
                        }
                    ];
                }
                
                result.list[nid] = node;
                
                var children  = getChildWidget(node);
                if(!children)
                {
                    continue;
                }
		
                for(var sub_idx = 0; sub_idx < children.length; ++sub_idx)
                {
                    var child = children[sub_idx];
                    travelDBArray.push(child);
                    travelTreeArray.push(nid);
                }
            }
            
	    cb();
	}
    });
}

function clearAllSubWidgets(cb)
{
    outputInfo('action: clear all sub widgets');

    var cur_node = ui.tree.node;
    var cur_pos  = ui.tree.position;

    cur_node.children = undefined;
    ui.tree.node = cur_node;
    
    ui.tree.position = cur_pos;
    
    model.clearChildWidgetFromDB(ui.tree.position, function(err, result){
	cb(err, result);
    });
}

function deleteWidget(cb)
{
    var pid = ui.tree.parent;
    var id  = ui.tree.position;
	
    ui.tree.node = undefined;
    
    model.deleteWidgetFromDB(pid, id, function(err, result){
	cb(err, result);
    });
}

function copyCurrentUINodeToClipboard()
{
    var clipcontent = {node : ui.tree.node, db : model.getDatabaseById(ui.tree.position)};
    ui.clipboard = JSON.stringify(clipcontent);
}

function appendCompositeToConstrain(menu_id, cb)
{
    var nid = model.generateNewWidgetID();

    //Update Widget Tree.
    if(!ui.tree.children) //There isn't any child widget in current constrain.
    {
	var cur_node = ui.tree.node;
	cur_node.children = [];
	    
	cur_node.children.push({
	    name : 'composite',
	    icon : 'composite',
	    id   : nid
	});
	    
	ui.tree.node = cur_node;
    }
    else // There are child widget(s) in current constrain.
    {
	var cur_pos = ui.tree.position;
	ui.tree.position = ui.tree.children[0];

	ui.tree.tail = {
	    name : 'composite',
	    icon : 'composite',
	    id   : nid
	};
	
	ui.tree.position = cur_pos;
    }

    //model.getCompositeFormList(ui.units.value, (err, cw_list)=>{
    var cw_list = g_composite_widget_list;
    
    var cw_idx = parseInt(menu_id) - 1024;
    var ref = cw_list[cw_idx];
    
    //Update KUL database.
    model.appendCompositeWidgetToDB(
	ui.tree.position,
	ref,
	nid,
	function(err, result){
	    if(!err)
	    {
		ui.tree.position = nid;
	    }
	    
	    cb(err, result);
	}
    );
    //});
    
}

function appendWidgetToConstrain(menu_id, cb)
{
    var nid = model.generateNewWidgetID();

    //Update Widget Tree.
    if(!ui.tree.children) //There isn't any child widget in current constrain.
    {
	var cur_node = ui.tree.node;
	cur_node.children = [];
	    
	cur_node.children.push({
	    name : getTypeFromID(menu_id),
	    icon : getIconFromID(menu_id),
	    id   : nid
	});
	    
	ui.tree.node = cur_node;
    }
    else // There are child widget(s) in current constrain.
    {
	var cur_pos = ui.tree.position;
	ui.tree.position = ui.tree.children[0];
	ui.tree.tail = {
	    name : getTypeFromID(menu_id),
	    icon : getIconFromID(menu_id),
	    id   : nid
	};
	
	ui.tree.position = cur_pos;
    }

    //Update KUL database.
    model.appendWidgetToDB(
	ui.tree.position,
	getTypeFromID(menu_id),
	nid,
	function(err, result){
	    if(!err)
	    {
		ui.tree.position = nid;
	    }
	    
	    cb(err, result);
	});
}

function appendWidgetToForm(menu_id, cb)
{
    var cur_node = ui.tree.node;
    cur_node.children = [];
    
    var nid = model.generateNewWidgetID();
    cur_node.children.push({
	name : getTypeFromID(menu_id),
	icon : getIconFromID(menu_id),
	id   : nid
    });
    
    ui.tree.node = cur_node;
    model.appendWidgetToDB(
	ui.tree.position,
	getTypeFromID(menu_id),
	nid,
	function(err, result){
	    if(!err)
	    {
		ui.tree.position = nid;
	    }
	    cb(err, result);
	});
}

function insertCompositeBeforeCurrentNode(menu_id, cb)
{
    var nid = model.generateNewWidgetID();

    var pid = ui.tree.parent;
    var id  = ui.tree.position;
    
    ui.tree.inserter = {
	name : 'composite',
	icon : 'composite',
	id   : nid
    };

    var cw_list = g_composite_widget_list;
    //model.getCompositeFormList(ui.units.value, (err, cw_list)=>{
    var cw_idx = parseInt(menu_id) - 2024;
    var ref = cw_list[cw_idx];
    
    //Update KUL database.
    model.insertCompositeToDB(
	pid, id,
	ref,
	nid,
	function(err, result){
	    if(!err)
	    {
		ui.tree.position = nid;
	    }
	    
	    cb(err, result); 
	}
    );
    //});
}

function insertWidgetBeforeCurrentNode(menu_id, cb)
{
    var nid = model.generateNewWidgetID();

    var pid = ui.tree.parent;
    var id  = ui.tree.position;
    
    ui.tree.inserter = {
	name : getTypeFromID(menu_id),
	icon : getIconFromID(menu_id),
	id   : nid
    };

    model.insertWidgetToDB(
	pid, id,
	getTypeFromID(menu_id),
	nid,
	function(err, result){
	    if(!err)
	    {
		ui.tree.position = nid;
	    }
	    
	    cb(err, result);
	});
}

function isGroupMenuID              (menu_id) { return menu_id == 1; }
function isConstrainInsertMenuID    (menu_id) { return menu_id > 100 && menu_id < 200; }
function isInsertCompositeMenuID    (menu_id) { return menu_id >= 2024;}
function isAppendCompositeMenuID    (menu_id) { return menu_id >= 1024 && menu_id < 2024;}
function isAddParentConstrainMenuID (menu_id) { return menu_id > 200 && menu_id < 1024;}
function isCopyToClipboardMenuID    (menu_id) { return menu_id == 4; }
function isAppendFromClipboardMenuID(menu_id) { return menu_id == 5; }
function isInsertFromClipboardMenuID(menu_id) { return menu_id == 51;}
function isClearAllSubWidgetsMenuID (menu_id) {
    return menu_id == 2 && (isContrainTreeNode() || isFormTreeNode());
}
function isDeleteWidgetMenuID       (menu_id){
    return (isLeafTreeNode() && menu_id == 2) ||
	(isContrainTreeNode() && menu_id == 3);
}

function OnContentMenuAsync(cb)
{
    var menu_id = ui.tree.content_menu;

    if(isGroupMenuID(menu_id)) return;
            
    if(isCopyToClipboardMenuID(menu_id))
    {
	copyCurrentUINodeToClipboard();
        return;
    }
    
    if(isAppendFromClipboardMenuID(menu_id))
    {
	if(isLeafTreeNode())
	{
	    ui.tree.position = ui.tree.parent;
	}
	
        appendFromClipboard(cb);
        return;
    }
    
    if(isInsertFromClipboardMenuID(menu_id))
    {
        insertFromClipboard(cb);
        return;
    }

    if(isClearAllSubWidgetsMenuID(menu_id))
    {
	clearAllSubWidgets(cb);
	return;
    }

    if(isDeleteWidgetMenuID(menu_id)/*menu_id == 2 || menu_id == 3*/)
    {
	deleteWidget(cb);
	return;
    }

    if(isAddParentConstrainMenuID(menu_id))
    {
	return;
    }
    
    if(isContrainTreeNode())
    {
	if(isAppendCompositeMenuID(menu_id))
	{
	    appendCompositeToConstrain(menu_id, cb);
	}
	else if(isInsertCompositeMenuID(menu_id))
	{
	    insertCompositeBeforeCurrentNode(menu_id, cb);
	}
	else if(isConstrainInsertMenuID(menu_id))
	{
	    insertWidgetBeforeCurrentNode(menu_id, cb);
	}
	else
	{
	    appendWidgetToConstrain(menu_id, cb);
	}
	return;
    }

    if(isFormTreeNode())
    {
	appendWidgetToForm(menu_id, cb);
	return;
    }

    if(isLeafTreeNode())
    {
	//insertWidgetBeforeCurrentNode(menu_id, cb);

	if(isAppendCompositeMenuID(menu_id))
	{
	    ui.tree.position = ui.tree.parent;
	    appendCompositeToConstrain(menu_id, cb);
	}
	else if(isInsertCompositeMenuID(menu_id))
	{
	    insertCompositeBeforeCurrentNode(menu_id, cb);
	}
	else if(isConstrainInsertMenuID(menu_id))
	{
	    insertWidgetBeforeCurrentNode(menu_id, cb);
	}
	else
	{
	    ui.tree.position = ui.tree.parent;
	    appendWidgetToConstrain(menu_id, cb);
	}
    }
}

function OnModelFunctionListChange()
{
     model.getFunctionList(ui.model.document, function(err, result){
	 if(err){outputError(result); return;}

	 var patt = "function[ \t]+" + ui.model_fn_list.value;

	 ui.model.regex = patt;

	 //var row = ui.model.row;
	 //ui.model.row = row;
    });
}

function OnCallbackFunctionListChange()
{
    model.getFunctionList(ui.callback.document, function(err, result){
	if(err){outputError(result); return;}
	
	var patt = "function[ \t]+" + ui.callback_fn_list.value;

	ui.callback.regex = patt;

	//var row = ui.callback.row;
	//ui.callback.row = row;
    });
}

///////////////////////////////////////////////////////////////////////////
// utils funcitons.

function getIndexByFunctionName(result, name)
{
    for(var prop in result)
    {
	if(result[prop].name == name)
	{
	    return result[prop].index;
	}
    }

    return -1;
}

function updateFunctionList()
{
    function getComboboxListFromResult(result)
    {
	var ret = [];
	for(var prop in result)
	{
	    ret.push(result[prop].name);
	}

	return ret;
    }
    
    model.getFunctionList(ui.callback.document, function(err, result){
	if(err){outputError(result); return;}

	ui.block_event = true;
	ui.callback_fn_list.list = getComboboxListFromResult(result);
	ui.block_event = false;
    });

    model.getFunctionList(ui.model.document, function(err, result){
	if(err){outputError(result); return;}

	ui.block_event = true;
	ui.model_fn_list.list = getComboboxListFromResult(result);
	ui.block_event = false;
    });
}

var g_composite_widget_list = [];
function updateCompositeFormList()
{
    var unit_name = ui.units.value;
    var form_list = ui.forms.list;
    g_composite_widget_list = [];
    
    //var cnt = 0;
    
    for(var loop = 0; loop < form_list.length; ++loop)
    {
	var form_name = form_list[loop];
	
	model.isCompositeForm(unit_name, form_name, function(err1, result1){
	    //cnt++;
	    
	    if(!err1 && result1)
	    {
		g_composite_widget_list.push(form_name);
	    }

	    /*
	    if(cnt == form_list.length)
	    {
		console.log(g_composite_widget_list);
	    }*/
	});
    }
}

function updateFormList(bShowLastForm)
{
    if(ui.units.value == '')
	return;

    COMX_DEBUG('updateFormList caller is ', updateFormList.caller);
    
    model.getFormList(ui.units.value, function(err, result){
	if(err){ /*outputError(result);*/ return;}
	
	if(result.length == 0)
	    result.push('<empty>');

	bShowLastForm = (bShowLastForm && result.length > 1);
	
	g_bOnFormChangedLock = bShowLastForm;
	ui.forms.list = result;
	g_bOnFormChangedLock = false;

	if(bShowLastForm)
	{
	    ui.forms.index = ui.forms.list.length - 1;
	}

	updateCompositeFormList();
	//OnFormChanged();
    });
}

function outputGlobalLogInfo(msg)
{
    if(!ui.global_log_info) return;

    ui.global_log_info.index = 10000000000000;
    
    ui.global_log_info.value += msg;
    ui.global_log_info.value += "\n";

    ui.global_log_info.index = 10000000000000;
}

function updateUnitList(bUpdateFormList)
{
    COMX_DEBUG('updateUnitList caller is ' + updateUnitList.caller);
    
    model.getList(function(err, result){
	if(err){ outputInfo(/*err*/"There isn't any unit, create one firstly please!"); return;}
	ui.units.list = result;

	if(ui.units.value != '')
	{
	    if(bUpdateFormList)
	    {
		ui.tree.enable = true;
		ui.list.enable = true;
		ui.pbn_execute.enable = true; 
		OnFormChanged();
	    }
	}
	else
	{
	    outputInfo(/*err*/"There isn't any unit, create one firstly please!");
	}
    });
}

////////////////////////////////////////////////////////////////////////////////////
// output notify info.

function isArray(o) {
    return Object.prototype.toString.call(o) == '[object Array]';
}

function outputInfo(info)
{
    var g_focus_handle = false;
    if(isCallbackTab()) g_focus_handle = ui.callback.handle;
    if(isModelTab()) g_focus_handle = ui.model.handle;
    
    if(isArray(info))
    {
	var info_msg = '';
	for(var loop = 0; loop < info.length; ++loop)
	{
	    var i = info[info.length - loop - 1];
	    info_msg += '<span style="color:green">' + i + '</span><br/>';
	}

	ui.info.value = info_msg;
    }
    else
    {
	ui.info.value = '<span style="color:green">' + info + '</span><br/>';
    }

    if(g_focus_handle && info != '')
    {
        parent.setTimeout(()=>{
            ui.Activate();
            ui.SetFocus(g_focus_handle);
        });
    }
}

function outputError(err)
{
    var g_focus_handle = false;
    if(isCallbackTab()) g_focus_handle = ui.callback.handle;
    if(isModelTab()) g_focus_handle = ui.model.handle;
    
    var caller = (new Error()).stack.split("\n")[2].trim().split(" ")[1];

    if(isArray(err))
    {
	var err_msg = '';
	for(var loop = 0; loop < err.length; ++loop)
	{
	    var e = err[err.length - loop - 1];
	    err_msg += '<b><u><span style="color:blue">Caller: ' +
	    caller + '</span></u></b><span style="color:red"> Error Info : ' + e + '</span><br/>';
	}

	ui.info.value = err_msg;
    }
    else
    {
	ui.info.value = '<b><u><span style="color:blue">Caller: ' +
	    caller + '</span></u></b><span style="color:red"> Error Info : ' + err + '</span><br/>';
    }
    //ui.info.value = JSON.stringify(err);

    if(g_focus_handle && err != '')
    {
        parent.setTimeout(()=>{
            ui.Activate();
            ui.SetFocus(g_focus_handle);
        });
    }
}

function formatError(err)
{
    var caller = (new Error()).stack.split("\n")[2].trim().split(" ")[1];
    return '<b><u><span style="color:blue">Caller: ' +
	    caller + '</span></u></b><span style="color:red"> Error Info : ' + err + '</span><br/>';
}

function formatInfo(info)
{
    return '<span style="color:green">' + info + '</span><br/>';
}

function outputHtml(html)
{
    ui.info.value = html;
}

////////////////////////////////////////////////////////////////////////////////////
// initialize some widget data

function initCopyrightInfo()
{
    ui.copyright.value = "<span style='color:red'><u>Warning: This computer program is protected by copyright law and international treaties.Unauthorized reproduction or distribution of this program, or any portion of it, may result in severe civil and criminal penalties,and will be prosecuted under the law.</u></span>";

    ui.copyright2.value = "<span style='color:blue'><u>This is where the INTELLECTUAL property claims for LGPL/ISC/MIT third-party libraries (e.g. QT, QScintilla, NPM dependencies) will be placed!</u></span>";
}

function initPluginPane()
{
    ui.plugin.autoComplete = [
	'#include?4',
	'#define?4',
	'#if?4',
	'#else?4',
	'#endif?4',
	'#end?4'
    ];
    
    ui.plugin.lexer = 'cpp';
    
    ui.plugin_category.index = 1;

    model.callTip.registerImage(ui.plugin);
    ui.plugin.callTip = [
	'JS_EXT_PARA(TComxCallback, [index]); // Parse JavaScript Callback Function Parameter',
	'JS_EXT_PARA([value_type], [index]); // Parse JavaScript Common Parameter',
	'JS_EXT_PARA(TComxBuffer, [index]); // Parse JavaScript Buffer Parameter',
	'JS_EXT_FUNC_ASSIGN_RET_EX(buf, num); // Return a Buffer',
	'JS_EXT_FUNC_ASSIGN_RET([value]); // Return a Value'
    ];
    
    //ui.plugin_language.index = 0;
    ui.plugin.autoCompleteCallback = (ns_list)=>{

    };
}

var bNSRefreshFlag = false;

function pickupPluginNS(unit_name, ns_folder)
{
    if(unit_name == 'comx_sdk')
    {
	unit_name = 'comx';
    }

    var regex = new RegExp("^js_ext_" + unit_name + "_" + "([a-zA-Z0-9_]+)$");
    var res = ns_folder.match(regex);
    try{
        return res[1];
    }
    catch(err)
    {
        console.log('pickupPluginNS(in kul_editor.js - Line:4146) - ', err.message, [ns_folder]);
        return false;
    }
}

function updatePlugin(namespace)
{
    bNSRefreshFlag = true;
    var unit_name = ui.units.value;
    var plugin_info = model.getUnitPluginInfo(ui.units.value);
    if(ui.plugin_category.index == 0)
    {
	plugin_info = model.getSystemPluginInfo();
	unit_name = 'comx_sdk';
    }
    
    var plugin_list = plugin_info.list;

    var name_list = [];
    for(var loop = 0; loop < plugin_list.length; ++loop)
    {
	var name = plugin_list[loop];
	//name = name.split('_');
	//name = name[name.length - 1];
	name = pickupPluginNS(unit_name, name);
	
	if(name)name_list.push(name);
    }

    if(!name_list.length)name_list.push('<empty>');

    ui.plugin_ns.list = name_list;

    if(ui.plugin_ns.value == '<empty>')
	ui.plugin_ns.value = '';

    if(namespace == undefined)
    {
	namespace = ui.plugin_ns.value;
    }

    if(namespace)
    {
	var idx = false;
	for(var loop = 0; loop < name_list.length; ++loop)
	{
	    if(namespace == name_list[loop])
	    {
		idx = loop;
	    }
	}

	ui.plugin_ns.index = idx;

	enablePluginOperator();
    }
    else
    {
	disablePluginOperator();
    }

    if(hasNewPluginNS())
    {
	ui.append_plugin_btn.enable = true;
	ui.plugin_sample_codes_flag.enable = true;
    }
    else
    {
	ui.append_plugin_btn.enable = false;
	ui.plugin_sample_codes_flag.enable = false;
    }

    bNSRefreshFlag = false;

    loadPluginFiles();
    
    refreshDocumentModifiedStatus();
}

function appendCxxFileToGyp(filename)
{
    filename = ',\n        "src/' + filename + '.cc"'

    var gyp_content = ui.gyp.document;
    ui.gyp.index = /"include_dirs":[ \t]*\[/.exec(gyp_content).index;
    ui.gyp.row -=2;
    ui.gyp.column = ui.gyp.line.length - 1;
    ui.gyp.inserter = filename;

    savePluginSourceCodesSync();
}

var cur_plugin_func_pn_list = [];
var cur_plugin_func_pos_list = [];
function updateCurPluginFuncList()
{
    var content      = ui.plugin.document;
    //COMX_DEBUG(content);
    var regExp = /JS_EXT_FUNC_BEGIN[ \t]*\([ \t]*([a-zA-Z]{1}[a-zA-Z0-9]*)[ \t]*\,[ \t]*([0-9]*)\,/g;

    var rec = regExp.exec(content);

    var cur_plugin_func_list = [];
    cur_plugin_func_pn_list  = [];
    cur_plugin_func_pos_list = [];
    while(rec)
    {
	cur_plugin_func_list.push(rec[1]);
	cur_plugin_func_pn_list.push(rec[2]);
	cur_plugin_func_pos_list.push(rec.index);
	
	rec = regExp.exec(content);
    }

    var hasFunc = true;

    if(cur_plugin_func_list.length == 0)
    {
	hasFunc = false;
	cur_plugin_func_list.push('<empty>');
    }

    ui.plugin_namespace_function_list.list = cur_plugin_func_list;
    if(hasFunc)
    {
	ui.plugin_function_parameter_num.value =
	    parseInt(cur_plugin_func_pn_list[ui.plugin_namespace_function_list.index]);
    }
    else
    {
	ui.plugin_function_parameter_num.value = 0;
    }

    //COMX_DEBUG(cur_plugin_func_pos_list);
}

function OnPluginCurFuncChanged()
{
    ui.plugin_function_parameter_num.enable        = false;
    ui.append_plugin_namespace_function_btn.enable = false;

    //COMX_DEBUG(ui.plugin_namespace_function_list.value);

    if(ui.plugin_namespace_function_list.value == '<empty>')
    {
	ui.plugin_namespace_function_list.value = '';
    }
    
    if(ui.plugin_namespace_function_list.value == '')
    {
	return;
    }

    var list = ui.plugin_namespace_function_list.list;
    var bNewFuncName = true;
    for(var loop = 0; loop < list.length; ++loop)
    {
	if(list[loop] == ui.plugin_namespace_function_list.value)
	{
	    bNewFuncName = false;
	    break;
	}
    }

    if(bNewFuncName)
    {
	ui.plugin_function_parameter_num.enable        = true;
	ui.append_plugin_namespace_function_btn.enable = true;

	ui.plugin_function_parameter_num.value = 0;
    }
    else
    {
	ui.plugin_function_parameter_num.value =
	    parseInt(cur_plugin_func_pn_list[ui.plugin_namespace_function_list.index]);

	ui.plugin.index = cur_plugin_func_pos_list[ui.plugin_namespace_function_list.index];
    }

    ui.SetFocus(ui.plugin_namespace_function_list.handle);
}

function OnAppendNewFuncForCurPlugin()
{
    var func_name      = ui.plugin_namespace_function_list.value;
    var parameters_num = ui.plugin_function_parameter_num.value;
    var ns = (ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value + '.' +
	ui.plugin_ns.value;
    
    var func_content = model.createNewFuncForPlugin(ns, func_name,parameters_num);
    
    ui.plugin.regex = '0x4cc0c89c-0x0090-0x47e3-0xb7-0x63-0xc1-0xaf-0xf1-0xe7-0x99-0x4e';
    ui.plugin.row += 1;
    ui.plugin.column  = ui.plugin.line.length - 1;
    var last_index = ui.plugin.index;
    ui.plugin.inserter = func_content;

    ui.plugin.regex = 'JS_EXT_ENTRY_BEGIN()';
    ui.plugin.column = ui.plugin.line.length - 1;
    var js_ext_entry   = 'JS_EXT_ENTRY(' + func_name + ')\n';
    ui.plugin.inserter = js_ext_entry;

    ui.plugin.regex = 'JS_EXT_MAIN_BEGIN(JS_EXT_NS';
    ui.plugin.column = 0;
    var head = ui.plugin.line;

    var regExp   = /JS_EXT_MAIN_BEGIN\(JS_EXT_NS[ \t]*\,[ \t]*([0-9]*)/g;
    var func_num = parseInt(regExp.exec(head)[1]) + 1;

    var low  = ui.plugin.index;
    var high = low + ui.plugin.line.length;

    ui.plugin.range.low  = low;
    ui.plugin.range.high = high;

    ui.plugin.value = 'JS_EXT_MAIN_BEGIN(JS_EXT_NS, ' + func_num + ')\n';
    
    ui.plugin.column = 0;
    var js_ext_entry   = 'JS_EXT_FUNC_REG(' + func_name + ')\n';
    ui.plugin.inserter = js_ext_entry;

    ui.plugin.index = last_index;
    ui.plugin.row += 2;
    ui.plugin.column = 0;

    savePluginSourceCodesSync();
    updateCurPluginFuncList();
}

function loadPluginFiles()
{
    if(isPluginDirty() && isModifiedNamespaceValid())
    {
        PromptSavePluginFilesSync(()=>{
            savePluginSourceCodesSync();
        });
    }
    
    if(ui.plugin_ns.value)
    {
	var files = model.loadPluginFiles(
	    (ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value,
	    ui.plugin_ns.value);
	//COMX_DEBUG('' + files.cc);
	
	ui.plugin.document = ''; //Clears possible range states
	ui.plugin.document = '' + files.cc;

	ui.plugin.dirty = false;
	ui.plugin.enable = true;
	updateCurPluginFuncList();
	//COMX_DEBUG('' + files.gyp);

	ui.gyp.document = ''; //Clears possible range states
	ui.gyp.document = '' + files.gyp;
	ui.gyp.enable = true;
	ui.gyp.dirty = false;

	//ui.plugin_tab.index = 0;

	ui.plugin_src_file_list.list = files.src_list;

	loadPluginSourceFile();
    }

    refreshDocumentModifiedStatus();
}

function loadPluginSourceFile()
{
    //outputInfo(ui.plugin_src_file_list.value);
    if(!ui.plugin_src_file_list.value)
    {
	ui.plugin_src.document = '';
	ui.plugin_src.enable = false;
    }
    else
    {
	ui.plugin_src.document = ''; // Clear possible range states
	ui.plugin_src.document = model.loadPluginSourceFile(
	    (ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value,
	    ui.plugin_ns.value,
	    ui.plugin_src_file_list.value);

	ui.plugin_src.enable = true;
	
    }
    
    ui.plugin_src.dirty = false;
}

function explorePluginSourceFolder()
{
    if(!ui.plugin_ns.value) return;
    
    model.explorePluginSourceFolder(
	(ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value,
	ui.plugin_ns.value);
}

function OnPluginCategoryChanged()
{
    updatePlugin();
}

function hasNewPluginNS()
{
    var list = ui.plugin_ns.list;
    var val  = ui.plugin_ns.value;

    //COMX_DEBUG(list);
    //COMX_DEBUG(val);

    var ret = true;
    for(var loop = 0; loop < list.length; ++loop)
    {
	if(list[loop] == val)
	    ret = false;
    }

    return ret && (val != '');
}

function disablePluginOperator()
{
    ui.plugin.document = '';
    ui.gyp.document = '';
    ui.plugin_src.document = '';
    
    ui.plugin.dirty = false;
    ui.plugin_src.dirty = false;
    ui.gyp.dirty = false;
    
    ui.plugin.enable = false;
    ui.gyp.enable = false;
    ui.plugin_src.enable = false;
    
    ui.plugin_src_file_list.list = [];
    ui.plugin_namespace_function_list.list = [];
    
    ui.append_plugin_src_file_btn.enable = false;
    ui.append_plugin_namespace_function_btn.enable = false;

    ui.plugin_function_parameter_num.enable = false;
    ui.plugin_config_btn.enable = false;
    ui.plugin_build_btn.enable = false;
    ui.plugin_open_folder_btn.enable = false;
    ui.pb_plugin_vs.enable = false;
}

function enablePluginOperator()
{
    ui.plugin.enable = true;
    ui.gyp.enable = true;
    ui.plugin_src.enable = true;
    
    ui.append_plugin_src_file_btn.enable = true;
    ui.append_plugin_namespace_function_btn.enable = false;

    ui.plugin_function_parameter_num.enable = false;
    ui.plugin_config_btn.enable = true;
    ui.plugin_build_btn.enable = true;
    ui.plugin_open_folder_btn.enable = true;
    ui.pb_plugin_vs.enable = true;
}

var g_OnPluginNSChanged_lock = false;
function OnPluginNSChanged()
{
    if(g_OnPluginNSChanged_lock)return;

    g_OnPluginNSChanged_lock = true;

    if(isPluginDirty() && isModifiedNamespaceValid())
    {
        PromptSavePluginFilesSync(()=>{
            savePluginSourceCodesSync();
        });
    }
    
    if(ui.plugin_ns.value == '<empty>')
    {
	ui.plugin_ns.value = '';
    }
    
    if(bNSRefreshFlag)
    {
	g_OnPluginNSChanged_lock = false;
	return;
    }

    //outputInfo('OnPluginNSChanged');
    ui.append_plugin_btn.enable = false;
    ui.plugin_sample_codes_flag.enable = false;
    //ui.plugin_sample_codes_flag.valid = false;

    ui.plugin.enable = true;
    ui.gyp.enable = true;
    ui.plugin_src.enable = true;
    ui.append_plugin_src_file_btn.enable = true;
    ui.append_plugin_namespace_function_btn.enable = true;

    if(hasNewPluginNS() || ui.plugin_ns.value == '')
    {
	if(ui.plugin_ns.value != '')
	{
	    ui.append_plugin_btn.enable = true;
	    ui.plugin_sample_codes_flag.enable = true;
	}

	disablePluginOperator();
	//outputInfo('new ns name is ' + ui.plugin_ns.value);
    }
    else
    {
	loadPluginFiles();
	enablePluginOperator();
    }
    
    refreshDocumentModifiedStatus();

    ui.SetFocus(ui.plugin_ns.handle);

    g_OnPluginNSChanged_lock = false;
}

function OnAppendPluginSrcFile()
{
    unit.form.AddSrcFileDlg.Show();
}

function OnAppendPlugin()
{
    var unit_name = (ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value;
    var namespace = ui.plugin_ns.value;

    var have_sample_codes = ui.plugin_sample_codes_flag.valid;

    g_log_sidepane.hide();
    g_logplugin_sidepane.show();

    ui.plugin_log.value = "";
    model.appendPlugin(
	unit_name, namespace, have_sample_codes,
	(msg)=>{
	    ui.plugin_log.value += msg;
	    ui.plugin_log.index = 100000000000000000;
	},
	()=>{
	    ui.plugin_log.index = 100000000000000000;
	    
	    updatePlugin(namespace);
	    ui.append_plugin_btn.enable = false;
	    ui.plugin_sample_codes_flag.enable = false;
	    
	    //ui.plugin_tab.index = 0;
	});
}

var g_is_compiling = false;

function OnCompilePlugin()
{
    //ui.plugin_tab.index = 3;
    g_is_compiling = true;

    g_log_sidepane.hide();
    g_logplugin_sidepane.show();

    savePluginSourceCodesSync();

    ui.pb_preview.valid = false;
    OnPreview(false);

    ui.plugin_log.value = "";
    model.compilePlugin(
	(ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value,
	ui.plugin_ns.value,
	(msg)=>{
	    ui.plugin_log.value += msg;
	    ui.plugin_log.index = 100000000000000000;
	},
	()=>{
	    ui.plugin_log.index = 100000000000000000;
	    
	    ui.pb_preview.valid = true;
	    OnPreview();
	    
	    updateApiCallTip();
            g_is_compiling = false;
	},
	(err_msg)=>{
	    ui.plugin_log.value += err_msg;
	    ui.plugin_log.index = 100000000000000000;
	},
	(ui.compile_type.index == 0)//debug mode flag
    );
}

var modified_unit_name = false;
var modified_namespace = false;

var timeIDOfPlugin = false;

function isEmptyLine(line)
{
    for(var loop = 0; loop < line.length; ++loop)
    {
	if(line[loop] != ' ' && line[loop] != '\t' && line[loop] != '\r' && line[loop] != '\n')
	{
	    return false;
	}
    }

    return true;
}

function isJS_EXT_PARALine(line)
{
    return /[ \t]*[_a-zA-Z]{1}[_a-zA-Z0-9]*[ \t]*[_a-zA-Z]{1}[_a-zA-Z0-9]*[ \t]*=[ \t]*JS_EXT_PARA[ \t]*\([_a-zA-Z]{1}[_a-zA-Z0-9]*[ \t]*\,[ \t]*[0-9]+[ \t]*\)/.test(line);
}

function getJS_EXT_PARALinePrecursorSpace(line)
{
    for(var loop = 0; loop < line.length; ++loop)
    {
	if(line[loop] != ' ' && line[loop] != '\t')
	{
	    return line.substr(0, loop);
	}
    }

    return '';
}

function OnPluginEntryChanged()
{
    var timeID = parent.setTimeout(()=>{
	parent.clearTimeout(timeID);
	var line = ui.plugin.line;

	if(isEmptyLine(line))
	{
	    var old_column = ui.plugin.column;
	    
	    ui.plugin.row -= 1;
	    line = ui.plugin.line;

	    if(isJS_EXT_PARALine(line))
	    {
		var ps = getJS_EXT_PARALinePrecursorSpace(line);
		ui.plugin.row += 1;

		if(ui.plugin.column > ps.length)
		    ui.plugin.column = ps.length;
	    }
	    else
	    {
		ui.plugin.row +=1;
		ui.plugin.column = old_column;
	    }
	}
    });
    
    OnPluginCodesChanged();
}

function OnPluginCodesChanged()
{
    if(!ui.plugin_ns.value || hasNewPluginNS())
    {
        ui.warn_bmp.visible = true;
	ui.plugin_warn.value = "<span style=\"color:blue\">WARN - Plugin: current namespace is invalid, changes you are making will be ignored!</span>";
	ui.cueline_stack.index = 0;

	ui.plugin_src.dirty = false;
	ui.gyp.dirty = false;
	ui.plugin.dirty = false;

	if(timeIDOfPlugin)
	{
	    parent.clearTimeout(timeIDOfPlugin);
	    timeIDOfPlugin = false;
	}

	timeIDOfPlugin = parent.setTimeout(()=>{
	    ui.cueline_stack.index = 1;

	    parent.clearTimeout(timeIDOfPlugin);
	    timeIDOfPlugin = false;
	},5000);
	
	return;
    }

    modified_unit_name = (ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value;
    modified_namespace = ui.plugin_ns.value;
    
    if(isPluginDirty())
    {
        switchSourceCodesModifiedCueline();
    }
}

function isPluginDirty()
{
    var plugin_dirty = ui.plugin_src.dirty || ui.plugin.dirty || ui.gyp.dirty;
    if(ui.plugin_ns.value == "") plugin_dirty = false;

    return plugin_dirty;
}

function isJavaScriptCodeDirty()
{
    var ret = ui.callback.dirty || ui.model.dirty || g_callback_dirty;
    g_callback_dirty = false;
    
    return ret;
}

function isDocumentDirty()
{
    return isPluginDirty() || ui.callback.dirty || ui.model.dirty;
}

function isModifiedNamespaceValid()
{
    var unit_name = modified_unit_name;//(ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value;
    var namespace = modified_namespace;//ui.plugin_ns.value;

    if(namespace == false || namespace == ""){ return false; }
    return true;
}

function cleanPluginDocumentDirtyStatus()
{
    ui.plugin.dirty = false;
    ui.plugin_src.dirty = false;
    ui.gyp.dirty = false;
}

function switchSourceCodesModifiedCueline()
{
    ui.warn_bmp.visible = true;
    ui.plugin_warn.value = "<span style=\"color:blue\">WARN : sources codes have been modified!" + 
	" press Ctrl+S save it.</span>";
    ui.cueline_stack.index = 0;
}

function setTimedCueline(msg, timeout)
{
    var warn_info = ui.plugin_warn.value;
    var cueline_index = ui.cueline_stack.index;

    ui.plugin_warn.value = `<span style=\"color:red\">WARN : ${msg}.</span>`;
    ui.cueline_stack.index = 0;

    parent.setTimeout(()=>{
        ui.plugin_warn.value = warn_info;
        ui.cueline_stack.index = cueline_index;
    },timeout);
}

function resetCueline()
{
    if(ui.pb_save.enable)
    {
        setCuelineInfo('Preview form is ready.');
        parent.setTimeout(()=>{
            ui.cueline_stack.index = 0;
        },1000);
    }
    else
    {
        setCuelineInfo('Ready.');
    }

    ui.Activate();

     var g_focus_handle = false;
    if(isCallbackTab()) g_focus_handle = ui.callback.handle;
    if(isModelTab()) g_focus_handle = ui.model.handle;

    if(g_focus_handle)
    {
        ui.SetFocus(g_focus_handle);
    }
}

var g_previous_main_tabctrl_index = 0;
function onSwitch()
{
    if(isPluginTab() && isJavaScriptCodeDirty())
    {
        setTimedCueline('Callback/Model codes have been modified, ' +
                        'save them and then switch to Plugin mode again please',
                        10000);
        ui.main_tabctrl.index = g_previous_main_tabctrl_index;
        return;
    }

    if((!isPluginTab()) && isPluginDirty())
    {
        setTimedCueline('Plugin codes have been modified, ' +
                        'save them and then leave Plugin mode again please',
                        10000);
        ui.main_tabctrl.index = g_previous_main_tabctrl_index;
        return;
    }

    g_previous_main_tabctrl_index = ui.main_tabctrl.index;
}

function setCuelineInfo(msg){
    ui.cueline_title.value = '<b><u> Cue Line:</u></b> ';
    ui.cueline.value = `${msg}`;
    ui.cueline_stack.index = 1;
}

function refreshDocumentModifiedStatus()
{
    ui.pb_save.enable = isDocumentDirty();
    
    if(isDocumentDirty())
    {
        switchSourceCodesModifiedCueline();
    }
    else
    {
        resetCueline();
    }
}

function savePluginSourceCodesSync()
{
    var unit_name = modified_unit_name;//(ui.plugin_category.index == 0) ? 'comx_sdk' : ui.units.value;
    var namespace = modified_namespace;//ui.plugin_ns.value;

    if(!isPluginDirty() || !isModifiedNamespaceValid()){ return; }
    
    var cache = {
	'src_fname' : ui.plugin_src_file_list.value,
	'entry'     : ui.plugin.dirty ? ui.plugin.document : false,
	'gyp'       : ui.gyp.dirty ? ui.gyp.document : false,
	'src'       : ui.plugin_src.dirty ? ui.plugin_src.document : false
    };
    
    model.savePluginFiles(unit_name, namespace, cache);
    
    cleanPluginDocumentDirtyStatus();
    refreshDocumentModifiedStatus();
}

function PromptSavePluginFilesSync(cb)
{
    var need_close_preview = ui.pb_preview.valid;
	    
    if(need_close_preview)
	OnPreview();
    
    if(ui.MessageBox("Warning", "plugin source codes have been modified, \ndo you want to save them?",
		     MessageBox.Icon.Warning,
		     MessageBox.Button.Yes|MessageBox.Button.No)
       == MessageBox.Button.Yes)
    {
	if(cb)cb();
    }
    
    if(need_close_preview)
	OnPreview();
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Get Namespace List from IDE when preview form is off.

function getNamespaceListOfIDE(ns_list)
{
    var obj  = pane;
    var flag = true;
    for(var loop = 0; loop < ns_list.length - 1; ++loop)
    {
	if(typeof(obj[ns_list[loop]]) == 'object')
	{
	    obj = obj[ns_list[loop]];
	}
	else
	{
	    flag = false;
	    break;
	}
    }

    var ret = [];

    if(flag)
    {
	for(var prop in obj)
	{
	    var tar = ns_list[ns_list.length - 1];
	    if(prop.indexOf(tar) == 0)
	    {
		ret.push(prop);
	    }
	}
    }

    return ret;
}

function getModelNamespaceListOfIDE(ns_list)
{
    var obj  = pane.parent;
    var flag = true;
    for(var loop = 0; loop < ns_list.length - 1; ++loop)
    {
	if(typeof(obj[ns_list[loop]]) == 'object')
	{
	    obj = obj[ns_list[loop]];
	}
	else
	{
	    flag = false;
	    break;
	}
    }

    var ret = [];

    if(flag)
    {
	for(var prop in obj)
	{
	    var tar = ns_list[ns_list.length - 1];
	    if(prop.indexOf(tar) == 0)
	    {
		ret.push(prop);
	    }
	}
    }

    return ret;
}

/////////////////////////////////////////////////////////////////////////////////////////////
// Manage Scintilla Editor.

function updateApiCallTip()
{
    model.callTip.updateApiCallTip(ui.callback, ui.model);
}

function acCallbackOfCallback(ns_list)
{
    var ret = false;
        
	try
	{
	    if(model.callTip.checkCommentTypeAutoCompleteStatus(ui.callback) && ns_list.length > 1)
	    {
		return model.callTip.nlCommentTypeAutoComplete;
	    }
	    
	    model.callTip.installCallTipOnce(ui.callback, ns_list);
	    if(model.callTip.installPane(ui.callback, ns_list))return [];
	    
	    if(!(ret = model.callTip.getPredefineNS(ns_list)))
	    {
		ns_list = model.callTip.preThisNS(ns_list, ui.forms.value);
		ret = model.getNamespaceList(ui.forms.value, ns_list);
		if(ns_list.length == 1)
		{
		    var varLocalList = model.callTip.parseLocalVariable(ui.callback);
		    var ns = ns_list[0];
		    
		    if(varLocalList)
		    {
			varLocalList = varLocalList.filter(item=>{
			    return item.indexOf(ns) == 0;
			});
			
			if(ret)
			{
			    ret = ret.concat(varLocalList);
			}
			else
			{
			    ret = varLocalList;
			}
		    }
		}

                if(ret[ret.length - 1] == '822DD938B2AC4FC6924C9864B7BD2EEE')
                {
                    ret.pop();
                    var snip = ret[ret.length - 1];
                    ret.pop();
                    parent.setTimeout(()=>{
                        ui.callback.tabAutoComplete();
                    });
                }
		
                if(ret[ret.length - 1] == 'B5AAED47BFB64CAAB94BA52424C3371B')
                {
                    var last_name = ns_list[ns_list.length - 1];
                    ret.pop();
                    ui.callback.callTipOnce = ret.filter(item=>{
                        return item.indexOf(last_name) == 0;
                    });
                    return [];
                }
	    
		if(ret && model.callTip.installGlobalVarCallTipOnce(ui.callback, ret, ns_list))return [];
	    }
	    
	return model.callTip.postFilterNS(ns_list, ret, ui.callback, ui.forms.value);
    }
    catch(err)
    {
	console.log(err);
	return [];
    }
}

function OnCallbackCursorChange()
{
    if(g_code_snip){
        g_code_snip.hide();
    }
}

var g_snip_buffer = false;

function initCallbackEditor()
{
    model.callTip.registerImage(ui.callback);
    
    model.callTip.installJSPrebuiltAutoComplete(ui.callback);
    model.callTip.installSciLexerType(ui.callback, 'javascript');

    ui.callback.autoCompleteListItemChange = function(ns_list){
        outputInfo('');
        model.getNamespaceListDescription(ui.forms.value, ns_list, (desc, snip)=>{
            outputInfo(formatUiDesc(desc));
            var sub_name = ns_list[ns_list.length - 1];
        });

        if(ns_list.length == 2 && ns_list[0] == 'pui' && ns_list[1] == 'fireEvent')
        {
            outputInfo('向父窗体发送消息, 父窗体中预定义函数OnChildDockerMessage响应该消息');
        }
        if(ns_list.length == 1 && ns_list[0] == 'injectToParentContext')
        {
            outputInfo('将子窗体中的ui命名空间内置变量注入主窗体,同时callback函数转移到主窗体.' +
                       '<span style="color:red">  注意:该函数仅在子窗体中生效, ' +
                       '建议该用法仅用于已有应用主窗体的一部分拆分成侧栏进行重构，' +
                       '否则不利于模块化，将造成主窗体命名空间污染/膨胀!!!</span>');
        }
    };

    ui.callback.autoCompleteSelection = function(ns_list){
        outputInfo('');

        if(g_code_snip)
        {
            g_code_snip.hide();
        }
        
        g_snip_buffer = false;
        
        model.getNamespaceListDescription(ui.forms.value, ns_list, (desc, snip)=>{
            if(snip)
            {
                parent.setTimeout(()=>{
                    if(!g_code_snip)
                    {
                        g_code_snip = ui.docker.load('snip_code_panel', 2,
                                                     'Code Snip Sample - Right Value');
                    }
                    
                    g_code_snip.fireEvent('code', snip);
                    g_code_snip.show();
                    
                    ui.SetFocus(ui.callback.handle);
                    g_snip_buffer = snip;
                });
            }
        });
    };
        
    ui.callback.autoCompleteCallback = function(ns_list){
        return acCallbackOfCallback(ns_list);
    };
}

var g_model_require_pkg = false;
function OnModelChanged()
{
    model.parseModelReqirePackageAutocompleteInfo(ui.model.document, 'model', ui.units.value, pkg=>{
	g_model_require_pkg = pkg;
    });
}

function formatUiDesc(str)
{
    return str.replace(/\n/g, "<br/>");
}

function hasOwnProperty(prop, obj)
{
    return ({}).hasOwnProperty.call(obj, prop);
}

function acCallbackOfModel(sci, require_pkg_cb){
    return function(ns_list){
        try
	{
	    var ret = false;
	    if(model.callTip.checkCommentTypeAutoCompleteStatus(sci))
	    {
		return model.callTip.nlCommentTypeAutoComplete;
	    }
	    
	    model.callTip.installCallTipOnce(sci, ns_list);

	    if(!(ret = model.callTip.getPredefineNS(ns_list)))
	    {
		//ns_list = model.callTip.preThisNS(ns_list);
		ret = model.getModelNamespaceList(ui.forms.value, ns_list);

		if(ns_list.length == 1)
		{
		    var varLocalList = model.callTip.parseLocalVariable(sci);
		    var ns = ns_list[0];
		    
		    if(varLocalList)
		    {
			varLocalList = varLocalList.filter(item=>{
			    return item.indexOf(ns) == 0;
			});
			
			if(!ret) ret = [];
			
			ret = ret.concat(varLocalList);
		    }
		}
		
		if(model.callTip.installGlobalVarCallTipOnce(sci, ret, ns_list))return [];
	    }

            var word = ns_list[ns_list.length - 1];

	    /*
	      if(!ret)
	      {
	      ret =  getModelNamespaceListOfIDE(ns_list);
	      }
	    */

	    if(require_pkg_cb)
	    {
		var require_pkg = require_pkg_cb();
		if(ns_list.length == 1 && require_pkg)
		{
		    if(ret)
		    {
			ret = ret.concat(
			    Object.keys(require_pkg).map(item=>{
				return item + '?3';
			    })
			);
		    }
		    else
		    {
			ret = Object.keys(require_pkg).map(item=>{
			    return item + '?3';
			})
		    }
		}
		
		if(ns_list.length == 2 && require_pkg)
		{
		    var pkg_name = ns_list[0];
		    
		    if(hasOwnProperty(pkg_name, require_pkg))
		    {
			sci.callTipOnce = require_pkg[pkg_name].filter(item=>{
			    return item.indexOf(word) == 0;
			});
		    }
		}
	    }

	    ret =  model.callTip.postFilterNS(ns_list, ret, sci, ui.forms.value).filter(item=>{
		return item.indexOf(word) == 0;
	    });
	    
	    return ret;
	}
	catch(err)
	{
	    console.log(err);
	    return [];
	}
    }
}

function initModelEditor()
{
    model.callTip.registerImage(ui.model);
    
    model.callTip.installJSPrebuiltAutoComplete(ui.model,
				      ['require?1(id);\n' +
				       '\tUsed to import modules, JSON, and local files. \n\n' + 
				       '\tid: <string> module name or path.\n'+
				       '\n' +
				       '\tReturns: <any> exported module content.\n'   
				      ]);
    model.callTip.installSciLexerType(ui.model, 'javascript');
    
    ui.model.autoCompleteCallback =  acCallbackOfModel(ui.model, ()=>{
	return g_model_require_pkg;
    });

    ui.model.autoCompleteListItemChange = function(ns_list){
        outputInfo('');
        model.getNamespaceListDescription(ui.forms.value, ns_list, (desc)=>{
            outputInfo(formatUiDesc(desc));
        });
    };
}

function InitLessaonPane()
{
    //This function is empty at present.
}

function InitKulEditor()
{
    ui.codes.autoComplete = [
	"xml","widget","property","name","type","kul_pkg",
	"width", "height","adjust","vertical",
	"horizontal","name", "form", "pushbutton"];
    
    ui.codes.lexer="xml";

}

////////////////////////////////////////////////////////////////////////////////////////////////////////
// Util Functions for Preview Form Attachment Manage.

var g_geo_init = false;

function getUiGeometry()
{
    if(model.getDevAttachProp() < 0)
    {
	return ui.geometry;
    }

    if(isCallbackTab())
    {
        return ui.GetWidgetGeometry(ui.callback.handle);
    }
    if(isModelTab())
    {
        return ui.GetWidgetGeometry(ui.model.handle);
    }

    if(isPluginTab())
    {
        var ret = ui.GetWidgetGeometry(ui.plugin.handle);
        ret.height -= 23;
        return ret;
    }

    return ui.geometry;
}

function clearSysLog()
{
    ui.global_log_info.document = '';
    model.saveGlobalLogInfo('');
}

function OnDockChange()
{
    if(!g_side_docker) return;
    
    ui.pb_unit.visible = !g_side_docker.isVisible();

    if(!g_log_sidepane) return;
    ui.log_flag.valid = g_log_sidepane.isVisible();

    if(!g_logplugin_sidepane) return;
    ui.plugin_info_btn.valid = g_logplugin_sidepane.isVisible();

    if(g_is_compiling) return;
    
    parent.setTimeout(()=>{
        if(ui.preview_visible.valid)model.updateGeometryToPreviewForm(ui.forms.value, getUiGeometry());
    },100);
}

function OnShowHideSolutionPane()
{
    g_side_docker.show();
}