Index: /pro-bachkim-filespace/violetspace-prototype/assets/css/space/style.css
===================================================================
--- /pro-bachkim-filespace/violetspace-prototype/assets/css/space/style.css	(revision 4)
+++ /pro-bachkim-filespace/violetspace-prototype/assets/css/space/style.css	(revision 5)
@@ -5,4 +5,5 @@
 @import "../font-awesome.min.css";
 @import "../ace.min.css";
+@import "vsgrid.css";
 
 body {
@@ -102,13 +103,19 @@
 #treeview-container{
 	padding-left: 10px;
-	padding-right: 5px;
+	padding-right: 1px;
 	padding-top: 15px;
 	border-left: #F5F5F5 20px solid;
 	display: block;
-	/*height: 100%;*/
 	width: auto;
 	overflow-x: hidden;
 	overflow-y: auto;
 	border-radius: 0 !important;
+}
+
+.ui-resizable-e {
+   background: url("../../images/resize.png") no-repeat scroll center center #F5F5F5;
+   border-left: 1px solid #E5E5E5;
+   border-right: 1px solid #E5E5E5;
+   width: 5px;
 }
 
Index: /pro-bachkim-filespace/violetspace-prototype/assets/js/filemanager/filemanager.js
===================================================================
--- /pro-bachkim-filespace/violetspace-prototype/assets/js/filemanager/filemanager.js	(revision 4)
+++ /pro-bachkim-filespace/violetspace-prototype/assets/js/filemanager/filemanager.js	(revision 5)
@@ -51,5 +51,4 @@
 		var privateTree =  $('#treeview-container').violetTree({
 			script:'getdata.php',
-			dataSource: 'AJAX',
 			expandEasing: 'easeOutBounce', 
 			collapseEasing: 'easeOutBounce',
@@ -68,4 +67,8 @@
 		});
 
+		$('#btnCopy').click (function(){
+			privateTree.copy();
+		});
+
 		/**
 		END - For Directory Tree
Index: /pro-bachkim-filespace/violetspace-prototype/assets/js/vsfilemanager.js
===================================================================
--- /pro-bachkim-filespace/violetspace-prototype/assets/js/vsfilemanager.js	(revision 4)
+++ /pro-bachkim-filespace/violetspace-prototype/assets/js/vsfilemanager.js	(revision 5)
@@ -7,6 +7,4 @@
 			if( o.homeDirNameDisplay == undefined ) o.homeDirNameDisplay = 'Home';
 			if( o.script == undefined ) o.script = null;
-			if( o.dataSource == undefined ) o.dataSource = 'AJAX'; //'LOADED' 
-			if( o.data == undefined ) o.data = null;
 			if( o.container == undefined ) o.container = $(this);
 			if( o.dirIDprefix == undefined ) o.dirIDprefix = 'vsdir_';
@@ -18,18 +16,30 @@
 
 			// PRIVATE methods
+			var sendCommand = function (p) {
+				if( p.postdata == undefined ) p.postdata = null;
+				if( p.callbackSuccess == undefined ) p.callbackSuccess = null;
+				if( p.callbackDone == undefined ) p.callbackDone = null;
+				if( p.callbackFail == undefined ) p.callbackFail = null;
+				if( p.callbackAlways == undefined ) p.callbackAlways = null;
+
+				if (o.script != null) {
+					$.post(o.script, p.postdata, function (data){
+						if (data) {
+							parseData = $.parseJSON(data);
+						}
+
+						if (p.callbackSuccess != null) {
+							p.callbackSuccess(parseData);
+						}
+
+					}).done(function() {if (p.callbackDone != null)p.callbackDone(this);}).fail(function() {if (p.callbackFail != null)p.callbackFail(this);}).always(function() {if (p.callbackAlways != null)p.callbackAlways(this);});
+				}
+			}
+
 			var loadTree = function () {
-				if (o.dataSource == 'AJAX') {
-					$.post(o.script, 
-						function(data){
-							if (!data) return;
-							var parsedData = $.parseJSON(data);
-							o.data = parsedData;
-							renderTree ();
-						}
-					).done(function() {}).fail(function() {}).always(function() {});
-				}				
-			};
-
-			var renderTree = function  () {
+				sendCommand ({postdata:null,callbackSuccess:renderTree});
+			};
+
+			var renderTree = function  (parseData) {
 				var homeNode = createNode({
 					id:0,
@@ -38,12 +48,11 @@
 
 				selectDir($(homeNode).find('> A'));
-
-				if (o.data != null) {
-					for (var i = 0; i < o.data.length ; i++) {
+				if (parseData != null) {
+					for (var i = 0; i < parseData.length ; i++) {
 						var node = createNode ({
-							id: o.data[i].id,
-							name: o.data[i].name,
-							curentNode: $('#' + o.dirIDprefix + o.data[i].parentID).find('> A'),
-							hidden: (o.data[i].parentID > 0) ? true : false
+							id: parseData[i].id,
+							name: parseData[i].name,
+							curentNode: $('#' + o.dirIDprefix + parseData[i].parentID).find('> A'),
+							hidden: (parseData[i].parentID > 0) ? true : false
 						})
 					};
@@ -87,7 +96,8 @@
 			//END - Create a node of Tree
 
-			var deleteNode = function (n) {
-				if (!$(n).parent().hasClass('home'))
-					$(n).remove();
+			var deleteNode = function (parsedData) {
+				if (parsedData.isSuccess == false) return false;
+				if (!$('#' + o.dirIDprefix + parsedData.id).hasClass('home'))
+					$('#' + o.dirIDprefix + parsedData.id).parent().remove();
 			}
 
@@ -139,5 +149,4 @@
 
 			this.createDir = function(c) {
-
 				var cid = $(c).parent().attr('id');
 				var pid = cid.substring(o.dirIDprefix.length, cid.length);
@@ -145,15 +154,12 @@
 				var dirName = prompt("Please enter new directory name", "");
 
-				$.post(o.script,{action:"create_dir",parentID:pid,name:dirName}, function (data) {
-					if (!data) return;
-					var parsedData = $.parseJSON(data);
-
-					createNode({
-						id: parsedData.id,
-						name: parsedData.name,
-						curentNode: c,
-						hidden: false,
-						//customEvent: {eventName: "click", eventTrigger: function(o){alert('This click!')}}
-					});
+				sendCommand({
+					postdata:{action:"create_dir",parentID:pid,name:dirName},
+					callbackSuccess: function (parsedData) {createNode({
+										id: parsedData.id,
+										name: parsedData.name,
+										curentNode: c,
+										hidden: false,});
+									}
 				});
 			}
@@ -164,4 +170,7 @@
 				var confirmChild = true;
 
+				var cid = $(c).parent().attr('id');
+				var pid = cid.substring(o.dirIDprefix.length, cid.length);
+
 				if (isHome(c)) return;
 
@@ -171,6 +180,19 @@
 					confirmChild = confirm('This node has childs, you still want to delete it?');
 
-				if (confirmDel && confirmChild)	deleteNode(c);
-
+				if (confirmDel && confirmChild) {
+					var postdata = {action:"delete_dir",id:pid}
+					sendCommand({
+						postdata:postdata,
+						callbackSuccess: function (parsedData) {deleteNode(parsedData)}
+					});
+				}	
+			}
+
+			this.copy = function () {
+				alert ('copy');
+			}
+
+			this.paste = function () {
+				alert ('paste');
 			}
 
@@ -181,4 +203,12 @@
 			return this.initialize();
 		},
+
+		violetGrid: function (o) {
+			if( o.container == undefined ) o.container = $(this);
+			if( o.defaultViewMode == undefined ) o.defaultViewMode = 'thumbnail';//or 'list'
+
+			if( o.directoryContent == undefined ) o.directoryContent = null;
+
+		}
 	});
 
Index: /pro-bachkim-filespace/violetspace-prototype/getdata.php
===================================================================
--- /pro-bachkim-filespace/violetspace-prototype/getdata.php	(revision 4)
+++ /pro-bachkim-filespace/violetspace-prototype/getdata.php	(revision 5)
@@ -28,4 +28,8 @@
 		echo json_encode($aryNewDir);
 	}
+	else if ($_POST['action'] == 'delete_dir') {
+		$aryDelDir = array('id' => $_POST['id'], 'isSuccess' => true);
+		echo json_encode($aryDelDir);
+	}
 }
 else {
Index: /pro-bachkim-filespace/violetspace-prototype/index.html
===================================================================
--- /pro-bachkim-filespace/violetspace-prototype/index.html	(revision 4)
+++ /pro-bachkim-filespace/violetspace-prototype/index.html	(revision 5)
@@ -37,7 +37,7 @@
 				<button id="btnNewFolder" class="btn btn-success" title="Táº¡o thÆ° má»¥c má»i"><i class="icon-folder-close"></i></button>
 				<button id="btnDel" class="btn btn-success" title="XÃ³a"><i class="icon-eraser"></i></button>
-				<button class="btn btn-success" title="Sao chÃ©p"><i class="icon-copy"></i></button>
-				<button class="btn btn-success" title="Cáº¯t"><i class="icon-cut"></i></button>
-				<button class="btn btn-success" title="DÃ¡n"><i class="icon-paste"></i></button>
+				<button id="btnCopy" class="btn btn-success" title="Sao chÃ©p"><i class="icon-copy"></i></button>
+				<button id="btnCut"class="btn btn-success" title="Cáº¯t"><i class="icon-cut"></i></button>
+				<button id="btnPaste"class="btn btn-success" title="DÃ¡n"><i class="icon-paste"></i></button>
 			</div>
 			<div class="btn-group">
@@ -60,6 +60,53 @@
 	    
 	    <div id="directory-content-view-container">
-			<div id="file-container">
+			<div id="file-container" class="vsgrid">
+				<div class="vscell">
+					<div class="selector">
+						<div class="icon-directory"></div>
+					</div>
+					<div class="file-name">Dir 1</div>
+				</div>
 
+				<div class="vscell">
+					<div class="selector">
+						<div class="icon-directory"></div>
+					</div>
+					<div class="file-name">Dir 2</div>
+				</div>
+
+				<div class="vscell">
+					<div class="selector">
+						<div class="icon-directory"></div>
+					</div>
+					<div class="file-name">Dir 3</div>
+				</div>
+
+				<div class="vscell">
+					<div class="selector">
+						<div class="icon-text"></div>
+					</div>
+					<div class="file-name">File 1</div>
+				</div>
+
+				<div class="vscell">
+					<div class="selector">
+						<div class="icon-text"></div>
+					</div>
+					<div class="file-name">File 2</div>
+				</div>
+
+				<div class="vscell">
+					<div class="selector">
+						<div class="icon-text"></div>
+					</div>
+					<div class="file-name">File 3</div>
+				</div>
+
+				<div class="vscell">
+					<div class="selector">
+						<div class="icon-text"></div>
+					</div>
+					<div class="file-name">File 4</div>
+				</div>
 			</div>
 	    </div>
