Move toggleCategory to OpenStreetBrowserIndex

index.js

@@ -37,14 +37,3 @@ window.onload = function() {
     category.open()
   })
 }
-
-window.toggleCategory = function (id) {
-  OpenStreetBrowserLoader.getCategory(id, function (err, category) {
-    if (err) {
-      alert(err)
-      return
-    }
-
-    category.toggle()
-  })
-}

src/OpenStreetBrowserIndex.js

@@ -4,6 +4,8 @@ function OpenStreetBrowserIndex (id, data) {
   this.id = id
   this.data = data
   this.isOpen = false
+  this.childrenDoms = {}
+  this.childrenCategories = {}
 }
 
 OpenStreetBrowserIndex.prototype.setMap = function (map) {
@@ -22,7 +24,6 @@ OpenStreetBrowserIndex.prototype.open = function () {
   for (var i = 0; i < this.data.subCategories.length; i++) {
     var data = this.data.subCategories[i]
     var dom = document.createElement('div')
-    dom.id = 'category-' + data.id
     this.parentDom.appendChild(dom)
 
     var domHeader = document.createElement('header')
@@ -30,13 +31,32 @@ OpenStreetBrowserIndex.prototype.open = function () {
 
     var a = document.createElement('a')
     a.appendChild(document.createTextNode(data['name:en']))
-    a.href = 'javascript:toggleCategory(' + JSON.stringify(data.id) + ')'
+    a.href = '#'
+    a.onclick = this.toggleCategory.bind(this, data.id)
     domHeader.appendChild(a)
 
     var domContent = document.createElement('div')
+    this.childrenDoms[data.id] = domContent
     this.parentDom.appendChild(domContent)
+
+    this.childrenCategories[data.id] = null
   }
 }
 
+OpenStreetBrowserIndex.prototype.toggleCategory = function (id) {
+  OpenStreetBrowserLoader.getCategory(id, function (err, category) {
+    if (err) {
+      alert(err)
+      return
+    }
+
+    category.setMap(this.map)
+    category.setParentDom(this.childrenDoms[id])
+    this.childrenCategories[id] = category
+
+    category.toggle()
+  }.bind(this))
+}
+
 OpenStreetBrowserLoader.registerType('index', OpenStreetBrowserIndex)
 module.exports = OpenStreetBrowserIndex