diff --git a/.gitignore b/.gitignore
index 2f67de1..cba641f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,7 @@ node_modules
 #dist folder 
 dist
 build
-data/tm-converter
+data/xslt/tmxsl
 
 # temporary work data
 TODOs.txt
diff --git a/Gruntfile.coffee b/Gruntfile.coffee
index 36262bb..f150b2f 100644
--- a/Gruntfile.coffee
+++ b/Gruntfile.coffee
@@ -75,6 +75,13 @@ module.exports = (grunt) ->
     copy:
       src:
         files: [{expand: true, flatten: true, cwd: 'src/', src: ['**'], dest: 'dist/'}]
+      dependencies:
+        files: [{
+          cwd: 'bower_components/tmxsl',  # set working folder / root to copy
+          src: '**/*',           # copy all files and subfolders
+          dest: 'data/xslt/tmxsl',    # destination folder
+          expand: true           # required when using cwd
+        }]
       #fonts:
        # files: [{expand: true, cwd: 'bower_components/bootstrap/dist/fonts/', src: ['*'], dest: 'fonts/'}]
 
diff --git a/bower.json b/bower.json
index 3adbd5c..41d0cf0 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "FreiDi:topicMapViz",
-  "version": "0.7.1-beta",
+  "version": "0.8.0-beta",
   "authors": [
     "Benjamin W. Bohl <bohl@edirom.de>"
   ],
@@ -24,6 +24,7 @@
     "jquery": "~2.1.1",
     "bootstrap": "~3.2.0",
     "d3": "~3.4.13",
-    "bootstrap-list-filter": "https://github.com/stefanocudini/bootstrap-list-filter/releases/tag/v0.1.7"
+    "bootstrap-list-filter": "git://github.com/stefanocudini/bootstrap-list-filter.git#v0.2.0",
+    "tmxsl": "git://github.com/heuer/tmxsl.git#713ee96436184cc0aafbc9edb59ee5d429245f02" 
   }
 }
diff --git a/build.xml b/build.xml
index d4cb7b3..f37f8aa 100644
--- a/build.xml
+++ b/build.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project default="xar" name="proofMEIdata">
   
-  <property name="project.version" value="0.7.1-beta"/>
+  <property name="project.version" value="0.8.0-beta"/>
   <property name="project.app" value="FreiDi-topicMapViz"/>
   <property name="build.dir" value="build"/>
   
diff --git a/data/xql/getJSONtopicMap.xql b/data/xql/getJSONtopicMap.xql
index f4a1c88..9cf92e8 100644
--- a/data/xql/getJSONtopicMap.xql
+++ b/data/xql/getJSONtopicMap.xql
@@ -5,7 +5,7 @@ import module namespace config="http://www.freischuetz-digital.de/topicMapViz/co
 declare option exist:serialize "method=text media-type=text/plain omit-xml-declaration=yes";
 
  let $doc := xmldb:document($config:app-root||'/topicMaps/FreiDi_TopicMap_2.xml')
- let $xslt := xmldb:document($config:app-root||'/data/tm-converter/xtm2tojtm1.xsl')
+ let $xslt := xmldb:document($config:app-root||'/data/xslt/tmxsl/xtm2tojtm1.xsl')
  
  let $jtm := transform:transform($doc, $xslt, <parameters><param name="jtm_version" value="1.1"/></parameters>)
  
diff --git a/data/xql/getOccurrenceDetail.xql b/data/xql/getOccurrenceDetail.xql
new file mode 100644
index 0000000..9a58e41
--- /dev/null
+++ b/data/xql/getOccurrenceDetail.xql
@@ -0,0 +1,29 @@
+xquery version "3.0";
+
+import module namespace config="http://www.freischuetz-digital.de/topicMapViz/config" at "../../modules/config.xqm";
+import module namespace freidi-tmv="http://www.freischuetz-digital.de/topicMapViz/app" at "../../modules/app.xql";
+
+
+declare namespace tei = "http://www.tei-c.org/ns/1.0";
+
+(:declare option exist:serialize "method=xhtml media-type=text/html omit-xml-declaration=yes indent=yes";:)
+declare option exist:serialize "method=text media-type=text/plain omit-xml-declaration=yes";
+
+
+declare variable $href := request:get-parameter('href','');
+declare variable $docName := substring-before($href, '#');
+declare variable $topicID := substring-after($href, '#');
+
+let $doc := xmldb:document($freidi-tmv:text-root||$docName)
+let $xslt := xmldb:document($config:app-root||'/data/xslt/getOccurenceDetail.xsl')
+ 
+let $result := transform:transform($doc, $xslt, <parameters><param name="topicID" value="{$topicID}"/></parameters>)
+ 
+return
+(:<a href="{$href}">{$docName || 'with ID: ' || $topicID}</a>:)
+(:element root {
+for $occurence in $doc//tei:*[@key = $topicID]
+return $occurence/parent::tei:*
+
+}:)
+serialize($result)
\ No newline at end of file
diff --git a/data/xslt/getOccurenceDetail.xsl b/data/xslt/getOccurenceDetail.xsl
new file mode 100644
index 0000000..be70713
--- /dev/null
+++ b/data/xslt/getOccurenceDetail.xsl
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:math="http://www.w3.org/2005/xpath-functions/math" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xd="http://www.oxygenxml.com/ns/doc/xsl" exclude-result-prefixes="xs math xd tei" version="3.0">
+    <xd:doc scope="stylesheet">
+        <xd:desc>
+            <xd:p>
+                <xd:b>Created on:</xd:b> May 21, 2015</xd:p>
+            <xd:p>
+                <xd:b>Author:</xd:b> benjamin</xd:p>
+            <xd:p/>
+        </xd:desc>
+    </xd:doc>
+<!--  <xsl:output method="text" omit-xml-declaration="yes" indent="no"/>-->
+    <xsl:param name="topicID" required="yes"/>
+    <xsl:template match="/">
+        <a class="btn" data-toggle="collapse" href="{concat('#collapse_',//tei:TEI/@xml:id)}" aria-expanded="false" aria-controls="{concat('#collapse_',//tei:TEI/@xml:id)}">
+            <span class="caret">
+                <xsl:text> </xsl:text>
+            </span>
+            <xsl:value-of select="//tei:teiHeader/tei:fileDesc/tei:titleStmt/tei:title[not(@type = 'desc')]"/>
+        </a>
+        <div id="{concat('collapse_',//tei:TEI/@xml:id)}" class="collapse">
+            <ol>
+            <xsl:variable name="matches" as="node()*" select="//tei:*[@key = $topicID or @xml:id = $topicID]"/>
+            <xsl:for-each select="$matches">
+                <li>
+                    <xsl:call-template name="occurrence">
+                        <xsl:with-param name="pos" select="position()"/>
+                    </xsl:call-template>
+                </li>
+            </xsl:for-each>
+        </ol>
+    </div>
+    </xsl:template>
+    <xsl:template name="occurrence">
+        <xsl:param name="pos"/>
+        <div class="meta">
+          <!--<xsl:value-of select="$pos"/>
+          <xsl:text>) </xsl:text>-->
+            <xsl:value-of select="//tei:teiHeader/tei:fileDesc/tei:titleStmt/tei:title[not(@type = 'desc')]"/>
+            <xsl:if test="//tei:div[@type = 'act'] and //tei:div[@type = 'scene']">
+                <xsl:text>, </xsl:text>
+          <xsl:text>Akt </xsl:text>
+            <xsl:number value="ancestor::tei:div[@type = 'act']/@n" format="I"/>
+            <xsl:text>, Szene </xsl:text>
+            <xsl:number value="ancestor::tei:div[@type = 'scene']/@n" format="1"/>
+        </xsl:if>
+        </div>
+        <div class="content">
+            <!--<xsl:variable name="text">
+                <xsl:apply-templates select="./parent::tei:*"/>
+            </xsl:variable>-->
+            <xsl:apply-templates select="./parent::tei:*"/>
+<!--            <xsl:value-of select="$text"/>-->
+        </div>
+    </xsl:template>
+    <xsl:template match="tei:*[@key = $topicID]">
+        <mark>
+            <xsl:apply-templates/>
+        </mark>
+    </xsl:template>
+</xsl:stylesheet>
\ No newline at end of file
diff --git a/expath-pkg.xml b/expath-pkg.xml
index f8092b1..e94b159 100644
--- a/expath-pkg.xml
+++ b/expath-pkg.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<package xmlns="http://expath.org/ns/pkg" name="http://freischuetz-digital.de/topicMapViz" abbrev="topicMapViz" version="0.7.1-beta" spec="1.0">
+<package xmlns="http://expath.org/ns/pkg" name="http://freischuetz-digital.de/topicMapViz" abbrev="topicMapViz" version="0.8.0-beta" spec="1.0">
     <title>FreiDi:topicMapViz</title>
 </package>
\ No newline at end of file
diff --git a/index.html b/index.html
index 551aa90..3b08cc4 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,19 @@
         <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" media="screen"/>
         <script type="text/javascript" src="dist/bower.js" charset="utf-8"/>
         <style type="text/css">
+        
+        
+    
       /*bootstrap framework*/
       
+      #meta-container .value .meta {
+        font-weight:bold;
+      }
+      
+      #meta-container .value li {
+        margin: 4px 0;
+      }
+      
      #topicList {
       height: 700px;
       overflow-y: scroll;
@@ -17,13 +28,23 @@
      
      #graph-container {
       height:400px;
+     // background-image:-moz-linear-gradient(left center , rgba(60, 60, 60, 0.2), rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(60, 60, 60, 0.2));
+      border-radius:10px;
      }
      
      #meta-container {
       height: 400px;
      }
      
+     #meta {
+         font-size:1.2em;
+     }
+     
      
+    #filters-classes-list, #filters-nodes-list {
+         height: 300px;
+         overflow: auto;
+     }
      .filters-classes,.filters-nodes {
          display:table;
      }
@@ -48,25 +69,50 @@
 }
 
 .link.highlight {
-    stroke: #900;
+    stroke: #3af;
 }
 
 .node circle {
-  fill: #ccc;
-  stroke: #fff;
+  fill: #aaa;
+  stroke: #bbb;
   stroke-width: 1.5px;
 }
 
+.node.highlight circle {
+    fill: #18d;
+}
+
+.node.distance_1{}
+
+.node.distance_2 circle{
+    fill: #ccc;
+}
+
+.node.distance_2.highlight circle {
+    fill: #3af;
+}
+
 text {
-  font: 10px sans-serif;
+  font: 12px sans-serif;
   pointer-events: none;
 }
       /* topicDetail*/
       
       #meta .key{
-        font-size: 1.2em;
-        font-weight:bold;
+          font-weight:bold;
       }
+      dl.topicDetail {
+          display: table;
+      }
+      
+    
+      dl.topicDetail dt, dt+dd {
+          margin-top: 12px;
+      }
+
+      
+      
+      
     </style>
     </head>
     <body>
@@ -106,19 +152,39 @@
                 </div>
                 <div class="col-md-10">
                     <div class="row">
-                        <div class="col-md-9">
-                            <div id="graph-container">
-                                <h3>Graph</h3>
-                                <div id="graph"/>
+                        <div id="title"/>
+                        </div>
+                <div class="row top-buffer">
+                        <div class="col-md-6">
+                            <div class="row">
+                                <div id="graph-container" class="col-md-12" style="resize:both; overflow:auto;">
+<!--                                <h2>Graph</h2>-->
+                                    <div id="graph"/>
+                                </div>
                             </div>
-                            <div id="meta-container">
-                                <h3>Details</h3>
-                                <div id="meta"/>
+                        </div>
+                        <div class="col-md-6">
+                            <div id="filters-container">
+<!--                            <h3>Highlighting</h3>-->
+                                <div class="row" id="filters"/>
                             </div>
                         </div>
-                        <div class="col-md-3" id="filters-container">
-                            <h3>Filters</h3>
-                            <div id="filters"/>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label for="sel_distance">Node distance:</label>
+                                <select class="form-control" id="sel_distance">
+                                    <option value="1">1</option>
+                                    <option value="2">2</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div id="sources" class="col-md-12">
+<!--                        <h2>Fundstellen</h2>-->
+<!--                        <div id="sources"/>-->
                         </div>
                     </div>
                 </div>
@@ -126,11 +192,12 @@ <h3>Filters</h3>
         </div>
         <script type="text/javascript">
       //demo graphs
-      var links5 = [{"source": "nacht", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "mond", "target": "nacht", "type": "part-of"},{"source": "mond", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "kugelguss", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "wald", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "kreuzweg", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "max", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "sammiel", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "caspar", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "form", "target": "kugelguss", "type": "used-for"},{"source": "kohlen", "target": "kugelguss", "type": "used-for"},{"source": "blei", "target": "kugelguss", "type": "used-for"},{"source": "max", "target": "jaeger", "type": "same-as"},{"source": "max", "target": "wilhelm", "type": "comparable-with"},{"source": "max", "target": "agathe", "type": "related-to"},{"source": "wilhelm", "target": "jaeger", "type": "same-as"},{"source": "wilhelm", "target": "pauline", "type": "related-to"}];
-      var links6 = [{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "kranz", "target": "braut", "type": "#belong-to"}];
-      var links7 = [{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "max", "target": "braeutigam", "type": "#is-a"},{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "wilhelm", "target": "braeutigam", "type": "#is-a"},{"source": "edward", "target": "braeutigam", "type": "#is-a"},{"source": "benno", "target": "braeutigam", "type": "#same-as"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "max", "target": "agathe", "type": "#affectionate-to"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "agathe", "target": "tochter", "type": "#is-a"},{"source": "agathe", "target": "maedchen", "type": "#is-a"},{"source": "agathe", "target": "pauline", "type": "#comparable-with"},{"source": "agathe", "target": "kaethchen", "type": "#comparable-with"},{"source": "agathe", "target": "elfride", "type": "#comparable-with"},{"source": "agathe", "target": "leonore", "type": "#comparable-with"},{"source": "agathe", "target": "juliane", "type": "#comparable-with"},{"source": "agathe", "target": "bertha", "type": "#comparable-with"},{"source": "agathe", "target": "opfer", "type": "#same-as"},{"source": "agathe", "target": "taube", "type": "#same-as"},{"source": "agathe", "target": "grillen", "type": "#undergo"},{"source": "annchen", "target": "agathe", "type": "#friendly-related-to"},{"source": "kranz", "target": "agathe", "type": "#belong-to"},{"source": "agathe", "target": "traum", "type": "#undergo"},{"source": "eremit", "target": "agathe", "type": "#friendly-related-to"},{"source": "rosen", "target": "agathe", "type": "#belong-to"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "wilhelm", "target": "pauline", "type": "#affectionate-to"},{"source": "agathe", "target": "pauline", "type": "#comparable-with"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "pauline", "target": "tochter", "type": "#same-as"},{"source": "pauline", "target": "traum", "type": "#undergo"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "wilhelm", "target": "kaethchen", "type": "#affectionate-to"},{"source": "agathe", "target": "kaethchen", "type": "#comparable-with"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "agathe", "target": "elfride", "type": "#comparable-with"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "traum", "type": "#undergo"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "agathe", "target": "juliane", "type": "#comparable-with"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "juliane", "target": "traum", "type": "#undergo"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "kranz", "target": "brautjungfern", "type": "#belong-to"},{"source": "brautjungfern", "target": "reigen", "type": "#undergo"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "reigen", "target": "hochzeit", "type": "#part-of"},{"source": "kranz", "target": "braut", "type": "#belong-to"},{"source": "kranz", "target": "braut", "type": "#belong-to"},{"source": "myrte", "target": "kranz", "type": "#part-of"},{"source": "lavendel", "target": "kranz", "type": "#part-of"},{"source": "seide", "target": "kranz", "type": "#part-of"},{"source": "rosmarin", "target": "kranz", "type": "#part-of"},{"source": "thymian", "target": "kranz", "type": "#part-of"},{"source": "silber", "target": "kranz", "type": "#part-of"},{"source": "kranz", "target": "winden", "type": "#used-for"},{"source": "kranz", "target": "brautjungfern", "type": "#belong-to"},{"source": "kranz", "target": "agathe", "type": "#belong-to"}];
+ //     var links5 = [{"source": "nacht", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "mond", "target": "nacht", "type": "part-of"},{"source": "mond", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "kugelguss", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "wald", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "kreuzweg", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "max", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "sammiel", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "caspar", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "form", "target": "kugelguss", "type": "used-for"},{"source": "kohlen", "target": "kugelguss", "type": "used-for"},{"source": "blei", "target": "kugelguss", "type": "used-for"},{"source": "max", "target": "jaeger", "type": "same-as"},{"source": "max", "target": "wilhelm", "type": "comparable-with"},{"source": "max", "target": "agathe", "type": "related-to"},{"source": "wilhelm", "target": "jaeger", "type": "same-as"},{"source": "wilhelm", "target": "pauline", "type": "related-to"}];
+ //     var links6 = [{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "kranz", "target": "braut", "type": "#belong-to"}];
+ //     var links7 = [{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "max", "target": "braeutigam", "type": "#is-a"},{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "wilhelm", "target": "braeutigam", "type": "#is-a"},{"source": "edward", "target": "braeutigam", "type": "#is-a"},{"source": "benno", "target": "braeutigam", "type": "#same-as"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "max", "target": "agathe", "type": "#affectionate-to"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "agathe", "target": "tochter", "type": "#is-a"},{"source": "agathe", "target": "maedchen", "type": "#is-a"},{"source": "agathe", "target": "pauline", "type": "#comparable-with"},{"source": "agathe", "target": "kaethchen", "type": "#comparable-with"},{"source": "agathe", "target": "elfride", "type": "#comparable-with"},{"source": "agathe", "target": "leonore", "type": "#comparable-with"},{"source": "agathe", "target": "juliane", "type": "#comparable-with"},{"source": "agathe", "target": "bertha", "type": "#comparable-with"},{"source": "agathe", "target": "opfer", "type": "#same-as"},{"source": "agathe", "target": "taube", "type": "#same-as"},{"source": "agathe", "target": "grillen", "type": "#undergo"},{"source": "annchen", "target": "agathe", "type": "#friendly-related-to"},{"source": "kranz", "target": "agathe", "type": "#belong-to"},{"source": "agathe", "target": "traum", "type": "#undergo"},{"source": "eremit", "target": "agathe", "type": "#friendly-related-to"},{"source": "rosen", "target": "agathe", "type": "#belong-to"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "wilhelm", "target": "pauline", "type": "#affectionate-to"},{"source": "agathe", "target": "pauline", "type": "#comparable-with"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "pauline", "target": "tochter", "type": "#same-as"},{"source": "pauline", "target": "traum", "type": "#undergo"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "wilhelm", "target": "kaethchen", "type": "#affectionate-to"},{"source": "agathe", "target": "kaethchen", "type": "#comparable-with"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "agathe", "target": "elfride", "type": "#comparable-with"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "traum", "type": "#undergo"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "agathe", "target": "juliane", "type": "#comparable-with"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "juliane", "target": "traum", "type": "#undergo"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "kranz", "target": "brautjungfern", "type": "#belong-to"},{"source": "brautjungfern", "target": "reigen", "type": "#undergo"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "reigen", "target": "hochzeit", "type": "#part-of"},{"source": "kranz", "target": "braut", "type": "#belong-to"},{"source": "kranz", "target": "braut", "type": "#belong-to"},{"source": "myrte", "target": "kranz", "type": "#part-of"},{"source": "lavendel", "target": "kranz", "type": "#part-of"},{"source": "seide", "target": "kranz", "type": "#part-of"},{"source": "rosmarin", "target": "kranz", "type": "#part-of"},{"source": "thymian", "target": "kranz", "type": "#part-of"},{"source": "silber", "target": "kranz", "type": "#part-of"},{"source": "kranz", "target": "winden", "type": "#used-for"},{"source": "kranz", "target": "brautjungfern", "type": "#belong-to"},{"source": "kranz", "target": "agathe", "type": "#belong-to"}];
     </script>
         <script type="text/javascript" src="src/topicMapViz.js"/>
         <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"/>
+<!--      <script type="text/javascript" src="src/demo.js" charset="utf-8"/>-->
     </body>
 </html>
\ No newline at end of file
diff --git a/modules/app.xql b/modules/app.xql
index 7ea306e..a8d5d3b 100644
--- a/modules/app.xql
+++ b/modules/app.xql
@@ -5,6 +5,8 @@ module namespace freidi-tmv="http://www.freischuetz-digital.de/topicMapViz/app";
 import module namespace templates="http://exist-db.org/xquery/templates" ;
 import module namespace config="http://www.freischuetz-digital.de/topicMapViz/config" at "config.xqm";
 
+declare variable $freidi-tmv:text-root := "/db/contents/referenceTexts/";
+
 (:~
  : This is a sample templating function. It will be called by the templating module if
  : it encounters an HTML element with an attribute: data-template="app:test" or class="app:test" (deprecated). 
diff --git a/package.json b/package.json
index 6f412e0..feefa88 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "FreiDi-topicMapViz",
-  "version": "0.7.1-beta",
+  "version": "0.8.0-beta",
   "repository": {
     "type": "git",
     "url": "git://github.com/Freischuetz-Digital/topicMapViz.git"
diff --git a/readme.md b/readme.md
index 56c191f..6300cb3 100644
--- a/readme.md
+++ b/readme.md
@@ -6,7 +6,7 @@ It is intended for vizualizing JTM topic maps.
 
 For development purposes it can be built and served with bower and grunt, a respective test topic map is included as the application is tailored to our data.
 
-Moreover a ant script for building a eXist-db application is included. In the eXist based setup the tm-converter stylesheets by Lars Heuer (published at https://code.google.com/p/topic-maps/ under Apache License 2.0) will be used for transfroming XTM 2.0 topic maps to JTM 1.1 specification. In order to include theses script you need SVN installed as the repository will be checked out via bower install.
+Moreover a ant script for building a eXist-db application is included. In the eXist based setup the tmxsl stylesheets by Lars Heuer (published at https://github.com/heuer/tmxsl under Apache License 2.0) will be used for transfroming XTM 2.0 topic maps to JTM 1.1 specification. In order to include theses script you need SVN installed as the repository will be checked out via bower install.
 
 Setup
 -----
@@ -39,4 +39,4 @@ You need ant insalled on your system
 
 ```shell
 ant
-```
\ No newline at end of file
+```
diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 1a7e170..bf8db23 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -1,3 +1,18 @@
+/* global variables
+ * 
+ */
+var links = new Array();
+var nodes = new Array();
+var json;
+var topics;
+var topicsFiltered = new Array();
+var associations;
+var distance = 1;
+var currentTopic = {};
+
+/* prototype extensions
+ *
+ */
 (function() {
     var toString = Object.prototype.toString,
         //default parser
@@ -7,7 +22,7 @@
             return this.parser((toString.call(x) == "[object Object]" && x[this.prop]) || x);
         };
     // Creates a sort method in the Array prototype
-    Object.defineProperty(Array.prototype, "sortBy", {
+    Object.defineProperty(Array.prototype, "sortBySortName", {
         configurable: false,
         enumerable: false,
         // @o.prop: property name (if it is an Array of objects)
@@ -22,8 +37,8 @@
             //if @o.desc is true: set -1, else 1
             o.desc = [1, -1][+!!o.desc];
             return this.sort(function (a, b) {
-                a = getItem.call(o, a);
-                b = getItem.call(o, b);
+                a = getItem.call(o, a.names[0].variants[0].value.toLowerCase());
+                b = getItem.call(o, b.names[0].variants[0].value.toLowerCase());
                 return o.desc * ((a > b) - (b > a));
               //return o.desc * (a > b ? 1 : (a < b ? -1 : 0));
             });
@@ -42,7 +57,7 @@
  *  - topic classifications
  */
 
-function appendFilters(data){
+function appendFilters(data1){
   
   var data = $('#graph svg');
   //console.log(data);
@@ -62,54 +77,69 @@ function appendFilters(data){
       }
     }
   );
+  console.log('appendFilters: associationClasses:');
   console.log(associationClasses);
   
     $.each(data_nodes,
     function(i, item){
       var name = item.textContent;
+      var id = item.id;
       console.log(name);
       if($.inArray(name, nodeNames == -1)){
-        nodeNames.push(name);
+        nodeNames.push({"name": name, "id": id});
       }
     }
   );
   
+    if(nodeNames.length > 0){
+    d3.select('#filters').append('div').attr('id','filters-nodes').classed('col-md-6', true)
+     .append('h4').text('Topics');
+     
+   d3.select('#filters-nodes').append('div').attr('id','filters-nodes-list');
+  
+   nodeNames.forEach(function(item, i){
+       var newEntry = d3.select('#filters-nodes-list').append('div').classed('filter', true);
+      
+      newEntry.append('span').classed('filterLabel', true).text(item.name);
+     
+      newEntry.append('a').attr('onclick',"mapHighlight('#"+item.id+"')").classed('filter_highlight', true).text('highlight');
+       
+       
+   });
+  }
+  
   if(associationClasses.length > 0){
-    d3.select('#filters').append('div').attr('id','filters-classes')
-      .append('h4').text('Assoziationstypen');
+    d3.select('#filters').append('div').attr('id','filters-classes').classed('col-md-6', true)
+      .append('h4').text('Relationen');
+    
+    d3.select('#filters-classes').append('div').attr('id','filters-classes-list');
     
     associationClasses.forEach(function(item, i){
-      var newEntry = d3.select('#filters-classes').append('div').classed('filter', true);
-      
-      newEntry.append('span').classed('filterLabel', true).text(item.substring(item.indexOf('#')+1));
+      var newEntry = d3.select('#filters-classes-list').append('div').classed('filter', true);
+      console.log('building filter for');
+      console.log(item);
+      newEntry.append('span').classed('filterLabel', true).text(filterById(topics,'#'+item)[0].names[0].value);
      
-      newEntry.append('a').attr('onclick',"mapHighlight('"+item.substring(item.indexOf('#')+1)+"')").classed('filter_highlight', true).text('highlight');
+      newEntry.append('a').attr('onclick',"mapHighlight('."+item.substring(item.indexOf('#')+1)+"')").classed('filter_highlight', true).text('highlight');
     });
   }
   
-  if(nodeNames.length > 0){
-    d3.select('#filters').append('div').attr('id','filters-nodes')
-     .append('h4').text('Topics');
-  
-   nodeNames.forEach(function(item, i){
-       d3.select('#filters-nodes').append('div')
-         .text(item);
-   });
-  }
- 
-
 }
 
+/* function clearFilters
+ *
+ * empties #filters
+ */
 function clearFilters(){
   $('#filters').empty();
-};
+}
 
 /* function to highligh a class in the map
  *
  */
 function mapHighlight(identifier){
   //TODO impement toggle
-  var obj = $($('#graph .'+identifier));
+  var obj = $($('#graph '+identifier));
   var highlight_status = obj.attr('class').indexOf('highlight') > -1;
   console.log(highlight_status);
   if(highlight_status){
@@ -117,28 +147,31 @@ function mapHighlight(identifier){
   }else{
     obj.attr('class', obj.attr('class') + ' highlight');
   }
-};
+}
 
 /* function drawGraph
- * @param  localLinks 
+ * @param  localLinks
+ *
+ * draws a force graph using d3.js
  */
 function drawGraph(localLinks){
-  
+  console.log('init: drawGraph');
   // Compute the distinct nodes from the links.
   links.forEach(function(link) {//refer data
-   link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
-   link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
+   link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, distance: link.distance});
+   link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, distance: link.distance});
   });
+  console.log('drawGraph:nodes');
   console.log(nodes);
   
-   var width = 600,
+   var width = $('#graph').width(),
        height = 300;
    
    var force = d3.layout.force()
        .nodes(d3.values(nodes))
        .links(localLinks) //refer data
        .size([width, height])
-       .linkDistance(60)
+       .linkDistance(100)
        .charge(-100)
        .on("tick", tick)
        .start();
@@ -157,11 +190,11 @@ function drawGraph(localLinks){
    var node = svg.selectAll(".node")
        .data(force.nodes())
       .enter().append("g")
-        .attr("class", "node")
-        .attr("id", function(d) { return d.name.substring(1); })
+        .attr("class", function(d) {return "node " + "distance_"+d.distance; })
+        .attr("id", function(d) {return "node_" + d.name.substring(d.name.indexOf('#')+1); })
         .on("mouseover", mouseover)
         .on("mouseout", mouseout)
-        .on("click", onclick)
+        .on("dblclick", onclick)
         .call(force.drag);
    
    node.append("circle")
@@ -205,20 +238,39 @@ function drawGraph(localLinks){
     var node = d3.select(this);
     var text = node.select("text").text();
     var id = node.property("id");
-    selectTopic(id);
+    selectTopic('#'+id.substring(id.indexOf('_')+1));
   }
 //use event mechanism?
 clearFilters();
 appendFilters($('#graph svg'));
 }
 
-function filterByMember (object, value) {
 
+$("#sel_distance").change(function() {
+  var val = $("#sel_distance option:selected").val();
+  console.log(val);
+  distance = val;
+  selectTopic(currentTopic[0].item_identifiers[0]);
+  //selectTopic(currentTopic.id);
+});
+
+// helper functions
+
+/* function filterById
+ * @param object   the JSON array to be searched
+ * @param value    the value to be retrieved from any roles.player
+ *
+ * returns JSON array
+ */
+
+function filterByMember (object, value) {
+    console.log('filterByMember: ' +value);
   // The real meat of the solution, you can use this directly if you want.
   var num = $.map(object, function (item, key) { 
       var regEx = new RegExp(value, 'g');
+
       // this is where the check is done
-      if (item.roles[0].player.match(regEx) || item.roles[1].player.match(regEx)) {
+      if (item.roles[0].player.substring(item.roles[0].player.indexOf(':')+1) == value || item.roles[1].player.substring(item.roles[1].player.indexOf(':')+1) == value) {
 
         // if you want the index or property "0", "1", "2"... etc.
         // item._index = key;
@@ -230,6 +282,12 @@ function filterByMember (object, value) {
     return num
 }
 
+/* function filterById
+ * @param object   the JSON array to be searched
+ * @param value    the ID value to be retrieved
+ *
+ * returns JSON object
+ */
 function filterById (object, value) {
 
     console.log('filter by id:');
@@ -247,7 +305,7 @@ function filterById (object, value) {
       }
       
     });*/
-    return $.grep(topicsFiltered, function(element, index){
+    return $.grep(object, function(element, index){
       
       if(element.item_identifiers[0] === value){
         return element
@@ -256,30 +314,59 @@ function filterById (object, value) {
     });
 }
 
+/* function renderTopicDetail
+ * @param detail
+ *
+ * TODO: this function shoud be a general function for rendering arbitrary details to detail view in order to promote a more data driven and object oriented setup of this app
+ */
 function renderTopicDetail(detail){
   
 }
 
+/* function getTopicDetails
+ * @param topic
+ * @param i
+ *
+ * render topic details to detail area
+ */
+
 function getTopicDetails(topic, i){
-  
-  var newTopic = d3.select('#meta')
-    .append('dl').classed('topicDetail dl-horizontal', true);
+
+  var newTitle = d3.select('#title')
+    .append('h1').text(topic.names[0].value);
     
-    //topic
-    newTopic.append('dt').classed('key', true)
-    .text('Topic');
-    newTopic.append('dd').classed('value', true)
-    .text(topic.names[0].value);
+        if(topic.instance_of && typeof topic.instance_of !== 'undefined'){
+  newTitle.append('span').classed('small', true).text(' (');
+    for(i=0; i < topic.instance_of.length; i++){
+      newTitle.append('span').classed('small', true)
+        .text(topic.instance_of[i].substring(topic.instance_of[i].indexOf('#')+1)
+           + ((i === topic.instance_of.length-1) ? '' : ', ')
+        );
+    }
+  newTitle.append('span').classed('small', true).text(')');
+  }
     
     //variant(s)
     if(topic.names[0].variants && typeof topic.names[0].variants !== 'undefined'){
-      newTopic.append('dt').classed('key', true)
-        .text('Varianten');
-      for(i=0; i < topic.names[0].variants.length; i++){
-        newTopic.append('dd').classed('value', true)
-          .text(topic.names[0].variants[i].value);
+     // newTitle.append('span').classed('small', true)
+     //   .text('Varianten');
+     newTitle.append('div')
+      for(i=1; i < topic.names[0].variants.length; i++){
+         newTitle.append('span').classed('small', true).classed('muted', true)
+          .text(topic.names[0].variants[i].value + ((i === topic.names[0].variants.length-1) ? '' : ', '));
       }
-    };
+//console.log('variants');
+//console.log(variants);
+};
+  
+  var newTopic = d3.select('#sources');
+    //.append('dl').classed('topicDetail dl-horizontal', true);
+    
+    //topic DEPRECATED
+   /* newTopic.append('dt').classed('key', true)
+    .text('Topic');
+    newTopic.append('dd').classed('value', true)
+    .text(topic.names[0].value);*/
     
     //TODO: deprecated
     //declaration
@@ -290,27 +377,62 @@ function getTopicDetails(topic, i){
         .text(topic.declaration.bibl);
     };*/
     
-    //instanceOf
-    newTopic.append('dt').classed('key', true)
+    //instanceOf DEPRECATED
+   /* newTopic.append('dt').classed('key', true)
       .text('Klassifizierung');
     for(i=0; i < topic.instance_of.length; i++){
       newTopic.append('dd').classed('value', true)
         .text(topic.instance_of[i].substring(topic.instance_of[i].indexOf('#')+1));
-    };
+    };*/
     
     //occurrence(s)
-    if(topic.occurrence && topic.occurrence.resourceRef){
-      newTopic.append('dt').classed('key', true)
-        .text('Nachweise');
-      for(i=0; i < topic.occurrence.resourceRef.length; i++){
-        newTopic.append('dd').classed('value', true)
-          .text(topic.occurrence.resourceRef[i].href);
+    if(topic.occurrences && topic.occurrences.length > 0){
+      newTopic.append('h2')
+        .text('Fundstellen');
+      for(i=0; i < topic.occurrences.length; i++){
+      var ref = topic.occurrences[i].value;
+      var context = 'occurrence' + i;
+      console.log(context);
+      newTopic.append('div').attr('id', context);
+          /*.append('a').attr('href', topic.occurrences[i].value)
+          .text(topic.occurrences[i].value);*/
+            //var content;
+      var text = getOccurrenceDetail(topic.occurrences[i].value,context);
+
       }
     }
     
 }
 
+function getOccurrenceDetail(href, context){
+var text;
+var request = $.get("data/xql/getOccurrenceDetail.xql",{'href': href},
+  function(data, status){
+  console.log('function called');
+  console.log(status);
+  console.log('#'+context );
+  $('#'+context).append(data);
+  });
+/*var text = new String();
+$.ajax({
+    url: "data/xql/getOccurrenceDetail.xql",
+    method: "GET",
+    data: {'href': href},
+    dataType: 'text',
+    //context: document.body
+    success: function(result){text=result.responseText}
+    });
+    console.log(text);
+    return $.parseHTML(text);*/
+    console.log(text);
+
+}
+
+/* function clearTopicDetail
+ * clear Detail area
+ */
 function clearTopicDetail(){
+  $('#title').empty();
   $('#meta').empty();
   $('#graph').empty();
   var emptyArray = new Array();
@@ -318,99 +440,166 @@ function clearTopicDetail(){
   nodes = emptyArray;
 }
 
+/* function selectTopic
+ * @param  id
+ * @param  i
+ *
+ * this function is the onclick fnuction for items in the topicList
+ * it retrieves the corrsponding JSON object
+ * sets the corresponding list entry 'active'
+ * clears the detail view from previous topics details
+ * retrieves the links for the graph
+ * fires drawGraph
+ * fires getTopicDetails
+ */
 function selectTopic(id, i){
-  console.log('start selectTopic');
+  console.log('selectTopic: init');
   console.log('submitted i: '+ i);
   console.log('submitted id: '+ id);
-  var currentTopic = filterById(topicsFiltered, id);
+  currentTopic = filterById(topicsFiltered, id);
   console.log('current topic object:');
   console.log(currentTopic);
   var graphDepth = 2;
   
   $('.topicName').toggleClass('active',false);
-  $('#topic_'+id.substring(id.indexOf('#')+1)).toggleClass('active', true); //append class selected
+  $('#topic_'+id.substring(id.indexOf('#')+1)).toggleClass('active', true);
   
   clearTopicDetail();
   topicLinks = getNodeLinks(id, distance);
+  console.log('selectTopic: topicLinks');
+  console.log(topicLinks);
   links = topicLinks;
   drawGraph(links);
   getTopicDetails(currentTopic[0], i);
   
 }
 
+/* function  getNodeLinks
+ * @param    topicID  ID of the topic that should be origin of the graph
+ * @param    distance maximum number of node steps between topicID and other nodes
+ *
+ * this function returns the links d3 needs to render the graph
+ */
 function getNodeLinks(topicID,distance){
   console.log('determining nodes with parameters: ');
   console.log('topicID: '+topicID);
   console.log('distance: '+distance);
   var filterTopicRef = topicID;
+  var associations_secondary = new Array();
   console.log('filterTopics by ref to: '+ topicID);
-  var nodes = filterByMember (associations, topicID);
-  if (nodes.length == 0){
-    nodes.push(
-      filterById(topicsFiltered, topicID)
+  var associations_filtered = filterByMember (associations, topicID);
+  if (associations_filtered.length === 0){
+    selfTopic = filterById(topicsFiltered, topicID);
+console.log(selfTopic);
+    associations_filtered.push(
+      {
+        "reifier" : null,
+        "roles" : [
+          {"player" : 'ii:'+selfTopic[0].item_identifiers,
+           "reifier" : null,
+           "type" : selfTopic[0].instance_of
+          },
+          {"player" : 'ii:'+selfTopic[0].item_identifiers,
+           "reifier" : null,
+           "type" : selfTopic[0].instance_of
+          }
+        ],
+        "type" : 'self'
+      }
     )
-  };
-  console.log(nodes);
+  }else{
+    var players = new Array();
+    $.each(associations_filtered, function(i,association){
+      console.log(association);
+      $.each(association.roles, function(i,role){
+        if(role.player.substring(role.player.indexOf(':')+1) !== topicID){
+          players.push(role.player);
+        }
+      })
+    })
+    console.log('players');
+    console.log(players);
+    $.each(associations, function(i, association){
+        console.log($.inArray(players, association.roles[0].player));
+      if($.inArray(association.roles[0].player, players) !== -1 && $.inArray(association.roles[1].player, players) !== -1){
+          associations_secondary.push(association);
+          associations_filtered.push(association);
+      }
+    })
+  }
+  console.log('associations_filtered:');
+  console.log(associations_filtered);
+  console.log('associations_secondary:');
+  console.log(associations_secondary);
+  //if(associations_secondary.length > 0){window.alert('now')}
+  
+  var distantTopicRefs = new Array();
+  var addNodes = [];
   
   if(distance==2){
-    var distantTopicRefs = new Array();
-    //distantTopicRefs.push(filterTopicRef);
-    //console.log(filterTopicRef);
-    console.log('start topic loop');
-    $.each(nodes, function(i, item){
-      //distantTopicRefs.push(item.member[0].topicRef.href);
-      //distantTopicRefs.push(item.member[1].topicRef.href);
-      console.log('enter each loop on nodes');
+    console.log('distance=2, start topic loop');
+    $.each(associations_filtered, function(i, item){
+      console.log('init retrieve association for ');
+      console.log(item);
+      console.log('enter each loop on associations_filtered');
       $.each(item.roles, function(i, role){
         console.log('enter each loop on node.roles');
-        var topicRef = role.player;
+        var topicRef = role.player.substring(role.player.indexOf(':')+1);
         if($.inArray(topicRef, distantTopicRefs) == -1 && topicRef !== filterTopicRef){
+          
           distantTopicRefs.push(topicRef);
-          var addNodes = filterByMember (associations, topicRef);
+          topicRefNodes = filterByMember (associations, topicRef);
+          $.each(topicRefNodes, function(i,item){
+              addNodes.push(item);
+          })
+          console.log('ADD NODES: '+ topicRef)
           console.log(addNodes);
-          $.each(addNodes, function(i, item){nodes.push(item)});
         };
-        
       });
     });
-    
+    console.log('distantTopicRefs:');
     console.log(distantTopicRefs);
-    console.log(nodes);
   }
-  var myLinks = new Array();
+  console.log('addNodes:');
+  console.log(addNodes);
   
-  $.each(nodes,function(i, node){
-    //{"source": "nacht", "target": "wolfsschluchtszene", "type": "part-of"}
-    /*console.log('pos: ' + i);
-    console.log(node);*/
+  console.log('start create myLinks');
+  var myLinks = [];
+  console.log();
+  
+  $.each(associations_filtered,function(i, node){
+
     myLinks.push({ 
         "source" : node.roles[0].player.substring(node.roles[0].player.indexOf(':')),//TODO: function get ID
         "target" : node.roles[1].player.substring(node.roles[1].player.indexOf(':')),
-        "type"   : node.type 
+        "type"   : node.type,
+        "distance" : 1
     });
   });
-  
+  console.log('myLinks, distance=1:');
+  console.log(myLinks);
+  if(distance==2){
+    $.each(addNodes, function(i, node){
+        myLinks.push({ 
+        "source" : node.roles[0].player.substring(node.roles[0].player.indexOf(':')),//TODO: function get ID
+        "target" : node.roles[1].player.substring(node.roles[1].player.indexOf(':')),
+        "type"   : node.type,
+        "distance" : 2
+    });
+    });  
+  }
+  console.log('myLinks: distance=2');
   console.log(myLinks);
-  
-  return myLinks;
 
+  return myLinks;
 }
 
 /*End functions*/
 
-/* global variables
- * 
- */
-var links;
-var nodes = {};
-var json;
-var topics;
-var topicsFiltered = new Array();
-var associations;
-var distance = 1;
+
 
 /*
- * load data from filesystem as json using jquery ajax request
+ * load data from filesystem as json using jquery ajax request and populate topicList
  */
 $.getJSON("data/xql/getJSONtopicMap.xql", function(data){
   json = data;
@@ -419,16 +608,15 @@ $.getJSON("data/xql/getJSONtopicMap.xql", function(data){
   associations = data.associations;
   //console.log(associations);
   
-  //
   for (i=0; i < topics.length; i++) {
     
-    if(topics[i].names && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/association-type' && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/topic-type') {//&& topics[i].instanceOf
+    if(topics[i].names && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/association-type' && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/topic-type' && topics[i].instance_of !='ii:#variant-type') {
       topicsFiltered.push(topics[i]);
     }
-  };
+  }
   //console.log(topicsFiltered);
    
-  topicsFiltered.sortBy({prop: "item_identifiers"});
+  topicsFiltered.sortBySortName();//{prop: "item_identifiers"}
   
   for (i=0; i < topicsFiltered.length; i++) {
     var topic = topicsFiltered[i];