editor.js

function EditorInstance(key)
{
    // class variables
	var _self = this;
	this.key = key || _newKey();
	this.wrapper = null;
	this.editor = null;
	this.fileManager = null;

	// internal property
	this.$defaultWrapperId = 'code-editor-wrapper'
	this.$info = {};
	this.$theme = null;
	this.$mode = null;
	this.$defaultMode = 'javascript'
	this.$menu = null;
	this.$editorElement = null;

	// class methods
	this.insert = _insertEditor;
	this.setTheme = _setTheme;
	this.setMode = _setMode;
	this.save = _save;
	this.load = _loadInfo;
	this.getInfo = _getInfo;
	this.roll = _loadFromStorage;
	this.setFileManager = _setFileManager;
	this.loadFile = _loadFile;

	this.getThemes = function(){return _themes;};
	this.getModes = function(){return _modes;};


	// function editor create
	function _insertEditor(wrapper)
	{
		var wrap = wrapper || _getWrapper();
		document.body.appendChild(wrap);

		// chk load ace
		var scripts = document.getElementsByTagName('SCRIPT');
		var aceIsLoaded = false;
		for(i=0;i<scripts.length;i++)
		{
			if(scripts[i].src == 'src-min/ace.js') {aceIsLoaded = true; break; }
		}
		if(!aceIsLoaded){_loadAce();}
		else{_createEditor();}

		return _self.editor;
	}

	function _setFileManager(fileManager)
	{
		if(!fileManager){console.log("No fileManger assigned."); return false;}
		if(_self.fimeManager == null && _self.editor != null) {_save()};
		_self.fileManager = fileManager;
		_self.fileManager.roll();
		_$changeFileManagerEvent.detail.fileManager = fileManager;
		document.dispatchEvent(_$changeFileManagerEvent);
	}

	function _loadFile(filename)
	{
		if(_self.fileManager != null)
		{
			_self.fileManager.load(filename);
			_loadInfo(_self.fileManager.currentFile);
		}
		else
		{
			_loadFromStorage();
		}
	}

	function _save()
	{
		if(_self.fileManager)
		{
			console.log('save with fileManager');
			_self.$info = _getInfo();
			_self.fileManager.setFile(_self.$info);
			_self.fileManager.save();
		}
		else{
			console.log('save standalone');
			_self.$info =  _getInfo();
			var estr = JSON.stringify(_self.$info);
			localStorage.setItem('acedefault', estr);
		}
	}

	function _getInfo()
	{
		var e = _self.$info;
		e.theme = _self.$theme;
		e.mode = _self.$mode;
		e.contents = _self.editor.getValue();
		return e;
	}

	function _loadInfo(e)
	{
		if(e==null){
			if(_self.fileManager)
			{
				e = _self.fileManager.currentFile;
			}
			else
			{
				console.log('no file assigned');
				return;
			}
		}
		_setTheme(e.theme);
		_setMode(e.mode);
		_setContents(e.contents);
		_self.$info = e;
		_$loadEditorObjEvent.detail.obj = _self.$info;
		document.dispatchEvent(_$loadEditorObjEvent);
	}

	function _loadFromStorage()
	{
		if(_self.fileManager == null)
		{
			var e = localStorage.getItem('acedefault');
			if(!e){return false;}
			e = JSON.parse(e);
			_loadInfo(e);
		}
		else {
			addEventListener('loadFromStorage',function(){console.log('file manager rolled.');_loadInfo(_self.fileManager.currentFile);})
			_self.fileManager.roll();
		}
	}

	function _setTheme(t)
	{
		if(t==null || t==undefined){t = Math.floor((Math.random() * 1000)) % _themes.length;}
		if(typeof(t)=="number")
		{
			_self.editor.setTheme('ace/theme/' + _themes[t]);
			_self.$theme = _themes[t];
		}
		else if (typeof(t)=="string")
		{
			_self.editor.setTheme('ace/theme/'+ t);
			_self.$theme = t;
		}
		_$changeThemeEvent.detail.theme = _self.$theme;
		document.dispatchEvent(_$changeThemeEvent);
	}

	function _setMode(t)
	{
		var _t = t || _self.$defaultMode;
		if(typeof(_t) == "number")
		{
			_self.editor.getSession().setMode('ace/mode/' + _modes[_t]);
			_self.$mode = _modes[_t];
		} else {
			_self.editor.getSession().setMode('ace/mode/' + _t);
			_self.$mode = _t;
		}
		_$changeModeEvent.detail.mode = _self.$mode;
		document.dispatchEvent(_$changeModeEvent);
	}

	function _setContents(c)
	{
		_self.editor.setValue(c);
		_$changeContentsEvent.detail.contents = c;
		document.dispatchEvent(_$changeContentsEvent);
	}

	// utility functions
	function _newKey() {var now = new Date(); return String(now.getTime()); } 
	function _$(elid) {return document.getElementById(elid);}
	function _$tag(tagName) {return document.getElementsByTagName(tagName);}

	function _loadAce()
	{

		var aceScript = document.createElement("SCRIPT");
		aceScript.setAttribute('type','text/javascript');
		aceScript.setAttribute('charset','utf-8');
		aceScript.setAttribute('src','src-min/ace.js');
		aceScript.addEventListener('load',function(){_createEditor(_self.wrapper.editor.id);});
		document.head.appendChild(aceScript);
	}

	function _createEditor(editorWrapper)
	{
		if(!editorWrapper) {return false;}
		_self.editor = ace.edit(editorWrapper);
		_$newEditorEvent.detail.msg = 'editor created';
		_$newEditorEvent.detail.editor = _self.editor;
		_setMode(); _setTheme();
		document.dispatchEvent(_$newEditorEvent);
	}

	function _getWrapper()
	{

		var wrapper = _$(_self.$defaultWrapperId);
		if(!wrapper)
		{
			wrapper = document.createElement("DIV");
			wrapper.id = _self.$defaultWrapperId;
			wrapper.className = 'wrapper'

			var menuWrapper = document.createElement('DIV');
			menuWrapper.id = 'wrapper-menu-' + _self.key;
			menuWrapper.className = 'menu';
			_self.$menu = menuWrapper;

			var editorWrapper = document.createElement('DIV');
			editorWrapper.id = 'wrapper-editor-' + _self.key;
			editorWrapper.className = 'editor';

			wrapper.menu = menuWrapper;
			wrapper.editor = editorWrapper;

			wrapper.appendChild(menuWrapper);
			wrapper.appendChild(editorWrapper);
		}
		_self.wrapper = wrapper;
		return wrapper;
	}
	// constants
	var _themes = ["ambiance", "chaos", "chrome", "clouds", "clouds_midnight", "cobalt", "crimson_editor", "dawn", "dreamweaver", "eclipse", "github", "idle_fingers", "kr", "merbivore", "merbivore_soft", "mono_industrial", "monokai", "pastel_on_dark", "solarized_dark", "solarized_light", "textmate", "tomorrow", "tomorrow_night", "tomorrow_night_blue", "tomorrow_night_bright", "tomorrow_night_eighties", "twilight", "vibrant_ink", "xcode"];
	var _modes = ["abap", "asciidoc", "c9search", "c_cpp", "clojure", "coffee", "coldfusion", "csharp", "css", "curly", "dart", "diff", "django", "dot", "glsl", "golang", "groovy", "haml", "haxe", "html", "jade", "java", "javascript", "json", "jsp", "jsx", "latex", "less", "liquid", "lisp", "livescript", "lua", "luapage", "lucene", "makefile", "markdown", "objectivec", "ocaml", "perl", "pgsql", "php", "powershell", "python", "r", "rdoc", "rhtml", "ruby", "scad", "scala", "scheme", "scss", "sh", "sql", "stylus", "svg", "tcl", "tex", "text", "textile", "tm_snippet", "typescript", "vbscript", "xml", "xquery", "yaml"];

	// events
	var _$changeFileManagerEvent = new CustomEvent('changeFileManager', {detail:{msg:"Change File Manager.", fileManager:null}, bubbles:true, cancelBubble:true});
	var _$newEditorEvent = new CustomEvent('newEditor', {detail:{msg:"New Editor inserted.", editor:null}, bubbles:true, cancelBubble:true});
	var _$changeThemeEvent = new CustomEvent('changeTheme', {detail:{msg:"Theme Changed.", themeName:null}, bubbles:true, cancelBubble:true});
	var _$changeModeEvent = new CustomEvent('changeMode', {detail:{msg:"Mode Changed.", mode:null}, bubbles:true, cancelBubble:true});
	var _$changeContentsEvent = new CustomEvent('changeContents', {detail:{msg:"Contents changed.", contents:null}, bubbles:true, cancelBubble:true});
	var _$loadEditorObjEvent = new CustomEvent('loadEditorObj', {detail:{msg:"Editor changed.", obj:null}, bubbles:true, cancelBubble:true});

}

/***********************
Editor Wrapper Structure

|---Wrapper
	|---MenuWrapper #wrapper-menu-key
	|---EditorWrapper #wrapper-editor-key




***********************/