@webos-tools/cli 3.1.3 → 3.2.1

package/files/templates/signage-sdk-templates/Fashion_Multimedia_Ad/js/helpers/util.js

@@ -0,0 +1,130 @@
+/*jslint browser:true, unparam: true, indent: 4 */
+/*global console: false */
+
+/**
+ * @file File is related with Data-Binding functionality inside the apps.
+ * It has Publish Subscribe pattern for listening the changes from View to Controller or vice versa.
+ * @author LG CSP-1
+ */
+try {
+    /**
+     * Creates DataBinder Class, where publish
+     * @class DataBinder
+     * @return {Object} publishSub Object
+     */
+    var DataBinder = function (object_id) {
+            'use strict';
+            //For loop var's declarations
+            var i, len, k, psLen,
+                /** 
+                 * pubSubObj Create a simple PubSub object
+                 * @type {Object}
+                 */
+                pubSubObj = { // Create a simple PubSub object
+                    callbacks: {},
+                    on: function (msg, callback) {
+                        this.callbacks[msg] = this.callbacks[msg] || [];
+                        this.callbacks[msg].push(callback);
+                    },
+                    publish: function (msg) {
+                        this.callbacks[msg] = this.callbacks[msg] || [];
+                        len = this.callbacks[msg].length;
+                        for (i = 0; i < len; i += 1) {
+                            this.callbacks[msg][i].apply(this, arguments);
+                        }
+                    }
+                },
+                data_attr = 'data-bind-' + object_id,
+                message = object_id + ':change',
+                /** 
+                 * changeHandler Any Change inside the Binding element will invoke this event.
+                 * @function changeHandler
+                 */
+                changeHandler = function (evt) {
+                    var target = evt.target || evt.srcElement,
+                        prop_name = target.getAttribute(data_attr);
+                    if (prop_name && prop_name !== '') {
+                        pubSubObj.publish(message, prop_name, target.value);
+                    }
+                };
+            /**
+             * Triggers view to model binding.
+             *
+             * @event DataBinder#change
+             */
+            document.addEventListener('change', changeHandler, false);
+            /**
+             * Publish data changes to view.
+             *
+             * @event DataBinder#pubSubObj
+             */
+            pubSubObj.on(message, function (evt, prop_name, new_val) {
+                var elements = document.querySelectorAll('[' + data_attr + '=' + prop_name + ']'),
+                    tag_name = '';
+                if (elements !== 'undefined' && elements.length !== 0) {
+                    psLen = elements.length;
+                    for (k = 0; k < psLen; k += 1) {
+                        tag_name = elements[k].tagName.toLowerCase();
+                        switch (tag_name) {
+                        case 'input':
+                        case 'textarea':
+                        case 'select':
+                            elements[k].value = new_val;
+                            break;
+                        case 'video':
+                        case 'img':
+                            elements[k].src = new_val;
+                            break;
+                        default:
+                            elements[k].innerHTML = new_val;
+                            break;
+                        }
+                    }
+                }
+            });
+            return pubSubObj;
+        },
+        /**
+         * Creates BindClass Class.
+         * @class BindClass
+         * @return {Object} publishSub Object
+         */
+        BindClass = function (dataAttr) {
+            'use strict';
+            /** 
+             * creates the DataBinder instance and set/get to binding object.
+             * @function bindSet
+             * @return {Object}
+             */
+            var bindSet = (function () {
+                var binder = new DataBinder(dataAttr),
+                    bindObj = {
+                        attributes: {},
+                        // The attribute setter publish changes using the DataBinder PubSub
+                        set: function (attr_name, val) {
+                            this.attributes[attr_name] = val;
+                            //pass this as parameter,So that initiator will be in bindObj context
+                            binder.publish(dataAttr + ':change', attr_name, val, this);
+                        },
+                        get: function (attr_name) {
+                            return this.attributes[attr_name];
+                        },
+                        binderObject: binder
+                    };
+                /**
+                 * Subscribe to the PubSub.
+                 *
+                 * @event BindClass#dataAttributeChange
+                 */
+                binder.on(dataAttr + ':change', function (evt, attr_name, new_val, initiator) {
+                    if (initiator !== bindObj) {
+                        bindObj.set(attr_name, new_val);
+                    }
+                });
+                return bindObj;
+            }());
+            return bindSet;
+        };
+} catch (e) {
+    console.log('error in js/helper/util.js' + e.message);
+}

package/files/templates/signage-sdk-templates/Fashion_Multimedia_Ad/readme.txt

@@ -0,0 +1,26 @@
+App Directory Structure
+
+	[index.html]
+	The file on which the basic skeleton of an HTML page is built on. File paths to CSS, JS, images and videos are defined on this file.
+
+	
+	[css folder]
+	Contains the style.css file, on which modifications are made to style the presentation of the HTML code.
+
+	
+	[js folder]
+	- Helper folder: Contains utility JS file for data binding support.
+	- controller.js: Controls the actions of html elements.
+
+
+	[data folder]
+	Contains json files, which acts like a model to html page .(content of HTML elements).
+
+	
+	[res folder]
+	Contains multimedia resource files
+	- images folder contains image files, if needed.
+	- videos folder contains video files, if needed.
+
+	[fonts folder]
+	Contains fonts, if needed.

package/files/templates/signage-sdk-templates/File_Explorer/README.txt

@@ -0,0 +1,16 @@
+File Explorer for webOS Signage 1.01
+
+History:
+
+2015. 05.13
+Ver 1.02
+Video play bug fix (URI change : "./content" -> "http://127.0.0.1:9080/")
+
+2015. 02.23
+Ver 1.01
+Modify read file code for SCAP v1.2
+Support Video file play (MP4 Format Only)
+
+2015. 02. 11
+Ver 1.00
+Modify some code and SCAP API code for SCAP API v1.2 and work correctly

package/files/templates/signage-sdk-templates/File_Explorer/index.html

@@ -0,0 +1,12 @@
+<html>
+	<head>
+		<title>Simple File Explorer for webOS Signage  App</title>
+        <!--  Include IDCAP API Library -->        
+        <script type="text/javascript" src="./js/idcap.js"></script>  
+		
+		<script src = ./js/definition.js></script>
+		<script src = ./js/Root.js></script>    
+			
+			
+	</body>
+</html>

package/files/templates/signage-sdk-templates/File_Explorer/js/Root.js

@@ -0,0 +1,39 @@
+function ROOT() {
+	isRoot = true;
+	var numOfDevice = 1;
+
+	idcap.request("idcap://storage/info/get", {
+		"parameters": {},
+		"onSuccess": function (cbObject) {
+			document.getElementById("filetitle_name").innerHTML = "Name";
+			document.getElementById("filetitle_type").innerHTML = "Type";
+			document.getElementById("filetitle_size").innerHTML = "";
+			document.getElementById("filetitle_ctime").innerHTML = "Free Size";
+			document.getElementById("filetitle_atime").innerHTML = "Used Size";
+			document.getElementById("filetitle_mtime").innerHTML = "Total Size";
+
+			document.getElementById('fileList_size').innerHTML = "";
+
+			document.getElementById('currentPos').innerHTML = "File Explorer for webOS Signage";
+
+			////////////////////////////////////////////////////////////////////////////////
+			// Internal Memory Status
+			document.getElementById('fileList_name').innerHTML = " <div id = 'fileid0' class = 'filename_select'>" + "<font color = #FF0000>" + 'INTERNAL' + ' </font></div>';
+			document.getElementById('fileList_type').innerHTML = '<div id = "typeid0"><font color = #FF0000>Device </font></div>';
+
+			document.getElementById('fileList_ctime').innerHTML = cbObject.internal.free.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " KB<br>";
+			document.getElementById('fileList_atime').innerHTML = cbObject.internal.used.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " KB<br>";
+			document.getElementById('fileList_mtime').innerHTML = cbObject.internal.total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " KB<br>";
+
+			document.getElementById('status').innerHTML = numOfDevice + " device storage(s)  detected.";
+			document.getElementById('fileid0').style.background = '#C70752';
+			controller(numOfDevice, "ROOT", isRoot);
+		},
+		"onFailure": function (err) {
+			console.log("onFailure : errorMessage = " + err.errorMessage);
+
+			var errorMessage = err.errorMessage;
+			document.getElementById('fileInfo').innerHTML = errorMessage;
+		}
+	});
+}

package/files/templates/signage-sdk-templates/File_Explorer/js/definition.js

@@ -0,0 +1,59 @@
+/**
+ * 
+ * definition.js
+ * Defines constant values
+ * 
+ */
+
+//////////////////////////////////////
+// CONSTANT DEFINITION
+//
+
+// Screen max line
+    var MAX_LINE = 34,   
+    
+// Current Cursor position, path 
+    current_path = "",
+//////////////////////////////////////
+// Remote controller button
+    BUTTON_LEFT = 37,
+    BUTTON_UP = 38,
+    BUTTON_RIGHT = 39,
+    BUTTON_DOWN = 40,
+    BUTTON_OK = 13,
+    BUTTON_0 = 48,
+    BUTTON_1 = 49,
+    BUTTON_2 = 50,
+    BUTTON_3 = 51,
+    BUTTON_4 = 52,
+    BUTTON_5 = 53,
+    BUTTON_6 = 54,
+    BUTTON_7 = 55,
+    BUTTON_8 = 56,
+    BUTTON_9 = 57,
+	BUTTON_YELLOW = 405,
+	BUTTON_BLUE = 406,
+	
+	// Screen max line
+	MAX_LINE = 34,
+	SCROLL_SPEED = 28,
+
+    MODE_EXPLORER = "EXPLORER",
+    MODE_HELP = "HELP",
+    MODE_REMOVEALL = "REMOVEALL",
+    MODE_MKDIR = "MKDIR",
+    MODE_PLAYVIDEO = "PLAYVIDEO",
+    
+    MENU_SELECTED = '#C70752';
+
+// File type color 
+	FILETYPE_COLOR_FOLDER = '#FFFF00',
+	FILETYPE_COLOR_NORMALFILE = '#FFFFFF',
+	FILETYPE_COLOR_ZIP = '#00FFFF',
+	FILETYPE_COLOR_TEXT = '#FF00FF',
+	FILETYPE_COLOR_HTML = '#3333FF',
+	FILETYPE_COLOR_IMAGE_LOGO_AVAILABLE = '#FFAAAA',
+	FILETYPE_COLOR_IMAGE = '#FF0000';
+	FILETYPE_COLOR_VIDEO = '#00FF00';
+
+//////////////////////////////////////

package/files/templates/signage-sdk-templates/File_Explorer/js/explorer.js

@@ -0,0 +1,367 @@
+/**
+ * 
+ * explorer.js
+ * Defines file operations and initialize function
+ * 
+ */
+
+function init() {
+	helpWindow();
+	document.cursor_pos = 0;
+	document.cursor_screen_pos = 0;
+	document.currentMaxFileNumber = 0;
+	document.timeloadfile = 0;
+	ROOT();
+}
+
+
+function printCurrentPath(pathValue) {
+	document.getElementById('currentPos').innerHTML = pathValue + '/';
+}
+
+// Play Video using <video> tag
+function playVideo(srcURI) {
+	var videoURI = ".__temp__/____tempVideo_____.mp4";
+
+	idcap.request("idcap://storage/file/copy", {
+		"parameters": {
+			"from": srcURI,
+			"to": "file://internal/" + videoURI
+		},
+		"onSuccess": function () {
+			console.log("Play Video : " + srcURI);
+			isPopupExists = true;
+			var newURI = "http://127.0.0.1:9080/" + videoURI;
+			document.getElementById('menu_popup').style.visibility = 'visible';
+			document.getElementById('menu_popup').innerHTML = "Press Blue Button to close this window<br>"
+				+ "<video id = 'videoPlayer' width = 640 height= 480 autoplay loop></video>";
+			document.getElementById("videoPlayer").src = newURI;
+			document.getElementById("videoPlayer").load();
+		},
+		"onFailure": function (err) {
+			console.log("Failed to load file - Path : " + srcURI);
+			console.log("onFailure : errorMessage = " + err.errorMessage);
+
+			var errorMessage = err.errorMessage;
+			document.getElementById('status').innerHTML = errorMessage;
+		}
+	});
+}
+
+
+function stopVideo() {
+	console.log(document.getElementById("videoPlayer").currentSrc);
+	document.getElementById("videoPlayer").pause();
+}
+
+// Read common files and print hex value
+function printBinary(srcURI) {
+	console.log("BINARY URI : " + srcURI);
+	document.getElementById('status').innerHTML = "Open file : " + srcURI + "<br>";
+
+	idcap.request("idcap://storage/file/read", {
+		"parameters": {
+			"path": srcURI,
+			"position": 0,
+			"encoding": "binary"
+		},
+		"onSuccess": function (cbObject) {
+			console.log("Binary read success.");
+
+			document.getElementById('status').innerHTML = "Load file : " + srcURI;
+			var dataView = new DataView(cbObject.data);
+			var binary_data = [];
+			for (var i = 0; i < cbObject.data.byteLength; i++) {
+				binary_data[i] = ("00" + dataView.getUint8(i).toString(16)).substr(-2).toUpperCase() + ' ';
+			}
+			document.getElementById('contents').innerHTML = binary_data.join("");
+		},
+		"onFailure": function (err) {
+			console.log("Failed to load file - Path : " + srcURI);
+			console.log("onFailure : errorMessage = " + err.errorMessage);
+
+			var errorMessage = err.errorMessage;
+			document.getElementById('status').innerHTML = errorMessage;
+		}
+	});
+}
+
+// Read .txt file and print text
+function printText(srcURI) {
+	//	console.log("TEXT URI : " + srcURI);
+	document.getElementById('status').innerHTML = "Open file : " + srcURI + "<br>";
+
+	idcap.request("idcap://storage/file/read", {
+		"parameters": {
+			"path": srcURI,
+			"position": 0,
+			"encoding": "utf8"
+		},
+		"onSuccess": function (cbObject) {
+			var printTextArea = document.getElementById('contents');
+			console.log("Get Txt Data : \n " + cbObject.data);
+			printTextArea.innerText = cbObject.data;
+		},
+		"onFailure": function (err) {
+			console.log("Failed to print text file - Path : " + srcURI);
+			console.log("onFailure : errorMessage = " + err.errorMessage);
+
+			var errorMessage = err.errorMessage;
+			document.getElementById('status').innerHTML = errorMessage;
+		}
+	});
+}
+
+// Draw image
+function drawImage(srcURI) {
+	console.log("IMAGE URI : " + srcURI);
+	document.getElementById('status').innerHTML = "Open file : " + srcURI + "<br>";
+
+	idcap.request("idcap://storage/file/read", {
+		"parameters": {
+			"path": srcURI,
+			"position": 0,
+			"encoding": "binary"
+		},
+		"onSuccess": function (cbObject) {
+			console.log("Image read success : " + cbObject.data.byteLength + " Bytes");
+			document.getElementById('status').innerHTML = "Load image : " + srcURI;
+			document.getElementById('contents').innerHTML = cbObject.data;
+			var binary_data = [];
+			var chararray = [];
+
+			// Get Binary Data
+			var dataView = new DataView(cbObject.data);
+			// Encode binary to base64
+
+			for (var i = 0; i < cbObject.data.byteLength; i++) {
+				binary_data[i] = ("00" + dataView.getUint8(i).toString(16)).substr(-2).toUpperCase();
+				chararray[i] = String.fromCharCode(parseInt(binary_data[i], 16)).toString('base64');
+			}
+			var data_base64 = btoa(chararray.join(""));
+
+			// Draw image
+			var drawImageArea = document.getElementById('contents');
+			var imageSrc = document.createElement("IMG");
+			imageSrc.src = "data:image/jpeg;base64, " + data_base64.toString();
+			imageSrc.onload = function () {
+				console.log("IMAGE : " + imageSrc.width + " x " + imageSrc.height);
+				drawImageArea.innerHTML = "<img width='423' height='906' src='" + imageSrc.src + "' >";
+			}
+		},
+		"onFailure": function (err) {
+			console.log("Failed to load image - Path : " + srcURI);
+			console.log("onFailure : errorMessage = " + err.errorMessage);
+
+			var errorMessage = err.errorMessage;
+			document.getElementById('status').innerHTML = errorMessage;
+		}
+	});
+}
+
+// List all files and subfolders in current folder
+function listFile_in_CurrentFolder(pathValue) {
+	document.getElementById('status').innerHTML = "Open Folder : " + (pathValue).split("/").pop();
+
+	document.getElementById("filetitle_name").innerHTML = "Name";
+	document.getElementById("filetitle_type").innerHTML = "Type";
+	document.getElementById("filetitle_size").innerHTML = "Size (Bytes)";
+	document.getElementById("filetitle_ctime").innerHTML = "Create Time";
+	document.getElementById("filetitle_atime").innerHTML = "Access Time";
+	document.getElementById("filetitle_mtime").innerHTML = "Modify Time";
+
+	current_path = pathValue;
+	document.timeloadfile = 0;
+
+	document.getElementById('fileList_name').innerHTML = "";
+	document.getElementById('fileList_type').innerHTML = "";
+	document.getElementById('fileList_size').innerHTML = "";
+	document.getElementById('fileList_ctime').innerHTML = "";
+	document.getElementById('fileList_atime').innerHTML = "";
+	document.getElementById('fileList_mtime').innerHTML = "";
+
+	printCurrentPath(pathValue);
+
+	idcap.request("idcap://storage/file/list", {
+		"parameters": {
+			"path": pathValue
+		},
+		"onSuccess": function (cbObject) {
+			var files = cbObject.fileList,
+
+				/////////////////////////////////////////////////////////////////////////////
+				// Root folder doesn't print "." and ".."
+				//if ( (pathValue !== 'file://internal/') && (pathValue !== 'file://internal') ) {
+				isRoot = false;
+			document.getElementById('fileList_size').innerHTML += "<br>";
+			document.getElementById('fileList_name').innerHTML += " <div id = 'fileid0' class = 'filename_select'>" + "<font color = #FFFFAA>" + '.' + ' </font></div>';
+			document.getElementById('fileList_type').innerHTML += '<div id = "typeid0"><font color = #FFFFAA>Folder </font></div>';
+
+			var previousFolderPath = pathValue.slice(0, -1 * (((pathValue).split("/")).pop().length + 1))
+			document.getElementById('fileList_size').innerHTML += "<br>";
+			document.getElementById('fileList_name').innerHTML += " <div id = 'fileid1'  class = 'filename_select'>" + "<font color = #FFFFAA>" + '..' + ' </font></div>';
+			document.getElementById('fileList_type').innerHTML += '<div id = "typeid1"><font color = #FFFFAA>Folder </font></div>';
+
+			document.getElementById('fileList_ctime').innerHTML += "<br><br>";
+			document.getElementById('fileList_atime').innerHTML += "<br><br>";
+			document.getElementById('fileList_mtime').innerHTML += "<br><br>";
+			//}
+			/////////////////////////////////////////////////////////////////////////////
+
+			for (var i = 0; i < files.length; ++i) {
+				var fileInfo = files[i],
+					nextPath = pathValue + "/" + fileInfo.name,
+					index = i;
+
+				if (!isRoot) {
+					index += 2;
+				}
+
+				////////////////////////////////////////////////////////////////////////////////////////////
+				// Get file stats (create / access / modified time)
+				idcap.request("idcap://storage/file/stat", {
+					"parameters": {
+						"path": nextPath
+					},
+					"onSuccess": function (cbObject) {
+						document.getElementById('fileList_ctime').innerHTML += fileName.ctime.slice(0, 10)
+							+ " " + fileName.ctime.slice(11, 19) + "<br>";
+						document.getElementById('fileList_atime').innerHTML += fileName.atime.slice(0, 10)
+							+ " " + fileName.atime.slice(11, 19) + "<br>";
+						document.getElementById('fileList_mtime').innerHTML += fileName.mtime.slice(0, 10)
+							+ " " + fileName.mtime.slice(11, 19) + "<br>";
+						document.timeloadfile++;
+						if (document.timeloadfile === files.length) {
+							document.getElementById('fileList_ctime').innerHTML += "<br><br><br>";
+							document.getElementById('fileList_atime').innerHTML += "<br><br><br>";
+							document.getElementById('fileList_mtime').innerHTML += "<br><br><br>";
+
+						}
+					},
+					"onFailure": function (err) {
+						console.log("Failed to get stat files. Path : " + nextPath);
+						console.log("onFailure : errorMessage = " + err.errorMessage);
+
+						var errorMessage = err.errorMessage;
+						document.getElementById('fileInfo').innerHTML = errorMessage;
+					}
+				});
+				////////////////////////////////////////////////////////////////////////////////////////////
+
+				switch (fileInfo.type) {
+
+					// If folder ('D' means folder)
+					case 'D':
+
+						document.getElementById('fileList_size').innerHTML += "<br>";
+						document.getElementById('fileList_name').innerHTML += " <div id = 'fileid" + index + "'  class = 'filename_select'>" +
+							"<font color = " + FILETYPE_COLOR_FOLDER + ">" + fileInfo.name + ' </font></div>';
+						document.getElementById('fileList_type').innerHTML += " <div id = 'typeid" + index + "'>" +
+							"<font color = " + FILETYPE_COLOR_FOLDER + ">Folder </font></div>";
+						break;
+
+					// Else if file
+					default:
+						document.getElementById('fileList_size').innerHTML += fileInfo.size.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " <br>";
+						var extension = ((fileInfo.name).split(".")).pop().toLowerCase();
+						if ((fileInfo.name).split(".").length == 1)
+							extension = "";
+
+						switch (extension) {
+							///////////////////////////////
+							// ZIP File
+							case 'zip':
+								document.getElementById('fileList_name').innerHTML += "<div id = 'fileid" + index + "' class = 'filename_select'>" +
+									"<font color = " + FILETYPE_COLOR_ZIP + ">" + fileInfo.name + ' </font></div>';
+								document.getElementById('fileList_type').innerHTML += " <div id = 'typeid" + index + "'>" +
+									"<font color = " + FILETYPE_COLOR_ZIP + ">ZIP File </font></div>";
+								break;
+							///////////////////////////////
+							// HTML File
+							case 'htm':
+							case 'html':
+								document.getElementById('fileList_name').innerHTML += "<div id = 'fileid" + index + "' class = 'filename_select'>" +
+									"<font color = " + FILETYPE_COLOR_HTML + ">" + fileInfo.name + ' </font></div>';
+								document.getElementById('fileList_type').innerHTML += " <div id = 'typeid" + index + "'>" +
+									"<font color = " + FILETYPE_COLOR_HTML + ">HTML File </font></div>";
+								break;
+							///////////////////////////////
+							// Text File
+							case 'txt':
+								document.getElementById('fileList_name').innerHTML += "<div id = 'fileid" + index + "' class = 'filename_select'>" +
+									"<font color = " + FILETYPE_COLOR_TEXT + ">" + fileInfo.name + ' </font></div>';
+								document.getElementById('fileList_type').innerHTML += " <div id = 'typeid" + index + "'>" +
+									"<font color = " + FILETYPE_COLOR_TEXT + ">Text File </font></div>";
+								break;
+							///////////////////////////////
+							// Image Files (Logo available)
+							case 'jpg':		// FALL-THROUGH
+							case 'jpeg':	// FALL-THROUGH
+							case 'bmp':		// FALL-THROUGH
+								document.getElementById('fileList_name').innerHTML += "<div id = 'fileid" + index + "'  class = 'filename_select'>" +
+									"<font color = " + FILETYPE_COLOR_IMAGE_LOGO_AVAILABLE + ">" + fileInfo.name + ' </font></div>';
+								document.getElementById('fileList_type').innerHTML += " <div id = 'typeid" + index + "'>" +
+									"<font color = " + FILETYPE_COLOR_IMAGE_LOGO_AVAILABLE + ">Image File </font></div>";
+
+								break;
+							/////////////////////////////
+							// Image Files
+							case 'gif':		// FALL-THROUGH
+							case 'bmp':		// FALL-THROUGH
+							case 'png':		// FALL-THROUGH
+								document.getElementById('fileList_name').innerHTML += "<div id = 'fileid" + index + "'  class = 'filename_select'>" +
+									"<font color = " + FILETYPE_COLOR_IMAGE + ">" + fileInfo.name + ' </font></div>';
+								document.getElementById('fileList_type').innerHTML += " <div id = 'typeid" + index + "'>" +
+									"<font color = " + FILETYPE_COLOR_IMAGE + ">Image File </font></div>";
+								break;
+							///////////////////////////////
+							// Video File
+							case 'mp4':
+								document.getElementById('fileList_name').innerHTML += "<div id = 'fileid" + index + "' class = 'filename_select'>" +
+									"<font color = " + FILETYPE_COLOR_VIDEO + ">" + fileInfo.name + ' </font></div>';
+								document.getElementById('fileList_type').innerHTML += " <div id = 'typeid" + index + "'>" +
+									"<font color = " + FILETYPE_COLOR_VIDEO + ">Video File </font></div>";
+								break;
+							///////////////////////////////
+							// Default File
+							default:
+								document.getElementById('fileList_name').innerHTML += "<div id = 'fileid" + index + "'  class = 'filename_select'>" +
+									"<font color = " + FILETYPE_COLOR_NORMALFILE + ">" + fileInfo.name + ' </font></div>';
+								document.getElementById('fileList_type').innerHTML += " <div id = 'typeid" + index + "'>" +
+									"<font color = " + FILETYPE_COLOR_NORMALFILE + "> File </font></div>";
+								break;
+						}
+
+
+						break;
+				}
+			}
+			document.getElementById('fileid0').style.background = '#C70752';
+
+			// For scrolling down
+			document.getElementById('fileList_name').innerHTML += "<br><br><br>";
+			document.getElementById('fileList_type').innerHTML += "<br><br><br>";
+			document.getElementById('fileList_size').innerHTML += "<br><br><br>";
+
+			controller(files.length, pathValue, isRoot);
+		},
+		"onFailure": function (err) {
+			console.log("Failed to get list files. Path : " + pathValue);
+			console.log("onFailure : errorMessage = " + err.errorMessage);
+
+			var errorMessage = err.errorMessage;
+			document.getElementById('fileInfo').innerHTML = errorMessage;
+		}
+	});
+}
+
+// Utility function
+function sleep(num) { // unit : ms
+	var now = new Date();
+	var stop = now.getTime() + num;
+	while (true) {
+		now = new Date();
+		if (now.getTime() > stop)
+			return;
+	}
+}