source: pro-bachkim-filespace/sourcecode/assets/js/vsgrid.js @ 15

if(jQuery) (function($){
        
        $.extend($.fn, {
                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.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>';
                                
                                var disabledItemsList = null;
                                
                                if (d.minetype == 'directory') {
                                        disabledItemsList = ['preview'];
                                }
                                
                                $(o.container).append(strHTML);

                                $('div[rel="id:'+ d.id +'"]').bind('click',function(e){itemClick(this)});                               
                                $('div[rel="id:'+ d.id +'"]').contextMenu({
                                        menu: 'gridMenu',
                                        disabledItems: disabledItemsList
                                }, function(action, el, pos) {
                                
                                        switch(action) {
                                                case 'rename':
                                                        itemClick(el);
                                                        rename(el);
                                                        break;
                                                default:
                                                        break;
                                        }
                                        
                                });
                        }
                        
                        var keyboardRename = function () {
                                $(document).keypress( function(e) {
                                        var selectedItem = $('.selector.selected').parent();
                                        switch( e.keyCode ) {
                                                case 113:
                                                        rename(selectedItem);
                                                        break;
                                                case 32:
                                                        cancelRename(selectedItem);
                                                        break;
                                                default:
                                                        break;
                                        }
                                        return false;
                                });
                        }

                        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,
                                        });
                                }
                        }
                        
                        var rename = function (e) {
                                var nameObj = $(e).find('.file-name');
                                var oldName = $(nameObj).text();
                                var editor = document.createElement ('INPUT');
                                editor.type = 'text';
                                editor.className = 'rename';
                                editor.value = oldName;
                                
                                $(nameObj).text('');
                                $(nameObj).append(editor);
                                editor.focus();
                                $(editor).select();
                        }
                        
                        var cancelRename = function (e) {
                                var oldName = $(e).find('INPUT.rename').attr('value');
                                $(e).find('INPUT.rename').remove();
                                $(e).find('.file-name').text(oldName);
                                
                        }

                        this.getData = function (data) {
                                o.directoryTreeData = data.directoryTreeData;
                                o.curentParent = data.curentParent;
                                o.dirIDprefix = data.dirIDprefix
                                renderGrid(o);
                                keyboardRename();
                        }

                        this.initialize = function() {
                        return this;
                };

                        return this.initialize();
                }
        });

})(jQuery);