diff --git a/js/cells/GIKCell.js b/js/cells/GIKCell.js
index bd83f8f33af9601f6c3a9a942bd7c5cc98703277..3966517dd56f3e60c2179aa5e88e7d5cf8be6734 100644
--- a/js/cells/GIKCell.js
+++ b/js/cells/GIKCell.js
@@ -3,9 +3,10 @@
  */
 
 
-(function () {
+define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'cubeCell'],
+    function(_, THREE, three, lattice, appState, CubeCell){
 
-    var unitCellGeo = new THREE.BoxGeometry(1,1,1.28);
+    var unitGeo = new THREE.BoxGeometry(1,1,1.28);
 
     function GIKCell(index, superCell){
         CubeCell.call(this, index, superCell);
@@ -14,7 +15,7 @@
 
 
     GIKCell.prototype._getGeometry = function(){
-        return unitCellGeo;
+        return unitGeo;
     };
 
     GIKCell.prototype._translateCell = function(object3D){
@@ -61,6 +62,5 @@
         return {index: _.clone(this.index), direction:direction, position:position};
     };
 
-    self.GIKCell = GIKCell;
-
-})();
\ No newline at end of file
+    return GIKCell;
+});
\ No newline at end of file
diff --git a/js/cells/supercells/DMASuperCell.js b/js/cells/supercells/DMASuperCell.js
index e3d7aee26d860c6ebc91af1e9e2aa07927a43f90..386d46404680ab9ad8a6a934057638b62c4ba2a7 100644
--- a/js/cells/supercells/DMASuperCell.js
+++ b/js/cells/supercells/DMASuperCell.js
@@ -3,71 +3,78 @@
  */
 
 
-DMASuperCell = function(index, superCell){//supercells might have supercells
-
-    this.material = globals.lattice.get("materialType");//todo move to dmacell
-    DMACell.call(this, index, superCell);
-    var range = globals.lattice.get("superCellRange");
-    this.cells = this._makeChildCells(index, range);//todo three dimensional array?
-
-    var self = this;
-    _.each(this.cells, function(cell){
-        self._addChildren(cell.getObject3D());
-    });
-
-    this.setMode();
-};
-DMASuperCell.prototype = Object.create(DMACell.prototype);
-
-DMASuperCell.prototype._makeChildCells = function(index, range){
-    var cells = [];
-    for (var x=0;x<range.x;x++){
-        for (var y=0;y<range.y;y++){
-            for (var z=0;z<range.z;z++){
-                cells.push(this._makeSubCellForIndex({x:x, y:y, z:z}));
+
+define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'cell'],
+    function(_, THREE, three, lattice, appState, DMACell){
+
+    function DMASuperCell(index, superCell){//supercells might have supercells
+
+        this.material = lattice.get("materialType");//todo move to dmacell
+        var range = lattice.get("superCellRange");
+        this.cells = this._makeChildCells(index, range);//todo three dimensional array?
+        DMACell.call(this, index, superCell);
+
+        var self = this;
+        _.each(this.cells, function(cell){
+            self._addChildren(cell.getObject3D());
+        });
+    
+        this.setMode();
+    }
+    DMASuperCell.prototype = Object.create(DMACell.prototype);
+
+    DMASuperCell.prototype._makeChildCells = function(index, range){
+        var cells = [];
+        for (var x=0;x<range.x;x++){
+            for (var y=0;y<range.y;y++){
+                for (var z=0;z<range.z;z++){
+                    cells.push(this._makeSubCellForIndex({x:x, y:y, z:z}));
+                }
             }
         }
-    }
-    return cells;
-};
-
-DMASuperCell.prototype._makeSubCellForIndex = function(index){
-    return null;//override in subclasses
-};
-
-DMASuperCell.prototype._getModeName = function(){
-    return "";
-};
-
-DMASuperCell.prototype.setMode = function(mode){
-
-    if (mode === undefined) mode = globals.appState.get("cellMode");
-
-    _.each(this.cells, function(cell){
-        cell.setMode(mode);
-    });
-
-    if (mode == "cell") mode = "supercell";
-    if (mode == "part") mode = "object3D";
-
-    _.each(this.object3D.children, function(child){
-        child.visible = child.name == mode;
-    });
-};
-
-DMASuperCell.prototype.getLength = function(){
-    if (this.cells) return this.cells.length-1;
-    return globals.lattice.get("superCellRange").x-1;
-};
-
-DMASuperCell.prototype.destroy = function(){
-    this.object3D.myParent = null;
-    globals.three.sceneRemove(this.object3D);
-    this.object3D = null;
-    _.each(this.cells, function(cell){
-        if (cell) cell.destroy();
-    });
-    this.cells = null;
-    this.index = null;
-    this.material = null;
-};
\ No newline at end of file
+        return cells;
+    };
+
+    DMASuperCell.prototype._makeSubCellForIndex = function(index){
+        return null;//override in subclasses
+    };
+
+    DMASuperCell.prototype._getModeName = function(){
+        return "";
+    };
+
+    DMASuperCell.prototype.setMode = function(mode){
+
+        if (mode === undefined) mode = appState.get("cellMode");
+
+        _.each(this.cells, function(cell){
+            cell.setMode(mode);
+        });
+
+        if (mode == "cell") mode = "supercell";
+        if (mode == "part") mode = "object3D";
+
+        _.each(this.object3D.children, function(child){
+            child.visible = child.name == mode;
+        });
+    };
+
+    DMASuperCell.prototype.getLength = function(){
+        if (this.cells) return this.cells.length-1;
+        return lattice.get("superCellRange").x-1;
+    };
+
+    DMASuperCell.prototype.destroy = function(){
+        this.object3D.myParent = null;
+        three.sceneRemove(this.object3D);
+        this.object3D = null;
+        _.each(this.cells, function(cell){
+            if (cell) cell.destroy();
+        });
+        this.cells = null;
+        this.index = null;
+        this.material = null;
+    };
+
+    return DMASuperCell;
+});
\ No newline at end of file
diff --git a/js/cells/supercells/GIKSuperCell.js b/js/cells/supercells/GIKSuperCell.js
index 2510d3e4fa1db75d713aa1600a3bce0ec4b84d06..e5d07eca1abfd85ea90e9f3e4eaa9da98d6fe858 100644
--- a/js/cells/supercells/GIKSuperCell.js
+++ b/js/cells/supercells/GIKSuperCell.js
@@ -2,66 +2,52 @@
  * Created by aghassaei on 5/26/15.
  */
 
-var allGIKMaterials = {};
-var gikMaterialList = AppPList().allMaterialTypes.cube.gik;
-function changeGikMaterials(){
-    _.each(_.keys(gikMaterialList), function(material){
-        if (globals.appState.get("realisticColorScheme")) {
-            if (allGIKMaterials[material]) allGIKMaterials[material].color = new THREE.Color(gikMaterialList[material].color);
-            else allGIKMaterials[material] = new THREE.MeshLambertMaterial({color:gikMaterialList[material].color});
-            if (gikMaterialList[material].opacity){
-                allGIKMaterials[material].transparent = true;
-                allGIKMaterials[material].opacity = gikMaterialList[material].opacity;
-            } else {
-                allGIKMaterials[material].transparent = false;
-            }
-        }
-        else {
-            if (allGIKMaterials[material]) allGIKMaterials[material].color = new THREE.Color(gikMaterialList[material].altColor);
-            else allGIKMaterials[material] = new THREE.MeshLambertMaterial({color:gikMaterialList[material].altColor});
-            allGIKMaterials[material].transparent = false;
-        }
-    });
-}
 
-GIKSuperCell = function(index, superCell){
-    DMASuperCell.call(this, index, superCell);
-};
-GIKSuperCell.prototype = Object.create(DMASuperCell.prototype);
 
-GIKSuperCell.prototype._makeSubCellForIndex = function(index){
-    return new GIKCell(index, this);
-};
+define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'superCell', 'gikCell', 'electronicMaterials'],
+    function(_, THREE, three, lattice, appState, DMASuperCell, GIKCell, electronicMaterials){
 
-GIKSuperCell.prototype._rotateCell = function(object3D){
-    if (this.index && this.index.z%2 != 0) object3D.rotateZ(Math.PI/2);
-    return object3D;
-};
+    GIKSuperCell = function(index, superCell){
+        DMASuperCell.call(this, index, superCell);
+    };
+    GIKSuperCell.prototype = Object.create(DMASuperCell.prototype);
 
-GIKSuperCell.prototype.getMaterial = function(){
-    return allGIKMaterials[this.material];
-};
+    GIKSuperCell.prototype._makeSubCellForIndex = function(index){
+        return new GIKCell(index, this);
+    };
 
-GIKSuperCell.prototype._buildMesh = function(){
-    var length = globals.lattice.get("superCellRange").x;
-    var meshes = [];
-    var superCellGeo = new THREE.BoxGeometry(1,1,1.28);
-    superCellGeo.applyMatrix(new THREE.Matrix4().makeScale(length, 1, 1));
-    superCellGeo.applyMatrix(new THREE.Matrix4().makeTranslation(-length/2+0.5, 0, 0));
-    var mesh = new THREE.Mesh(superCellGeo, this.getMaterial());
-    mesh.name = "supercell";
-    meshes.push(mesh);
-    var wireframe = this._buildWireframe(mesh);
-    if (!wireframe) return meshes;
-    wireframe.name = "supercell";
-    meshes.push(wireframe);
-    return meshes;
-};
+    GIKSuperCell.prototype._rotateCell = function(object3D){
+        if (this.index && this.index.z%2 != 0) object3D.rotateZ(Math.PI/2);
+        return object3D;
+    };
 
-GIKSuperCell.prototype._buildWireframe = function(mesh){
-    var wireframe = new THREE.BoxHelper(mesh);
-    wireframe.material.color.set(0x000000);
-    wireframe.matrixWorld = mesh.matrixWorld;
-    wireframe.matrixAutoUpdate = true;
-    return wireframe;
-};
\ No newline at end of file
+    GIKSuperCell.prototype.getMaterial = function(){
+        return electronicMaterials.materials[this.material];
+    };
+
+    GIKSuperCell.prototype._buildMesh = function(){
+        var length = lattice.get("superCellRange").x;
+        var meshes = [];
+        var superCellGeo = new THREE.BoxGeometry(1,1,1.28);
+        superCellGeo.applyMatrix(new THREE.Matrix4().makeScale(length, 1, 1));
+        superCellGeo.applyMatrix(new THREE.Matrix4().makeTranslation(-length/2+0.5, 0, 0));
+        var mesh = new THREE.Mesh(superCellGeo, this.getMaterial());
+        mesh.name = "supercell";
+        meshes.push(mesh);
+        var wireframe = this._buildWireframe(mesh);
+        if (!wireframe) return meshes;
+        wireframe.name = "supercell";
+        meshes.push(wireframe);
+        return meshes;
+    };
+
+    GIKSuperCell.prototype._buildWireframe = function(mesh){
+        var wireframe = new THREE.BoxHelper(mesh);
+        wireframe.material.color.set(0x000000);
+        wireframe.matrixWorld = mesh.matrixWorld;
+        wireframe.matrixAutoUpdate = true;
+        return wireframe;
+    };
+
+    return GIKSuperCell;
+});
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 308ea6739b781983980f937252dd4e151b40557d..ee74f6f6cf8e2bcfa103f8a0581811994e285af3 100644
--- a/js/main.js
+++ b/js/main.js
@@ -62,6 +62,11 @@ require.config({
         kelvinCell: 'cells/KelvinCell',
         cubeCell: 'cells/CubeCell',
         gikCell: 'cells/GIKCell',
+        superCell: 'cells/supercells/DMASupercell',
+        gikSuperCell: 'cells/supercells/GIKSuperCell',
+
+        //materials
+        electronicMaterials: 'materials/ElectronicMaterials',
 
         //UI
         navbar: 'menus/Navbar',
diff --git a/js/materials/ElectronicMaterials.js b/js/materials/ElectronicMaterials.js
new file mode 100644
index 0000000000000000000000000000000000000000..93d0dc5882de611a0b5afd2df0490b846e65d4e0
--- /dev/null
+++ b/js/materials/ElectronicMaterials.js
@@ -0,0 +1,36 @@
+/**
+ * Created by aghassaei on 6/3/15.
+ */
+
+
+define(['underscore', 'three', 'appState', 'plist'], function(_, THREE, appState, plist){
+    
+    var materials = {};
+    var materialList = plist.allMaterialTypes.cube.gik;
+    
+    function changeMaterials(){
+        _.each(_.keys(materialList), function(material){
+            if (appState.get("realisticColorScheme")) {
+                if (materials[material]) materials[material].color = new THREE.Color(materialList[material].color);
+                else materials[material] = new THREE.MeshLambertMaterial({color:materialList[material].color});
+                if (materialList[material].opacity){
+                    materials[material].transparent = true;
+                    materials[material].opacity = materialList[material].opacity;
+                } else {
+                    materials[material].transparent = false;
+                }
+            }
+            else {
+                if (materials[material]) materials[material].color = new THREE.Color(materialList[material].altColor);
+                else materials[material] = new THREE.MeshLambertMaterial({color:materialList[material].altColor});
+                materials[material].transparent = false;
+            }
+        });
+    }
+    changeMaterials();
+    
+    return {
+        changeMaterials: changeMaterials,
+        materials: materials
+    }
+});
\ No newline at end of file
diff --git a/js/three/ThreeView.js b/js/three/ThreeView.js
index c6fb5c7af06c86da7ad8fc06edf46f982ca2340c..a75b5de4da84580bc86f922ad90d23d0719133dd 100644
--- a/js/three/ThreeView.js
+++ b/js/three/ThreeView.js
@@ -95,7 +95,7 @@ define(['underscore', 'backbone', 'three', 'appState', 'globals', 'orbitControls
             var vector = new THREE.Vector2(2*(e.pageX-this.$el.offset().left)/this.$el.width()-1, 1-2*(e.pageY-this.$el.offset().top)/this.$el.height());
             this.mouseProjection.setFromCamera(vector, this.model.camera);
 
-            var objsToIntersect = this.model.cells.concat(this.model.basePlane);
+            var objsToIntersect = this.model.getCells().concat(this.model.getBasePlane());
     //        if (globals.highlighter.isVisible()) objsToIntersect = objsToIntersect.concat(globals.highlighter.mesh);
             var intersections = this.mouseProjection.intersectObjects(objsToIntersect, false);
             if (intersections.length == 0) {//no intersections