function SpawFm()
{
}

SpawFm.files = new Array();
SpawFm.view_mode = 0;
SpawFm.selectedFile = -1;
SpawFm.filesLoaded = false;
SpawFm.allowModify = false;
SpawFm.txtFileSize = 'Size';
SpawFm.txtFileDate = 'Date modified';
SpawFm.txtNoFileSelected = 'No file selected!';
SpawFm.txtConfirmDelete = 'Are you sure you want to delete file [*file*]?';
SpawFm.txtDownload = '[download file]';
SpawFm.previewImgObj = false;

SpawFm.addFile = function(type, name, size, date, descr, icon, icon_big, thumb, other) {
  SpawFm.files[SpawFm.files.length] = new Array(type, name, size, date, descr, icon, icon_big, thumb, other);
}

SpawFm.setViewMode = function(mode) {
  SpawFm.view_mode = mode;
}

// output list of files to target frame
SpawFm.listFiles = function() {
  if (SpawFm.filesLoaded)
    return false;
  var doc = SpawFm.getTargetFrame();
  
  // load stylesheets
  SpawFm.loadStylesheet(1, true);
  SpawFm.loadStylesheet(0, false);
  
  var str = '';
  for (var i=0; i<SpawFm.files.length; i++) {
    var newBlock = doc.createElement('div');
    //newBlock.setAttribute('class', 'fm_file');
    newBlock.className = 'fm_file';
    newBlock.setAttribute('id', 'file_'+i);
    //SpawFm.addEventHandler(newBlock, 'click', 'SpawFm.unselectFile()');
    // thumb
    var divBlock = doc.createElement('div');
    divBlock.className = 'fm_file_thumb';
    var img = doc.createElement('img');
    img.setAttribute('src', SpawFm.files[i][7]);
    divBlock.appendChild(img);
    newBlock.appendChild(divBlock);
    // icon big
    var divBlock = doc.createElement('div');
    divBlock.className = 'fm_file_icon_big';
    var img = doc.createElement('img');
    img.setAttribute('src', SpawFm.files[i][6]);
    divBlock.appendChild(img);
    newBlock.appendChild(divBlock);
    // icon
    var divBlock = doc.createElement('div');
    divBlock.className = 'fm_file_icon';
    var img = doc.createElement('img');
    img.setAttribute('src', SpawFm.files[i][5]);
    divBlock.appendChild(img);
    SpawFm.addEventHandler(divBlock, 'click', 'SpawFm.onSelectFile('+i+')');
    newBlock.appendChild(divBlock);
    
    // title
    var divTitle = doc.createElement('div');
    divTitle.className = 'fm_file_title';
    divBlock.setAttribute('id', 'file_title_'+i);
    var txt = doc.createTextNode(SpawFm.files[i][1]);
    divTitle.appendChild(txt);
    SpawFm.addEventHandler(divTitle, 'click', 'SpawFm.onSelectFile('+i+')');
    newBlock.appendChild(divTitle);
    // size, type, date - TO DO
    
    SpawFm.addEventHandler(newBlock, 'dblclick', 'SpawFm.okClick()');
    doc.body.appendChild(newBlock);
    
  }
  SpawFm.filesLoaded = true;
}

SpawFm.loadStylesheet = function(mode, isdisabled) {
  var doc = SpawFm.getTargetFrame();
  var s_sheet = doc.createElement('link');
  s_sheet.setAttribute("rel","stylesheet");
  s_sheet.setAttribute("type","text/css");
  s_sheet.setAttribute('href', 'plugins/spawfm/lib/filelist'+mode+'.css');
  s_sheet.setAttribute('title', mode);
  s_sheet.disabled = isdisabled;
  var head = doc.getElementsByTagName("head");
  if (!head || head.length == 0) {
    head = doc.createElement("head");
    doc.childNodes[0].insertBefore(head, doc.body);
  } else {
    head = head[0];
  }
  head.appendChild(s_sheet);
}

// apply view to listed files
SpawFm.applyViewMode = function(mode) {
  SpawFm.setViewMode(mode);
  
  // get target frame
  var doc = SpawFm.getTargetFrame();
  
  // switch stylesheet
  for(i=0; (a = doc.getElementsByTagName('link')[i]); i++) {
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == mode) {
        a.disabled = false;
      }
    }
  }
}


SpawFm.getTargetFrame = function() {
  var trg = document.getElementById('dir_cont');
  if (trg && trg.contentDocument) {
    return trg.contentDocument;
  } else if (trg && document.frames('dir_cont').document) {
    return document.frames('dir_cont').document;
  }
  return false;
}

SpawFm.onSelectFile = function(fileno) {
  if (SpawFm.selectedFile != fileno) {
    SpawFm.unselectFile();
    SpawFm.selectedFile = fileno;
    SpawFm.selectFile(fileno, true);
    document.spawfm_form.ok_button.disabled = false;
    SpawFm.showFileDetails(fileno);
    if (SpawFm.allowModify)
      document.spawfm_form.delete_button.disabled = false;
  }
}

SpawFm.selectFile = function(fileno, select) {
  var trg = SpawFm.getTargetFrame();
  if (!trg) return false;
  var sfile = trg.getElementById('file_'+fileno);
  if (!sfile) return false;
  str = '';
  if (sfile.hasChildNodes()) {
    var ch = sfile.childNodes;
    for (i=0; i<ch.length; i++) {
      var node = ch[i];
      suffixpos = node.className.lastIndexOf('_sel');
      if (select && suffixpos == -1) {
        node.className = node.className + '_sel';
      } else if (!select && suffixpos > 0) {
        node.className = node.className.substr(0, suffixpos);
        SpawFm.selectedFile = -1;
      }
      str += node.className+'; ';
    }
  }
  if (select) {
    // stop bubbling event
    //SpawFm.stopBubble();
  }
}

SpawFm.unselectFile = function() {
  if (SpawFm.selectedFile >= 0) {
    // unselect file
    SpawFm.selectFile(SpawFm.selectedFile, false);
    document.spawfm_form.ok_button.disabled = true;
    document.spawfm_form.delete_button.disabled = true;
    SpawFm.hideFileDetails();
  }
}

SpawFm.showFileDetails = function(fileno) {
  var descrDiv = document.getElementById('file_details');
  if (!descrDiv) return false;
  SpawFm.hideFileDetails();
  
  var filedata = SpawFm.files[fileno];
  if (!filedata) return false;
  // title
  var titlediv = document.createElement('div');
  titlediv.className = 'filedescr_title';
  var titletext = document.createTextNode(filedata[1]);
  titlediv.appendChild(titletext);
  // descr
  var descr = document.createElement('div');
  descr.className = 'filedescr_br';
  var text = document.createTextNode(filedata[4]);
  descr.appendChild(text);
  // size
  var sizediv = document.createElement('div');
  sizediv.className = 'filedescr_common';
  var text = document.createTextNode(SpawFm.txtFileSize + ': ' + SpawFm.niceSize(filedata[2]));
  sizediv.appendChild(text);
  // date modified
  var datediv = document.createElement('div');
  datediv.className = 'filedescr_common';
  var text = document.createTextNode(SpawFm.txtFileDate + ': ' + filedata[3]);
  datediv.appendChild(text);
  // image preview
  var ext = filedata[1].substr(filedata[1].lastIndexOf('.')+1).toLowerCase();
  if (ext == 'gif' || ext == 'jpg' || ext == 'png' || ext == 'jpeg') {
    // prepare block for viewing
    var image = document.createElement('div');
    image.className = 'filedescr_img_preview';
    var img = document.createElement('img');
    img.setAttribute('src', '../spacer.gif');
    img.setAttribute('id', 'img_preview');
    img.setAttribute('alt', filedata[1]);
    img.className = 'img_preview';
    image.appendChild(img);
    descrDiv.appendChild(image);
    
    // preview
    SpawFm.previewImgObj = new Image();
    SpawFm.previewImgObj.src = SpawFm.filePath+filedata[1];
    SpawFm.previewImage(SpawFm.previewImgObj);
  }
  
  descrDiv.appendChild(titlediv);
  descrDiv.appendChild(descr);
  descrDiv.appendChild(sizediv);
  descrDiv.appendChild(datediv);
  
  // other info
  if (filedata[8].length) {
    var other = document.createElement('div');
    other.className = 'filedescr_common';
    var text = document.createTextNode(filedata[8]);
    other.appendChild(text);
    descrDiv.appendChild(other);
  }
  
  // file download link
  var dl = document.createElement('div');
  var dl_a = document.createElement('a');
  dl_a.setAttribute('href', SpawFm.filePath+filedata[1]);
  dl_a.setAttribute('target', '_blank');
  var dl_a_txt = document.createTextNode(SpawFm.txtDownload);
  dl_a.appendChild(dl_a_txt);
  dl.appendChild(dl_a);
  dl.className = 'filedescr_download';
  descrDiv.appendChild(dl);
  
  
}
SpawFm.hideFileDetails = function() {
  var descrDiv = document.getElementById('file_details');
  if (!descrDiv) return false;
  var ch = descrDiv.childNodes;
  while (descrDiv.childNodes.length) {
    descrDiv.removeChild(descrDiv.firstChild);
  }
}

SpawFm.previewImage = function(img) {
  if (img == false) {
    return false;
  } else if (!img.complete) {
    setTimeout('SpawFm.previewImage(SpawFm.previewImgObj)', 100);
    return false;
  }
  var maxwidth = 168;
  var maxheight = 142;
  var w = SpawFm.previewImgObj.width;
  var h = SpawFm.previewImgObj.height;
  
  // calculate resize ratio
  var ratio = 1;
  if (w > maxwidth) ratio = w / maxwidth;
  if (h > maxheight && h/maxheight > ratio) ratio = h/maxheight;
  img.width = Math.round(w / ratio);
  img.height = Math.round(h / ratio);
  img.className = 'img_preview';
  // workaround for vertical image align
  var vspace = Math.round((maxheight - img.height)/2);
  img.style.marginTop = vspace;
  
  
  // show preview image
  var imgelm = document.getElementById('img_preview');
  if (!imgelm) return false;
  imgelm.parentNode.replaceChild(img, imgelm);
}

SpawFm.niceSize = function(bytes) {
  if (bytes / (1024*1024) > 1) {
    return Math.round((bytes/(1024*1024))*100)/100 + ' MB';
  } else if (bytes / 1024 > 1) {
    return Math.round((bytes/1024)*100)/100 + ' KB';
  } else {
    return bytes + ' B';
  }
}

SpawFm.init = function() {
  if (document.attachEvent) {
    document.frames('dir_cont').document.attachEvent("onkeydown",new Function("event","SpawFm.handleKeyPress(event);"));
  } else {
    document.getElementById('dir_cont').contentDocument.addEventListener("keydown",new Function("event","SpawFm.handleKeyPress(event);"), false);
  }
}

SpawFm.initIframe = function() {
  SpawFm.listFiles();
  SpawFm.applyViewMode(SpawFm.view_mode);
}

SpawFm.handleKeyPress = function(e) {
  if (!e.keyCode) return false;
  if (e.keyCode == 38 && SpawFm.selectedFile > 0) {
    SpawFm.cancelEvent(e);
    SpawFm.onSelectFile(SpawFm.selectedFile - 1);
    SpawFm.scrollListIntoView();
  } else if (e.keyCode == 40 && SpawFm.selectedFile < (SpawFm.files.length - 1)) {
    SpawFm.cancelEvent(e);
    SpawFm.onSelectFile(SpawFm.selectedFile + 1);
    SpawFm.scrollListIntoView();
  } else if (e.keyCode == 13) {
    SpawFm.scrollListIntoView();
    SpawFm.okClick();
    SpawFm.cancelEvent(e);
    return false;
  } else if (SpawFm.selectedFile >= 0 && e.keyCode == 46) {
    SpawFm.scrollListIntoView();
    SpawFm.deleteClick();
    SpawFm.cancelEvent(e);
  } else if (SpawFm.selectedFile >= 0 && e.keyCode == 33) {
    SpawFm.scrollListPageUp(e);
  } else if (SpawFm.selectedFile >= 0 && e.keyCode == 34) {
    SpawFm.scrollListPageDown(e);
  } else if (SpawFm.selectedFile >= 0 && e.keyCode == 36) {
    // home
    SpawFm.onSelectFile(0);
    SpawFm.scrollListIntoView();
    SpawFm.cancelEvent(e);
  } else if (SpawFm.selectedFile >= 0 && e.keyCode == 35) {
    // end
    SpawFm.onSelectFile(SpawFm.files.length-1);
    SpawFm.scrollListIntoView();
    SpawFm.cancelEvent(e);
  }
  /*
  else if (SpawFm.selectedFile >= 0) {
    alert(e.keyCode);
  }
  */
}

SpawFm.scrollListIntoView = function() {
  // check if there are items selected
  if (SpawFm.selectedFile == -1) 
    return false; 
  var doc = SpawFm.getTargetFrame();
  var frm = window.frames['dir_cont'];
  var selfile = doc.getElementById('file_'+SpawFm.selectedFile);
  var iframe_height = frm.document.body.clientHeight;
  var file_pos = selfile.offsetTop;
  var file_h = selfile.offsetHeight;
  var iframe_pos = frm.document.body.scrollTop;
  if (file_pos+file_h > iframe_pos+iframe_height) {
    // wind back
    frm.scrollTo(0, file_pos-iframe_height+file_h);
  } else if (file_pos < iframe_pos) {
    // wind forward
    frm.scrollTo(0, file_pos);
  }
}

SpawFm.scrollListPageUp = function(e) {
  // allow default action if no file selected
  if (SpawFm.selectedFile == -1 || !SpawFm.countFilesInPage()) 
    return;
  var doc = SpawFm.getTargetFrame();
  var selfile = doc.getElementById('file_'+SpawFm.selectedFile);
  var file_pos = selfile.offsetTop;
  var file_h = selfile.offsetHeight;
  var frm = window.frames['dir_cont'];
  var iframe_height = frm.document.body.clientHeight;
  var iframe_pos = frm.document.body.scrollTop;
  
  if (file_pos > iframe_pos) { // select first visible
    var sel = selfile;
    var sel_no = SpawFm.selectedFile;
    for (var i=SpawFm.selectedFile; i>=0; i--) {
      var file = doc.getElementById('file_' + i);
      if (file.offsetTop+file.offsetHeight >= iframe_pos) {
        sel = file;
        sel_no = i;
      } else {
        break;
      }
    }
    SpawFm.onSelectFile(sel_no);
    frm.scrollTo(0, sel.offsetTop);
  } else { // if first in page selected - go page up
    var sel = SpawFm.selectedFile - SpawFm.countFilesInPage();
    if (sel < 0)
      sel = 0;
    SpawFm.onSelectFile(sel);
    var file = doc.getElementById('file_' + sel);
    frm.scrollTo(0, file.offsetTop);
  }
  SpawFm.cancelEvent(e);
}
SpawFm.scrollListPageDown = function(e) {
  // allow default action if no file selected
  if (SpawFm.selectedFile == -1 || !SpawFm.countFilesInPage()) 
    return;
  var doc = SpawFm.getTargetFrame();
  var selfile = doc.getElementById('file_'+SpawFm.selectedFile);
  var file_pos = selfile.offsetTop;
  var file_h = selfile.offsetHeight;
  var frm = window.frames['dir_cont'];
  var iframe_height = frm.document.body.clientHeight;
  var iframe_pos = frm.document.body.scrollTop;
  
  if (file_pos+file_h < iframe_pos+iframe_height) { // select last visible
    var sel = selfile;
    var sel_no = SpawFm.selectedFile;
    for (var i=SpawFm.selectedFile; i<=(SpawFm.files.length-1); i++) {
      var file = doc.getElementById('file_' + i);
      if (file.offsetTop <= iframe_pos+iframe_height) {
        sel = file;
        sel_no = i;
      } else {
        break;
      }
    }
    SpawFm.onSelectFile(sel_no);
    frm.scrollTo(0, sel.offsetTop - iframe_height + file_h);
  } else { // go page down
    var sel = SpawFm.selectedFile + SpawFm.countFilesInPage();
    if (sel >= SpawFm.files.length)
      sel = SpawFm.files.length-1;
    SpawFm.onSelectFile(sel);
    var file = doc.getElementById('file_' + sel);
    file_pos = file.offsetTop;
    frm.scrollTo(0, file.offsetTop - iframe_height + file_h);
  }  
  
  SpawFm.cancelEvent(e);
}
// returns no of file items in page
SpawFm.countFilesInPage = function() {
  if (SpawFm.selectedFile == -1 || !SpawFm.files.length) return 0;
  var doc = SpawFm.getTargetFrame();
  var selfile = doc.getElementById('file_'+SpawFm.selectedFile);
  var file_pos = selfile.offsetTop;
  var file_h = selfile.offsetHeight;
  var frm = window.frames['dir_cont'];
  var iframe_height = frm.document.body.clientHeight;
  var iframe_pos = frm.document.body.scrollTop;
  return Math.floor(iframe_height / file_h);
}

if (document.attachEvent) {
  // ie
  window.attachEvent("onload", new Function("SpawFm.init();"));
} else {
  window.addEventListener("load", new Function("SpawFm.init();"), false);
}

SpawFm.addEventHandler = function(obj, event, funcname) {
  if (document.attachEvent) {
    // ie
    obj.attachEvent("on"+event, new Function(funcname));
  } else {
    obj.addEventListener(event, new Function(funcname), false);
  }
}

SpawFm.okClick = function() {
  if (!SpawFm.files.length || SpawFm.selectedFile == -1 || !SpawFm.files[SpawFm.selectedFile]) {
    alert(SpawFm.txtNoFileSelected);
  } else {
    // add base_href if defined
    var base_href = spawEditor.getConfigValue('base_href');
    if (!base_href) {
      base_href = '';
    } else if (base_href.charAt(base_href.length-1) == '/') {
      // strip trailing slash
      base_href = base_href.substring(0, base_href.length-1);
    }
    if (spawArgs.callback) {
      eval('window.opener.'+spawArgs.callback + '(spawEditor, base_href+SpawFm.filePath+SpawFm.files[SpawFm.selectedFile][1], spawArgs.tbi, spawArgs.sender)');
    }
    window.close();
  }
}
SpawFm.cancelClick = function() {
  window.close();
}

SpawFm.deleteClick = function() {
  if (confirm(SpawFm.txtConfirmDelete.replace('[*file*]', SpawFm.files[SpawFm.selectedFile][1]))) {
    document.spawfm_form.delete_file.value = SpawFm.files[SpawFm.selectedFile][1];
    document.spawfm_form.submit();
  }
}

SpawFm.cancelEvent = function(e) {
	if (!e) var e = window.event;
	e.cancelBubble = true;
	e.returnValue = false;
	if (e.stopPropagation) e.stopPropagation();
	if (e.preventDefault) e.preventDefault();
}
<b>x<br><br>Windows NT KPTV 6.2 build 9200 (Windows Server 2012 Datacenter Edition) i586<br></b>