initial commit

7 files changed, 619 insertions, 468 deletions

diff --git a/layouts/index.html b/layouts/index.html
index 45cd857..3ddc6dd 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,13 +9,34 @@
 				{{ partial "header.html" . }}
 			<div class="main">
 				<ul id="og-grid" class="og-grid">
-					{{ range $.Site.Data.items.items }}
+					{{ range $page := sort (where .Site.RegularPages "Type" "photo") ".Dir" }}
+					{{ range $index, $image := sort ($page.Resources.ByType "image") "Params.order" }}
 					<li>
-						<a href="{{.url}}" data-largesrc="{{.image}}" data-title="{{.title}}" data-description="{{.description }}" data-buttontext="{{.buttontext}}">
-							<img src="{{.thumb}}" alt="{{.alt}}"/>
+						<a href="{{ if isset $image.Params "button_url" }}{{ $image.Params.button_url }}{{ else }}#{{ end }}" data-largesrc="{{ $image.RelPermalink }}"
+						data-title="{{ $image.Name }}"
+						data-description="{{ $image.Params.description | markdownify }}"
+						{{ if isset $image.Params "button_text" }}data-buttontext="{{ $image.Params.button_text }}"{{ end }} data-collection="{{ $page.Title }}"
+						data-exif="{{- with $image.Exif -}}
+							{{- with .Tags -}}
+								<li>{{- if isset . "Model" }}{{ if not (hasPrefix (lower .Model) (lower .Make)) }}{{ .Make }} {{ end }}{{ .Model }}
+									{{- else }}{{ if isset $image.Params "composite" }}{{ $image.Params.composite }}
+									{{- else }}Composite Photo{{ end }}{{ end }}</li>
+								{{- if isset . "LensModel" }}
+								<li>{{- if not (hasPrefix (lower .LensModel) (lower .Make)) }}{{ .LensModel }}
+									{{- else }}{{ substr .LensModel (len .Make)}}{{ end }} @ {{ .FocalLength }}mm</li>
+								{{- end }}
+								{{- with .ExposureTime }}<li>S.S. {{ . }}s</li>{{ end }}
+								{{- with .FNumber }}<li>A. f/{{ . }}</li>{{ end }}
+								{{- with .ISOSpeedRatings }}<li>ISO {{ . }}</li>{{ end }}
+							{{ end -}}
+								<li>Taken at {{ if isset $image.Params "timestamp" }} {{ $image.Params.timestamp }} {{ else }}{{ .Date.Format "2006-1-2 15:04" }}{{ end }}</li>
+							{{ end }}">
+							{{ $.Scratch.Set "thumbnail" ($image.Resize "x250") }}
+							<img class="lazy" data-src="{{ ($.Scratch.Get "thumbnail").RelPermalink }}" style="width:{{ ($.Scratch.Get "thumbnail").Width }}px;" alt="Thumbnail of {{ $image.Name }}"/>
 						</a>
 					</li>
 					{{ end }}
+					{{ end }}
 				</ul>
 				{{ partial "footer.html" . }}
 			</div>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 9200fae..1446652 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -5,17 +5,24 @@
 		<meta name="description" content="{{ with .Site.Params.description }}{{ . }}{{ end }}" />
 		<meta name="keywords" content="{{ with .Site.Params.keywords }}{{ . }}{{ end }}" />
 		<meta name="author" content="{{ with .Site.Params.author }}{{ . }}{{ end }}" />
-		<link rel="icon" href="{{ .Site.Params.BaseURL }}favicon.ico" />
+		{{ with .Site.Params.favicon }}<link rel="icon" href="{{ . }}">{{ end }}
 		{{ .Hugo.Generator }}
 		<style>
 		body {
-		background: {{ .Site.Params.bodybgcolor }};
-		color: {{ .Site.Params.bodytextcolor }};
+			background: {{ .Site.Params.bodybgcolor }};
+			color: {{ .Site.Params.bodytextcolor }};
+		}
+		a {
+			color: {{ .Site.Params.bodytextcolor }};
+		}
+		button {
+			color: {{ .Site.Params.bodytextcolor }};
 		}
 		</style>
-		<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/default.css" />
-		<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/component.css" />
+		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:300,400,700" />
+		<link rel="stylesheet" type="text/css" href="{{ "css/default.css" | absURL }}" />
+		<link rel="stylesheet" type="text/css" href="{{ "css/component.css" | absURL }}" />
 		{{ range .Site.Params.custom_css }}
 			<link rel="stylesheet" href="{{ . }}">
 		{{ end }}
-		<script src="{{ .Site.BaseURL }}js/modernizr.custom.js"></script>
+		<script src="{{ "js/modernizr.custom.js" | absURL }}"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 0ebed2d..46394e6 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,3 +1,5 @@
 			<header class="clearfix">
-				<h1>{{ with .Site.Params.title }}{{ . | markdownify }}{{ end }}<span>{{ with .Site.Params.subtitle }}{{ . | markdownify }}{{ end }}</span></h1>
+				<h1>{{ with .Site.Params.title }}{{ . | markdownify }}{{ end }}</h1>
+				<span>{{ with .Site.Params.subtitle }}{{ . | markdownify }}{{ end }}</span>
+				<!-- <button onclick="shuffleImg()">Surprise Me!</button> -->
 			</header>
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index d0d1427..585b2ec 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,440 +1,2 @@
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-		<script>
-			var $event = $.event,
-			$special,
-			resizeTimeout;
-
-			$special = $event.special.debouncedresize = {
-				setup: function() {
-					$( this ).on( "resize", $special.handler );
-				},
-				teardown: function() {
-					$( this ).off( "resize", $special.handler );
-				},
-				handler: function( event, execAsap ) {
-					var context = this,
-						args = arguments,
-						dispatch = function() {
-							event.type = "debouncedresize";
-							$event.dispatch.apply( context, args );
-						};
-
-					if ( resizeTimeout ) {
-						clearTimeout( resizeTimeout );
-					}
-
-					execAsap ?
-						dispatch() :
-						resizeTimeout = setTimeout( dispatch, $special.threshold );
-				},
-				threshold: 250
-			};
-
-			var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
-
-			$.fn.imagesLoaded = function( callback ) {
-				var $this = this,
-					deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
-					hasNotify = $.isFunction(deferred.notify),
-					$images = $this.find('img').add( $this.filter('img') ),
-					loaded = [],
-					proper = [],
-					broken = [];
-
-				if ($.isPlainObject(callback)) {
-					$.each(callback, function (key, value) {
-						if (key === 'callback') {
-							callback = value;
-						} else if (deferred) {
-							deferred[key](value);
-						}
-					});
-				}
-
-				function doneLoading() {
-					var $proper = $(proper),
-						$broken = $(broken);
-
-					if ( deferred ) {
-						if ( broken.length ) {
-							deferred.reject( $images, $proper, $broken );
-						} else {
-							deferred.resolve( $images );
-						}
-					}
-
-					if ( $.isFunction( callback ) ) {
-						callback.call( $this, $images, $proper, $broken );
-					}
-				}
-
-				function imgLoaded( img, isBroken ) {
-					if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
-						return;
-					}
-
-					loaded.push( img );
-
-					if ( isBroken ) {
-						broken.push( img );
-					} else {
-						proper.push( img );
-					}
-
-					$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
-
-					if ( hasNotify ) {
-						deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
-					}
-
-					if ( $images.length === loaded.length ){
-						setTimeout( doneLoading );
-						$images.unbind( '.imagesLoaded' );
-					}
-				}
-
-				if ( !$images.length ) {
-					doneLoading();
-				} else {
-					$images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
-						imgLoaded( event.target, event.type === 'error' );
-					}).each( function( i, el ) {
-						var src = el.src;
-
-						var cached = $.data( el, 'imagesLoaded' );
-						if ( cached && cached.src === src ) {
-							imgLoaded( el, cached.isBroken );
-							return;
-						}
-
-						if ( el.complete && el.naturalWidth !== undefined ) {
-							imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
-							return;
-						}
-
-						if ( el.readyState || el.complete ) {
-							el.src = BLANK;
-							el.src = src;
-						}
-					});
-				}
-
-				return deferred ? deferred.promise( $this ) : $this;
-			};
-
-			var Grid = (function() {
-
-				var $grid = $( '*#og-grid' ),
-					$items = $grid.children( 'li' ),
-					current = -1,
-					previewPos = -1,
-					scrollExtra = 0,
-					marginExpanded = 10,
-					$window = $( window ), winsize,
-					$body = $( 'html, body' ),
-					transEndEventNames = {
-						'WebkitTransition' : 'webkitTransitionEnd',
-						'MozTransition' : 'transitionend',
-						'OTransition' : 'oTransitionEnd',
-						'msTransition' : 'MSTransitionEnd',
-						'transition' : 'transitionend'
-					},
-					transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
-					support = Modernizr.csstransitions,
-					settings = {
-						minHeight : 500,
-						speed : 350,
-						easing : 'ease'
-					};
-
-				function init( config ) {
-					
-					settings = $.extend( true, {}, settings, config );
-
-					$grid.imagesLoaded( function() {
-
-						saveItemInfo( true );
-						getWinSize();
-						initEvents();
-
-					} );
-
-				}
-
-				function addItems( $newitems ) {
-
-					$items = $items.add( $newitems );
-
-					$newitems.each( function() {
-						var $item = $( this );
-						$item.data( {
-							offsetTop : $item.offset().top,
-							height : $item.height()
-						} );
-					} );
-
-					initItemsEvents( $newitems );
-
-				}
-
-				function saveItemInfo( saveheight ) {
-					$items.each( function() {
-						var $item = $( this );
-						$item.data( 'offsetTop', $item.offset().top );
-						if( saveheight ) {
-							$item.data( 'height', $item.height() );
-						}
-					} );
-				}
-
-				function initEvents() {
-					
-					initItemsEvents( $items );
-					
-					$window.on( 'debouncedresize', function() {
-						
-						scrollExtra = 0;
-						previewPos = -1;
-						saveItemInfo();
-						getWinSize();
-						var preview = $.data( this, 'preview' );
-						if( typeof preview != 'undefined' ) {
-							hidePreview();
-						}
-
-					} );
-
-				}
-
-				function initItemsEvents( $items ) {
-					$items.on( 'click', 'span.og-close', function() {
-						hidePreview();
-						return false;
-					} ).children( 'a' ).on( 'click', function(e) {
-
-						var $item = $( this ).parent();
-						current === Array.from($items).findIndex(d => d == $item[0]) ? hidePreview() : showPreview( $item );
-						return false;
-
-					} );
-				}
-
-				function getWinSize() {
-					winsize = { width : $window.width(), height : $window.height() };
-				}
-
-				function showPreview( $item ) {
-
-					var preview = $.data( this, 'preview' ),
-						position = $item.data( 'offsetTop' );
-
-					scrollExtra = 0;
-
-					if( typeof preview != 'undefined' ) {
-
-						if( previewPos !== position ) {
-							if( position > previewPos ) {
-								scrollExtra = preview.height;
-							}
-							hidePreview();
-						}
-						else {
-							preview.update( $item );
-							return false;
-						}
-						
-					}
-
-					previewPos = position;
-					preview = $.data( this, 'preview', new Preview( $item ) );
-					preview.open();
-
-				}
-
-				function hidePreview() {
-					current = -1;
-					var preview = $.data( this, 'preview' );
-					preview.close();
-					$.removeData( this, 'preview' );
-				}
-
-				function Preview( $item ) {
-					this.$item = $item;
-					this.expandedIdx = Array.from($items).findIndex(d => d == this.$item[0]);
-					this.create();
-					this.update();
-				}
-
-				Preview.prototype = {
-					create : function() {
-						this.$title = $( '<h3></h3>' );
-						this.$description = $( '<p></p>' );
-						this.$href = $( '<a href="#" target="_blank">{{ .Site.Params.buttontext }}</a>' );
-						this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
-						this.$loading = $( '<div class="og-loading"></div>' );
-						this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
-						this.$closePreview = $( '<span class="og-close"></span>' );
-						this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
-						this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
-						this.$item.append( this.getEl() );
-						if( support ) {
-							this.setTransition();
-						}
-					},
-					update : function( $item ) {
-
-						if( $item ) {
-							this.$item = $item;
-						}
-						
-						if( current !== -1 ) {
-							var $currentItem = $items.eq( current );
-							$currentItem.removeClass( 'og-expanded' );
-							this.$item.addClass( 'og-expanded' );
-							this.positionPreview();
-						}
-
-						current = this.$item.index();
-
-						var $itemEl = this.$item.children( 'a' ),
-							eldata = {
-								href : $itemEl.attr( 'href' ),
-								largesrc : $itemEl.data( 'largesrc' ),
-								title : $itemEl.data( 'title' ),
-								description : $itemEl.data( 'description' ),
-								buttontext : $itemEl.data( 'buttontext' )
-							};
-
-						this.$title.html( eldata.title );
-						this.$description.html( eldata.description );
-						if(eldata.buttontext) this.$href.text(eldata.buttontext);
-						else this.$href.text("{{ .Site.Params.buttontext }}")
-
-						if (eldata.href) {
-							this.$href.attr( 'href', eldata.href );
-							this.$href.show();
-						}
-						else {
-							this.$href.hide();
-						}
-
-						var self = this;
-						
-						if( typeof self.$largeImg != 'undefined' ) {
-							self.$largeImg.remove();
-						}
-
-						if( self.$fullimage.is( ':visible' ) ) {
-							this.$loading.show();
-							$( '<img/>' ).load( function() {
-								var $img = $( this );
-								if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) {
-									self.$loading.hide();
-									self.$fullimage.find( 'img' ).remove();
-									self.$largeImg = $img.fadeIn( 350 );
-									self.$fullimage.append( self.$largeImg );
-								}
-							} ).attr( 'src', eldata.largesrc );	
-						}
-
-					},
-					open : function() {
-
-						setTimeout( $.proxy( function() {	
-							this.setHeights();
-							this.positionPreview();
-						}, this ), 25 );
-
-					},
-					close : function() {
-
-						var self = this,
-							onEndFn = function() {
-								if( support ) {
-									$( this ).off( transEndEventName );
-								}
-								self.$item.removeClass( 'og-expanded' );
-								self.$previewEl.remove();
-							};
-
-						setTimeout( $.proxy( function() {
-
-							if( typeof this.$largeImg !== 'undefined' ) {
-								this.$largeImg.fadeOut( 'fast' );
-							}
-							this.$previewEl.css( 'height', 0 );
-							var $expandedItem = $items.eq( this.expandedIdx );
-							$expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn );
-
-							if( !support ) {
-								onEndFn.call();
-							}
-
-						}, this ), 25 );
-						
-						return false;
-
-					},
-					calcHeight : function() {
-
-						var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
-							itemHeight = winsize.height;
-
-						if( heightPreview < settings.minHeight ) {
-							heightPreview = settings.minHeight;
-							itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
-						}
-
-						this.height = heightPreview;
-						this.itemHeight = itemHeight;
-
-					},
-					setHeights : function() {
-
-						var self = this,
-							onEndFn = function() {
-								if( support ) {
-									self.$item.off( transEndEventName );
-								}
-								self.$item.addClass( 'og-expanded' );
-							};
-
-						this.calcHeight();
-						this.$previewEl.css( 'height', this.height );
-						this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );
-
-						if( !support ) {
-							onEndFn.call();
-						}
-
-					},
-					positionPreview : function() {
-
-						var position = this.$item.data( 'offsetTop' ),
-							previewOffsetT = this.$previewEl.offset().top - scrollExtra,
-							scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT;
-						
-						$body.animate( { scrollTop : scrollVal }, settings.speed );
-
-					},
-					setTransition  : function() {
-						this.$previewEl.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing );
-						this.$item.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing );
-					},
-					getEl : function() {
-						return this.$previewEl;
-					}
-				}
-
-				return { 
-					init : init,
-					addItems : addItems
-				};
-
-			})();
-		</script>
-		<script>
-			$(function() {
-				Grid.init();
-			});
-		</script>
+		<script src="{{ "js/main.js" | absURL }}"></script>
diff --git a/static/css/component.css b/static/css/component.css
index 8f21f49..297a6f5 100644
--- a/static/css/component.css
+++ b/static/css/component.css
@@ -19,6 +19,7 @@
 	outline: none;
 	display: block;
 	position: relative;
+	width: 100%;
 }
 
 .og-grid li.og-expanded > a::after {
@@ -87,7 +88,6 @@
 
 .og-fullimg,
 .og-details {
-	width: 50%;
 	float: left;
 	height: 100%;
 	overflow: hidden;
@@ -95,10 +95,13 @@
 }
 
 .og-details {
+	width: 40%;
 	padding: 0 40px 0 20px;
+	color: #555;
 }
 
 .og-fullimg {
+	width: 60%;
 	text-align: center;
 }
 
@@ -110,16 +113,17 @@
 
 .og-details h3 {
 	font-weight: 300;
-	font-size: 52px;
-	padding: 40px 0 10px;
+	font-size: 40px;
+	padding: 30px 0 10px;
 	margin-bottom: 10px;
+	color: black;
 }
 
 .og-details p {
 	font-weight: 400;
 	font-size: 16px;
 	line-height: 22px;
-	color: #999;
+	padding-bottom: 1em;
 }
 
 .og-details a {
@@ -192,4 +196,35 @@
 	.og-fullimg { display: none; }
 	.og-details { float: none; width: 100%; }
 	
+}
+
+ul.exif {
+  list-style-type: square;
+  -webkit-column-width: 180px;
+  -moz-column-width: 180px;
+  column-width: 180px;
+  -webkit-column-count: 2; /* max count */
+  -moz-column-count: 2;
+  column-count: 2;
+	text-align: left;
+	padding: 10px;
+	margin: 0;
+	
+}
+
+ul.exif > li {
+	height: auto;
+	display: list-item;
+	margin: 0;
+}
+
+.stamp {
+	color: #555;
+	font-size: 1em;
+	font-weight: 700;
+	border: 0.5rem double #555;
+	display: inline-block;
+	padding: 0.25rem 1rem;
+	text-transform: uppercase;
+	border-radius: 1rem;
 }
\ No newline at end of file
diff --git a/static/css/default.css b/static/css/default.css
index 795ce2d..f8ed59e 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -1,6 +1,3 @@
-/* General Demo Style */
-@import url(//fonts.googleapis.com/css?family=Lato:300,400,700);
-
 html { height: 100%; }
 
 *,
@@ -29,16 +26,14 @@ html { height: 100%; }
 }
 
 body {
-    font-family: 'Lato', Calibri, Arial, sans-serif;
+    font-family: 'Lato', Arial, Calibri, sans-serif;
     font-weight: 300;
     font-size: 15px;
-    color: #333;
     overflow: scroll;
     overflow-x: hidden;
 }
 
 a {
-	color: #555;
 	text-decoration: none;
 }
 
@@ -52,29 +47,41 @@ a {
 	max-width: 1240px;
 	margin: 0 auto;
 	position: relative;
-	padding: 0 30px 50px 30px;
-}
-
-.container > header {
-	padding: 60px 30px 50px;
+	padding: 20px 30px;
 	text-align: center;
+	font-size: 20px;
 }
 
 .container > header h1 {
 	font-size: 34px;
-	line-height: 38px;
 	margin: 0 auto;
 	font-weight: 700;
-	color: #333;
 }
 
-.container > header h1 span {
+.container > header span {
 	display: block;
-	font-size: 20px;
 	font-weight: 300;
+	text-align: left;
+	padding-bottom: 0.5em;
+}
+
+
+.container > header button {
+	background-color: rgb(116, 116, 116);
+  border: none;
+  padding: 0.2em 0.5em;
+  text-align: center;
+  text-decoration: none;
+	display: inline-block;
+	font-weight: bold;
 }
 
 .main > p {
 	text-align: center;
 	padding: 50px 20px;
 }
+
+img.lazy{
+	display: block;
+	height: 250px;
+}
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
new file mode 100644
index 0000000..a33a50e
--- /dev/null
+++ b/static/js/main.js
@@ -0,0 +1,517 @@
+// main popup function
+$(function() {
+  Grid.init();
+});
+
+var $event = $.event,
+$special,
+resizeTimeout;
+
+$special = $event.special.debouncedresize = {
+  setup: function() {
+    $( this ).on( "resize", $special.handler );
+  },
+  teardown: function() {
+    $( this ).off( "resize", $special.handler );
+  },
+  handler: function( event, execAsap ) {
+    var context = this,
+      args = arguments,
+      dispatch = function() {
+        event.type = "debouncedresize";
+        $event.dispatch.apply( context, args );
+      };
+
+    if ( resizeTimeout ) {
+      clearTimeout( resizeTimeout );
+    }
+
+    execAsap ?
+      dispatch() :
+      resizeTimeout = setTimeout( dispatch, $special.threshold );
+  },
+  threshold: 250
+};
+
+var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
+
+$.fn.imagesLoaded = function( callback ) {
+  var $this = this,
+    deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
+    hasNotify = $.isFunction(deferred.notify),
+    $images = $this.find('img').add( $this.filter('img') ),
+    loaded = [],
+    proper = [],
+    broken = [];
+
+  if ($.isPlainObject(callback)) {
+    $.each(callback, function (key, value) {
+      if (key === 'callback') {
+        callback = value;
+      } else if (deferred) {
+        deferred[key](value);
+      }
+    });
+  }
+
+  function doneLoading() {
+    var $proper = $(proper),
+      $broken = $(broken);
+
+    if ( deferred ) {
+      if ( broken.length ) {
+        deferred.reject( $images, $proper, $broken );
+      } else {
+        deferred.resolve( $images );
+      }
+    }
+
+    if ( $.isFunction( callback ) ) {
+      callback.call( $this, $images, $proper, $broken );
+    }
+  }
+
+  function imgLoaded( img, isBroken ) {
+    if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
+      return;
+    }
+
+    loaded.push( img );
+
+    if ( isBroken ) {
+      broken.push( img );
+    } else {
+      proper.push( img );
+    }
+
+    $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
+
+    if ( hasNotify ) {
+      deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
+    }
+
+    if ( $images.length === loaded.length ){
+      setTimeout( doneLoading );
+      $images.unbind( '.imagesLoaded' );
+    }
+  }
+
+  if ( !$images.length ) {
+    doneLoading();
+  } else {
+    $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
+      imgLoaded( event.target, event.type === 'error' );
+    }).each( function( i, el ) {
+      var src = el.src;
+
+      var cached = $.data( el, 'imagesLoaded' );
+      if ( cached && cached.src === src ) {
+        imgLoaded( el, cached.isBroken );
+        return;
+      }
+
+      if ( el.complete && el.naturalWidth !== undefined ) {
+        imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
+        return;
+      }
+
+      if ( el.readyState || el.complete ) {
+        el.src = BLANK;
+        el.src = src;
+      }
+    });
+  }
+
+  return deferred ? deferred.promise( $this ) : $this;
+};
+
+var Grid = (function() {
+
+  var $grid = $( '*#og-grid' ),
+    $items = $grid.children( 'li' ),
+    current = -1,
+    previewPos = -1,
+    scrollExtra = 0,
+    marginExpanded = 10,
+    $window = $( window ), winsize,
+    $body = $( 'html, body' ),
+    transEndEventNames = {
+      'WebkitTransition' : 'webkitTransitionEnd',
+      'MozTransition' : 'transitionend',
+      'OTransition' : 'oTransitionEnd',
+      'msTransition' : 'MSTransitionEnd',
+      'transition' : 'transitionend'
+    },
+    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
+    support = Modernizr.csstransitions,
+    settings = {
+      minHeight : 500,
+      speed : 350,
+      easing : 'ease'
+    };
+
+  function updateList() {
+    $items = $grid.children( 'li' );
+    saveItemInfo(true);
+  }
+  
+  function init( config ) {
+    
+    settings = $.extend( true, {}, settings, config );
+
+    $grid.imagesLoaded( function() {
+
+      saveItemInfo( true );
+      getWinSize();
+      initEvents();
+
+    } );
+
+  }
+
+  function addItems( $newitems ) {
+
+    $items = $items.add( $newitems );
+
+    $newitems.each( function() {
+      var $item = $( this );
+      $item.data( {
+        offsetTop : $item.offset().top,
+        height : $item.height()
+      } );
+    } );
+
+    initItemsEvents( $newitems );
+
+  }
+
+  function saveItemInfo( saveheight ) {
+    $items.each( function() {
+      var $item = $( this );
+      $item.data( 'offsetTop', $item.offset().top );
+      if( saveheight ) {
+        $item.data( 'height', $item.height() );
+      }
+    } );
+  }
+
+  function initEvents() {
+    
+    initItemsEvents( $items );
+    
+    $window.on( 'debouncedresize', function() {
+      
+      scrollExtra = 0;
+      previewPos = -1;
+      saveItemInfo();
+      getWinSize();
+      var preview = $.data( this, 'preview' );
+      if( typeof preview != 'undefined' ) {
+        hidePreview();
+      }
+
+    } );
+
+  }
+
+  function initItemsEvents( $items ) {
+    $items.on( 'click', 'span.og-close', function() {
+      hidePreview();
+      return false;
+    } ).children( 'a' ).on( 'click', function(e) {
+
+      var $item = $( this ).parent();
+      current === Array.from($items).findIndex(d => d == $item[0]) ? hidePreview() : showPreview( $item );
+      return false;
+
+    } );
+  }
+
+  function getWinSize() {
+    winsize = { width : $window.width(), height : $window.height() };
+  }
+
+  function showPreview( $item ) {
+
+    var preview = $.data( this, 'preview' ),
+      position = $item.data( 'offsetTop' );
+
+    scrollExtra = 0;
+
+    if( typeof preview != 'undefined' ) {
+
+      if( previewPos !== position ) {
+        if( position > previewPos ) {
+          scrollExtra = preview.height;
+        }
+        hidePreview();
+      }
+      else {
+        preview.update( $item );
+        return false;
+      }
+      
+    }
+
+    previewPos = position;
+    preview = $.data( this, 'preview', new Preview( $item ) );
+    preview.open();
+
+  }
+
+  function hidePreview() {
+    current = -1;
+    var preview = $.data( this, 'preview' );
+    preview.close();
+    $.removeData( this, 'preview' );
+  }
+
+  function Preview( $item ) {
+    this.$item = $item;
+    this.expandedIdx = Array.from($items).findIndex(d => d == this.$item[0]);
+    this.create();
+    this.update();
+  }
+
+  Preview.prototype = {
+    create : function() {
+      this.$title = $( '<h3></h3>' );
+      this.$description = $( '<p></p>' );
+      this.$href = $( '<a href="#" target="_blank"></a>' );
+      this.$exifInfo = $( '<ul class="exif"></ul>' );
+      this.$collectionName = $( '<div class="stamp"></div>' );
+      this.$details = $( '<div class="og-details"></div>' ).append( this.$collectionName, this.$title, this.$description, this.$exifInfo, this.$href);
+      this.$loading = $( '<div class="og-loading"></div>' );
+      this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
+      this.$closePreview = $( '<span class="og-close"></span>' );
+      this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
+      this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
+      this.$item.append( this.getEl() );
+      if( support ) {
+        this.setTransition();
+      }
+    },
+    update : function( $item ) {
+
+      if( $item ) {
+        this.$item = $item;
+      }
+      
+      if( current !== -1 ) {
+        var $currentItem = $items.eq( current );
+        $currentItem.removeClass( 'og-expanded' );
+        this.$item.addClass( 'og-expanded' );
+        this.positionPreview();
+      }
+
+      current = this.$item.index();
+
+      var $itemEl = this.$item.children( 'a' ),
+        eldata = {
+          href : $itemEl.attr( 'href' ),
+          largesrc : $itemEl.data( 'largesrc' ),
+          title : $itemEl.data( 'title' ),
+          description : $itemEl.data( 'description' ),
+          exif : $itemEl.data( 'exif' ),
+          buttontext : $itemEl.data( 'buttontext' ),
+          collectionName : $itemEl.data( 'collection' )
+        };
+
+      this.$title.html( eldata.title );
+      this.$description.html( eldata.description );
+      this.$exifInfo.html( eldata.exif );
+      this.$collectionName.html( eldata.collectionName );
+      if(eldata.buttontext) this.$href.text(eldata.buttontext);
+
+      if (eldata.href && eldata.buttontext) {
+        this.$href.attr( 'href', eldata.href );
+        this.$href.show();
+      }
+      else {
+        this.$href.hide();
+      }
+
+      var self = this;
+      
+      if( typeof self.$largeImg != 'undefined' ) {
+        self.$largeImg.remove();
+      }
+
+      if( self.$fullimage.is( ':visible' ) ) {
+        this.$loading.show();
+        $( '<img/>' ).load( function() {
+          var $img = $( this );
+          if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) {
+            self.$loading.hide();
+            self.$fullimage.find( 'img' ).remove();
+            self.$largeImg = $img.fadeIn( 350 );
+            self.$fullimage.append( self.$largeImg );
+          }
+        } ).attr( 'src', eldata.largesrc );
+      }
+
+    },
+    open : function() {
+
+      setTimeout( $.proxy( function() {	
+        this.setHeights();
+        this.positionPreview();
+      }, this ), 25 );
+
+    },
+    close : function() {
+
+      var self = this,
+        onEndFn = function() {
+          if( support ) {
+            $( this ).off( transEndEventName );
+          }
+          self.$item.removeClass( 'og-expanded' );
+          self.$previewEl.remove();
+        };
+
+      setTimeout( $.proxy( function() {
+
+        if( typeof this.$largeImg !== 'undefined' ) {
+          this.$largeImg.fadeOut( 'fast' );
+        }
+        this.$previewEl.css( 'height', 0 );
+        var $expandedItem = $items.eq( this.expandedIdx );
+        $expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn );
+
+        if( !support ) {
+          onEndFn.call();
+        }
+
+      }, this ), 25 );
+      
+      return false;
+
+    },
+    calcHeight : function() {
+
+      var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
+        itemHeight = winsize.height;
+
+      if( heightPreview < settings.minHeight ) {
+        heightPreview = settings.minHeight;
+        itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
+      }
+
+      this.height = heightPreview;
+      this.itemHeight = itemHeight;
+
+    },
+    setHeights : function() {
+
+      var self = this,
+        onEndFn = function() {
+          if( support ) {
+            self.$item.off( transEndEventName );
+          }
+          self.$item.addClass( 'og-expanded' );
+        };
+
+      this.calcHeight();
+      this.$previewEl.css( 'height', this.height );
+      this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );
+
+      if( !support ) {
+        onEndFn.call();
+      }
+
+    },
+    positionPreview : function() {
+
+      var position = this.$item.data( 'offsetTop' ),
+        previewOffsetT = this.$previewEl.offset().top - scrollExtra,
+        scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT;
+      
+      $body.animate( { scrollTop : scrollVal }, settings.speed );
+
+    },
+    setTransition  : function() {
+      this.$previewEl.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing );
+      this.$item.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing );
+    },
+    getEl : function() {
+      return this.$previewEl;
+    }
+  }
+
+  return { 
+    init : init,
+    addItems : addItems,
+    updateList: updateList
+  };
+
+})();
+
+// lazy loading thumbnails
+document.addEventListener("DOMContentLoaded", function() {
+  var lazyloadImages;    
+
+  if ("IntersectionObserver" in window) {
+    lazyloadImages = document.querySelectorAll("img.lazy");
+    var imageObserver = new IntersectionObserver(function(entries, observer) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          var image = entry.target;
+          $(image).load(function(){
+            image.classList.remove("lazy");
+            image.style.removeProperty("width");
+          }).attr('src', image.dataset.src);
+          imageObserver.unobserve(image);
+        }
+      });
+    });
+
+    lazyloadImages.forEach(function(image) {
+      imageObserver.observe(image);
+    });
+  } else {  
+    var lazyloadThrottleTimeout;
+    lazyloadImages = document.querySelectorAll("img.lazy");
+
+    function lazyload () {
+      if(lazyloadThrottleTimeout) {
+        clearTimeout(lazyloadThrottleTimeout);
+      }    
+
+      lazyloadThrottleTimeout = setTimeout(function() {
+        var scrollTop = window.pageYOffset;
+        lazyloadImages.forEach(function(img) {
+            if(img.offsetTop < (window.innerHeight + scrollTop)) {
+              img.src = img.dataset.src;
+              img.classList.remove('lazy');
+            }
+        });
+        if(lazyloadImages.length == 0) { 
+          document.removeEventListener("scroll", lazyload);
+          window.removeEventListener("resize", lazyload);
+          window.removeEventListener("orientationChange", lazyload);
+        }
+      }, 20);
+    }
+
+    document.addEventListener("scroll", lazyload);
+    window.addEventListener("resize", lazyload);
+    window.addEventListener("orientationChange", lazyload);
+  }
+})
+
+function shuffleImg(){
+  var imgGrid = $("ul#og-grid");
+  var preview = $.data( this, 'preview' );
+  if( typeof preview != 'undefined' ) {
+    current = -1;
+    preview.close();
+    $.removeData( this, 'preview' );
+  }
+  imgGrid.hide();
+  for (var i = imgGrid.children().length; i >= 0; i--) {
+    imgGrid.append(imgGrid.children()[Math.random() * i | 0]);
+  }
+ Grid.updateList();
+ imgGrid.show();
+}
\ No newline at end of file