text: $(function() {
  
      var mediaViewModel = function() {
  
          var self = this;
  
          this.curType = ko.observable("list");
  
          this.pager = ko.observable();
          this.currentPath = ko.observable();
  
          this.changeType = _.debounce(function(type) {
              self.curType(type);
          }, 300, {
              leading: true
          });
  
          this.imgTypes = ko.observableArray([{
              displayName: Kooboo.text.site.images.all,
              value: "all"
          }, {
              displayName: Kooboo.text.site.images.page,
              value: "page"
          }, {
              displayName: Kooboo.text.site.images.style,
              value: "style"
          }, {
              displayName: Kooboo.text.site.images.view,
              value: "view"
          }, {
              displayName: Kooboo.text.site.images.layout,
              value: "layout"
          }, {
              displayName: Kooboo.text.common.HTMLblock,
              value: "HTMLBlock"
          }, {
              displayName: Kooboo.text.site.images.content,
              value: "TextContent"
          }]);
          this.curImgType = ko.observable("all")
          this.changeImgType = function(type) {
  
              if (type !== self.curImgType()) {
  
                  if (type !== "all") {
                      self.currentPath(undefined);
                      Kooboo.Media.getPagedListBy({
                          by: type
                      }).then(function(res) {
                          if (res.success) {
                              var _folders = [];
                              _.forEach(res.model.folders, function(folder) {
                                  _folders.push(new folderModel(folder));
                              })
                              self.folders(_folders);
                              self._folders(_folders);
  
                              var _files = [];
                              _.forEach(res.model.files.list, function(file) {
                                  _files.push(new fileModel(file));
                              })
                              self.files(_files);
                              self._files(_files);
  
                              self.pager(res.model.files);
  
                              self.crumbPath(res.model.crumbPath);
                              self.curImgType(type);
  
                              self.reorder();
                              location.hash = "";
                          }
                      })
                  } else {
                      self.onChoosingFolder("/");
                      self.curImgType(type);
                  }
              }
          }
          this.resetCurImgType = function() {
              self.changeImgType("all")
          }
  
          this.currentSort = ko.observable("url");
          this.isAsc = ko.observable(false);
          this.currentOrderCSS = function(type) {
              if (self.currentSort() == type) {
                  return this.isAsc() ? "asc" : "desc";
              } else {
                  return ""
              }
          }
          this.changeSort = function(sort) {
              self.isAsc(self.currentSort() == sort ? !self.isAsc() : false);
              self.currentSort(sort);
              self.reorder();
          }
  
          this.reorder = function() {
  
              var _folders = _.cloneDeep(self.folders()),
                  _files = _.cloneDeep(self.files());
  
              switch (self.currentSort()) {
  
                  case "url":
                      _folders = _.sortBy(self.folders(), [function(f) {
                          return f.name()
                      }]);
                      _files = _.sortBy(self.files(), [function(f) {
                          return f.name()
                      }]);
                      break;
                  case "size":
                      _files = _.sortBy(self.files(), [function(f) {
                          return f.size();
                      }]);
                      break;
                  case "date":
                      _folders = _.sortBy(self.folders(), [function(f) {
                          return f.lastModified();
                      }]);
                      _files = _.sortBy(self.files(), [function(f) {
                          return f.lastModified();
                      }]);
                      break;
              }
  
              self.folders(_folders);
              self.files(_files);
  
              if (!self.isAsc()) {
                  self.folders.reverse();
                  self.files.reverse();
              }
          }
  
          this.selectAll = ko.pureComputed({
              read: function() {
                  var allLength = self.folders().length + self.files().length
                  if (allLength === 0) {
                      return false;
                  }
                  return self.selectedFiles().length == allLength;
              },
              write: function(checked) {
  
                  self.selectedFiles.removeAll();
  
                  _.forEach(self.folders(), function(folder) {
                      folder.selected(checked);
                      checked && self.selectedFiles.push(folder);
                  })
                  _.forEach(self.files(), function(file) {
                      file.selected(checked);
                      checked && self.selectedFiles.push(file);
                  })
              },
              owner: this
          })
  
          this.selectedFiles = ko.observableArray();
          this.selectedFiles.subscribe(function(files) {
              self.showDeleteBtn(files.length);
          })
  
          this.crumbPath = ko.observableArray();
  
          this.folders = ko.observableArray();
          this._folders = ko.observableArray();
          this.files = ko.observableArray();
          this._files = ko.observableArray();
  
          this.selectDoc = function(doc) {
              doc.selected(!doc.selected());
  
              if (doc.selected()) {
                  self.selectedFiles.push(doc);
              } else {
                  self.selectedFiles.remove(doc);
              }
  
              return true;
          }
  
          this.editImage = function(m) {
              var id = "";
  
              if (self.curType() == "grid") {
                  id = self.selectedFiles()[0].id();
              } else {
                  id = m.id();
              }
  
              var crumbPath = _.cloneDeep(self.crumbPath());
  
              location.href = Kooboo.Route.Get(Kooboo.Route.Image.Edit, {
                  Id: id
              }) + "#" + crumbPath.reverse()[0].fullPath;
          }
  
          this.onChoosingFolder = function(path, page) {
  
              if (!self.currentPath() || self.currentPath() !== path) {
                  Kooboo.Media.getPagedList({
                      path: path,
                      pageNr: page ? (typeof page == "number" ? page : 1) : 1
                  }).then(function(res) {
                      if (res.success) {
                          self.selectAll(false);
                          self.selectedFiles.removeAll();
                          self.crumbPath(res.model.crumbPath);
  
                          var _folders = [];
                          _.forEach(res.model.folders, function(folder) {
                              _folders.push(new folderModel(folder));
                          })
                          self.folders(_folders);
                          self._folders(_folders);
  
                          var _files = [];
                          _.forEach(res.model.files.list, function(file) {
                              _files.push(new fileModel(file));
                          });
                          self.files(_files);
                          self._files(_files);
  
                          self.pager(res.model.files);
  
                          self.reorder();
  
                          self.currentPath(path);
                          if (path !== '/') {
                              location.hash = path
                          } else {
                              location.hash = "";
                          }
                      }
                  })
              }
          };
  
          this.getRelation = function(file, type) {
              Kooboo.EventBus.publish("kb/relation/modal/show", {
                  id: file.id(),
                  by: type,
                  type: "Image"
              });
          }
  
          this.localDate = function(date) {
              var d = new Date(date());
              return d.toDefaultLangString();
          };
  
          // Delete button
          this.showDeleteBtn = ko.observable(false);
          this.onDelete = function() {
  
              if (confirm(Kooboo.text.confirm.deleteItems)) {
                  var folders = [],
                      files = [];
  
                  _.forEach(self.selectedFiles(), function(selected) {
  
                      if (selected.type() == "folder") {
                          folders.push(selected.fullPath());
                      } else if (selected.type() == "file") {
                          files.push(selected.id());
                      }
                  })
  
                  Kooboo.Media.deleteFolders(
                      JSON.stringify(folders)
                  ).then(function(res) {
  
                      if (res.success) {
                          _.forEach(folders, function(fullPath) {
                              var _find = _.find(self.folders(), function(folder) {
                                  return folder.fullPath() == fullPath;
                              })
  
                              _find && self.folders.remove(_find);
                          });
                      }
                  });
  
                  Kooboo.Media.deleteImages(
                      JSON.stringify(files)
                  ).then(function(res) {
  
                      if (res.success) {
                          _.forEach(files, function(id) {
                              var _find = _.find(self.files(), function(files) {
                                  return files.id() == id;
                              })
  
                              _find && self.files.remove(_find);
                          });
                      }
                  })
  
                  self.selectedFiles.removeAll();
              }
          }
  
          this.uploadImage = function(data, files) {
  
              function upload() {
                  var folders = _.cloneDeep(self.crumbPath());
                  data.append("folder", folders.reverse()[0].fullPath);
                  Kooboo.Upload.Images(data).then(function(res) {
  
                      if (res.success) {
                          self.currentPath('');
                          self.onChoosingFolder(folders[0].fullPath);
                      }
                  })
              }
  
              if (!Kooboo.isFileNameExist(files, self.files())) {
                  upload();
              } else {
  
                  if (confirm(Kooboo.text.confirm.overrideFile)) {
                      upload();
                  }
              }
          }
  
          // Create Folder
          this.newFolderModal = ko.observable(false);
  
          this.showError = ko.observable(false);
  
          this.folderName = ko.validateField({
              required: Kooboo.text.validation.required,
              localUnique: {
                  compare: function() {
                      var list = [];
                      _.forEach(self.folders(), function(folder) {
                          list.push(folder.name());
                      })
                      list.push(self.folderName());
                      return list;
                  },
                  message: Kooboo.text.validation.taken
              },
              stringlength: {
                  min: 1,
                  max: 64,
                  message: Kooboo.text.validation.minLength + 1 + ", " + Kooboo.text.validation.maxLength + 64
              },
              regex: {
                  pattern: /^([a-zA-Z\w\-\.])*$/,
                  message: Kooboo.text.validation.folderNameInvalid
              }
          });
  
          this.onCreateFolder = function() {
              self.folderName("");
              self.newFolderModal(true);
          }
  
          this.onNewFolderModalReset = function() {
              self.newFolderModal(false);
              self.folderName("");
              self.showError(false);
          }
  
          this.onNewFolderModalSubmit = function() {
              if (self.folderName.isValid()) {
                  var isExistFolder = _.find(self.folders(), function(folder) {
                      return self.folderName() == folder.name();
                  })
  
                  if (isExistFolder) {
                      self.onNewFolderModalReset();
                  } else {
                      Kooboo.Media.createFolder({
                          path: self.crumbPath()[self.crumbPath().length - 1].fullPath,
                          name: self.folderName()
                      }).then(function(res) {
  
                          if (res.success) {
                              self.folders.push(new folderModel(res.model));
                              self.onNewFolderModalReset()
                          }
                      })
                  }
              } else {
                  self.showError(true);
              }
          }
  
          Kooboo.EventBus.subscribe("kb/pager/change", function(page) {
              if (self.curImgType() == "all") {
                  self.onChoosingFolder(self.currentPath(), page);
              } else {
                  Kooboo.Media.getPagedListBy({
                      by: type,
                      pageNr: page
                  }).then(function(res) {
                      if (res.success) {
                          var _folders = [];
                          _.forEach(res.model.folders, function(folder) {
                              _folders.push(new folderModel(folder));
                          })
                          self.folders(_folders);
                          self._folders(_folders);
  
                          var _files = [];
                          _.forEach(res.model.files.list, function(file) {
                              _files.push(new fileModel(file));
                          })
                          self.files(_files);
                          self._files(_files);
  
                          self.pager(res.model.files);
  
                          self.crumbPath(res.model.crumbPath);
                          self.curImgType(type);
  
                          self.reorder();
                          location.hash = "";
                      }
                  })
              }
          })
  
      }
      var vm = new mediaViewModel();
  
      var fileModel = function(file) {
          var self = this;
  
          file.thumbnail = file.thumbnail + "&timestamp=" + (+new Date());
  
          ko.mapping.fromJS(file, {}, self);
  
          self.type = ko.observable("file");
  
          self.selected = ko.observable(false);
  
          self.editUrl = ko.pureComputed(function() {
              return Kooboo.Route.Get(Kooboo.Route.Image.Edit, {
                  Id: self.id()
              })
          })
  
          self.onSelect = function(file) {
              file.selected(!file.selected());
              return true;
          }
      }
  
      var folderModel = function(folder) {
          var self = this;
  
          ko.mapping.fromJS(folder, {}, self);
  
          self.type = ko.observable("folder");
  
          self.selected = ko.observable(false);
  
          self.onSelect = function(folder) {
              folder.selected(!folder.selected());
              return true;
          }
      }
  
      ko.applyBindings(vm, document.getElementById("main"));
  
      vm.onChoosingFolder(location.hash ? location.hash.split("#")[1] : "");
  
      Kooboo.EventBus.subscribe('window/popstate', function() {
          $('.modal').modal('hide')
          if (location.hash) {
              var path = location.hash.split('#')[1];
              vm.onChoosingFolder(path);
          } else {
              vm.curImgType() == "all" && vm.onChoosingFolder('/')
          }
      })
  })