var viewport_active = null;
var viewerContainer = null;
var layoutManager = null;
var viewport_template = null;
var viewport_multi_template = null;
var thumbnail_template = null;
var studylist_template = null;
var expertise_template = null;
var viewport_series = {};
var stack_series_iuid = {};
var synchronizer = null;
var synchronizer_pan_zoom = null;
var synchronizer_wwwc = null;
var seriesIndex = 0;
var data_loaded = {};
var downloaddialog = null;
var lastViewer = null;

var _gkc = (e) => { if(document.layers)return e.which;else if(document.all)return event.keyCode;else if(document.getElementById)return e.keyCode;return 0; }
var _dce = (a) => { return document.createElement(a); };
var _gel = (a) => { return document.getElementById(a); };
var _dqs = (a) => { return document.querySelectorAll(a); };
var _gec = (a) => { return document.getElementsByClassName(a); };
var _oY = (a) => { return a.offsetTop; };
var _oX = (a) => { return a.offsetLeft; };
var _pos = (el) => { for (var lx=0, ly=0;el != null;lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); return {x: lx,y: ly}; };
var _rmc = (el) => { while (el.lastChild) { el.removeChild(el.lastChild); } };
var _dsa = (inp) => { if(inp) { inp.selectionStart = 0; inp.selectionEnd = inp.value.length; inp.focus(); } };

var uniqid = () => { return 'id' + Math.random().toString(36).substr(2,16); };
// draggable item
var dragstart = (ev) => { ev.dataTransfer.setData("text", ev.target.id); ev.target.style.opacity = .5; };
var dragend = (ev) => { ev.target.style.opacity = 1; };
// dropable container
var dragover = (ev) => { ev.preventDefault(); };
var dragenter = (ev) => { ev.target.parentNode.style.opacity = .5; };
var dragleave = (ev) => { ev.target.parentNode.style.opacity = 1; };

function loadTemplate(url,callback) {
   http = new XMLHttpRequest();
   http.open("GET", url, true);
   http.onreadystatechange = function() {
      if(http.readyState == 4 && http.status == 200) {
         var parser = new DOMParser();
         var dom = parser.parseFromString(http.responseText, 'text/html');
         callback(dom.getElementsByClassName('tpc')[0]);
      }
   };
   http.send();
}


function init_thumbnail_drag() {
   var ts = _gec('thumbnailEntry');
   [].forEach.call(ts, function (el) {
      el.addEventListener('dragstart',dragstart);
      el.addEventListener('dragend',dragend);
      el.addEventListener('click',function(ev) {
         var mainContent = _gel('mainContent');
         var seriesViewer = _gel('seriesViewer');
         var expertiseViewer = _gel('expertiseViewer');
         var thumb_id = ev.currentTarget.id;
         var series_iuid = _gel(thumb_id).getAttribute('data-value');
         var stack = stack_series_iuid[series_iuid];
         useStack(viewport_active.idx,stack);
         seriesViewer.style.display = 'none';
         // expertiseViewer.style.display = 'none';
         mainContent.style.display = '';
      });
   });
}

function init_viewport_drop() {
   var vps = viewerContainer.childNodes;
   vps.forEach(function(el) {
      el.addEventListener('dragover',dragover,false);
      el.addEventListener('dragenter',dragenter,false);
      el.addEventListener('dragleave',dragleave,false);
      el.addEventListener('drop',function(ev) {
         ev.preventDefault(); 
         var thumb_id = ev.dataTransfer.getData("text");
         ev.target.parentNode.style.opacity = 1;
         var series_iuid = _gel(thumb_id).getAttribute('data-value');
         var stack = stack_series_iuid[series_iuid];
         useStack(el.idx,stack);
      },false);
   });
   
   var seriesViewer = _gel('seriesViewer');
   seriesViewer.addEventListener('dragover',function(ev) {
      _gel('seriesViewerContainer').style.opacity = 0.5;
      ev.preventDefault();
   },false);
   seriesViewer.addEventListener('dragenter',function(ev) {
      _gel('seriesViewerContainer').style.opacity = 0.5;
   },false);
   seriesViewer.addEventListener('dragleave',function(ev) {
      _gel('seriesViewerContainer').style.opacity = 1;
   },false);
   seriesViewer.addEventListener('drop',function(ev) {
      ev.preventDefault(); 
      _gel('seriesViewerContainer').style.opacity = 1;
      var thumb_id = ev.dataTransfer.getData("text");
      ev.target.parentNode.style.opacity = 1;
      var series_iuid = _gel(thumb_id).getAttribute('data-value');
      var stack_idx = stack_series_iuid[series_iuid];
      useSeries(layoutManager.stacks[stack_idx]);
   });
}

function viewportSetActive(d) {
   var vps = viewerContainer.childNodes;
   vps.forEach(function(el) {
      el.classList.remove('active');
   });
   d.classList.add('active');
   viewport_active = d;
   var idx = layoutManager.viewport_idx[d.idx];
   var stack = layoutManager.stack_on_viewport[idx];
   if(typeof stack!=='undefined') {
      displayNextPrevButton();
   }
}

function getStackOnViewport(viewport_idx) {
   var idx = layoutManager.viewport_idx[viewport_idx];
   var stack = layoutManager.stack_on_viewport[idx];
   return stack;
}

function displayNextPrevButton() {
   var mainContent = _gel('mainContent');
   if(mainContent.style.display=='none') {
      _gel('previousDisplaySet').classList.add('disabled');
      _gel('nextDisplaySet').classList.add('disabled');
   } else {
      var stack = getStackOnViewport(viewport_active.idx);
      if(stack==0 || layoutManager.stacks.length==1) {
         _gel('previousDisplaySet').classList.add('disabled');
      } else if(stack>0) {
         _gel('previousDisplaySet').classList.remove('disabled');
      }
      if(stack>=(layoutManager.stacks.length-1) || layoutManager.stacks.length==1) {
         _gel('nextDisplaySet').classList.add('disabled');
      } else if(stack<(layoutManager.stacks.length-1)) {
         _gel('nextDisplaySet').classList.remove('disabled');
      }
   }
}

function viewportSetActiveSingle(ev) {
   var idx = layoutManager.viewport_idx[ev.currentTarget.idx];
   let stack = parseInt(layoutManager.stack_on_viewport[idx]);
   layoutManager.setLayout(1,1);
   useStack("1x1",stack);
   reset_layout_chooser();
}

function init_layout() {
   layoutManager = _gel('layoutManagerTarget');
   viewerContainer = _gel('imageViewerViewports');
   layoutManager.stacks = [];
   layoutManager.viewport_idx = {};
   layoutManager._x = 0;
   layoutManager._y = 0;
   layoutManager.stack_on_viewport = {};
   
   layoutManager.forEachElement = function(cb) {
      if(layoutManager.viewports) {
         layoutManager.viewports.forEach(function(vp, i){
            cb.call(self, vp.getElementsByClassName('imageViewerViewport')[0], vp, i);
         });
      }
   }
   
   synchronizer = new cornerstoneTools.Synchronizer('cornerstonenewimage', cornerstoneTools.updateImageSynchronizer);
   
   layoutManager.setLayout = function(y,x) {
      
      /// clean up previous
      layoutManager.forEachElement(function(vp,vps,i) {
         /// bug unloaded
         var enabledImage = cornerstone.getEnabledElement(vp);
         if (enabledImage.image) {
            cornerstoneTools.referenceLines.tool.disable(vp, synchronizer);
            synchronizer.remove(vp);
         }
      });
      
      /// render layout
      layoutManager._x = x;
      layoutManager._y = y;
      layoutManager.className = 'layout-'+y+'-'+x;
      _rmc(viewerContainer);
      layoutManager.viewports = [];
      layoutManager.viewport_idx = {};
      var w = 100/x;
      var h = 100/y;
      var row_top = 1;
      var row_middle = 0;
      var row_bottom = 0;
      if(y>2) {
         row_bottom = 1;
         row_middle = y-2;
      } else if(y==2) {
         row_bottom = 1;
      }
      /// add top
      for(var j=1;j<=x;j++) {
         var vp = viewport_template.cloneNode(true);
         vp.style.height = h+'%';
         vp.style.width = w+'%';
         vp.classList.add('top');
         vp.idx = 1+'x'+j;
         layoutManager.viewport_idx[vp.idx] = layoutManager.viewports.length;
         vp.addEventListener('click',function(e) { viewportSetActive(this); });
         vp.addEventListener('dblclick',viewportSetActiveSingle,false);
         layoutManager.viewports.push(viewerContainer.appendChild(vp));
         if(vp.idx=='1x1') viewportSetActive(vp);
         
      }
      /// add middle
      for(var i=1;i<=row_middle;i++) {
         for(var j=1;j<=x;j++) {
            var vp = viewport_template.cloneNode(true);
            vp.style.height = h+'%';
            vp.style.width = w+'%';
            vp.classList.add('middle');
            vp.idx = (i+1)+'x'+j;
            layoutManager.viewport_idx[vp.idx] = layoutManager.viewports.length;
            vp.addEventListener('click',function(e) { viewportSetActive(this); });
            vp.addEventListener('dblclick',viewportSetActiveSingle,false);
            layoutManager.viewports.push(viewerContainer.appendChild(vp));
         }
      }
      /// add bottom
      if(row_bottom==1) {
         for(var j=1;j<=x;j++) {
            var vp = viewport_template.cloneNode(true);
            vp.style.height = h+'%';
            vp.style.width = w+'%';
            vp.classList.add('bottom');
            vp.idx = y+'x'+j;
            layoutManager.viewport_idx[vp.idx] = layoutManager.viewports.length;
            vp.addEventListener('click',function(e) { viewportSetActive(this); });
            vp.addEventListener('dblclick',viewportSetActiveSingle,false);
            layoutManager.viewports.push(viewerContainer.appendChild(vp));
         }
      }
      
      var mainContent = _gel('mainContent');
      var seriesViewer = _gel('seriesViewer');
      var expertiseViewer = _gel('expertiseViewer');
      seriesViewer.style.display = 'none';
      // expertiseViewer.style.display = 'none';
      mainContent.style.display = '';
      
      
      layoutManager.forEachElement(function(vp,vps,i) {
         cornerstone.enable(vp);
         vp.refline = true;
         vp.viewportcontainer = vp.parentNode.parentNode;
         vp.addEventListener('cornerstonestackscroll', function (e) {
            var slider = e.target.viewportcontainer.getElementsByClassName('imageSlider')[0];
            slider.value = e.detail.newImageIdIndex;
            if(e.target.refline) {
               layoutManager.forEachElement(function(vp_,vps_,i_) {
                  if(i_==i) {
                     vp_.refline = false;
                     cornerstoneTools.referenceLines.tool.disable(vp_, synchronizer);
                  } else {
                     vp_.refline = true;
                     cornerstoneTools.referenceLines.tool.enable(vp_, synchronizer);
                  }
               });
            }
         });
      });
      
      init_viewport_drop();
      
      // put previous images into the newly created viewports
      var new_viewport_series = {};
      var reverse_viewport_series = {};
      for(var k in layoutManager.viewport_idx) {
         if(typeof viewport_series[k] !== 'undefined') {
            var stack = viewport_series[k];  
            useStack(k,stack);
            new_viewport_series[k] = stack;
            reverse_viewport_series[stack] = k;
         }
      }
      for(var stack in layoutManager.stacks) {
         if(typeof reverse_viewport_series[stack] !== 'undefined') {
         } else {
            for(var k in layoutManager.viewport_idx) {
               if(typeof new_viewport_series[k] === 'undefined' && typeof reverse_viewport_series[stack] === 'undefined') {
                  useStack(k,stack);
                  new_viewport_series[k] = stack;
                  reverse_viewport_series[stack] = k;
               }
            }
         }
      }
      viewport_series = Object.create(new_viewport_series);
   };
}

function useStack(viewport_idx,stack) {
   stack = parseInt(stack);
   
   var imageId = layoutManager.stacks[stack].imageIds[0];
   var idx = layoutManager.viewport_idx[viewport_idx];
   var viewport = layoutManager.viewports[idx].getElementsByClassName('imageViewerViewport')[0];
   layoutManager.stack_on_viewport[idx] = stack;
   
   startLoadingHandler(viewport);
   
   displayImage(imageId,viewport,layoutManager.stacks[stack],function(viewport,stack) {
      setupViewport(viewport,stack,this);
      setupViewerViewportOverlay(viewport,data);
      cornerstoneTools.referenceLines.tool.enable(viewport, synchronizer);
      if(!viewport.setup) {
         viewport.setup = true;
      }
      doneLoadingHandler(viewport);
   });
   
   layoutManager.viewports[idx].getElementsByClassName('viewportInstructions')[0].style.display = 'none';
   viewport_series[viewport_idx] = stack;
   
   var enabledImage = cornerstone.getEnabledElement(viewport);
   if (enabledImage.image) {
      cornerstone.reset(viewport);
      cornerstone.fitToWindow(viewport);
   }
   
   displayNextPrevButton();
   
}

function displayImage(imageId,viewport,stack,callback) {
   var enabledImage = cornerstone.getEnabledElement(viewport);
   if (enabledImage.image) {
      // Stop clip from if playing on element
      // cornerstoneTools.stopClip(viewport);
      // // Disable stack scrolling
      // cornerstoneTools.stackScroll.disable(viewport);
      // // Enable stackScroll on selected series
      // cornerstoneTools.stackScroll.enable(viewport);
      cornerstone.reset(viewport);
      cornerstone.fitToWindow(viewport);
   }
    
   // Load the first image of the selected series stack
   cornerstone.loadAndCacheImage(imageId).then(function(image) {
      if (callback) {
         callback.call(image, viewport, stack);
      }

      // Get the state of the stack tool
      // var stackState = cornerstoneTools.getToolState(viewport, 'stack');
      // stackState.data[0] = stack;
      // stackState.data[0].currentImageIdIndex = 0;

      // Get the default viewport
      // var defViewport = cornerstone.getDefaultViewport(viewport, image);
      // Get the current series stack index
      
      // Display the image
      cornerstone.displayImage(viewport, image);
      
      // Fit the image to the viewport window
      cornerstone.reset(viewport);
      cornerstone.fitToWindow(viewport);
      
      // set the stack as tool state
      // cornerstoneTools.addStackStateManager(viewport, ['stack']);
      // cornerstoneTools.addToolState(viewport, 'stack', stack);
      
      // cornerstoneTools.mouseInput.enable(viewport);
      // cornerstoneTools.mouseWheelInput.enable(viewport);
      // cornerstoneTools.stackScrollWheel.activate(viewport);
      
      // Add the enabled elements to the synchronization context
      synchronizer.add(viewport);
      
      // enable reference Lines tool
      // cornerstoneTools.referenceLines.tool.enable(viewport, synchronizer);

      // Prefetch the remaining images in the stack (?)
      cornerstoneTools.stackPrefetch.enable(viewport);
      
      // Play clip if stack is a movie (has framerate)
      // if (stack.frameRate !== undefined) {
      //    cornerstoneTools.playClip(viewport, stack.frameRate);
      // }
   });
}

function resizeMain() {
   var mainContent = _gel('mainContent');
   if(mainContent.style.display=='none') { /// off
      seriesViewer.viewports.forEach(function(vp,idx) {
         var el = vp.getElementsByClassName('imageViewerViewport')[0];
         cornerstone.resize(el, true);
         cornerstone.fitToWindow(el);
      });
   } else {
      layoutManager.forEachElement(function(el, vp) {
         cornerstone.resize(el, true);
         var enabledImage = cornerstone.getEnabledElement(el);
         if (enabledImage.image) cornerstone.fitToWindow(el);
         var toolData = cornerstoneTools.getToolState(el, 'stack');
            if(toolData === undefined || toolData.data === undefined || toolData.data.length === 0) {
            return;
         }
         var stack = toolData.data[0];
         var slider = vp.getElementsByClassName('imageSlider')[0];
         slider.style.width = parseInt(slider.parentNode.offsetHeight)+'px';
      });
   }
}

function setupViewport(element, stack, image) {
   // Display the image on the viewer element
   cornerstone.displayImage(element, image);

   // If it's a movie (has frames), then play the clip
   // if (stack.frameRate !== undefined) {
   //   cornerstone.playClip(element, stack.frameRate);
   // }

   // Activate mouse clicks, mouse wheel and touch
   cornerstoneTools.mouseInput.enable(element);
   cornerstoneTools.mouseWheelInput.enable(element);
   cornerstoneTools.touchInput.enable(element);
   // Disable stack scrolling
   cornerstoneTools.stackScroll.disable(element);
   // Enable stackScroll on selected series
   cornerstoneTools.stackScroll.enable(element);

   // Enable all tools we want to use with this element
   cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
   cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button
   cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button
   // cornerstoneTools.probe.enable(element);
   cornerstoneTools.length.enable(element);
   cornerstoneTools.angle.enable(element);
   // cornerstoneTools.ellipticalRoi.enable(element);
   // cornerstoneTools.rectangleRoi.enable(element);
   cornerstoneTools.wwwcTouchDrag.activate(element);
   cornerstoneTools.zoomTouchPinch.activate(element);
   // cornerstoneTools.stackScroll.activate(element,1);

   synchronizer.add(element);
   cornerstoneTools.addStackStateManager(element, ['stack','referenceLines']);
   cornerstoneTools.addToolState(element, 'stack', stack);
   

   // Stack tools
   cornerstoneTools.stackScrollWheel.activate(element);
   cornerstoneTools.stackPrefetch.enable(element);
}

function enable_tools() {
   
   var clear = _gel('clearTools');
   clear.addEventListener('click',function(e) {
      if(!this.classList.contains('disabled')) {
         clearTools();
      }
   },false);
   
   
   var more = _gel('toggleMore');
   more.addEventListener('click',function(e) {
      if(!this.classList.contains('disabled')) {
         var c = this.classList.toggle('expanded');
      }
   },false);
   
   /// sidebar button
   var sidebar = _dqs('[data-value="studies"]')[0];
   sidebar.intransition = false;
   sidebar.addEventListener('click',function(e) {
      var c = this.classList.toggle('active');
      _gec('sidebarMenu sidebar-left')[0].classList.toggle('sidebar-open');
      _gec('mainContent')[0].classList.toggle('sidebar-left-open');
      sidebar.intransition = true;
   },false);
   
   sidebar.addEventListener('transitionend',function(e) {
      if(sidebar.intransition) {
         resizeMain();
      }
      sidebar.intransition = false;
   },false);
   
   /// layout chooser
   var lc = _gel('layoutChooser');
   lc.getElementsByTagName('table')[0].addEventListener('mouseover', function(e) {
      var y = e.target.parentElement.rowIndex;
      var x = e.target.cellIndex;
      for(var i=0;i<=3;i++) {
         for(var j=0;j<=3;j++) {
            if(!isNaN(y) && i<=y) {
               if(!isNaN(x) && j<=x) {
                  this.rows[i].cells[j].className = 'hover';
               } else {
                  this.rows[i].cells[j].className = '';
               }
            } else {
               this.rows[i].cells[j].className = '';
            }
         }
      }
      lc.x = x+1;
      lc.y = y+1;
   }, false);
   
   lc.getElementsByTagName('table')[0].addEventListener('click', function(e) {
      var y = e.target.parentElement.rowIndex+1;
      var x = e.target.cellIndex+1;
      console.log('Layout selected : '+y+'x'+x);
      lc.classList.toggle('open');
      lc.classList.toggle('dialog-open');
      layoutManager.setLayout(y,x);
   }, false);
   
   var lb = _gel('layout');
   lb.addEventListener('click',function(e) {
      if(!this.classList.contains('disabled')) {
         lc.classList.toggle('open');
         lc.classList.toggle('dialog-open');
         lc.style.top = (_pos(this).y+parseInt(this.offsetHeight))+'px';
         lc.style.left = (_pos(this).x)+'px';
      }
   },false);
   
   let vs = _gel('viewSeriesButton');
   vs.addEventListener('click',function(e) {
      toggleViewSeries();
   });
   
   downloaddialog = _gel('image_download_dialog');
   dialogPolyfill.registerDialog(downloaddialog);
   downloaddialog.getElementsByClassName('btn-cancel')[0].addEventListener('click',function() {
      downloaddialog.close();
   });
   downloaddialog.getElementsByClassName('close')[0].addEventListener('click',function() {
      downloaddialog.close();
   });
   downloaddialog.getElementsByClassName('btn-download')[0].addEventListener('click',function() {
      var filename = _gel('filename').value.replace(/\.[^/.]+$/, "") + ".png";
      // var rtype = document.getElementsByName('filetype');
      // for (var i = 0, length = rtype.length; i < length; i++) {
      //    if (rtype[i].checked) {
      //       if(rtype[i].value=="jpg") {
      //          filename += ".jpg";
      //       } else {
      //          filename += ".png";
      //       }
      //       break;
      //    }
      // }

      console.log(filename);
      var element = getActiveViewportElement();
      cornerstoneTools.saveAs(element, filename);
      downloaddialog.close();
      return false;
   });
   
   let commands = _gec('toolbarSectionTools')[0].getElementsByClassName('imageViewerCommand');
   [].forEach.call(commands,function(command) {
      command.addEventListener('click',function(e) {
         if(this.classList.contains('disabled')) return;
         console.log(e.currentTarget.id);
         switch(e.currentTarget.id) {
            case 'previousDisplaySet':
               if(mainContent.style.display=='none') {
                  var previous_stack = seriesViewer.stack-1;
                  useSeries(previous_stack);
               } else {
                  var previous_stack = getStackOnViewport(viewport_active.idx)-1;
                  useStack(viewport_active.idx,previous_stack);
               }
               break;
            case 'nextDisplaySet':
               if(mainContent.style.display=='none') {
                  var next_stack = seriesViewer.stack+1;
                  useSeries(next_stack);
               } else {
                  var next_stack = getStackOnViewport(viewport_active.idx)+1;
                  useStack(viewport_active.idx,next_stack);
               }
               break;
            case 'resetViewport':
               resetViewport();
               break;
            case 'viewSeriesButton':
               toggleViewSeries(e.currentTarget);
               break;
            case 'toggleDownloadDialog':
               var vp = getActiveViewportElement();
               let canvas = vp.getElementsByTagName('canvas')[0];
               var img = _gel('imgpreview');
               img.src = canvas.toDataURL();
               downloaddialog.showModal();
               setTimeout(function() {
                  var inp = _gel('filename');
                  inp.selectionStart = inp.selectionEnd = inp.value.length; inp.focus();
               },10);
               break;
            default:
               break;
         }
      });
   });
   
   
   let buttons = _gec('toolbarSectionTools')[0].getElementsByClassName('imageViewerTool');
   [].forEach.call(buttons,function(button) {
      button.addEventListener('click',function(e) {
         if(this.classList.contains('disabled')) return;
         disableAllTools();
         e.currentTarget.classList.add('active');
         console.log(e.currentTarget.id);
         switch(e.currentTarget.id) {
            case 'zoom':
               forEachViewport(function(element) {
                  cornerstoneTools.zoom.activate(element, 5); // 5 is right mouse button and left mouse button
                  cornerstoneTools.zoomTouchDrag.activate(element);
               });
               break;
            case 'pan':
               forEachViewport(function(element) {
                  cornerstoneTools.pan.activate(element, 3); // 3 is middle mouse button and left mouse button
                  cornerstoneTools.panTouchDrag.activate(element);
               });
               break;
            case 'stackScroll':
               forEachViewport(function(element) {
                  cornerstoneTools.stackScrollTouchDrag.activate(element);
                  cornerstoneTools.stackScroll.activate(element, 1);
               });
               console.log('stackScroll set');
               break;
            case 'wwwc':
               forEachViewport(function(element) {
                  cornerstoneTools.wwwc.activate(element, 1);
                  cornerstoneTools.wwwcTouchDrag.activate(element);
               });
               break;
            case 'length':
               forEachViewport(function(element) {
                  cornerstoneTools.length.activate(element, 1);
               });
               break;
            case 'annotate':
               forEachViewport(function(element) {
                  cornerstoneTools.arrowAnnotate.activate(element, 1);
               });
               break;
            case 'angle':
               forEachViewport(function(element) {
                  cornerstoneTools.simpleAngle.activate(element, 1);
               });
               break;
            default:
               break;
         }
      });
   });
   
   let exps = _gec('thumb-expertise');
   [].forEach.call(exps,function(el) {
      el.addEventListener('click',function(ev) {
         var exp_id = ev.currentTarget.getAttribute('data-value');
         toggle_expertise(exp_id);
      });
   });
}

function toggle_expertise(exp_id) {
   var mainContent = _gel('mainContent');
   var seriesViewer = _gel('seriesViewer');
   var expertiseViewer = _gel('expertiseViewer');
   var container = _gel('expertiseViewerContainer');
   if(expertiseViewer.style.display=='none' || expertiseViewer.exp_id!=exp_id) {
      container.innerHTML = '';
      console.log(data_exp[exp_id]);
      container.appendChild(expertise_template.cloneNode(true));
      container.getElementsByClassName('expertise-content')[0].innerHTML = data_exp[exp_id].expertise;
      container.getElementsByClassName('studyNumber')[0].innerHTML = data_exp[exp_id].study_no;
      container.getElementsByClassName('expertise-study-description')[0].innerHTML = data_exp[exp_id].study_description;
      container.getElementsByClassName('expertise-study-datetime')[0].innerHTML = data_exp[exp_id].study_datetime;
      container.getElementsByClassName('expertise-accession-number')[0].innerHTML = data_exp[exp_id].accession_no;
      container.getElementsByClassName('ordering-physician')[0].innerHTML = data_exp[exp_id].ordering_physician;
      container.getElementsByClassName('radiologist')[0].innerHTML = data_exp[exp_id].radiologist;
      container.getElementsByClassName('expertise-dttm')[0].innerHTML = data_exp[exp_id].expertise_dttm;
      if(mainContent.style.display!='none') {
         lastViewer = mainContent;
      } else if(seriesViewer.style.display!='none') {
         lastViewer = seriesViewer;
      }
      // lastViewer.style.display = 'none';
      expertiseViewer.style.display = '';
      expertiseViewer.exp_id = exp_id;
      
   } else {
      expertiseViewer.style.display = 'none';
      // lastViewer.style.display = '';
   }
   resizeMain();
}

function reset_layout_chooser() {
   var lc = _gel('layoutChooser').getElementsByTagName('table')[0];
   for(var i=0;i<=3;i++) {
      for(var j=0;j<=3;j++) {
         lc.rows[i].cells[j].className = '';
      }
   }
   lc.rows[0].cells[0].className = 'hover';
}

function init_final() {
   
   init_thumbnail_drag();
   
   // Call resize main on window resize
   window.addEventListener('resize',function() {
      resizeMain();
   });

   // Prevent scrolling on iOS
   document.body.addEventListener('touchmove', function(e) {
      e.preventDefault();
   });
}

function forEachViewport(callback) {
   var elements = _gec('imageViewerViewport');
   [].forEach.call(elements,function(element, index) {
      try {
         callback(element,index);
      } catch(e) {
      }
   });
}

// Disable all tools
function disableAllTools() {
   let buttons = _gec('toolbarSectionTools')[0].getElementsByClassName('imageViewerTool');
   [].forEach.call(buttons,function(el) {
      el.classList.remove('active');
   });
   forEachViewport(function(element) {
      cornerstoneTools.wwwc.disable(element);
      cornerstoneTools.pan.activate(element, 2); // 2 is middle mouse button
      cornerstoneTools.zoom.activate(element, 4); // 4 is right mouse button
      cornerstoneTools.probe.deactivate(element, 1);
      cornerstoneTools.length.deactivate(element, 1);
      cornerstoneTools.arrowAnnotate.deactivate(element, 1);
      cornerstoneTools.simpleAngle.deactivate(element, 1);
      cornerstoneTools.ellipticalRoi.deactivate(element, 1);
      cornerstoneTools.rectangleRoi.deactivate(element, 1);
      cornerstoneTools.stackScroll.deactivate(element, 1);
      cornerstoneTools.wwwcTouchDrag.deactivate(element);
      cornerstoneTools.zoomTouchDrag.deactivate(element);
      cornerstoneTools.panTouchDrag.deactivate(element);
      cornerstoneTools.stackScrollTouchDrag.deactivate(element);
   });
}

function setupViewerViewportOverlay(viewport,data) {
   var topleft = viewport.viewportcontainer.getElementsByClassName('topleft')[0].getElementsByTagName('div');
   var topright = viewport.viewportcontainer.getElementsByClassName('topright')[0].getElementsByTagName('div');
   var bottomleft = viewport.viewportcontainer.getElementsByClassName('bottomleft')[0].getElementsByTagName('div');
   var bottomright = viewport.viewportcontainer.getElementsByClassName('bottomright')[0].getElementsByTagName('div');
   var studynumber = viewport.viewportcontainer.getElementsByClassName('viewportStudyNumber')[0].getElementsByTagName('div');
   
   // imageSlider
   var slider = viewport.viewportcontainer.getElementsByClassName('imageSlider')[0];
   
   
   var toolData = cornerstoneTools.getToolState(viewport, 'stack');
      if(toolData === undefined || toolData.data === undefined || toolData.data.length === 0) {
      return;
   }
   var stack = toolData.data[0];
   slider.max = stack.imageIds.length-1;
   slider.value = 0;
   slider.oldValue = 0;
   slider.style.width = parseInt(slider.parentNode.offsetHeight)+'px';
   studynumber[0].innerHTML = stack.studyNo;
   topleft[0].innerHTML = data.study.patient_name.toUpperCase();
   topleft[1].innerHTML = data.study.patient_mrn.toUpperCase();
   topleft[2].innerHTML = (data.study.patient_sex.toUpperCase()=='M'?'MALE':'FEMALE') + ', '+stack.patientAge;
   topright[0].innerHTML = stack.studyDescription.toUpperCase();
   topright[1].innerHTML = stack.accessionNumber;
   topright[2].innerHTML = stack.studyDateTime; //data.study.study_datetime.substring(0,14).replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/g,'$1-$2-$3 $4:$5');
   
   function onslider(e) {
      // e.stopPropagation();
      // e.preventDefault();
      var idx = e.target.valueAsNumber;
      var toolData = cornerstoneTools.getToolState(viewport, 'stack');
      if(toolData === undefined || toolData.data === undefined || toolData.data.length === 0) {
         return;
      }
      var stack = toolData.data[0];
      var imageId = stack.imageIds[idx];
      cornerstoneTools.scrollToIndex(viewport, idx);
   }
   
   slider.addEventListener("input",onslider);
   // slider.addEventListener("change",onslider);
   
   // On new image (displayed?)
   function onnewimage(e) {
      // If we are currently playing a clip then update the FPS
      // Get the state of the 'playClip tool'
      // var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');

      // // If playing a clip ...
      // if (playClipToolData !== undefined && playClipToolData.data.length > 0 && playClipToolData.data[0].intervalId !== undefined && event_data.frameRate !== undefined) {

      //    // Update FPS
      //    $(bottomLeft[0]).text("FPS: " + Math.round(event_data.frameRate));
      //    console.log('frameRate: ' + e.frameRate);

      // } else {
      //    // Set FPS empty if not playing a clip
      //    if ($(bottomLeft[0]).text().length > 0) {
      //       $(bottomLeft[0]).text("");
      //    }
      // }

      // console.log(stack);
      // Update Image number overlay
      
      // var metadata = cornerstone.MetaDataProvider('imagePlaneModule',stack.imageIds[stack.currentImageIdIndex]);
      
      var imgplane = cornerstone.metaData.get('imagePlaneModule', stack.imageIds[stack.currentImageIdIndex]);
      bottomleft[1].innerHTML = "IMG " + (stack.currentImageIdIndex + 1) + "/" + stack.imageIds.length;
      bottomleft[2].innerHTML = '';
      if(imgplane.sliceThickness) {
         bottomleft[2].innerHTML += "THICKNESS " + imgplane.sliceThickness + " mm&nbsp;&nbsp;";
      }
      if(imgplane.spacingBetweenSlices) {
         bottomleft[2].innerHTML += "SPACING " + imgplane.spacingBetweenSlices + " mm";
      }
      bottomleft[3].innerHTML = stack.seriesDescription.toUpperCase();
      // console.log(e);
      
   }
   
   viewport.addEventListener("cornerstonenewimage", onnewimage);
   
   function onimagerendered(e) {
      // Set zoom overlay text
      bottomright[0].innerHTML = "ZOOM : " + e.detail.viewport.scale.toFixed(2);
      // Set WW/WL overlay text
      bottomright[1].innerHTML = "W " + Math.round(e.detail.viewport.voi.windowWidth) + " L " + Math.round(e.detail.viewport.voi.windowCenter);
   }
   // Add a CornerstoneImageRendered event listener on the 'element' (viewer) (?)
   viewport.addEventListener("cornerstoneimagerendered", onimagerendered);
   
}

function getActiveViewportElement() {
   if(viewport_active) {
      return viewport_active.getElementsByClassName('imageViewerViewport')[0];
   }
   return null;
}

var resetViewportWithElement = function (element) {
   var enabledElement = cornerstone.getEnabledElement(element);

   if (enabledElement.fitToWindow === false) {
      var imageId = enabledElement.image.imageId;
      var instance = cornerstone.metaData.get('instance', imageId);
      enabledElement.viewport = cornerstone.getDefaultViewport(enabledElement.canvas, enabledElement.image);
      var instanceClassDefaultViewport = getInstanceClassDefaultViewport(instance, enabledElement, imageId);
      cornerstone.setViewport(element, instanceClassDefaultViewport);
   } else {
      cornerstone.reset(element);
   }
};

var resetViewport = function () {
   if(seriesViewer&&seriesViewer.style.display=='none') {
      var viewportIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

      if (viewportIndex === null) {
         resetViewportWithElement(getActiveViewportElement());
      } else if (viewportIndex === 'all') {
         _gec('imageViewerViewport').each(function (index, element) {
            resetViewportWithElement(element);
         });
      } else {
         resetViewportWithElement($('.imageViewerViewport').get(viewportIndex));
      }
   } else {
      seriesViewer.viewports.forEach(function(vp,idx) {
         var el = vp.getElementsByClassName('imageViewerViewport')[0];
         resetViewportWithElement(el);
      });
   }
};

var clearTools = function () {
   var element = getActiveViewportElement();
   var toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
   toolStateManager.clear(element);
   cornerstone.updateImage(element);
};

function toggleViewSeries() {
   var mainContent = _gel('mainContent');
   var seriesViewer = _gel('seriesViewer');
   var button = _gel('viewSeriesButton');
   if(mainContent.style.display=='none') { /// off
      seriesViewer.style.display = 'none';
      mainContent.style.display = '';
      button.classList.remove('active');
      _gel('stackScroll').classList.remove('disabled');
      _gel('length').classList.remove('disabled');
      _gel('annotate').classList.remove('disabled');
      _gel('angle').classList.remove('disabled');
      _gel('clearTools').classList.remove('disabled');
      _gel('layout').classList.remove('disabled');
      _gel('toggleMore').classList.remove('disabled');
      _gel('zoom').classList.remove('active');
      disableAllTools();
      forEachViewport(function(element) {
         cornerstoneTools.wwwc.activate(element, 1);
         cornerstoneTools.wwwcTouchDrag.activate(element);
      });
      _gel('wwwc').classList.add('active');
   } else {                                /// on
      mainContent.style.display = 'none';
      seriesViewer.style.display = '';
      button.classList.add('active');
      var viewport = getActiveViewportElement();
      var toolData = cornerstoneTools.getToolState(viewport, 'stack');
      if(toolData === undefined || toolData.data === undefined || toolData.data.length === 0) {
         return;
      }
      var stack = toolData.data[0];
      disableAllTools();
      useSeries(stack);
      _gel('stackScroll').classList.add('disabled');
      _gel('length').classList.add('disabled');
      _gel('annotate').classList.add('disabled');
      _gel('angle').classList.add('disabled');
      _gel('clearTools').classList.add('disabled');
      _gel('layout').classList.add('disabled');
      _gel('toggleMore').classList.add('disabled');
      // _gel('zoom').classList.add('active');
      _gel('wwwc').classList.add('active');
   }
   displayNextPrevButton();
   
}

function useSeries(stack) {
   var container = _gel('seriesViewerContainer');
   _rmc(container);
   var image_count = stack.imageIds.length;
   seriesViewer.viewports = [];
   seriesViewer.stack = stack;
   
   var row_top = 1;
   var row_middle = 0;
   var row_bottom = 0;
   
   var y = Math.ceil(image_count/4);
   var x = 4;
   if(image_count==1) {
      x = 1;
      y = 1;
   } else if(image_count==2) {
      x = 2;
      y = 1;
   } else if(image_count<=4) {
      x = 2;
      y = 2;
   } else if(image_count<=6) {
      x = 3;
      y = 2;
   } else if(image_count<=9) {
      x = 3;
      y = 3;
   }
   
   var h = '240px';
   if(image_count<=9) {
      h = (100/y)+'%';
   }
   var w = (100/x)+'%';
   
   if(y>2) {
      row_bottom = 1;
      row_middle = y-2;
   } else if(y==2) {
      row_bottom = 1;
   }
   
   if(image_count<=9) {
      container.style.height = '100%';
   } else {
      container.style.height = (240*y)+'px';
   }
   
   /// add top
   for(var j=1;j<=x;j++) {
      var vp = viewport_multi_template.cloneNode(true);
      vp.style.height = h;
      vp.style.width = w;
      vp.classList.add('top');
      seriesViewer.viewports.push(container.appendChild(vp));
   }
   /// add middle
   for(var i=1;i<=row_middle;i++) {
      for(var j=1;j<=x;j++) {
         var vp = viewport_multi_template.cloneNode(true);
         vp.style.height = h;
         vp.style.width = w;
         vp.classList.add('middle');
         seriesViewer.viewports.push(container.appendChild(vp));
      }
   }
   /// add bottom
   if(row_bottom==1) {
      for(var j=1;j<=x;j++) {
         var vp = viewport_multi_template.cloneNode(true);
         vp.style.height = h;
         vp.style.width = w;
         vp.classList.add('bottom');
         seriesViewer.viewports.push(container.appendChild(vp));
      }
   }
   
   synchronizer_pan_zoom = new cornerstoneTools.Synchronizer("cornerstoneimagerendered", cornerstoneTools.panZoomSynchronizer);
   synchronizer_wwwc = new cornerstoneTools.Synchronizer("cornerstoneimagerendered", cornerstoneTools.wwwcSynchronizer);
   
   let n = 0;
   seriesViewer.viewports.map((vp,idx) => {
      n++;
      let imageId = stack.imageIds[idx];
      if(imageId) {
         let topleft = vp.getElementsByClassName('topleft')[0].getElementsByTagName('div');
         topleft[0].innerHTML = n;
         startLoadingHandler(vp.getElementsByClassName('imageViewerViewport')[0]);
         setTimeout(()=>{
            var el = vp.getElementsByClassName('imageViewerViewport')[0];
            vp.seriesIndex = stack.seriesIndex;
            vp.idx = idx;
            cornerstone.enable(el);
            cornerstoneTools.mouseInput.enable(el);
            vp.addEventListener('dblclick',function(ev) {
               toggleViewSeries(null);
               layoutManager.setLayout(1,1);
               useStack("1x1",ev.currentTarget.seriesIndex);
               setTimeout((vp,idx)=> {
                  cornerstoneTools.scrollToIndex(vp, idx);
               },1,viewport_active.getElementsByClassName('imageViewerViewport')[0],ev.currentTarget.idx);
            },false);
            cornerstone.loadAndCacheImage(imageId).then(function(image) {
               cornerstone.displayImage(el, image);
               cornerstoneTools.wwwc.activate(el, 1);
               synchronizer_pan_zoom.add(el);
               synchronizer_wwwc.add(el);
               doneLoadingHandler(el);
            });
         },1);
      }
   });
}

function toggle_thumb(hdr_id,d,e) {
   var dv = _gel(hdr_id);
   var study_no = d.getAttribute('data-value');
   dv.classList.toggle('active');
   let accession_no = dv.getAttribute('data-value');
   if(d.classList.contains('current')) data_loaded[accession_no] = true;
   if(!data_loaded[accession_no]) {
      var xmlhttp = new XMLHttpRequest();
      var url = server+'/query.php?method=view&AccessionNumber='+accession_no;
      xmlhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            var new_data = JSON.parse(this.responseText);
            new_data.study.study_no = study_no;
            load_study(new_data);
            data_loaded[accession_no] = true;
            dv.innerHTML = '';
            
            if(new_data.study.expertise) {
               console.log(new_data);
               new_data.study.expertise.forEach(function(exs) {
                  exs.study_no = new_data.study.study_no;
                  exs.accession_no = new_data.study.accession_no;
                  exs.study_datetime = new_data.study.study_datetime.substring(0,14).replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/g,'$1-$2-$3 $4:$5');
                  exs.study_description = new_data.study.study_description.toUpperCase();
                  var exp_id = uniqid();
                  dv.innerHTML += "<div class='expertiseEntry noselect m-t-1 m-b-2' draggable='false'><div class='p-x-1' draggable='false'><div class='thumb-expertise' data-value='"+exp_id+"'>Expertise</div></div></div>";
                  data_exp[exp_id] = exs;
               });
               console.log(data_exp);
               
               let exps = dv.getElementsByClassName('thumb-expertise');
               [].forEach.call(exps,function(el) {
                  el.addEventListener('click',function(ev) {
                     var exp_id = ev.currentTarget.getAttribute('data-value');
                     toggle_expertise(exp_id);
                  });
               });
            }
            
            new_data.study.series.map(function(s) {
               var th = thumbnail_template.cloneNode(true);
               th.setAttribute('data-value',s.series_iuid);
               th.setAttribute('id',uniqid());
               // th.getElementsByClassName('imageThumbnailCanvasData')[0].src = 'data:image/jpeg;base64,'+s.thumbnail_base64;
               th.getElementsByClassName('imageThumbnailCanvasData')[0].src = s.thumbnail;
               th.getElementsByClassName('seriesDescription')[0].innerHTML = s.series_description.toUpperCase();
               th.getElementsByClassName('seriesNumber')[0].innerHTML = s.series_number;
               th.getElementsByClassName('numberOfInstances')[0].innerHTML = s.number_of_instances;
               th = dv.appendChild(th);
               th.addEventListener('dragstart',dragstart);
               th.addEventListener('dragend',dragend);
               th.addEventListener('click',function(ev) {
                  var mainContent = _gel('mainContent');
                  var seriesViewer = _gel('seriesViewer');
                  var expertiseViewer = _gel('expertiseViewer');
                  var thumb_id = ev.currentTarget.id;
                  var series_iuid = _gel(thumb_id).getAttribute('data-value');
                  var stack = stack_series_iuid[series_iuid];
                  useStack(viewport_active.idx,stack);
                  seriesViewer.style.display = 'none';
                  // expertiseViewer.style.display = 'none';
                  mainContent.style.display = '';
               });
               
               
            });
            // init_thumbnail_drag();
         }
      };
      xmlhttp.open("GET", url, true);
      xmlhttp.send();      
   }
}

function load_study(data) {
   data.study.series.forEach(function(series) {
      var stack = {
         studyDescription: data.study.study_description,
         seriesDescription: series.series_description,
         studyNo: data.study.study_no,
         stackId: series.series_number,
         imageIds: [],
         seriesIndex: seriesIndex,
         accessionNumber: data.study.accession_no,
         studyDateTime: data.study.study_datetime.substring(0,14).replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/g,'$1-$2-$3 $4:$5'),
         patientAge: data.study.patient_age,
         currentImageIdIndex: 0,
         frameRate: series.frameRate
      };
      series.sop_iuids.forEach(function(sop_iuid) {
         var imageId = 'wadouri:'+server+'/wado_proxy.php?requestType=WADO&studyUID='+data.study.study_iuid+'&seriesUID='+series.series_iuid+'&objectUID='+sop_iuid;
         stack.imageIds.push(imageId);
      });
      stack_series_iuid[series.series_iuid] = seriesIndex;
      seriesIndex++;
      layoutManager.stacks.push(stack);
   });
}

var study_list_sortable = [];
function load_study_list() {
   var tbody = _gel('studyListData');
   tbody.innerHTML = '<tr id="trloading" class="studylistStudy noselect load-study" style="-webkit-user-select: none; -webkit-user-drag: none;">'
                   + '<td colspan="6" style="text-align:center;"">Loading... <i class="fa fa-spin fa-circle-o-notch fa-fw"></i></td>'
                   + '</tr>';
   var xmlhttp = new XMLHttpRequest();
   var url = server+'/query.php?list=1';
   if(qStudyDate0!=''&&qStudyDate1!='') url += '&StudyDate='+qStudyDate0+'-'+qStudyDate1;
   if(qPatientName!='') url += '&PatientName='+encodeURI(qPatientName);
   if(qPatientID!='') url += '&PatientID='+encodeURI(qPatientID);
   if(qAccessionNumber!='') url += '&AccessionNumber='+encodeURI(qAccessionNumber);
   if(qModality!='') url += '&Modality='+encodeURI(qModality);
   if(qStudyDescription!='') url += '&StudyDescription='+encodeURI(qStudyDescription);
   xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         var studylist = JSON.parse(this.responseText);
         // console.log(studylist);
         study_list_sortable = [];
         for(var key in studylist.studies) {
            study_list_sortable.push([key, studylist.studies[key]]);
         }
         study_list_sortable.sort(function(a,b) {
            return a[0]<b[0];
         });
         render_study_list();
      }
   };
   xmlhttp.open("GET", url, true);
   xmlhttp.send();      
}

function render_study_list() {
   var tbody = _gel('studyListData');
   if(study_list_sortable.length==0) {
      tbody.innerHTML = '<tr class="studylistStudy noselect notfound" style="-webkit-user-select: none; -webkit-user-drag: none;">'
                      + '<td colspan="6" style="text-align:center;">No study found</td></tr>';
   } else {
      tbody.innerHTML = '';
      study_list_sortable.forEach(function(v) {
         var tr = studylist_template.cloneNode(true);
         tr.setAttribute('data-value',v[1].accession_no);
         tr.getElementsByClassName('patientName')[0].innerHTML = v[1].patient_name;
         tr.getElementsByClassName('patientId')[0].innerHTML = v[1].patient_mrn;
         tr.getElementsByClassName('accessionNumber')[0].innerHTML = v[1].accession_no;
         tr.getElementsByClassName('studyDate')[0].innerHTML = v[1].study_datetime;
         tr.getElementsByClassName('modalities')[0].innerHTML = v[1].modality;
         tr.getElementsByClassName('studyDescription')[0].innerHTML = v[1].study_description;
         tr = tbody.appendChild(tr);
         tr.addEventListener('click',function(ev) {
            var accession_no = ev.currentTarget.getAttribute('data-value');
            window.location.href = server+'?method=view&AccessionNumber='+accession_no;
         });
      });
   }
   document.getElementsByClassName('studyCount')[0].innerHTML = study_list_sortable.length;
   
}



function queryDate(selectedDates, dateStr, instance) {
   if(selectedDates[0]) {
      var tzoffset = selectedDates[0].getTimezoneOffset();
      var date0 = (new Date(selectedDates[0].getTime()-tzoffset*60000)).toISOString().split('T')[0].split('-').join('');
   } else date0 = '';
   if(selectedDates[1]) {
      var date1 = (new Date(selectedDates[1].getTime()-tzoffset*60000)).toISOString().split('T')[0].split('-').join('');
   } else date1 = date0;
   let diff = qdiff();
   if(qStudyDate0!=date0 || qStudyDate1!=date1 || diff) {
      qStudyDate0 = date0;
      qStudyDate1 = date1;
      load_study_list();
   }
}


function remove_fa_sort() {
   var sc = document.getElementsByClassName('sort-dir');
   [].forEach.call(sc,function(el) {
      el.classList.remove('fa-sort-down');
      el.classList.remove('fa-sort-up');
   });
}

function qdiff() {
   let diff = false;
   [].forEach.call(inputfields,function(el) {
      switch(el.id) {
         case 'patientName':
            if(el.value!=qPatientName) diff = true;
            qPatientName = el.value;
            break;
         case 'patientId':
            if(el.value!=qPatientID) diff = true;
            qPatientID = el.value;
            break;
         case 'accessionNumber':
            if(el.value!=qAccessionNumber) diff = true;
            qAccessionNumber = el.value;
            break;
         case 'modality':
            if(el.value!=qModality) diff = true;
            qModality = el.value;
            break;
         case 'studyDescription':
            if(el.value!=qStudyDescription) diff = true;
            qStudyDescription = el.value;
            break;
         default:
            break;
      }
   });
   return diff;
}

function init_study_list() {
   [].forEach.call(inputfields,function(el) {
      if(el.id=='studyDate') {
         flatpickr(el, { mode: 'range', onClose:queryDate });
      } else {
         el.addEventListener('keypress',function(ev) {
            var k = _gkc(ev);
            if(k==13) {
               if(qdiff()) load_study_list();
            }
         });
      }
   });
   [].forEach.call(sc,function(el) {
      el.addEventListener('click',function(ev) {
         switch(ev.currentTarget.id) {
            case '_patientName':
               if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-up')) {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].patient_name<b[1].patient_name;
                  });
               } else {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].patient_name>b[1].patient_name;
                  });
               }
               render_study_list();
               break;
            case '_patientId':
               if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-down')) {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].patient_mrn>b[1].patient_mrn;
                  });
               } else {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].patient_mrn<b[1].patient_mrn;
                  });
               }
               render_study_list();
               break;
            case '_accessionNumber':
               if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-down')) {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].accession_no>b[1].accession_no;
                  });
               } else {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].accession_no<b[1].accession_no;
                  });
               }
               render_study_list();
               break;
            case '_studyDate':
               if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-down')) {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
                  study_list_sortable.sort(function(a,b) {
                     return a[0]>b[0];
                  });
               } else {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
                  study_list_sortable.sort(function(a,b) {
                     return a[0]<b[0];
                  });
               }
               render_study_list();
               break;
            case '_modalities':
               if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-down')) {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].modality>b[1].modality;
                  });
               } else {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].modality<b[1].modality;
                  });
               }
               render_study_list();
               break;
            case '_studyDescription':
               if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-up')) {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].study_description<b[1].study_description;
                  });
               } else {
                  remove_fa_sort();
                  ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
                  study_list_sortable.sort(function(a,b) {
                     return a[1].study_description>b[1].study_description;
                  });
               }
               render_study_list();
               break;
            default:
               break;
         }
      });
   });
}

function startup() {
   if (cornerstoneTools.loadHandlerManager) {
      cornerstoneTools.loadHandlerManager.setStartLoadHandler(startLoadingHandler);
      cornerstoneTools.loadHandlerManager.setEndLoadHandler(doneLoadingHandler);
      // cornerstoneTools.loadHandlerManager.setErrorLoadingHandler(errorLoadingHandler);
   }
}

var loadHandlerTimeout;

var startLoadingHandler = function (el) {
   if(el.loadHandlerTimeout) clearTimeout(el.loadHandlerTimeout);
   el.loadHandlerTimeout = setTimeout(function () {
      // el.parentNode.getElementsByClassName('imageViewerErrorLoadingIndicator')[0].style.display = 'none';
      if(el.getElementsByTagName('canvas')[0]) el.getElementsByTagName('canvas')[0].classList.add('faded');
      el.parentNode.getElementsByClassName('imageViewerLoadingIndicator')[0].style.display = 'block';
   }, 1);
};

var doneLoadingHandler = function (el) {
   if(el.loadHandlerTimeout) clearTimeout(el.loadHandlerTimeout);
   // el.parentNode.getElementsByClassName('imageViewerErrorLoadingIndicator')[0].style.display = 'none';
   if(el.getElementsByTagName('canvas')[0]) el.getElementsByTagName('canvas')[0].classList.remove('faded');
   el.parentNode.getElementsByClassName('imageViewerLoadingIndicator')[0].style.display = 'none';
};