Change close to minimize

Change-Id: I9eeb858b6d03a54114f332486ae0f60782912acf
diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index b72cd9a..8df6e86 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -391,7 +391,7 @@
       expect(actions[2].getAttribute("class")).toEqual("tree");
       
       // Close the match
-      m.close();
+      m.minimize();
       expect(e.classList.contains('active')).toBe(false);
       expect(e["_match"]).not.toBe(undefined);
     });
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index d992c3f..8e42b4e 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -103,9 +103,7 @@
       };
 
       vcchoose = vcname.addE('span');
-      vcchoose.addT(
-        vc.getName()
-      );
+      vcchoose.addT(vc.getName());
 
       if (vc.wasRewritten()) {
         vcchoose.classList.add('rewritten');
@@ -252,22 +250,52 @@
      * Toggle the Virtual Collection builder
      */
     if (vcname) {
-      var vcclick = function () {
-        var view = d.getElementById('vc-view');
+      vc.onMinimize = function () {
+        vcname.classList.remove('active');
+        delete show['collection'];
+      };
 
+      vc.onOpen = function () {
+        vcname.classList.add('active');
+        show['collection'] = true;
+      };
+      
+      var vcclick = function () {
+
+        if (vc.isOpen()) {
+          vc.minimize()
+        }
+        else {
+          var view = d.getElementById('vc-view');
+          if (!view.firstChild)
+            view.appendChild(vc.element());
+
+          vc.open();
+        }
+
+        /*
         // The vc is visible
         if (vcname.classList.contains('active')) {
-          view.removeChild(vc.element());
+
+          // view.removeChild(vc.element());
+          vc.minimize();
           vcname.classList.remove('active');
           delete show['collection'];
         }
 
-        // The vc is not visible
+        // The vc is not visible yet
         else {
-          view.appendChild(vc.element());
+
+          // Spawn the element for the first time
+          var view = d.getElementById('vc-view');
+          if (!view.firstChild)
+            view.appendChild(vc.element());
+
+          vc.open();
           vcname.classList.add('active');
           show['collection'] = true;
         };
+        */
       };
 
       vcname.onclick = vcclick;
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index 325e402..8192df3 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -29,8 +29,8 @@
   loc.SHOWANNO  = 'Token';
   loc.SHOWINFO  = 'Informationen';
   loc.CLOSE     = 'Schließen';
+  loc.MINIMIZE  = 'Zuklappen';
   loc.DOWNLOAD  = 'Herunterladen';
-
   loc.TOGGLE_ALIGN = 'tausche Textausrichtung';
   loc.SHOW_KQ      = 'zeige KoralQuery';
   loc.SHOW_META    = 'Metadaten';
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index d5b365e..3c44656 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -17,11 +17,7 @@
 
   // Localization values
   const loc   = KorAP.Locale;
-  // loc.SHOWINFO  = loc.SHOWINFO  || 'Show information';
-  // loc.ADDTREE   = loc.ADDTREE   || 'Relations';
-  // loc.SHOWANNO  = loc.SHOWANNO  || 'Tokens';
-  loc.CLOSE     = loc.CLOSE     || 'Close';
-  // loc.SHOW_META = loc.SHOW_META || 'Metadata';
+  loc.MINIMIZE     = loc.MINIMIZE  || 'Minimize';
   
   // 'corpusID', 'docID', 'textID'
   const _matchTerms  = ['textSigle', 'matchID', 'available'];
@@ -174,8 +170,8 @@
       );
 
       var that = this;
-      btn.add(loc.CLOSE, ['button-icon','close'], function () {
-        that.close();
+      btn.add(loc.MINIMIZE, ['button-icon','minimize'], function () {
+        that.minimize();
       });
       element.appendChild(btn.element());
 
@@ -209,16 +205,16 @@
     // Todo: Test toggle
     toggle : function () {
       if (this._element.classList.contains('active'))
-        this.close();
+        this.minimize();
       else
         this.open();
     },
 
 
     /**
-     * Close info view
+     * Minimize info view
      */
-    close : function () {
+    minimize : function () {
       this._element.classList.remove('active');
     },
 
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index 35734ad..bed434f 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -55,6 +55,7 @@
   'buttongroup',
   'panel',
   'view/corpstatv',
+  'buttongroup',
   'util'
 ], function(
   unspecDocClass,
@@ -66,7 +67,8 @@
   dpClass,
   buttonGrClass,
   panelClass,
-  corpStatVClass) {
+  corpStatVClass,
+  buttonGroupClass) {
   "use strict";
 
   KorAP._validUnspecMatchRE = new RegExp(
@@ -79,10 +81,11 @@
   // KorAP._validDateMatchRE is defined in datepicker.js!
 
   const loc = KorAP.Locale;
-  loc.SHOW_STAT = loc.SHOW_STAT || 'Statistics';
-  loc.VERB_SHOWSTAT = loc.VERB_SHOWSTAT || 'Corpus Statistics';
+  loc.SHOW_STAT        = loc.SHOW_STAT        || 'Statistics';
+  loc.VERB_SHOWSTAT    = loc.VERB_SHOWSTAT    || 'Corpus Statistics';
   loc.VC_allCorpora    = loc.VC_allCorpora    || 'all corpora';
   loc.VC_oneCollection = loc.VC_oneCollection || 'a virtual corpus';
+  loc.MINIMIZE         = loc.MINIMIZE         || 'Minimize';
 
   KorAP._vcKeyMenu = undefined;
   KorAP._vcDatePicker = dpClass.create();
@@ -301,11 +304,23 @@
       };
 
       this._element = document.createElement('div');
-      this._element.setAttribute('class', 'vc');
+      this._element.classList.add('vc');
+
 
       this._builder = this._element.addE('div');
       this._builder.setAttribute('class', 'builder');
 
+      var btn = buttonGroupClass.create(
+        ['action','button-view']
+      );
+      var that = this;
+      btn.add(loc.MINIMIZE, ['button-icon','minimize'], function () {
+        that.minimize();
+      });
+      this._element.appendChild(btn.element());
+      
+      
+
       // Initialize root
       this._builder.appendChild(this._root.element());      
       
@@ -315,6 +330,36 @@
       return this._element;
     },
 
+
+    /**
+     * Check, if the VC is open
+     */
+    isOpen : function () {
+      if (!this._element)
+        return false;
+      return this._element.classList.contains('active');
+    },
+    
+    /**
+     * Open the VC view
+     */
+    open : function () {
+      this.element().classList.add('active');
+      if (this.onOpen)
+        this.onOpen();
+    },
+
+
+    /**
+     * Minimize the VC view
+     */
+    minimize : function () {
+      this.element().classList.remove('active');
+      if (this.onMinimize)
+        this.onMinimize();
+    },
+
+    
     /**
      * Update the whole object based on the underlying data structure
      */