implementing photo infobox

frontend/app/gallery/directory/directory.gallery.component.html

@@ -1,4 +1,5 @@
-<a  class="button " [routerLink]="['Gallery',{directory: getDirectoryPath()}]" >
+<a class="button btn btn-default" [routerLink]="['Gallery',{directory: getDirectoryPath()}]"
+   style="display: inline-block;">
   {{directory.name}}
 </a>
 

frontend/app/gallery/gallery.component.html

@@ -4,9 +4,8 @@
         <gallery-search *ngIf="showSearchBar"></gallery-search>
     </div>
     <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory">
-        <div *ngFor="let directory of _galleryService.content.directory.directories">
+        <gallery-directory *ngFor="let directory of _galleryService.content.directory.directories"
-            <gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
+                           [directory]="directory"></gallery-directory>
-        </div>
         <gallery-grid [photos]="_galleryService.content.directory.photos" [lightbox]="lightbox"></gallery-grid>
     </div>
 

frontend/app/gallery/grid/photo/photo.grid.gallery.component.css

@@ -2,3 +2,46 @@ img {
     width: inherit;
     height: inherit;
 }
+
+.info {
+    background-color: transparent;
+    color: white;
+    font-size: medium;
+    position: relative;
+    padding: 5px;
+    margin-top: -50px;
+
+    transition: all .3s ease-out;
+    -moz-transition: all .3s ease-out;
+    -webkit-transition: all .3s ease-out;
+    -o-transition: all .3s ease-out;
+}
+
+.photo-container {
+    width: inherit;
+    height: inherit;
+    overflow: hidden;
+}
+
+.photo-name {
+    display: inline-block;
+}
+
+.photo-position {
+    display: inline-block;
+    float: right;
+}
+
+a {
+    color: white;
+
+}
+
+.photo-keywords {
+    margin-top: 5px;
+    font-size: small;
+    text-align: right;
+    display: inline-block;
+    width: 100%;
+}
+

frontend/app/gallery/grid/photo/photo.grid.gallery.component.html

@@ -1 +1,23 @@
-<img #image [src]="gridPhoto.getThumbnailPath()">
+<div class="photo-container" (mouseover)="hover()" (mouseout)="mouseOut()">
+    <img #image [src]="gridPhoto.getThumbnailPath()">
+    <div class="info" #info [style.margin-top.px]="-infoHeight" [style.background]="infobackground">
+        <div class="photo-name">{{gridPhoto.photo.name}}</div>
+
+        <div class="photo-position" *ngIf="gridPhoto.photo.metadata.positionData">
+            <span class="glyphicon glyphicon-globe"></span>
+            <a *ngIf="gridPhoto.photo.metadata.positionData.city || gridPhoto.photo.metadata.positionData.state || gridPhoto.photo.metadata.positionData.country">
+                {{gridPhoto.photo.metadata.positionData.city || gridPhoto.photo.metadata.positionData.state ||
+                gridPhoto.photo.metadata.positionData.country}}
+            </a>
+        </div>
+
+
+        <div class="photo-keywords">
+            <template ngFor let-keyword [ngForOf]="gridPhoto.photo.metadata.keywords" let-last="last">
+                #<a>{{keyword}}</a>
+                <template [ngIf]="!last">,</template>
+            </template>
+
+        </div>
+    </div>
+</div>

frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts

@@ -1,6 +1,7 @@
 ///<reference path="../../../../browser.d.ts"/>
 
 import {Component, Input, ElementRef, ViewChild} from "@angular/core";
+import {AnimationBuilder} from "@angular/platform-browser/src/animate/animation_builder";
 import {IRenderable, Dimension} from "../../../model/IRenderable";
 import {GridPhoto} from "../GridPhoto";
 
@@ -12,17 +13,26 @@ import {GridPhoto} from "../GridPhoto";
 export class GalleryPhotoComponent implements IRenderable {
     @Input() gridPhoto:GridPhoto;
     @ViewChild("image") imageRef:ElementRef;
+    @ViewChild("info") infoDiv:ElementRef;
+    infoHeight:number = 0;
+    infobackground = "";
 
-    constructor() {
+
+    constructor(private animBuilder:AnimationBuilder) {
     }
 
-    /* getPhotoPath() {
 
-     let renderSize = Math.sqrt(this.gridPhoto.renderWidth * this.gridPhoto.renderHeight);
+    hover() {
-     let size = Utils.findClosest(renderSize, Config.Client.thumbnailSizes);
+        this.infoHeight = this.infoDiv.nativeElement.clientHeight;
-     return Utils.concatUrls("/api/gallery/content/", this.gridPhoto.photo.directory.path, this.gridPhoto.photo.directory.name, this.gridPhoto.photo.name, "thumbnail", size.toString());
+        this.infobackground = "rgba(0,0,0,0.8)";
+ 
+    }
+
+    mouseOut() {
+        this.infoHeight = 0;
+        this.infobackground = "rgba(0,0,0,0.0)";
+
     }
-     */
     
     public getDimension():Dimension {
         return new Dimension(this.imageRef.nativeElement.offsetTop,