diff --git a/src/app/services/navigation-service.service.ts b/src/app/services/navigation-service.service.ts
index e4e9d60..22897cb 100644
--- a/src/app/services/navigation-service.service.ts
+++ b/src/app/services/navigation-service.service.ts
@@ -1,340 +1,348 @@
 import {EventEmitter, Injectable, OnDestroy} from '@angular/core';
 import {
   TlnManuscript, NavigationEntity, TlnPage, TlnEntity, TlnWord, Image, TlnQueryParams,
   NavTree, Svg, TlnRow
 } from '../models/models';
 import {NietzscheSourceSeviceService} from "./nietzsche-source-sevice.service";
 import {Subscription} from "rxjs/index";
 import {ActivatedRoute, Params, Router} from "@angular/router";
 import {QueryService} from "./query.service";
 import {ExistDbSvgService, SvgService} from "./svg.service";
 import {DomSanitizer} from '@angular/platform-browser';
 
 @Injectable({
   providedIn: 'root'
 })
 export class NavigationServiceService implements OnDestroy {
 
   selectedManuscript: TlnManuscript;
   selectedPage: TlnPage;
   selectedRow: TlnRow;
   selectedWord: TlnWord;
 
   queryParams: TlnQueryParams;
   // Listening to the queries entered actively (so also if page is refreshed or a url loaded)
   queryParamSubscription: Subscription;
 
   constructor(private nietzscheSourceService: NietzscheSourceSeviceService,
               private router: Router,
               private sanitizer: DomSanitizer,
               private activatedRoute: ActivatedRoute,
               private queryService: QueryService,
               private svgService: ExistDbSvgService) {
 
     this.queryParams = new TlnQueryParams('', '', '', '', false, 0);
     // Listening to the queries entered actively (so also if page is refreshed or a url loaded)
     this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => {
         this.queryParams = new TlnQueryParams(queryparams.man,
                                               queryparams.page,
                                               queryparams.row,
                                               queryparams.word,
                                               queryparams.navBarOpenState,
                                               queryparams.navTreeIndex ); }
     );
 
     this.navTreeIndex = [
       {
         idx: 0,
         isActive: true,
         label: 'Manuskripte',
         treeClass: 'Tln:Manuscript'
       }, {
         idx: 1,
         isActive: false,
         label: 'Seiten',
         treeClass: 'TlnPage'
       }/*, {
         idx: 2,
         isActive: false,
         label: 'Worte',
         treeClass: 'TlnWord'
       }*/
     ];
   }
 
   resourceOfInterest: string; // simple iri for Databrowser and rdf stuff to come
   resourceOfInterestChange = new EventEmitter<string>();
 
   selectedManuscriptChange = new EventEmitter<TlnManuscript>();
   selectedPageChange = new EventEmitter<TlnPage>();
   selectedRowChange = new EventEmitter<TlnRow>();
   selectedWordChange =  new EventEmitter<TlnWord>();
 
   activeTreeData: Array<NavigationEntity>;
   activeTreeDataChange = new EventEmitter<Array<NavigationEntity>>(); // if the active tree data changes
 
   navTreeIndex: Array<NavTree>;
   navTreeIndexChange = new EventEmitter<Array<NavTree>>(); // Weather only the index changes
 
   manuscriptNavTree: Array<NavigationEntity> = [];
   manuscriptNavTreeChange = new EventEmitter<Array<NavigationEntity>>(); // internally used
   pageNavTree: Array<NavigationEntity> = [];
   pageNavTreeChange = new EventEmitter<Array<NavigationEntity>>(); // internally used
   wordNavTree: Array<NavigationEntity> = [];
 
   /**
    * setActiveTreeData
    * Set the active tree data and emits it back to navigation list component,
    * param: idx:number : the index of the tree data to be displayed.
    */
   setActiveTreeData(idx: number) {
     switch (idx) {
       case 0: // Manuscript
         this.activeTreeData = this.manuscriptNavTree;
         break;
       case 1: // Page
         this.activeTreeData = this.pageNavTree;
         break;
     }
     this.activeTreeDataChange.emit(this.activeTreeData);
   }
 
   updateRoute() {
     const activeUrl = this.router.url.split('?')[0]; // seems workaroundish, but easy
     this.router.navigate([activeUrl], { queryParams: this.queryParams });
   }
 
   /**
    * changeActiveTreeIndex
    * Simply changing the active tree index for the navBar in
    * param: idx:number : the index of the tree which should be displayed.
    */
   changeActiveTreeIndex(idx: number) {
     // setting all to false first
     for (const tree of this.navTreeIndex ) {
           tree.isActive = false; }
     this.navTreeIndex[idx].isActive = true;
     this.navTreeIndexChange.emit(this.navTreeIndex);
     this.setQueryParam('navTreeIndex', idx.toString() );
     // also routing according to the chosen thing
     this.updateRoute();
   }
 
   /**
    * createNavTreesOnInit creates the first trees if no query params are available in the url:
    * It ceates the manuscripNavTree and the pageNavTree of the first manuscript per default.
    *
    */
   createNavTreesOnInit() {
     this.createManuscriptNavTree();
     // create the pageNavTree with the first item of manuscriptNavTree AFTER the first TlnManuscript is in the manuscriptNavTree
     this.manuscriptNavTreeChange.subscribe(tree => {
       this.createPageNavTree(tree[0].tlnEntity.id);
       this.activeTreeData = tree;
       this.setActiveTreeData(0);
       this.changeActiveTreeIndex(0);
     });
     // TODO: Change to RDF for all entry points
     // this.createManuscriptNavTreeFromRdf();
     this.setSelectedManuscriptIfNone();
   }
 
   createManuscriptNavTreeFromRdf() {
     // TODO: implement this further for switch to RDF data only
     this.queryService.getQueryfromFilename('getConvolutes.rq').subscribe(qString => {
       this.queryService.getData(qString, 'SELECT').subscribe(data => {
         console.log('convolute data: ', data);
       });
     });
   }
 
   createManuscriptNavTree() {
     this.nietzscheSourceService.getConvolutes().subscribe( res => {
         const convolutes = res.result.children;
         convolutes.forEach(( x, index ) => {
           const entity = new TlnEntity(x.id, x.api_retrieve_content, 'man', index, x.id);
           const man = new NavigationEntity(index, entity, '');
-          this.manuscriptNavTree.push(man); });
-        this.manuscriptNavTreeChange.emit(this.manuscriptNavTree);
+          this.manuscriptNavTree.push(man);
+          if (index + 1 === convolutes.length) {
+            this.manuscriptNavTreeChange.emit(this.manuscriptNavTree);
+          }
+        });
       }
     );
   }
 
   // If no bookId passed, pages of the first book entry will be loaded
   createPageNavTree(bookId: string) {
       this.pageNavTree = [];
       this.nietzscheSourceService.getPages(bookId).subscribe( res => {
           const pages = res.result.children;
           pages.forEach((x, index) => {
             const entity = new TlnEntity(x.id, x.api_retrieve_content, 'page', index, x.id ); // TODO: change from static 'TlnPage' to rdfs:sth
             const pageEntity = new NavigationEntity(index, entity, '');
-            this.pageNavTree.push(pageEntity); });
-          this.addImagesToPageTree();
-          this.pageNavTreeChange.emit(this.pageNavTree);
-          this.setSelectedPageIfNone();
+            this.pageNavTree.push(pageEntity);
+            if (index + 1 === pages.length) {
+              this.pageNavTreeChange.emit(this.pageNavTree);
+              this.addImagesToPageTree();
+              this.setSelectedPageIfNone();
+            }});
         });
     }
 
     createManuscriptNavTreeFromUrl(params) {
       if (params.man) {
         this.createManuscriptNavTree();
         this.manuscriptNavTreeChange.subscribe(tree => {
           tree.forEach(navEntity => {
             if (navEntity.tlnEntity.id === params.man) {
               this.setSelectedManuscript(navEntity.tlnEntity);
               // resetting the a
               if (params.navTreeIndex === '0' ) {
                 this.setActiveTreeData(Number(params.navTreeIndex));
               }
             }});
         });
       }
     }
 
   createNavTreesFromUrl(params) {
     // change active
     this.changeActiveTreeIndex(Number(params.navTreeIndex));
     this.createManuscriptNavTreeFromUrl(params);
     this.createPageNavTreeFromUrl(params);
   }
 
   setSelectedManuscript(man: TlnEntity) {
     this.selectedManuscript = new TlnManuscript(man);
     this.selectedManuscriptChange.emit(this.selectedManuscript);
   }
 
   setSelectedManuscriptIfNone() {
     if (!this.selectedManuscript) {
       this.manuscriptNavTreeChange.subscribe(manTree => this.setSelectedManuscript(manTree[0].tlnEntity));
     }
   }
 
   setSelectedPage(pageData: TlnEntity ) {
     this.selectedPage = new TlnPage(pageData);
     this.addPageData(pageData.iri);
   }
 
   // sets the first page as selected if no selectedPage
   setSelectedPageIfNone() {
     if (!this.selectedPage) {
       this.pageNavTreeChange.subscribe(pageTree => this.setSelectedPage(pageTree[0].tlnEntity));
     }
   }
 
   turnPage(modifier: number) {
       const newPageIndex = this.selectedPage.entity.navIndex  + modifier;
       this.setSelectedPage(this.pageNavTree[newPageIndex].tlnEntity);
   }
 
   /**
    * createPageNavTreeFromUrl: Loads all navigation navigation trees according to the given queryParams passed
    * param: manId:number: the index of the chosen manuscript to be displayed.
    *
    */
   createPageNavTreeFromUrl(params) {
     if (params.man) {
       this.createPageNavTree(params.man);
       this.pageNavTreeChange.subscribe(tree => {
         tree.forEach( navEntity => {
           if (navEntity.tlnEntity.id === params.page ) {
             // TODO: outsource  creation of selectedPage into own method and get also its arrayIndex in pageNavTree via method.
             this.setSelectedPage(navEntity.tlnEntity);
           }
           // if the active tree === '1' we have to set pageNavTree as active tree
           if (params.navTreeIndex === '1' ) {
             // set pageTree as active tree
             this.setActiveTreeData(Number(params.navTreeIndex));
           }
         });
       });
     }
   }
 
   switchTreeIfPageView(activeTab: string) {
     if ( activeTab === 'page') {
       this.setActiveTreeData(1);
       this.changeActiveTreeIndex(1);
       this.setSelectedPageIfNone();
     }
   }
 
   onSelectedItem(item: NavigationEntity) {
     const activeTab = this.activatedRoute.snapshot['_urlSegment'].children.primary.segments[1].path;
     switch (item.tlnEntity.type) {
       case 'man': {
         // set the new url with the chose man parameter
         this.createPageNavTree(item.tlnEntity.id);
         // If the active tab is the page view we switch automatically to page tree in navigation
         this.switchTreeIfPageView(activeTab);
         this.setSelectedManuscript(item.tlnEntity);
         this.setQueryParam('man', this.selectedManuscript.entity.id );
         // also routing according to the chosen thing
         break;
       }
       case 'page': {
         this.setSelectedPage(item.tlnEntity);
         this.selectedPageChange.emit(this.selectedPage);
         this.setQueryParam('page', this.selectedPage.entity.id );
         // also routing according to the chosen thing
         break;
       }
 
       case 'word': {
         this.selectedWord = new TlnWord(item.tlnEntity);
         this.selectedWordChange.emit(this.selectedWord);
         // this.navTreeIndexChange.emit(this.navTreeIndex);
         this.setQueryParam('word', this.selectedWord.entity.id );
         // also routing according to the chosen thing
         break;
       }
       default: {
         console.log('unknown item.tlnEntity.type: ', item.tlnEntity.type);
       }
     }
     this.updateRoute();
   }
 
   setResourceOfInterest(res: string) {
     this.resourceOfInterest = res;
     this.resourceOfInterestChange.emit(res);
   }
 
   addImagesToPageTree() {
     for (let i = 0; i < this.pageNavTree.length; i++) {
       this.getThumb(this.pageNavTree[i].tlnEntity.iri, i);
     }
   }
 
+  // gets the thumbnail and updates pageNavTree
   getThumb(pageIri: string, index) {
     this.nietzscheSourceService.getPageData(pageIri).subscribe(data => {
       this.nietzscheSourceService.getImageFromUrl(data.result.metadata.download_version.thumb).subscribe(img => {
         const reader = new FileReader();
         reader.addEventListener('load', () => {
-          this.pageNavTree[index].img = reader.result;
+          if ( this.pageNavTree[index] ) {
+            this.pageNavTree[index].img = reader.result;
+          } else {console.log('noooooo'); }
         }, false);
         if (img) { reader.readAsDataURL(img); }
         this.pageNavTreeChange.emit(this.pageNavTree);
       });
     });
   }
 
   addPageData(pageIri: string) {
     this.nietzscheSourceService.getPageData(pageIri).subscribe(data => {
       const url = this.svgService.getSvgUrl(data.result.metadata.related_resource_identifier);
       // TODO: Ŝetting the selected page only  only onSelectItem?
       this.selectedPage.svg = new Svg(data.result.metadata.related_resource_identifier, url);
       this.selectedPageChange.emit(this.selectedPage);
     });
   }
 
   // sets queryParams: to the queryParam object
   setQueryParam(type: string, value: string) {
     this.queryParams[type] = value;
     // this.queryParamsChange.emit(this.queryParams);
   }
 
   ngOnDestroy() {
     // unsubscribe to subscriptions if component change so there is no memory leak
     this.queryParamSubscription.unsubscribe();
   }
 }