diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..aa4d7ad
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "flickrapi"]
+ path = flickrapi
+ url = git@github.com:Pomax/node-flickrapi.git
diff --git a/flickrapi b/flickrapi
new file mode 160000
index 0000000..e66f179
--- /dev/null
+++ b/flickrapi
@@ -0,0 +1 @@
+Subproject commit e66f179f1cad3b2113f0f5897c411ff12f5d1602
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c94af72
--- /dev/null
+++ b/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+ Flickr Chromecast
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/MagicFlickrWrapper.js b/js/MagicFlickrWrapper.js
new file mode 100644
index 0000000..3e634f8
--- /dev/null
+++ b/js/MagicFlickrWrapper.js
@@ -0,0 +1,63 @@
+function MagicFlickrWrapper(userId) {
+ this.userId = userId;
+ this.images = new Array();
+}
+
+MagicFlickrWrapper.prototype.getPhotosets = function() {
+ var that = this;
+ flickr.photosets.getList({
+ user_id: this.userId
+ }, function(error, result) {
+ for(var i in result.photosets.photoset) {
+ var photoset = result.photosets.photoset[i];
+ that.images.push(new PhotosetHandler(that.userId, photoset));
+ }
+ });
+}
+
+function PhotosetHandler(userId, photoset) {
+ this.userId = userId;
+ this.photoset = photoset;
+ this.background = null;
+
+ this.getPhotos(photoset.id)
+}
+
+PhotosetHandler.prototype.getPhotos = function(photosetId) {
+ var that = this;
+
+ flickr.photosets.getPhotos({
+ photoset_id: photosetId,
+ user_id: that.userId
+ }, function(error, result) {
+ that.getPhotoSizes(result.photoset.photo[0].id);
+ });
+}
+
+PhotosetHandler.prototype.getPhotoSizes = function(photoId) {
+ var that = this;
+
+ flickr.photos.getSizes({
+ photo_id: photoId
+ }, function(error, result) {
+ that.background = result.sizes.size[9].source;
+ that.injectHtml();
+ });
+}
+
+PhotosetHandler.prototype.injectHtml = function() {
+ var article = document.createElement('article');
+ article.setAttribute('data-flickr-id', this.photoset.id);
+ article.style.backgroundImage = "url(" + this.background + ")";
+
+ var heading = document.createElement('h1');
+ heading.innerHTML = this.photoset.title._content;
+
+ var description = document.createElement('p');
+ description.innerHTML = this.photoset.description._content;
+
+ article.appendChild(heading);
+ article.appendChild(description);
+
+ document.getElementById('flickr-container').appendChild(article);
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2210cf6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,36 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: 'Georgia', serif;
+}
+
+article {
+ height: 38rem;
+ width: 50%;
+ float: left;
+ background-size: cover;
+}
+
+article h1,
+article p {
+ width: 100%;
+ text-align: center;
+ color: #fff;
+ text-shadow: 0 0 5px black;
+}
+
+article h1 {
+ font-weight: normal;
+ font-size: 2.5rem;
+
+ margin-top: 15rem;
+}
+
+article p {
+ padding-top: 5em;
+ font-size: 1.4rem;
+ font-style: italic;
+}