add filters for gallery

pdb-js/src/app/image-toggle/image-toggle.component.html

@@ -1 +1,10 @@
-<img src="{{imageUrl()}}" (click)="toggle($event)" class="icon-small" title="{{title()}}" />
+<img 
+  *ngIf="imageUrl()"
+  src="{{imageUrl()}}" 
+  (click)="toggle($event)" 
+  class="icon-small" 
+  title="{{title()}}" />
+<div 
+  class="image-toggle-text"
+  *ngIf="text" 
+  (click)="toggle($event)" >{{text}}</div>

pdb-js/src/app/image-toggle/image-toggle.component.scss

@@ -0,0 +1,11 @@
+:host{
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 1ex;
+}
+
+.image-toggle-text{
+  font-size: 1.5em;
+  font-weight: normal;
+}

pdb-js/src/app/image-toggle/image-toggle.component.ts

@@ -10,29 +10,33 @@ export class ImageToggleComponent implements OnInit {
   @Input()
   images : string = "";
   
-  value: number = 0;
+  index: number = 0;
   
   @Output()
   valueChanged : EventEmitter<number> = new EventEmitter<number>();
   
+  text = undefined;
+  
   _states : Array<any>;
 
   constructor() { }
 
   ngOnInit() {
     this._states = JSON.parse(this.images);
+    this.text = this._states[this.index].text;
   }
   
   imageUrl() : string {
-    return this._states[this.value].imageUrl;
+    return this._states[this.index].imageUrl;
   }
   
   title() : string {
-    return this._states[this.value].title;
+    return this._states[this.index].title;
   }
 
   toggle(event){
-    this.value = (this.value+1) % this._states.length;
-    this.valueChanged.emit(this.value);
+    this.index = (this.index+1) % this._states.length;
+    this.text = this._states[this.index].text;
+    this.valueChanged.emit(this._states[this.index].value);
   }
 }