Index: pro-bachkim-filespace/violetspace-prototype/assets/css/space/style.css
===================================================================
--- pro-bachkim-filespace/violetspace-prototype/assets/css/space/style.css	(revision 5)
+++ pro-bachkim-filespace/violetspace-prototype/assets/css/space/style.css	(revision 6)
@@ -95,5 +95,5 @@
 	background: #FFFFFF;
 	float: left;
-	width: calc(100% - 223px);
+	width: calc(100% - 228px);
 	margin: 0px;
 	padding: 0px;
@@ -124,5 +124,4 @@
 	padding-right: 5px;
 	padding-top: 15px;
-	border-right: #F5F5F5 5px solid;
 	display: block;
 	width:100%;
Index: pro-bachkim-filespace/violetspace-prototype/assets/css/space/vsgrid.css
===================================================================
--- pro-bachkim-filespace/violetspace-prototype/assets/css/space/vsgrid.css	(revision 6)
+++ pro-bachkim-filespace/violetspace-prototype/assets/css/space/vsgrid.css	(revision 6)
@@ -0,0 +1,175 @@
+/*BEGIN tree*/
+UL.vstree {
+	font-family: Verdana, sans-serif;
+	font-size: 11px;
+	line-height: 18px;
+	padding: 0px;
+	margin: 0px;
+}
+
+UL.vstree LI {
+	list-style: none;
+	padding: 0px;
+	padding-left: 20px;
+	margin: 0px;
+	white-space: nowrap;
+}
+
+UL.vstree A {
+	color: #333;
+	text-decoration: none;
+	display: block;
+	padding: 0px 2px;
+}
+
+UL.vstree A:hover{
+	background: #eaeef2;
+}
+
+UL.vstree A.currentDir {
+	background: #BDF;
+}
+
+/* Core Styles */
+.vstree LI.home { background: url(../../images/filetree/home.png) left top no-repeat;}
+.vstree LI.directory { background: url(../../images/filetree/directory.png) left top no-repeat; }
+.vstree LI.expanded { background: url(../../images/filetree/folder_open.png) left top no-repeat; }
+.vstree LI.file { background: url(../../images/filetree/file.png) left top no-repeat; }
+.vstree LI.wait { background: url(../../images/filetree/spinner.gif) left top no-repeat; }
+/* File Extensions*/
+/*.vstree LI.ext_3gp { background: url(../../images/filetree/film.png) left top no-repeat; }
+.vstree LI.ext_afp { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_afpa { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_asp { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_aspx { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_avi { background: url(../../images/filetree/film.png) left top no-repeat; }
+.vstree LI.ext_bat { background: url(../../images/filetree/application.png) left top no-repeat; }
+.vstree LI.ext_bmp { background: url(../../images/filetree/picture.png) left top no-repeat; }
+.vstree LI.ext_c { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_cfm { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_cgi { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_com { background: url(../../images/filetree/application.png) left top no-repeat; }
+.vstree LI.ext_cpp { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_css { background: url(../../images/filetree/css.png) left top no-repeat; }
+.vstree LI.ext_doc { background: url(../../images/filetree/doc.png) left top no-repeat; }
+.vstree LI.ext_exe { background: url(../../images/filetree/application.png) left top no-repeat; }
+.vstree LI.ext_gif { background: url(../../images/filetree/picture.png) left top no-repeat; }
+.vstree LI.ext_fla { background: url(../../images/filetree/flash.png) left top no-repeat; }
+.vstree LI.ext_h { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_htm { background: url(../../images/filetree/html.png) left top no-repeat; }
+.vstree LI.ext_html { background: url(../../images/filetree/html.png) left top no-repeat; }
+.vstree LI.ext_jar { background: url(../../images/filetree/java.png) left top no-repeat; }
+.vstree LI.ext_jpg { background: url(../../images/filetree/picture.png) left top no-repeat; }
+.vstree LI.ext_jpeg { background: url(../../images/filetree/picture.png) left top no-repeat; }
+.vstree LI.ext_js { background: url(../../images/filetree/script.png) left top no-repeat; }
+.vstree LI.ext_lasso { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_log { background: url(../../images/filetree/txt.png) left top no-repeat; }
+.vstree LI.ext_m4p { background: url(../../images/filetree/music.png) left top no-repeat; }
+.vstree LI.ext_mov { background: url(../../images/filetree/film.png) left top no-repeat; }
+.vstree LI.ext_mp3 { background: url(../../images/filetree/music.png) left top no-repeat; }
+.vstree LI.ext_mp4 { background: url(../../images/filetree/film.png) left top no-repeat; }
+.vstree LI.ext_mpg { background: url(../../images/filetree/film.png) left top no-repeat; }
+.vstree LI.ext_mpeg { background: url(../../images/filetree/film.png) left top no-repeat; }
+.vstree LI.ext_ogg { background: url(../../images/filetree/music.png) left top no-repeat; }
+.vstree LI.ext_pcx { background: url(../../images/filetree/picture.png) left top no-repeat; }
+.vstree LI.ext_pdf { background: url(../../images/filetree/pdf.png) left top no-repeat; }
+.vstree LI.ext_php { background: url(../../images/filetree/php.png) left top no-repeat; }
+.vstree LI.ext_png { background: url(../../images/filetree/picture.png) left top no-repeat; }
+.vstree LI.ext_ppt { background: url(../../images/filetree/ppt.png) left top no-repeat; }
+.vstree LI.ext_psd { background: url(../../images/filetree/psd.png) left top no-repeat; }
+.vstree LI.ext_pl { background: url(../../images/filetree/script.png) left top no-repeat; }
+.vstree LI.ext_py { background: url(../../images/filetree/script.png) left top no-repeat; }
+.vstree LI.ext_rb { background: url(../../images/filetree/ruby.png) left top no-repeat; }
+.vstree LI.ext_rbx { background: url(../../images/filetree/ruby.png) left top no-repeat; }
+.vstree LI.ext_rhtml { background: url(../../images/filetree/ruby.png) left top no-repeat; }
+.vstree LI.ext_rpm { background: url(../../images/filetree/linux.png) left top no-repeat; }
+.vstree LI.ext_ruby { background: url(../../images/filetree/ruby.png) left top no-repeat; }
+.vstree LI.ext_sql { background: url(../../images/filetree/db.png) left top no-repeat; }
+.vstree LI.ext_swf { background: url(../../images/filetree/flash.png) left top no-repeat; }
+.vstree LI.ext_tif { background: url(../../images/filetree/picture.png) left top no-repeat; }
+.vstree LI.ext_tiff { background: url(../../images/filetree/picture.png) left top no-repeat; }
+.vstree LI.ext_txt { background: url(../../images/filetree/txt.png) left top no-repeat; }
+.vstree LI.ext_vb { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_wav { background: url(../../images/filetree/music.png) left top no-repeat; }
+.vstree LI.ext_wmv { background: url(../../images/filetree/film.png) left top no-repeat; }
+.vstree LI.ext_xls { background: url(../../images/filetree/xls.png) left top no-repeat; }
+.vstree LI.ext_xml { background: url(../../images/filetree/code.png) left top no-repeat; }
+.vstree LI.ext_zip { background: url(../../images/filetree/zip.png) left top no-repeat; }*/
+
+/*BEGIN grid*/
+DIV.vsgrid {
+	font-family: Verdana, sans-serif;
+	font-size: 12px;
+	padding: 10px;
+	margin: 3px;
+}
+
+DIV.vsgrid DIV.vscell {
+	width:120px;
+	height:100px;
+	padding-bottom:10px;
+	padding-left: 10px;
+	padding-right: 10px;
+	cursor:default;
+	overflow:hidden;
+	float: left;
+}
+
+DIV.vsgrid DIV.vscell DIV.selector {
+	width:60px;
+	height:60px;
+	margin:1px auto;
+	position:relative;
+	padding-top: 8px;
+	padding-left: 6px;
+}
+
+DIV.vsgrid DIV.vscell DIV.selector.selected {
+	background: #EEEEEE;
+}
+
+DIV.vsgrid DIV.vscell DIV.selector.unselected {
+	background: transparent;
+}
+
+DIV.vsgrid DIV.vscell DIV.file-name {
+	display: block;
+	text-align:center;
+	white-space:pre;
+	overflow:hidden;
+	text-overflow:ellipsis;
+	-o-text-overflow:ellipsis;
+	margin:3px 1px 0;
+	padding:1px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-radius:3px;
+}
+
+DIV.vsgrid DIV.vscell DIV.file-name.selected {
+	background: #5eaee5;
+}
+
+DIV.vsgrid DIV.vscell DIV.file-name.unselected {
+	background: transparent;
+}
+
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-directory,
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-text,
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-word,
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-excel,
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-presentation,
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-audio,
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-video,
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-compressed,
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-pdf{
+	display: block;
+	padding: 1px;
+	height: 48px;
+	width: 48px;
+	background: url(../../images/file-icon.png) left top no-repeat;
+}
+
+DIV.vsgrid DIV.vscell DIV.selector DIV.icon-directory {
+	background: url(../../images/folder-icon.png) left top no-repeat;
+}
Index: pro-bachkim-filespace/violetspace-prototype/assets/js/filemanager/filemanager.js
===================================================================
--- pro-bachkim-filespace/violetspace-prototype/assets/js/filemanager/filemanager.js	(revision 5)
+++ pro-bachkim-filespace/violetspace-prototype/assets/js/filemanager/filemanager.js	(revision 6)
@@ -19,5 +19,5 @@
 			$('#directory-view-container').height(dirTreeHeight);
 			$('#directory-content-view-container').height(dirTreeHeight);
-			$('#directory-content-view-container').width('calc(100% - ' + ($('#directory-view-container').width() + 3) + 'px)');
+			$('#directory-content-view-container').width('calc(100% - ' + ($('#directory-view-container').width() + 8) + 'px)');
 			var scollWidth = $('#directory-content-view-container').width();
 
@@ -49,9 +49,12 @@
 		*/
 
+		var privateGrid = $('#file-container').violetGrid ({directoryContent:null});
+
 		var privateTree =  $('#treeview-container').violetTree({
 			script:'getdata.php',
 			expandEasing: 'easeOutBounce', 
 			collapseEasing: 'easeOutBounce',
-			homeDirNameDisplay: "ThÆ° má»¥c gá»c"
+			homeDirNameDisplay: "ThÆ° má»¥c gá»c",
+			grid: privateGrid
 		});
 
Index: pro-bachkim-filespace/violetspace-prototype/assets/js/vsfilemanager.js
===================================================================
--- pro-bachkim-filespace/violetspace-prototype/assets/js/vsfilemanager.js	(revision 5)
+++ pro-bachkim-filespace/violetspace-prototype/assets/js/vsfilemanager.js	(revision 6)
@@ -15,4 +15,7 @@
 			if( o.collapseEasing == undefined ) o.collapseEasing = null;
 
+			if( o.directoryTreeData == undefined ) o.directoryTreeData = null;
+			if( o.grid == undefined ) o.grid = null;
+
 			// PRIVATE methods
 			var sendCommand = function (p) {
@@ -42,4 +45,8 @@
 
 			var renderTree = function  (parseData) {
+
+				o.directoryTreeData = parseData;				
+				var directoryData = parseData.DIRECTORIES;
+
 				var homeNode = createNode({
 					id:0,
@@ -48,11 +55,11 @@
 
 				selectDir($(homeNode).find('> A'));
-				if (parseData != null) {
-					for (var i = 0; i < parseData.length ; i++) {
+				if (directoryData != null) {
+					for (var i = 0; i < directoryData.length ; i++) {
 						var node = createNode ({
-							id: parseData[i].id,
-							name: parseData[i].name,
-							curentNode: $('#' + o.dirIDprefix + parseData[i].parentID).find('> A'),
-							hidden: (parseData[i].parentID > 0) ? true : false
+							id: directoryData[i].id,
+							name: directoryData[i].name,
+							curentNode: $('#' + o.dirIDprefix + directoryData[i].parentID).find('> A'),
+							hidden: (directoryData[i].parentID > 0) ? true : false
 						})
 					};
@@ -71,5 +78,5 @@
 				
 				if (d.curentNode != null) {
-					var strHTML = '<ul class="jqueryFileTree"><li id="' + o.dirIDprefix + d.id + '" class="directory collapsed"><a href="#" rel="' + d.name + '">' + d.name + '</a></li></ul>';
+					var strHTML = '<ul class="vstree"><li id="' + o.dirIDprefix + d.id + '" class="directory collapsed"><a href="#" rel="' + d.name + '">' + d.name + '</a></li></ul>';
 
 					$(d.curentNode).parent().append(strHTML);
@@ -78,10 +85,10 @@
 					
 				}else if (d.id == 0){
-					var strHTML = '<ul class="jqueryFileTree"><li id="' + o.dirIDprefix + d.id + '" class="home"><a href="#" rel="' + d.name + '">' + d.name + '</a></li></ul>';
+					var strHTML = '<ul class="vstree"><li id="' + o.dirIDprefix + d.id + '" class="home"><a href="#" rel="' + d.name + '">' + d.name + '</a></li></ul>';
 					$(o.container).append(strHTML);
 				}
 
 				//bind event on new node
-				$('#' + o.dirIDprefix + d.id).find('a').bind("click", function(e){d.clickEvent(this)});
+				$('#' + o.dirIDprefix + d.id).find('a').bind("click", function(e){d.clickEvent(this);return false;});
 				$('#' + o.dirIDprefix + d.id).find('a').bind("contextmenu",function(e){
 			        e.preventDefault();
@@ -126,4 +133,5 @@
 				$('.currentDir').removeClass('currentDir');
 				$(c).addClass('currentDir');
+				sendtoGrid();
 			}
 
@@ -131,4 +139,12 @@
 				alert ('showContextMenu on ' + $(n).text());
 			};
+
+			var sendtoGrid = function () {
+				o.grid.getData({
+								directoryTreeData: o.directoryTreeData,
+								curentParent:$(o.container).find('.currentDir').parent().attr('id'),
+								dirIDprefix: o.dirIDprefix
+							});
+			}
 
 			loadTree();
@@ -205,9 +221,81 @@
 
 		violetGrid: function (o) {
+			if( !o ) var o = {};
 			if( o.container == undefined ) o.container = $(this);
 			if( o.defaultViewMode == undefined ) o.defaultViewMode = 'thumbnail';//or 'list'
-
-			if( o.directoryContent == undefined ) o.directoryContent = null;
-
+			if( o.directoryTreeData == undefined ) o.directoryTreeData = null;
+			if( o.dirIDprefix == undefined ) o.dirIDprefix = null;
+
+			var createNode = function (d) {
+				if( !d ) var d = {};
+				if( d.id == undefined ) d.id = null;
+				if( d.name == undefined ) d.name = null;
+				if( d.minetype == undefined ) d.minetype = 'directory';
+				if( d.parentID == undefined ) d.parentID = null;
+				if( d.clickEvent == undefined ) d.clickEvent = null;
+				if( d.customEvent == undefined ) d.customEvent = null;
+
+				var strHTML = '<div class="vscell" rel="id:' + d.id + '">';
+					strHTML += '<div class="selector unselected">';
+					strHTML += 	'<div class="icon-' + d.minetype + '"></div>';
+					strHTML += '</div>';
+					strHTML += '<div class="file-name unselected">' + d.name + '</div>';
+					strHTML += '</div>';
+
+				$(o.container).append(strHTML);
+
+				$('div[rel="id:'+ d.id +'"]').bind('click',function(e){itemClick(this)});
+			}
+
+			var itemClick = function (i) {
+				$(i).parent().find('.selector').removeClass('selected');
+				$(i).parent().find('.selector').addClass('unselected');
+				$(i).parent().find('.file-name').removeClass('selected');
+				$(i).parent().find('.file-name').addClass('unselected');
+
+				$(i).find('.file-name').removeClass('unselected');
+				$(i).find('.file-name').addClass('selected');
+				$(i).find('.selector').removeClass('unselected');
+				$(i).find('.selector').addClass('selected');
+			}
+
+			var renderGrid = function (o) {
+				$(o.container).find ('.vscell').remove();
+				var childDir = o.directoryTreeData.DIRECTORIES;
+				var childFile = o.directoryTreeData.FILES;
+				var curentDirID = o.curentParent.substring(o.dirIDprefix.length, o.curentParent.length);
+				
+				for (var i = 0 ; i < childDir.length; i++) {
+					if (childDir[i].parentID != curentDirID) continue;
+					createNode ({
+						id: childDir[i].id,
+						name: childDir[i].name,
+						parentID: curentDirID,
+					});
+				}
+
+				for (var i = 0 ; i < childFile.length; i++) {
+					if (childFile[i].parentID != curentDirID) continue;
+					createNode ({
+						id: childFile[i].id,
+						name: childFile[i].name,
+						parentID: curentDirID,
+						minetype: childFile[i].minetype,
+					});
+				}
+			}
+
+			this.getData = function (data) {
+				o.directoryTreeData = data.directoryTreeData;
+				o.curentParent = data.curentParent;
+				o.dirIDprefix = data.dirIDprefix
+				renderGrid(o);
+			}
+
+			this.initialize = function() {
+        		return this;
+    		};
+
+			return this.initialize();
 		}
 	});
Index: pro-bachkim-filespace/violetspace-prototype/getdata.php
===================================================================
--- pro-bachkim-filespace/violetspace-prototype/getdata.php	(revision 5)
+++ pro-bachkim-filespace/violetspace-prototype/getdata.php	(revision 6)
@@ -1,13 +1,3 @@
 <?php
-/**
-*array(
-*	0 => array ('id' => 1, 'name' => 'Dir 1', 'parentID' => 0),
-*	1 => array ('id' => 2, 'name' => 'Dir 2', 'parentID' => 0),
-*	2 => array ('id' => 3, 'name' => 'Dir 1.1', 'parentID' => 1),
-*	3 => array ('id' => 4, 'name' => 'Dir 1.1.1', 'parentID' => 3),
-*	4 => array ('id' => 5, 'name' => 'Dir 1.1.1.1', 'parentID' => 4),
-*)
-**/
-
 
 $aryDir = array(
@@ -22,6 +12,19 @@
 		);
 
+$aryFile = array(
+		0 => array('id' => 1, 'name' => 'File 1', 'minetype' => 'text', 'size' => '1.5MB', 'parentID' => 1),
+		1 => array('id' => 2, 'name' => 'File 2', 'minetype' => 'text', 'size' => '1.6MB', 'parentID' => 1),
+		2 => array('id' => 3, 'name' => 'File 3', 'minetype' => 'text', 'size' => '1.7MB', 'parentID' => 2),
+		3 => array('id' => 4, 'name' => 'File 4', 'minetype' => 'text', 'size' => '1.8MB', 'parentID' => 2),
+		4 => array('id' => 5, 'name' => 'File 5', 'minetype' => 'text', 'size' => '1.8MB', 'parentID' => 0),
+		5 => array('id' => 6, 'name' => 'File 6', 'minetype' => 'text', 'size' => '1.8MB', 'parentID' => 3),
+		5 => array('id' => 7, 'name' => 'File 7', 'minetype' => 'text', 'size' => '1.8MB', 'parentID' => 5)
+);
+
+$aryData = array('DIRECTORIES' => $aryDir, 'FILES' => $aryFile);
+
+
 if (isset($_POST['action'])) {
-	if ($_POST['action'] == 'create_dir') {
+	/*if ($_POST['action'] == 'create_dir') {
 		$newID = 9;
 		$aryNewDir = array('id' => $newID, 'name' => $_POST['name'], 'parentID' => $_POST['parentID']);
@@ -31,7 +34,7 @@
 		$aryDelDir = array('id' => $_POST['id'], 'isSuccess' => true);
 		echo json_encode($aryDelDir);
-	}
+	}*/
 }
 else {
-	echo json_encode($aryDir);
+	echo json_encode($aryData);
 }
Index: pro-bachkim-filespace/violetspace-prototype/index.html
===================================================================
--- pro-bachkim-filespace/violetspace-prototype/index.html	(revision 5)
+++ pro-bachkim-filespace/violetspace-prototype/index.html	(revision 6)
@@ -61,52 +61,52 @@
 	    <div id="directory-content-view-container">
 			<div id="file-container" class="vsgrid">
-				<div class="vscell">
-					<div class="selector">
+				<!-- <div class="vscell">
+					<div class="selector unselected">
 						<div class="icon-directory"></div>
 					</div>
-					<div class="file-name">Dir 1</div>
+					<div class="file-name unselected">Dir 1</div>
 				</div>
 
 				<div class="vscell">
-					<div class="selector">
+					<div class="selector selected">
 						<div class="icon-directory"></div>
 					</div>
-					<div class="file-name">Dir 2</div>
+					<div class="file-name selected">Dir 2</div>
 				</div>
 
 				<div class="vscell">
-					<div class="selector">
+					<div class="selector unselected">
 						<div class="icon-directory"></div>
 					</div>
-					<div class="file-name">Dir 3</div>
+					<div class="file-name unselected">Dir 3</div>
 				</div>
 
 				<div class="vscell">
-					<div class="selector">
+					<div class="selector unselected">
 						<div class="icon-text"></div>
 					</div>
-					<div class="file-name">File 1</div>
+					<div class="file-name unselected">File 1</div>
 				</div>
 
 				<div class="vscell">
-					<div class="selector">
+					<div class="selector unselected">
 						<div class="icon-text"></div>
 					</div>
-					<div class="file-name">File 2</div>
+					<div class="file-name unselected">File 2</div>
 				</div>
 
 				<div class="vscell">
-					<div class="selector">
+					<div class="selector selected">
 						<div class="icon-text"></div>
 					</div>
-					<div class="file-name">File 3</div>
+					<div class="file-name selected">File 3</div>
 				</div>
 
 				<div class="vscell">
-					<div class="selector">
+					<div class="selector unselected">
 						<div class="icon-text"></div>
 					</div>
-					<div class="file-name">File 4</div>
-				</div>
+					<div class="file-name unselected">File 4</div>
+				</div> -->
 			</div>
 	    </div>
