diff --git a/js/highlighter/Highlighter.js b/js/highlighter/Highlighter.js
index 2d332e665f8e4d921d0dc684f3eebb7cdcf84173..69e391626738b5b3a7962eaa66dadd714cff7bfa 100644
--- a/js/highlighter/Highlighter.js
+++ b/js/highlighter/Highlighter.js
@@ -23,6 +23,7 @@ define(['underscore', 'backbone', 'threeModel', 'appState', 'lattice', 'cell', '
                 }));
 
             three.sceneAdd(this.mesh);
+            this._setScale();
             this.hide();
 
             //bind events
@@ -105,7 +106,6 @@ define(['underscore', 'backbone', 'threeModel', 'appState', 'lattice', 'cell', '
             }
             this.position = params.position;
             this.direction = params.direction;
-            this._setScale();
             this._setPosition(params.position, params.direction);//position of center point
             this._setRotation(params.direction);
 
diff --git a/js/lattice/CompositeEditorLattice.js b/js/lattice/CompositeEditorLattice.js
index 4d07850aeae2899f1b4b3e7529a9723ee34556b7..15b794af15f44edf02df3289a1bc2ecc8cfffa11 100644
--- a/js/lattice/CompositeEditorLattice.js
+++ b/js/lattice/CompositeEditorLattice.js
@@ -76,7 +76,7 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
                 sparseCells: JSON.parse(JSON.stringify(this.sparseCells)),
                 cellsMin: this.get("cellsMin").clone(),
                 cellsMax: this.get("cellsMax").clone(),
-                dimensions: new THREE.Vector3().subVectors(this.get("cellsMax"), this.get("cellsMin"))
+                dimensions: this.calculateBoundingBox()
             };
             globals.materials.compositeMaterials[id] = data;//todo trigger change on all instances
         },
diff --git a/js/lattice/CubeLattice.js b/js/lattice/CubeLattice.js
index cd9dc04f189289a6a26c18787f3e3271b9839149..de8c82b37aaba36ba8dd59d438132c36b643fb29 100644
--- a/js/lattice/CubeLattice.js
+++ b/js/lattice/CubeLattice.js
@@ -11,11 +11,15 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['squareBaseplane'], function(SquareBasePlane){
                 globals.basePlane = new SquareBasePlane();
             });
-            require(['cubeHighlighter'], function(CubeHighlighter){
+            require([this.getHighlighterFile()], function(CubeHighlighter){
                 globals.highlighter = new CubeHighlighter();
             });
         },
 
+        getHighlighterFile: function(){
+            return "cubeHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             return this._indexForPosition(absPosition);
         },
diff --git a/js/lattice/GIKLattice.js b/js/lattice/GIKLattice.js
index 84465643a67ddc90d0c6a725b0db0e162aef6ac5..89a86daf7409cae4ab1b8d11da7bd0c56145e6b2 100644
--- a/js/lattice/GIKLattice.js
+++ b/js/lattice/GIKLattice.js
@@ -11,13 +11,17 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['squareBaseplane'], function(SquareBasePlane){
                 globals.basePlane = new SquareBasePlane();
             });
-            require(['superCellHighlighter'], function(superCellHighlighter){
+            require([this.getHighlighterFile()], function(superCellHighlighter){
                 globals.highlighter = new superCellHighlighter();
             });
             appState.set("superCellRange", new THREE.Vector3(4, 1, 1));
 
         },
 
+        getHighlighterFile: function(){
+            return "superCellHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             return this._indexForPosition(absPosition);
         },
diff --git a/js/lattice/KelvinLattice.js b/js/lattice/KelvinLattice.js
index f3b712df847054ad78c0306c712060763529f01b..763a8585ce469bd57f0c79598998d4cbe8573aa4 100644
--- a/js/lattice/KelvinLattice.js
+++ b/js/lattice/KelvinLattice.js
@@ -12,11 +12,15 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['squareBaseplane'], function(SquareBasePlane){
                 globals.basePlane = new SquareBasePlane();
             });
-            require(['truncatedCubeHighlighter'], function(TruncatedCubeHighlighter){
+            require([this.getHighlighterFile()], function(TruncatedCubeHighlighter){
                 globals.highlighter = new TruncatedCubeHighlighter();
             });
         },
 
+        getHighlighterFile: function(){
+            return "truncatedCubeHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             return this._indexForPosition(absPosition);
         },
diff --git a/js/lattice/Lattice.js b/js/lattice/Lattice.js
index 279d0cdf657178fde96b7e94a744a630f9278590..f9df850cb9958dd529b82bf3e432253085cb1332 100644
--- a/js/lattice/Lattice.js
+++ b/js/lattice/Lattice.js
@@ -33,6 +33,7 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             });
             this.listenTo(this, "change:cellSeparation", this._updateCellSeparation);
 
+            this.listenTo(this, "change:materialType", this._materialTypeChanged);
             this.listenTo(this, "change:materialClass", this._loadMaterialClass);
 
             this.listenTo(appState, "change:currentNav", this._navChanged);
@@ -108,22 +109,24 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
 
         //events
 
-//        _materialTypeChanged: function(){
-//            var materialType = this.get("materialType");
-//            //verify that correct class is in sync
-//            if (materialType.substr(0,5) == "super"){
-//                this.set("materialClass", "compositeMaterials");
-//                return;
-//            } else {
-//                var materialClass = null;
-//                _.each(_.keys(plist.allMaterials), function(key){
-//                    if (_.keys(plist.allMaterials[key]).indexOf(materialType) > -1) materialClass = key;
-//                });
-//            }
-//            console.log(materialClass);
-//            if (!materialClass) console.warn("material class not found for material " + materialType);
-//            else this.set("materialClass", materialClass);
-//        },
+        _materialTypeChanged: function(){
+            var materialType = this.get("materialType");
+            //verify that correct class is in sync
+            if (materialType.substr(0,5) != "super") {
+                if (this.previous("materialType").substr(0,5) != "super") return;
+                //re init highlighter
+                require([this.getHighlighterFile()], function(HighlighterClass){
+                    globals.highlighter = new HighlighterClass();
+                });
+                return;
+            }
+
+            appState.set("superCellRange", globals.materials.compositeMaterials[materialType].dimensions.clone());
+            appState.set("superCellIndex", new THREE.Vector3(0,0,0));
+            require(['superCellHighlighter'], function(SuperCellHighlighter){
+                globals.highlighter = new SuperCellHighlighter();
+            });
+        },
 
         _loadMaterialClass: function(){
             var materialClass = this.get("materialClass");
diff --git a/js/lattice/OctaEdgeLattice.js b/js/lattice/OctaEdgeLattice.js
index 8db77437b8bafa8a063ac511b0ec38221e491671..46c8e5b6e1977fdff77944d1ec14faf4dc6e97c2 100644
--- a/js/lattice/OctaEdgeLattice.js
+++ b/js/lattice/OctaEdgeLattice.js
@@ -11,11 +11,15 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['octaBaseplane'], function(OctaBasePlane){
                 globals.basePlane = new OctaBasePlane();
             });
-            require(['defaultHighlighter'], function(DefaultHighlighter){
+            require([this.getHighlighterFile()], function(DefaultHighlighter){
                 globals.highlighter = new DefaultHighlighter();
             });
         },
 
+        getHighlighterFile: function(){
+            return "defaultHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             var index = this._indexForPosition(absPosition);
             if (index.y%2 != 0) {
diff --git a/js/lattice/OctaFaceLattice.js b/js/lattice/OctaFaceLattice.js
index a01225eeb8010f6b113d0a8ff5b349fd44722416..7313dc02cd546fc4c042ba782cca9b4de24c68b4 100644
--- a/js/lattice/OctaFaceLattice.js
+++ b/js/lattice/OctaFaceLattice.js
@@ -11,11 +11,15 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['octaBaseplane'], function(OctaBasePlane){
                 globals.basePlane = new OctaBasePlane();
             });
-            require(['octaFaceHighlighter'], function(OctaFaceHighlighter){
+            require([this.getHighlighterFile()], function(OctaFaceHighlighter){
                 globals.highlighter = new OctaFaceHighlighter();
             });
         },
 
+        getHighlighterFile: function(){
+            return "octaFaceHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             var index = this._indexForPosition(absPosition);
             if (index.y%2 != 0) {
diff --git a/js/lattice/OctaRotEdgeLattice.js b/js/lattice/OctaRotEdgeLattice.js
index 2d8b52bf09af59834a8ad2107cf3148260d73751..3e37f740020ddf523171a1c555131310978ce2ad 100644
--- a/js/lattice/OctaRotEdgeLattice.js
+++ b/js/lattice/OctaRotEdgeLattice.js
@@ -11,11 +11,15 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['rotEdgeOctaBaseplane'], function(RotEdgeOctaBasePlane){
                 globals.basePlane = new RotEdgeOctaBasePlane();
             });
-            require(['defaultHighlighter'], function(DefaultHighlighter){
+            require([this.getHighlighterFile()], function(DefaultHighlighter){
                 globals.highlighter = new DefaultHighlighter();
             });
         },
 
+        getHighlighterFile: function(){
+            return "defaultHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             return this._indexForPosition(absPosition);
         },
diff --git a/js/lattice/OctaVertexLattice.js b/js/lattice/OctaVertexLattice.js
index ea9acd5835d7dca02439c135cd7a12ba5bb6675c..242c8b6f94ab020dc8324db0a03edf9fd013a4ae 100644
--- a/js/lattice/OctaVertexLattice.js
+++ b/js/lattice/OctaVertexLattice.js
@@ -11,11 +11,15 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['squareBaseplane'], function(SquareBasePlane){
                 globals.basePlane = new SquareBasePlane();
             });
-            require(['defaultHighlighter'], function(DefaultHighlighter){
+            require([this.getHighlighterFile()], function(DefaultHighlighter){
                 globals.highlighter = new DefaultHighlighter();
             });
         },
 
+        getHighlighterFile: function(){
+            return "defaultHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             return this._indexForPosition(absPosition);
         },
diff --git a/js/lattice/TetraStackedLattice.js b/js/lattice/TetraStackedLattice.js
index ce40d53047834c6368bdc724a96b500e7d803ed7..5e6025000b8982023579a6d317eadddfa38f6197 100644
--- a/js/lattice/TetraStackedLattice.js
+++ b/js/lattice/TetraStackedLattice.js
@@ -11,11 +11,15 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['octaBaseplane'], function(OctaBasePlane){
                 globals.basePlane = new OctaBasePlane();
             });
-            require(['defaultHighlighter'], function(DefaultHighlighter){
+            require([this.getHighlighterFile()], function(DefaultHighlighter){
                 globals.highlighter = new DefaultHighlighter();
             });
         },
 
+        getHighlighterFile: function(){
+            return "defaultHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             var index = this._indexForPosition(absPosition);
             if (index.y%2 != 0) {
diff --git a/js/lattice/TetraVertexLattice.js b/js/lattice/TetraVertexLattice.js
index 337e434dc4df8d9977c0e75adebc8ef7303ffecc..c5a466dc2ff0065a3a92d4fdafbcdca33365ce7f 100644
--- a/js/lattice/TetraVertexLattice.js
+++ b/js/lattice/TetraVertexLattice.js
@@ -11,11 +11,15 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['octaBaseplane'], function(OctaBasePlane){
                 globals.basePlane = new OctaBasePlane();
             });
-            require(['defaultHighlighter'], function(DefaultHighlighter){
+            require([this.getHighlighterFile()], function(DefaultHighlighter){
                 globals.highlighter = new DefaultHighlighter();
             });
         },
 
+        getHighlighterFile: function(){
+            return "defaultHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             var yIndex = Math.floor(absPosition.y/this.yScale());
             if (yIndex%2 != 0) absPosition.x += this.xScale()/2;
diff --git a/js/lattice/TruncatedCubeLattice.js b/js/lattice/TruncatedCubeLattice.js
index e5c34b67f8fd637c06f8ebcaaa4c7cd26c5c8209..c24d05b8b10f99ae3ce8037ce68ce3d9802898b3 100644
--- a/js/lattice/TruncatedCubeLattice.js
+++ b/js/lattice/TruncatedCubeLattice.js
@@ -12,11 +12,15 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             require(['squareBaseplane'], function(SquareBasePlane){
                 globals.basePlane = new SquareBasePlane();
             });
-            require(['truncatedCubeHighlighter'], function(TruncatedCubeHighlighter){
+            require([this.getHighlighterFile()], function(TruncatedCubeHighlighter){
                 globals.highlighter = new TruncatedCubeHighlighter();
             });
         },
 
+        getHighlighterFile: function(){
+            return "truncatedCubeHighlighter";
+        },
+
         getIndexForPosition: function(absPosition){
             return this._indexForPosition(absPosition);
         },