From 35d1047bdb84573751436bea815a88e051d3b1fa Mon Sep 17 00:00:00 2001
From: Redgoose <scripter@me.com>
Date: Mon, 7 Jul 2014 07:44:21 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html       |  17 +--
 js/jsonEditor.js | 265 ++++++++++++++++++++++++++++++++---------------
 2 files changed, 186 insertions(+), 96 deletions(-)

diff --git a/index.html b/index.html
index a114126..582b110 100644
--- a/index.html
+++ b/index.html
@@ -17,20 +17,7 @@ <h1><a href="./">JSON Manager</a></h1>
 	<!-- JSON editor -->
 	<div class="jsonEditor">
 		<!-- index -->
-		<div class="index">
-			<ul>
-				<li type="Object" loc="root" class="on">
-					<dl>
-						<dt>
-							<button type="button" role="control">control</button>
-							<button type="button" role="toggle">toggle</button>
-							<em class="no">0</em><strong data-ph="Object"></strong><span class="type"></span><em class="count">0</em>
-						</dt>
-					</dl>
-					<ul></ul>
-				</li>
-			</ul>
-		</div>
+		<div class="index"></div>
 		<!-- // index -->
 		<!-- context -->
 		<nav class="context">
@@ -117,7 +104,7 @@ <h1><a href="./">JSON Manager</a></h1>
 			type : 'Array'
 		});
 	}
-	jsonEditor.importJSON(json, $root);
+	//jsonEditor.importJSON(json, $root);
 
 	// Export json
 	$jsonResult.find('button[role=btn_toJSON]').on('click', function(){
diff --git a/js/jsonEditor.js b/js/jsonEditor.js
index cd9ce54..1259eb5 100644
--- a/js/jsonEditor.js
+++ b/js/jsonEditor.js
@@ -1,3 +1,4 @@
+function log(o){console.log(o);}
 Object.size = function(obj) {
     var size = 0, key;
     for (key in obj) {
@@ -11,23 +12,22 @@ Object.size = function(obj) {
  * JSON Editor Class
  * 
  * author : Redgoose (2014.03)
- * version : 0.1
+ * version : 0.2
  * website : http://redgoose.me
  * @param Array $wrap : json editor 껍데기 엘리먼트
  * @return void
  */
-function JSONEditor($wrap)
+var JSONEditor = function($wrap)
 {
 	var
-		$index = $wrap.children('div.index'),
-		$context = $wrap.children('nav.context'),
-		$root = $index.children().children('li[loc=root]'),
-
-		_index = this,
-		_util = new Util(),
-		_context = new Context(_index, $index, $context)
+		self = this
+		,util = new Util()
+		,context = new Context(this, this.contextTree)
 	;
 
+	self.$index = $wrap.children('div.index');
+	self.$root = null;
+
 
 	/**
 	 * Util Class
@@ -79,19 +79,35 @@ function JSONEditor($wrap)
 	/**
 	 * Context class
 	 *  
-	 * @param Function _main : JSONEditor 클래스
-	 * @param Array $index : json목록 엘리먼트
-	 * @param Array $context : context 엘리먼트
-	 * @return void
+	 * @param {JSONEditor} getParent
+	 * @param {Array} tree
 	 */
-	function Context(_main, $index, $context)
+	function Context(getParent, tree)
 	{
 		var
-			_context = this,
-			wrap = $('html'),
-			active = null
+			self = this
+			,parent = getParent
+			//,wrap = $('html')
 		;
-	
+
+		self.$el = null;
+
+		var template = function(obj)
+		{
+			str = '';
+			str += '';
+			log(obj)
+			return $(str);
+		}
+
+		var createContext = function()
+		{
+			self.$el = $('<nav></nav>');
+			var dd = template(tree);
+			//log(self.$el);
+			// $wrap에 nav 넣기
+		}
+
 		/* Methods */
 		// on
 		this.on = function(li, button)
@@ -113,7 +129,7 @@ function JSONEditor($wrap)
 				$context.removeAttr('loc');
 			}
 			wrap.on('click', function(){
-				_context.off();
+				context.off();
 			});
 		}
 	
@@ -124,42 +140,73 @@ function JSONEditor($wrap)
 			$context.removeAttr('type');
 			wrap.off();
 		}
-	
+
+		createContext();
 		/* Context navigation */
 		// items event
+/*
 		$context.find('li').on('click', function(e){
 			e.stopPropagation();
 		});
 
 		$context.find('li[role=Type] li').on('click', function(){
-			_index.typeItem({
+			self.typeItem({
 				active : active,
 				type : $(this).attr('role')
 			});
-			_context.off();
+			context.off();
 		});
 	
 		$context.find('li[role=Insert] li').on('click', function(){
-			_index.insertItem({
+			self.insertItem({
 				active : active,
 				type : $(this).attr('role'),
 				data : null
 			});
-			_context.off();
+			context.off();
 		});
 	
 		$context.find('li[role=Duplicate]').on('click', function(){
-			_index.duplicateItem(active);
-			_context.off();
+			self.duplicateItem(active);
+			context.off();
 		});
 	
 		$context.find('li[role=Remove]').on('click', function(){
-			_index.removeItem(active);
-			_context.off();
+			self.removeItem(active);
+			context.off();
 		});
+*/
 	}
 
 
+	var init = function()
+	{
+		self.$root = createRoot();
+		//dragEvent();
+	}
+
+	var template = function(type)
+	{
+		var str = '<li type="' + type + '" class="on">\n';
+		str += '<dl>';
+		str += '<dt>';
+		str += '<button type="button" role="move">move</button>';
+		str += '<button type="button" role="control">control</button>';
+		str += '<em class="no">0</em>';
+		str += '<button type="button" role="toggle">toggle</button>';
+		str += '<strong contenteditable="true" spellcheck="false" data-ph="' + type + '"></strong>';
+		str += '<span class="type"></span>';
+		str += '<em class="count">0</em>';
+		str += '</dt>';
+		str += '<dd>';
+		str += '<span contenteditable="true" spellcheck="false"></span>';
+		str += '</dd>';
+		str += '</dl>';
+		str += '<ul></ul>';
+		str += '</li>';
+		return $(str);
+	}
+
 	/**
 	 * 버튼을 선택해주는 엘리먼트
 	 * 
@@ -206,36 +253,106 @@ function JSONEditor($wrap)
 	{
 		var $strong = $item.find('> dl > dt > strong');
 		$strong.on('blur', function(){
-			_util.removeBR($(this));
-			_util.removeSpace($(this));
-			_util.stringLimiter($(this), 20);
+			util.removeBR($(this));
+			util.removeSpace($(this));
+			util.stringLimiter($(this), 20);
 		});
 	}
 
 	/**
 	 * Context와 접었더 펴는 버튼 이벤트를 만들어준다.
 	 * 
-	 * @param Array buttons : 아이템 속 버튼 엘리먼트들
+	 * @param {DOM} buttons
 	 * @return void
 	 */
-	function buttonsEvent(buttons)
+	var buttonsEvent = function($buttons)
 	{
-		var $item = buttons.closest('li');
+		var $node = $buttons.closest('li');
 
 		// control
-		buttons.filter('[role=control]').on('click', function(e){
+		$buttons.filter('[role=control]').on('click', function(e){
 			e.stopPropagation();
-			_context.off($item);
-			_context.on($item, $(this));
+			context.off($node);
+			context.on($node, $(this));
 		});
 
 		// toggle
-		buttons.filter('[role=toggle]').on('click', function(){
-			$item.toggleClass('on')
+		$buttons.filter('[role=toggle]').on('click', function(e){
+			$node.toggleClass('on')
 		});
 	}
 
 
+	/**
+	 * drag event
+	 */
+	var dragEvent = function($item)
+	{
+		// drag and drop event
+		var adjustment, beforeItem;
+		$item.children('ul').sortable({
+			itemSelector : 'li'
+			,handle : 'button[role=move]'
+			,group : 'index'
+			,pullPlaceholder: true
+			,onDrop : function(item, targetContainer, _super) {
+				_super(item);
+	
+				updateCount(beforeItem.parent());
+				updateCount(targetContainer.el.parent());
+	
+				updateNumber(beforeItem.children());
+				updateNumber(targetContainer.el.children());
+	
+				beforeItem = adjustment = null;
+			}
+			,onDragStart : function($el, container, _super) {
+				var
+					offset = $el.offset()
+					,pointer = container.rootGroup.pointer
+				;
+				adjustment = {
+					left: pointer.left - offset.left
+					,top: pointer.top - offset.top
+				};
+				beforeItem = container.el;
+				_super($el, container)
+			}
+			,onDrag : function($el, position) {
+				$el.css({
+					left: position.left - adjustment.left
+					,top: position.top - adjustment.top
+				});
+			}
+			,isValidTarget : function ($el, container) {
+				return (container.el.parent().attr('type') == 'String') ? false : true;
+			}
+		});
+	}
+
+	/**
+	 * create root node
+	 * 
+	 * @return {DOM}
+	 */
+	var createRoot = function()
+	{
+		var $ul = $('<ul/>');
+		var $li = template('Object');
+
+		$li.attr('loc', 'root');
+		$li.find('[contenteditable]').attr('contenteditable', 'false');
+		$li.find('[role=move]').remove();
+
+		self.$index.append($ul.append($li));
+
+		buttonsEvent(selectButtons($li));
+		dragEvent($li);
+
+		return $li;
+	}
+
+
 	/**
 	 * 아이템을 삽입해준다.
 	 * 
@@ -395,7 +512,7 @@ function JSONEditor($wrap)
 					type = (Array.isArray(value)) ? 'Array' : 'Object';
 				}
 
-				_index.insertItem({
+				self.insertItem({
 					active : $item,
 					type : type,
 					data : data,
@@ -474,47 +591,33 @@ function JSONEditor($wrap)
 		return JSON.stringify(json, null, (space) ? space : 0);
 	}
 
-	// init
-	buttonsEvent(selectButtons($root));
-
-	// drag and drop event
-	var adjustment, beforeItem;
-	$root.children('ul').sortable({
-		itemSelector : 'li'
-		,handle : 'button[role=move]'
-		,group : 'index'
-		,pullPlaceholder: true
-		,onDrop : function(item, targetContainer, _super) {
-			_super(item);
 
-			updateCount(beforeItem.parent());
-			updateCount(targetContainer.el.parent());
+	// act
+	init();
 
-			updateNumber(beforeItem.children());
-			updateNumber(targetContainer.el.children());
-
-			beforeItem = adjustment = null;
-		}
-		,onDragStart : function($item, container, _super) {
-			var
-				offset = $item.offset()
-				,pointer = container.rootGroup.pointer
-			;
-			adjustment = {
-				left: pointer.left - offset.left
-				,top: pointer.top - offset.top
-			};
-			beforeItem = container.el;
-			_super($item, container)
-		}
-		,onDrag : function($item, position) {
-			$item.css({
-				left: position.left - adjustment.left
-				,top: position.top - adjustment.top
-			});
-		}
-		,isValidTarget : function ($item, container) {
-			return (container.el.parent().attr('type') == 'String') ? false : true;
-		}
-	});
 }
+
+JSONEditor.prototype.contextTree = [
+	{
+		role : 'Type'
+		,roles : [
+			{role:'Object'}
+			,{role:'Array'}
+			,{role:'String'}
+		]
+	}
+	,{
+		role : 'Insert'
+		,roles : [
+			{role:'Object'}
+			,{role:'Array'}
+			,{role:'String'}
+		]
+	}
+	,{
+		role : 'Duplicate'
+	}
+	,{
+		role : 'Remove'
+	}
+];
\ No newline at end of file

From c3ab78c490355226c8e59c7f6821c672403c84ce Mon Sep 17 00:00:00 2001
From: Scripter <scripter@me.com>
Date: Mon, 7 Jul 2014 09:33:18 +0900
Subject: [PATCH 2/5] =?UTF-8?q?jsoneditor=20class=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EC=9D=BC=EB=A6=84=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                | 6 +++---
 js/{jsonEditor.js => JSONEditor.class.js} | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)
 rename js/{jsonEditor.js => JSONEditor.class.js} (99%)

diff --git a/index.html b/index.html
index 582b110..b02f12d 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@ <h1><a href="./">JSON Manager</a></h1>
 		<!-- index -->
 		<div class="index"></div>
 		<!-- // index -->
-		<!-- context -->
+<!--
 		<nav class="context">
 			<ul>
 				<li role="Type">
@@ -62,7 +62,7 @@ <h1><a href="./">JSON Manager</a></h1>
 				</li>
 			</ul>
 		</nav>
-		<!-- // context -->
+-->
 	</div>
 	<!-- // JSON editor index -->
 
@@ -78,7 +78,7 @@ <h1><a href="./">JSON Manager</a></h1>
 
 <script src="./js/jquery-2.1.1.min.js"></script>
 <script src="./js/jquery-sortable.js"></script>
-<script src="./js/jsonEditor.js"></script>
+<script src="./js/JSONEditor.class.js"></script>
 <script>
 jQuery(function($){
 	var
diff --git a/js/jsonEditor.js b/js/JSONEditor.class.js
similarity index 99%
rename from js/jsonEditor.js
rename to js/JSONEditor.class.js
index 1259eb5..1ba192b 100644
--- a/js/jsonEditor.js
+++ b/js/JSONEditor.class.js
@@ -182,7 +182,6 @@ var JSONEditor = function($wrap)
 	var init = function()
 	{
 		self.$root = createRoot();
-		//dragEvent();
 	}
 
 	var template = function(type)

From 66d3ea30b1cfda55ad1c05d39af26995aa55f777 Mon Sep 17 00:00:00 2001
From: Scripter <scripter@me.com>
Date: Mon, 7 Jul 2014 18:59:11 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html             |  70 ++-------
 js/JSONEditor.class.js | 349 ++++++++++++++++++-----------------------
 2 files changed, 159 insertions(+), 260 deletions(-)

diff --git a/index.html b/index.html
index b02f12d..81214fd 100644
--- a/index.html
+++ b/index.html
@@ -15,65 +15,17 @@ <h1><a href="./">JSON Manager</a></h1>
 	<!-- // Header -->
 
 	<!-- JSON editor -->
-	<div class="jsonEditor">
-		<!-- index -->
-		<div class="index"></div>
-		<!-- // index -->
-<!--
-		<nav class="context">
-			<ul>
-				<li role="Type">
-					<div>
-						<ul>
-							<li role="Object">
-								<button type="button">Object</button>
-							</li>
-							<li role="Array">
-								<button type="button">Array</button>
-							</li>
-							<li role="String">
-								<button type="button">String</button>
-							</li>
-						</ul>
-					</div>
-					<button type="button">Type</button>
-				</li>
-				<li role="Insert">
-					<div>
-						<ul>
-							<li role="Object">
-								<button type="button">Object</button>
-							</li>
-							<li role="Array">
-								<button type="button">Array</button>
-							</li>
-							<li role="String">
-								<button type="button">String</button>
-							</li>
-						</ul>
-					</div>
-					<button type="button">Insert</button>
-				</li>
-				<li role="Duplicate">
-					<button type="button">Duplicate</button>
-				</li>
-				<li role="Remove">
-					<button type="button">Remove</button>
-				</li>
-			</ul>
-		</nav>
--->
-	</div>
-	<!-- // JSON editor index -->
+	<div class="jsonEditor"></div>
+	<!-- // JSON editor -->
 
-	<!-- JSON Result -->
+	<!-- result -->
 	<div id="jsonResult">
 		<nav class="btngroup">
 			<button type="button" role="btn_toJSON">Export JSON</button>
 		</nav>
 		<pre></pre>
 	</div>
-	<!-- // JSON Result -->
+	<!-- // result -->
 </main>
 
 <script src="./js/jquery-2.1.1.min.js"></script>
@@ -81,14 +33,9 @@ <h1><a href="./">JSON Manager</a></h1>
 <script src="./js/JSONEditor.class.js"></script>
 <script>
 jQuery(function($){
-	var
-		$jsonEditor = $('div.jsonEditor'),
-		$index = $jsonEditor.children('div.index'),
-		jsonEditor = new JSONEditor($jsonEditor),
 
-		$jsonResult = $('#jsonResult')
-		$root = $index.find('li[loc=root]')
-	;
+	var $jsonEditor = $('div.jsonEditor');
+	var jsonEditor = new JSONEditor($jsonEditor);
 
 	// import json
 	try {
@@ -100,13 +47,14 @@ <h1><a href="./">JSON Manager</a></h1>
 	if (Array.isArray(json))
 	{
 		jsonEditor.typeItem({
-			active : $root,
+			active : $jsonEditor.find('li[loc=root]'),
 			type : 'Array'
 		});
 	}
-	//jsonEditor.importJSON(json, $root);
+	jsonEditor.importJSON(json);
 
 	// Export json
+	var $jsonResult = $('#jsonResult');
 	$jsonResult.find('button[role=btn_toJSON]').on('click', function(){
 		$jsonResult.children('pre').text(jsonEditor.exportJSON(5));
 	});
diff --git a/js/JSONEditor.class.js b/js/JSONEditor.class.js
index 1ba192b..e990298 100644
--- a/js/JSONEditor.class.js
+++ b/js/JSONEditor.class.js
@@ -19,20 +19,17 @@ Object.size = function(obj) {
  */
 var JSONEditor = function($wrap)
 {
-	var
-		self = this
-		,util = new Util()
-		,context = new Context(this, this.contextTree)
-	;
+	var self = this;
 
-	self.$index = $wrap.children('div.index');
-	self.$root = null;
+	self.$wrap = $wrap;
+	self.$index = null;
+
+	var util = new Util();
+	var context = new Context(this, this.contextTree);
 
 
 	/**
 	 * Util Class
-	 * 
-	 * @return void
 	 */
 	function Util()
 	{
@@ -40,7 +37,7 @@ var JSONEditor = function($wrap)
 		 * remove <br/>
 		 * <br/> 엘리먼트를 공백으로 변환시켜줍니다.
 		 * 
-		 * @param $ element : 컨테이너 엘리먼트
+		 * @param {DOM} element : 컨테이너 엘리먼트
 		**/
 		this.removeBR = function (element)
 		{
@@ -51,8 +48,8 @@ var JSONEditor = function($wrap)
 		 * string limiter
 		 * 글자길이를 체크하여 지정된 수치보다 높으면 잘라버립니다.
 		 * 
-		 * @param $ element : 글이 들어있는 엘리먼트
-		 * @param Number limit : 글자 갯수제한
+		 * @param {DOM} element : 글이 들어있는 엘리먼트
+		 * @param {Number} limit : 글자 갯수제한
 		**/
 		this.stringLimiter = function(element, limit)
 		{
@@ -67,7 +64,7 @@ var JSONEditor = function($wrap)
 		 * remove space
 		 * 공백을 없애줍니다.
 		 * 
-		 * @param $ element : 내용이 적혀있는 엘리먼트입니다.
+		 * @param {DOM} element : 내용이 적혀있는 엘리먼트입니다.
 		**/
 		this.removeSpace = function(element)
 		{
@@ -84,36 +81,80 @@ var JSONEditor = function($wrap)
 	 */
 	function Context(getParent, tree)
 	{
-		var
-			self = this
-			,parent = getParent
-			//,wrap = $('html')
-		;
+		var self = this;
+		var parent = getParent;
 
 		self.$el = null;
+		self.active = null;
 
+		// context template
 		var template = function(obj)
 		{
-			str = '';
-			str += '';
-			log(obj)
+			function node(obj)
+			{
+				var str = '<ul>';
+				for (var o in obj)
+				{
+					str += '<li role="' + obj[o].role + '">';
+					if (obj[o].roles)
+					{
+						str += '<div>';
+						str += node(obj[o].roles);
+						str += '</div>';
+					}
+					str += '<button type="button">' + obj[o].role + '</button>';
+					str += '</li>';
+				}
+				str += '</ul>';
+				return str;
+			}
+			var str = '<nav class="context">';
+			str += node(obj);
+			str += '</nav>';
 			return $(str);
 		}
 
+		// create context
 		var createContext = function()
 		{
-			self.$el = $('<nav></nav>');
-			var dd = template(tree);
-			//log(self.$el);
-			// $wrap에 nav 넣기
+			self.$el = template(tree);
+			parent.$wrap.append(self.$el);
+		}
+
+		// context event
+		var contextEvent = function($nav)
+		{
+			$nav.find('li').on('click', function(e){
+				e.stopPropagation();
+			});
+	
+			$nav.find('li[role=Type] li').on('click', function(){
+				parent.typeItem(self.active, $(this).attr('role'));
+				context.off();
+			});
+		
+			$nav.find('li[role=Insert] li').on('click', function(){
+				parent.insertItem(self.active, $(this).attr('role'), null);
+				context.off();
+			});
+		
+			$nav.find('li[role=Duplicate]').on('click', function(){
+				parent.duplicateItem(self.active);
+				context.off();
+			});
+		
+			$nav.find('li[role=Remove]').on('click', function(){
+				parent.removeItem(self.active);
+				context.off();
+			});
 		}
 
-		/* Methods */
+
 		// on
 		this.on = function(li, button)
 		{
-			active = li;
-			$context
+			self.active = li;
+			self.$el
 				.attr('type', li.attr('type'))
 				.css({
 					left : button.position().left + button.outerWidth()
@@ -122,68 +163,48 @@ var JSONEditor = function($wrap)
 			;
 			if (li.attr('loc') == 'root')
 			{
-				$context.attr('loc', li.attr('loc'))
+				self.$el.attr('loc', li.attr('loc'))
 			}
 			else
 			{
-				$context.removeAttr('loc');
+				self.$el.removeAttr('loc');
 			}
-			wrap.on('click', function(){
-				context.off();
+			$('html').on('click', function(){
+				self.off();
 			});
 		}
 	
 		// off
 		this.off = function()
 		{
-			active = null;
-			$context.removeAttr('type');
-			wrap.off();
+			self.active = null;
+			self.$el.removeAttr('type');
+			$('html').off('click');
 		}
 
-		createContext();
-		/* Context navigation */
-		// items event
-/*
-		$context.find('li').on('click', function(e){
-			e.stopPropagation();
-		});
 
-		$context.find('li[role=Type] li').on('click', function(){
-			self.typeItem({
-				active : active,
-				type : $(this).attr('role')
-			});
-			context.off();
-		});
-	
-		$context.find('li[role=Insert] li').on('click', function(){
-			self.insertItem({
-				active : active,
-				type : $(this).attr('role'),
-				data : null
-			});
-			context.off();
-		});
-	
-		$context.find('li[role=Duplicate]').on('click', function(){
-			self.duplicateItem(active);
-			context.off();
-		});
-	
-		$context.find('li[role=Remove]').on('click', function(){
-			self.removeItem(active);
-			context.off();
-		});
-*/
+		// act
+		createContext();
+		contextEvent(self.$el);
 	}
 
 
+	/**
+	 * init
+	 */
 	var init = function()
 	{
-		self.$root = createRoot();
+		self.$index = $('<div class="index"/>');
+		self.$index.append(createRoot());
+		self.$wrap.prepend(self.$index);
 	}
 
+	/**
+	 * node template
+	 * 
+	 * @param {String} type
+	 * @return {DOM}
+	 */
 	var template = function(type)
 	{
 		var str = '<li type="' + type + '" class="on">\n';
@@ -209,10 +230,10 @@ var JSONEditor = function($wrap)
 	/**
 	 * 버튼을 선택해주는 엘리먼트
 	 * 
-	 * @param Array $li : 버튼을 선택하는 li엘리먼트
-	 * @return Array button : 버튼 엘리먼트
+	 * @param {DOM} $li : 버튼을 선택하는 li엘리먼트
+	 * @return {DOM} : 버튼 엘리먼트
 	 */
-	function selectButtons($li)
+	var selectButtons = function($li)
 	{
 		return $li.children('dl').children('dt').children('button');
 	}
@@ -220,10 +241,9 @@ var JSONEditor = function($wrap)
 	/**
 	 * Object나 Array 카운트 갱신
 	 * 
-	 * @param Array $li : 카운트 갱신할 li 엘리먼트
-	 * @return void
+	 * @param {DOM} $li : 카운트 갱신할 li 엘리먼트
 	 */
-	function updateCount($li)
+	var updateCount = function($li)
 	{
 		var itemCount = $li.find('> ul > li').length;
 		$li.find('> dl em.count').text(itemCount);
@@ -232,12 +252,11 @@ var JSONEditor = function($wrap)
 	/**
 	 * 배열번호에 사용되는 순서에 대한 번호갱신
 	 * 
-	 * @param Array $lis : li 엘리먼트들
-	 * @return void
+	 * @param {DOM} $items
 	 */
-	function updateNumber($lis)
+	var updateNumber = function($items)
 	{
-		$lis.each(function(k){
+		$items.each(function(k){
 			$(this).find('> dl > dt > em.no').text(k);
 		});
 	}
@@ -245,10 +264,9 @@ var JSONEditor = function($wrap)
 	/**
 	 * key값 텍스트 인풋에서 포커스가 떨어졌을때 문자 검사를 해주는 역할을 한다.
 	 * 
-	 * @param Array $item : 검사할 li엘리먼트
-	 * @return void
+	 * @param {DOM} $item
 	 */
-	function inputCheckEvent($item)
+	var inputCheckEvent = function($item)
 	{
 		var $strong = $item.find('> dl > dt > strong');
 		$strong.on('blur', function(){
@@ -262,7 +280,6 @@ var JSONEditor = function($wrap)
 	 * Context와 접었더 펴는 버튼 이벤트를 만들어준다.
 	 * 
 	 * @param {DOM} buttons
-	 * @return void
 	 */
 	var buttonsEvent = function($buttons)
 	{
@@ -284,6 +301,8 @@ var JSONEditor = function($wrap)
 
 	/**
 	 * drag event
+	 * 
+	 * @param {DOM} $item
 	 */
 	var dragEvent = function($item)
 	{
@@ -343,156 +362,94 @@ var JSONEditor = function($wrap)
 		$li.find('[contenteditable]').attr('contenteditable', 'false');
 		$li.find('[role=move]').remove();
 
-		self.$index.append($ul.append($li));
+		$ul.append($li);
 
 		buttonsEvent(selectButtons($li));
 		dragEvent($li);
 
-		return $li;
+		return $ul;
 	}
 
 
 	/**
 	 * 아이템을 삽입해준다.
 	 * 
-	 * @param Object opt : 아이템 삽입에 필요한 정보
-	 * @param Array opt.active : 선택된 아이템
-	 * @param String opt.type : 추가할 아이템 타입 (String, Object, Array)
-	 * @param Object opt.data : 추가할 아이템의 데이터
-	 * @param String opt.data.key : 아이템 key
-	 * @param String opt.data.value : 아이템 value
-	 * @param Fucntion opt.complete : 역할을 끝내고 실행할 함수
-	 * @return void
+	 * @param {DOM} $active : 선택된 아이템
+	 * @param {String} type : 추가할 아이템 타입 (String, Object, Array)
+	 * @param {Object} data : 추가할 아이템의 데이터
+	 * @param {Function} complete
 	 */
-	this.insertItem = function(opt)
+	this.insertItem = function($active, type, data, complete)
 	{
-		var
-			textAttr = {'contenteditable' : true, 'spellcheck' : false}
-			,$ul = opt.active.children('ul')
-			,itemNumber = $ul.children('li').length
-			,$item = $('<li/>')
-				.attr('type', opt.type)
-				.addClass('on')
-				.append(
-					$('<dl/>')
-						.append(
-							$('<dt/>')
-								.append(
-									$('<button/>')
-										.attr({'type' : 'button', 'role' : 'move'})
-										.text('move')
-								)
-								.append(
-									$('<button/>')
-										.attr({'type' : 'button', 'role' : 'control'})
-										.text('control')
-								)
-								.append(
-									$('<em/>').addClass('no').text(itemNumber)
-								)
-								.append(
-									$('<button/>')
-										.attr({'type' : 'button', 'role' : 'toggle'})
-										.text('toggle')
-								)
-								.append(
-									$('<strong/>')
-										.attr(textAttr)
-										.attr('data-ph', opt.type)
-								)
-								.append(
-									$('<span/>')
-										.addClass('type')
-								)
-								.append(
-									$('<em/>').addClass('count').text('0')
-								)
-						)
-						.append(
-							$('<dd/>')
-								.append(
-									$('<span/>')
-										.attr(textAttr)
-								)
-						)
-				)
-				.append($('<ul/>'))
-		;
+		var $ul = $active.children('ul');
+		var $item = template(type);
+
+		$item.find('em.no').text($ul.children('li').length);
 
 		// push data
-		if (opt.data)
+		if (data)
 		{
-			$item.find('dt strong').text(opt.data.key);
-			$item.find('dd span').text(opt.data.value);
+			$item.find('dt strong').text(data.key);
+			$item.find('dd span').text(data.value);
 		}
 
 		buttonsEvent(selectButtons($item));
 		inputCheckEvent($item);
+		$active.addClass('on').children('ul').append($item);
+		updateCount($active);
 
-		opt.active
-			.addClass('on')
-			.children('ul').append($item)
-		;
-		updateCount(opt.active);
-
-		if (opt.complete)
+		if (complete)
 		{
-			opt.complete($item);
+			complete($item);
 		}
 	}
 
 	/**
 	 * 아이템의 타입을 바꿔준다.
 	 * 
-	 * @param Object opt
-	 * @param Array opt.active : 선택된 아이템
-	 * @param String opt.type : 바꾸고싶은 타입 (String, Object, Array)
-	 * @return void
+	 * @param {DOM} active : 선택된 아이템
+	 * @param {String} type : 바꾸고싶은 타입 (String, Object, Array)
 	 */
-	this.typeItem = function(opt)
+	this.typeItem = function($active, type)
 	{
-		opt.active.attr('type', opt.type);
-		opt.active.find('> dl > dt > strong').attr('data-ph', opt.type);
+		$active.attr('type', type);
+		$active.find('> dl > dt > strong').attr('data-ph', type);
 	}
 
 	/**
 	 * 아이템 복제
 	 * 
-	 * @param Array target : 복사할 아이템
-	 * @return void
+	 * @param {DOM} $target : 복사할 아이템
 	 */
-	this.duplicateItem = function(target)
+	this.duplicateItem = function($target)
 	{
-		var $copy = target.clone().insertAfter(target).find('li').andSelf();
+		var $copy = $target.clone().insertAfter($target).find('li').andSelf();
 		$copy.each(function(){
 			buttonsEvent(selectButtons($(this)));
 			inputCheckEvent($(this));
 		});
-		updateCount(target.parent().parent());
-		updateNumber(target.parent().children());
+		updateCount($target.parent().parent());
+		updateNumber($target.parent().children());
 	}
 
 	/**
 	 * 아이템 삭제
 	 * 
-	 * @param Array target : 삭제할 아이템
-	 * @return void
+	 * @param {DOM} $target
 	 */
-	this.removeItem = function(target)
+	this.removeItem = function($target)
 	{
-		var $parentItem = target.parent().parent();
-		target.remove();
+		var $parentItem = $target.parent().parent();
+		$target.remove();
 		updateCount($parentItem);
 	}
 
 	/**
 	 * 가져온 Object 데이터로 아이템 트리 만들기
 	 * 
-	 * @param Object data : 데이터
-	 * @param Array $li : 삽입하려는 아이템
-	 * @return void
+	 * @param {Object} data
 	 */
-	this.importJSON = function(data, $li)
+	this.importJSON = function(data)
 	{
 		function items(getData, $item)
 		{
@@ -511,27 +468,22 @@ var JSONEditor = function($wrap)
 					type = (Array.isArray(value)) ? 'Array' : 'Object';
 				}
 
-				self.insertItem({
-					active : $item,
-					type : type,
-					data : data,
-					complete : function($item){
-						if (type !== 'String' && Object.size(value) > 0)
-						{
-							items(value, $item);
-						}
+				self.insertItem($item, type, data, function($item){
+					if (type !== 'String' && Object.size(value) > 0)
+					{
+						items(value, $item);
 					}
 				});
 			});
 		}
-		items(data, $li);
+		items(data, self.$index.find('[loc=root]'));
 	}
 
 	/**
-	 * 아이템 트리의 내용을 
+	 * 아이템 트리의 내용을 문자형태로 내보내기
 	 * 
-	 * @param Number space : 탭 사이즈(스페이스값)
-	 * @return String : 문자로 변형된 json데이터
+	 * @param {Number} space : 탭 사이즈(스페이스값)
+	 * @return {String} : 문자로 변형된 json데이터
 	 */
 	this.exportJSON = function(space)
 	{
@@ -583,6 +535,8 @@ var JSONEditor = function($wrap)
 			}
 			return obj;
 		}
+
+		var $root = self.$index.find('[loc=root]');
 		var json = items(
 			$root
 			,($root.attr('type') == 'Array') ? new Array() : new Object()
@@ -596,6 +550,7 @@ var JSONEditor = function($wrap)
 
 }
 
+// context tree data
 JSONEditor.prototype.contextTree = [
 	{
 		role : 'Type'
@@ -613,10 +568,6 @@ JSONEditor.prototype.contextTree = [
 			,{role:'String'}
 		]
 	}
-	,{
-		role : 'Duplicate'
-	}
-	,{
-		role : 'Remove'
-	}
+	,{role : 'Duplicate'}
+	,{role : 'Remove'}
 ];
\ No newline at end of file

From 93bfd71d15536ac6422784ee85bccaa6372a96cb Mon Sep 17 00:00:00 2001
From: Redgoose <scripter@me.com>
Date: Mon, 7 Jul 2014 23:57:43 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=B2=84=EC=A0=84=20=EC=97=85=20=EB=A7=88=EB=AC=B4?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/extra.css          |   2 +
 css/extra.scss         |   2 +-
 css/jsonEditor.css     | 128 ++++++++++++++++++++---------------------
 css/jsonEditor.scss    |   2 +-
 index.html             |   4 +-
 js/JSONEditor.class.js |  37 ++++++++----
 6 files changed, 97 insertions(+), 78 deletions(-)

diff --git a/css/extra.css b/css/extra.css
index 8325caf..3db51d4 100644
--- a/css/extra.css
+++ b/css/extra.css
@@ -2,6 +2,8 @@
 
 body { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333; background: #fff; }
 
+pre { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+
 main { margin: 15px; position: relative; }
 main > header > h1 { margin: 0; padding: 0 0 5px; font-size: 24px; }
 main > header > h1 a { color: #111; text-decoration: none; }
diff --git a/css/extra.scss b/css/extra.scss
index 68a0f66..8ab3e18 100644
--- a/css/extra.scss
+++ b/css/extra.scss
@@ -10,7 +10,7 @@ body {
 	font-size: 14px; line-height: 1.428571429; color: #333;
 	background: #fff;
 }
-
+pre {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
 
 main {
 	margin: 15px; position: relative;
diff --git a/css/jsonEditor.css b/css/jsonEditor.css
index 6f95e84..4cfa00e 100644
--- a/css/jsonEditor.css
+++ b/css/jsonEditor.css
@@ -1,70 +1,70 @@
 /* sprite images */
-.jsonEditor > .index li > dl > dt > button, .jsonEditor > .context li[role=Type]:after, .jsonEditor > .context li[role=Insert]:after { display: inline-block; background: url("../img/sp-icon@x1.png") 0 0 no-repeat; }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .jsonEditor > .index li > dl > dt > button, .jsonEditor > .context li[role=Type]:after, .jsonEditor > .context li[role=Insert]:after { background-image: url("../img/sp-icon@x2.png"); background-size: 100px 50px; } }
+.JSONEditor > .index li > dl > dt > button, .JSONEditor > .context li[role=Type]:after, .JSONEditor > .context li[role=Insert]:after { display: inline-block; background: url("../img/sp-icon@x1.png") 0 0 no-repeat; }
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .JSONEditor > .index li > dl > dt > button, .JSONEditor > .context li[role=Type]:after, .JSONEditor > .context li[role=Insert]:after { background-image: url("../img/sp-icon@x2.png"); background-size: 100px 50px; } }
 
 /* json editor */
-.jsonEditor { /* index */ /* Context */ }
-.jsonEditor > .index { border-width: 1px 0; border-style: solid; border-color: #ccc; font-size: 13px; }
-.jsonEditor > .index ul { margin: 0; padding: 0 0 0 22px; list-style: none; clear: both; }
-.jsonEditor > .index > ul { margin: 5px 0; padding-left: 0; }
-.jsonEditor > .index li { padding: 0; margin: 2px 0; }
-.jsonEditor > .index li > dl { margin: 0; display: table; width: 100%; }
-.jsonEditor > .index li > dl > dt, .jsonEditor > .index li > dl > dd { display: table-cell; vertical-align: top; padding: 3px 5px; }
-.jsonEditor > .index li > dl > dt { width: 30px; white-space: nowrap; padding-left: 0; padding-right: 8px; color: #333; }
-.jsonEditor > .index li > dl > dt em { display: inline-block; font-style: normal; color: #999; }
-.jsonEditor > .index li > dl > dt > em.no { margin: 0 3px 0 5px; display: none; }
-.jsonEditor > .index li > dl > dt > em.no:before { content: '['; }
-.jsonEditor > .index li > dl > dt > em.no:after { content: ']'; }
-.jsonEditor > .index li > dl > dt > strong { display: inline-block; font-weight: normal; min-width: 40px; }
-.jsonEditor > .index li > dl > dt > strong:empty:not(:focus):before { content: attr(data-ph); color: #aaa; }
-.jsonEditor > .index li > dl > dt > .type { display: none; color: #999; }
-.jsonEditor > .index li > dl > dt > em.count { margin: 0 0 0 4px; }
-.jsonEditor > .index li > dl > dt > button { display: inline-block; margin: -3px 0; cursor: pointer; text-indent: -9999px; width: 24px; height: 24px; border: none; }
-.jsonEditor > .index li > dl > dt > button.on { background-color: #eee; }
-.jsonEditor > .index li > dl > dt > button[role=toggle] { background-position: 9px -23px; }
-.jsonEditor > .index li > dl > dd { position: relative; padding-left: 12px; color: #666; }
-.jsonEditor > .index li > dl > dd:before { content: ':'; display: block; position: absolute; left: 0; top: 2px; }
-.jsonEditor > .index li > dl > dd > span { min-width: 40px; }
-.jsonEditor > .index li > dl > dd > span:empty:not(:focus):before { content: 'empty'; color: #aaa; }
-.jsonEditor > .index li > ul { display: none; }
-.jsonEditor > .index li.on > dl > dt > [role=toggle] { background-position: -8px -21px; }
-.jsonEditor > .index li.on > ul { display: block; }
-.jsonEditor > .index li[type=Object] > dl > dt > .count:before { content: '{'; }
-.jsonEditor > .index li[type=Object] > dl > dt > .count:after { content: '}'; }
-.jsonEditor > .index li[type=Object] > dl > dt > .type:before { content: 'Object'; }
-.jsonEditor > .index li[type=Object] > dl > dd { display: none; }
-.jsonEditor > .index li[type=Array] > dl > dt > .count:before { content: '['; }
-.jsonEditor > .index li[type=Array] > dl > dt > .count:after { content: ']'; }
-.jsonEditor > .index li[type=Array] > dl > dt > .type:before { content: 'Array'; }
-.jsonEditor > .index li[type=Array] > dl > dd { display: none; }
-.jsonEditor > .index li[type=Array] > ul > li > dl > dt > .no { display: inline-block; }
-.jsonEditor > .index li[type=Array] > ul > li[type=String] > dl > dt > strong { display: none; }
-.jsonEditor > .index li[type=Array] > ul > li[type=Object] > dl > dt > strong, .jsonEditor > .index li[type=Array] > ul > li[type=Array] > dl > dt > strong { display: none; }
-.jsonEditor > .index li[type=Array] > ul > li[type=Object] > dl > dt > .type, .jsonEditor > .index li[type=Array] > ul > li[type=Array] > dl > dt > .type { display: inline; }
-.jsonEditor > .index li[type=String] > dl > dt > strong { margin-left: 8px; }
-.jsonEditor > .index li[type=String] > dl > dt > .count { display: none; }
-.jsonEditor > .index li[type=String] > dl > dt > button[role=toggle] { display: none; }
-.jsonEditor > .index li[type=String] > dl > dt > .type:before { content: 'String'; }
-.jsonEditor > .index li[type=String] > ul { display: none; }
-.jsonEditor > .index li[loc=root] > dl > dt > strong { display: none; }
-.jsonEditor > .index li[loc=root] > dl > dt > .type { display: inline; }
-.jsonEditor > .index button[role=move] { background-position: -50px -26px; }
-.jsonEditor > .index button[role=control] { background-position: -73px -24px; }
-.jsonEditor > .index li.placeholder { position: relative; }
-.jsonEditor > .index li.placeholder:before { position: absolute; content: ''; left: 0; right: 0; top: -1px; height: 3px; background: #7a7c7d; }
-.jsonEditor > .context { position: absolute; left: 0; top: 0; min-width: 120px; display: none; }
-.jsonEditor > .context ul { margin: 0; padding: 0; list-style: none; border: 1px solid #ccc; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); background: #fff; }
-.jsonEditor > .context ul > li { position: relative; margin: 0; }
-.jsonEditor > .context ul > li > button { display: block; margin: 0; padding: 7px 8px; width: 100%; cursor: pointer; color: #333; font-size: 12px; border: none; background: none; text-align: left; }
-.jsonEditor > .context ul > li:hover > button { background: #eee; }
-.jsonEditor > .context > ul > li > div { position: relative; display: none; z-index: 2; }
-.jsonEditor > .context > ul > li > div > ul { position: absolute; left: 98%; top: -1px; min-width: 100px; }
-.jsonEditor > .context > ul > li:hover > div { display: block; }
-.jsonEditor > .context[type] { display: block; }
-.jsonEditor > .context[type=String] > ul > li[role=Insert] { display: none; }
-.jsonEditor > .context[loc=root] > ul > li[role=Duplicate], .jsonEditor > .context[loc=root] > ul > li[role=Remove] { display: none; }
-.jsonEditor > .context[loc=root] > ul > li[role=Type] li[role=String] { display: none; }
-.jsonEditor > .context li[role=Type]:after, .jsonEditor > .context li[role=Insert]:after { content: ''; display: block; z-index: 1; width: 5px; height: 8px; margin-top: -4px; position: absolute; right: 10px; top: 50%; background-position: 0 -30px; }
+.JSONEditor { /* index */ /* Context */ }
+.JSONEditor > .index { border-width: 1px 0; border-style: solid; border-color: #ccc; font-size: 13px; }
+.JSONEditor > .index ul { margin: 0; padding: 0 0 0 22px; list-style: none; clear: both; }
+.JSONEditor > .index > ul { margin: 5px 0; padding-left: 0; }
+.JSONEditor > .index li { padding: 0; margin: 2px 0; }
+.JSONEditor > .index li > dl { margin: 0; display: table; width: 100%; }
+.JSONEditor > .index li > dl > dt, .JSONEditor > .index li > dl > dd { display: table-cell; vertical-align: top; padding: 3px 5px; }
+.JSONEditor > .index li > dl > dt { width: 30px; white-space: nowrap; padding-left: 0; padding-right: 8px; color: #333; }
+.JSONEditor > .index li > dl > dt em { display: inline-block; font-style: normal; color: #999; }
+.JSONEditor > .index li > dl > dt > em.no { margin: 0 3px 0 5px; display: none; }
+.JSONEditor > .index li > dl > dt > em.no:before { content: '['; }
+.JSONEditor > .index li > dl > dt > em.no:after { content: ']'; }
+.JSONEditor > .index li > dl > dt > strong { display: inline-block; font-weight: normal; min-width: 40px; }
+.JSONEditor > .index li > dl > dt > strong:empty:not(:focus):before { content: attr(data-ph); color: #aaa; }
+.JSONEditor > .index li > dl > dt > .type { display: none; color: #999; }
+.JSONEditor > .index li > dl > dt > em.count { margin: 0 0 0 4px; }
+.JSONEditor > .index li > dl > dt > button { display: inline-block; margin: -3px 0; cursor: pointer; text-indent: -9999px; width: 24px; height: 24px; border: none; }
+.JSONEditor > .index li > dl > dt > button.on { background-color: #eee; }
+.JSONEditor > .index li > dl > dt > button[role=toggle] { background-position: 9px -23px; }
+.JSONEditor > .index li > dl > dd { position: relative; padding-left: 12px; color: #666; }
+.JSONEditor > .index li > dl > dd:before { content: ':'; display: block; position: absolute; left: 0; top: 2px; }
+.JSONEditor > .index li > dl > dd > span { min-width: 40px; }
+.JSONEditor > .index li > dl > dd > span:empty:not(:focus):before { content: 'empty'; color: #aaa; }
+.JSONEditor > .index li > ul { display: none; }
+.JSONEditor > .index li.on > dl > dt > [role=toggle] { background-position: -8px -21px; }
+.JSONEditor > .index li.on > ul { display: block; }
+.JSONEditor > .index li[type=Object] > dl > dt > .count:before { content: '{'; }
+.JSONEditor > .index li[type=Object] > dl > dt > .count:after { content: '}'; }
+.JSONEditor > .index li[type=Object] > dl > dt > .type:before { content: 'Object'; }
+.JSONEditor > .index li[type=Object] > dl > dd { display: none; }
+.JSONEditor > .index li[type=Array] > dl > dt > .count:before { content: '['; }
+.JSONEditor > .index li[type=Array] > dl > dt > .count:after { content: ']'; }
+.JSONEditor > .index li[type=Array] > dl > dt > .type:before { content: 'Array'; }
+.JSONEditor > .index li[type=Array] > dl > dd { display: none; }
+.JSONEditor > .index li[type=Array] > ul > li > dl > dt > .no { display: inline-block; }
+.JSONEditor > .index li[type=Array] > ul > li[type=String] > dl > dt > strong { display: none; }
+.JSONEditor > .index li[type=Array] > ul > li[type=Object] > dl > dt > strong, .JSONEditor > .index li[type=Array] > ul > li[type=Array] > dl > dt > strong { display: none; }
+.JSONEditor > .index li[type=Array] > ul > li[type=Object] > dl > dt > .type, .JSONEditor > .index li[type=Array] > ul > li[type=Array] > dl > dt > .type { display: inline; }
+.JSONEditor > .index li[type=String] > dl > dt > strong { margin-left: 8px; }
+.JSONEditor > .index li[type=String] > dl > dt > .count { display: none; }
+.JSONEditor > .index li[type=String] > dl > dt > button[role=toggle] { display: none; }
+.JSONEditor > .index li[type=String] > dl > dt > .type:before { content: 'String'; }
+.JSONEditor > .index li[type=String] > ul { display: none; }
+.JSONEditor > .index li[loc=root] > dl > dt > strong { display: none; }
+.JSONEditor > .index li[loc=root] > dl > dt > .type { display: inline; }
+.JSONEditor > .index button[role=move] { background-position: -50px -26px; }
+.JSONEditor > .index button[role=control] { background-position: -73px -24px; }
+.JSONEditor > .index li.placeholder { position: relative; }
+.JSONEditor > .index li.placeholder:before { position: absolute; content: ''; left: 0; right: 0; top: -1px; height: 3px; background: #7a7c7d; }
+.JSONEditor > .context { position: absolute; left: 0; top: 0; min-width: 120px; display: none; }
+.JSONEditor > .context ul { margin: 0; padding: 0; list-style: none; border: 1px solid #ccc; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); background: #fff; }
+.JSONEditor > .context ul > li { position: relative; margin: 0; }
+.JSONEditor > .context ul > li > button { display: block; margin: 0; padding: 7px 8px; width: 100%; cursor: pointer; color: #333; font-size: 12px; border: none; background: none; text-align: left; }
+.JSONEditor > .context ul > li:hover > button { background: #eee; }
+.JSONEditor > .context > ul > li > div { position: relative; display: none; z-index: 2; }
+.JSONEditor > .context > ul > li > div > ul { position: absolute; left: 98%; top: -1px; min-width: 100px; }
+.JSONEditor > .context > ul > li:hover > div { display: block; }
+.JSONEditor > .context[type] { display: block; }
+.JSONEditor > .context[type=String] > ul > li[role=Insert] { display: none; }
+.JSONEditor > .context[loc=root] > ul > li[role=Duplicate], .JSONEditor > .context[loc=root] > ul > li[role=Remove] { display: none; }
+.JSONEditor > .context[loc=root] > ul > li[role=Type] li[role=String] { display: none; }
+.JSONEditor > .context li[role=Type]:after, .JSONEditor > .context li[role=Insert]:after { content: ''; display: block; z-index: 1; width: 5px; height: 8px; margin-top: -4px; position: absolute; right: 10px; top: 50%; background-position: 0 -30px; }
 
 /* jQuery Sortable */
 body.dragging { width: 100%; overflow: hidden; }
diff --git a/css/jsonEditor.scss b/css/jsonEditor.scss
index 00414e5..9e60c77 100644
--- a/css/jsonEditor.scss
+++ b/css/jsonEditor.scss
@@ -10,7 +10,7 @@
 
 
 /* json editor */
-.jsonEditor {
+.JSONEditor {
 	/* index */
 	> .index {
 		border-width: 1px 0; border-style: solid; border-color: #ccc;
diff --git a/index.html b/index.html
index 81214fd..963c261 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@ <h1><a href="./">JSON Manager</a></h1>
 	<!-- // Header -->
 
 	<!-- JSON editor -->
-	<div class="jsonEditor"></div>
+	<div class="JSONEditor"></div>
 	<!-- // JSON editor -->
 
 	<!-- result -->
@@ -34,7 +34,7 @@ <h1><a href="./">JSON Manager</a></h1>
 <script>
 jQuery(function($){
 
-	var $jsonEditor = $('div.jsonEditor');
+	var $jsonEditor = $('div.JSONEditor');
 	var jsonEditor = new JSONEditor($jsonEditor);
 
 	// import json
diff --git a/js/JSONEditor.class.js b/js/JSONEditor.class.js
index e990298..d50aa5b 100644
--- a/js/JSONEditor.class.js
+++ b/js/JSONEditor.class.js
@@ -87,7 +87,12 @@ var JSONEditor = function($wrap)
 		self.$el = null;
 		self.active = null;
 
-		// context template
+		/**
+		 * context template
+		 * 
+		 * @param {Object} obj
+		 * @return {DOM}
+		 */
 		var template = function(obj)
 		{
 			function node(obj)
@@ -114,14 +119,20 @@ var JSONEditor = function($wrap)
 			return $(str);
 		}
 
-		// create context
+		/**
+		 * create context
+		 */
 		var createContext = function()
 		{
 			self.$el = template(tree);
 			parent.$wrap.append(self.$el);
 		}
 
-		// context event
+		/**
+		 * context event
+		 * 
+		 * @param {DOM} $nav
+		 */
 		var contextEvent = function($nav)
 		{
 			$nav.find('li').on('click', function(e){
@@ -150,20 +161,24 @@ var JSONEditor = function($wrap)
 		}
 
 
-		// on
-		this.on = function(li, button)
+		/**
+		 * context open
+		 * 
+		 * @param {DOM} $item
+		 */
+		this.on = function($item, button)
 		{
-			self.active = li;
+			self.active = $item;
 			self.$el
-				.attr('type', li.attr('type'))
+				.attr('type', $item.attr('type'))
 				.css({
 					left : button.position().left + button.outerWidth()
 					,top : button.position().top - 3
 				})
 			;
-			if (li.attr('loc') == 'root')
+			if ($item.attr('loc') == 'root')
 			{
-				self.$el.attr('loc', li.attr('loc'))
+				self.$el.attr('loc', $item.attr('loc'))
 			}
 			else
 			{
@@ -174,7 +189,9 @@ var JSONEditor = function($wrap)
 			});
 		}
 	
-		// off
+		/**
+		 * context close
+		 */
 		this.off = function()
 		{
 			self.active = null;

From 3f276c7a5644f6ffe0d1802b403de3826d661f64 Mon Sep 17 00:00:00 2001
From: Redgoose <scripter@me.com>
Date: Mon, 7 Jul 2014 23:57:56 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=EB=B2=84=EC=A0=84=EC=97=85=EC=9D=84=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=9C=20readme=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 4d48cd7..430f071 100644
--- a/README.md
+++ b/README.md
@@ -9,24 +9,25 @@ json 데이터 import로 데이터를 에디터로 가져올 수 있고, export
 데모페이지 : (준비중입니다.)
 
 
-##사용방법
-다운받아서 index페이지를 열어보면 샘플 데이터가 불러와져있고, "export JSON"버튼을 누르면 그 아래에 json데이터 결과물을 확인할 수 있습니다.
-
-먼저 `<head/>` 엘리먼트에서 아래와 같이 jsonEditor.css 파일을 로드합니다.
+##Installation
+###Step 1. 파일링크
+먼저 JSONEditor를 사용하기 위하여 jQuery라이브러리와 드래그 jQuery 플러그인, JSONEditor js와 css파일을 먼저 불러들여서 사용할 준비를 해야합니다.
 ```
 <link rel="stylesheet" href="./css/jsonEditor.css" />
+<script src="./js/jquery-2.1.1.min.js"></script>
+<script src="./js/jquery-sortable.js"></script>
+<script src="./js/JSONEditor.class.js"></script>
 ```
 
-그리고 중간에 `<div class="jsonEditor"> ... </div>` 엘리먼트 부분을 때내어 작업할 곳에다 붙여넣습니다.
-
-그 다음은 아래 소스와 같이 제이쿼리와 관련 자바스크립트 소스를 로드합니다.
+###Step 2. 출력할 위치에 엘리먼트 삽입
+에디터가 만들어지는 위치에서 아래와 같은 엘리먼트를 넣어줍니다.  
+css의 class이름이 "JSONEditor"으로 되어있는데 이름을 수정하려면 css에 있는 class이름도 수정해야합니다.
 ```
-<script src="./js/jquery-2.1.1.min.js"></script>
-<script src="./js/jquery-sortable.js"></script>
-<script src="./js/jsonEditor.js"></script>
+<div class="JSONEditor"></div>
 ```
 
-마지막으로 아래 소스와 같이 JSONEditor 클래스를 초기화합니다.
+###Step 3. JSONEditor 인스턴스 객체 만들기
+이제 실질적으로 사용하기 위하여 인스턴스 객체를 만듭니다. 객체를 만들때 필요한 엘리먼트와 이벤트를 만들게 됩니다.
 ```
 <script>
 jQuery(function($){
@@ -39,7 +40,10 @@ jQuery(function($){
 
 
 ##브라우저 지원
-맥용 사파리에서 개발했으며, 크롬과 파이어폭스에서 정상작동하지만 IE에서 테스트해보지 않았습니다.
+맥용 사파리에서 개발했으며, 크롬과 파이어폭스에서 정상작동하지만 IE에서 테스트해보지 않았습니다.  
 구 브라우저를 지원하지 않는 속성들이 사용되어서 구버전의 브라우저에서 사용은 권장되지 않습니다.
 
-테스트 브라우저 : 사파리, 크롬, 파이어폭스
\ No newline at end of file
+###테스트 브라우저
+* 사파리
+* 크롬
+* 파이어폭스
\ No newline at end of file