Refactor grid expander

5 files changed, 478 insertions, 450 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 3f28e15..564619e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,7 +6,12 @@
         <div id="content">
         {{- block "main" . }}{{- end }}
         </div>
-        <!-- {{- partial "footer.html" . -}} -->
-        {{- partial "scripts.html" . -}}
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+        <script src="js/grid.js?v=0.1.7"></script>
+        <script>
+            $(function() {
+                Grid.init();
+            });
+        </script>
     </body>
 </html>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index dcc2c99..cb708f5 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -10,11 +10,13 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
     <link rel="stylesheet" type="text/css" href="/css/main.css?v=1.2.9" />
-    <link rel="stylesheet" type="text/css" href="/css/component.css?v=0.0.8" />
+    <link rel="stylesheet" type="text/css" href="/css/component.css?v=0.0.9" />
 
 	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
-    <script src="/js/modernizr.custom.js"></script>
+	<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
+
+	<script src="/js/modernizr.custom.js"></script>
 </head>
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 40d7491..e69de29 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,446 +0,0 @@
-		<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.$mediums = $( '<p></p>' );
-						this.$dimensions = $( '<p></p>' );
-						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.$mediums, this.$dimensions, 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' ),
-								mediums : $itemEl.data( 'mediums' ),
-								dimensions : $itemEl.data( 'dimensions' ),
-								description : $itemEl.data( 'description' ),
-								buttontext : $itemEl.data( 'buttontext' )
-							};
-
-						this.$title.html( eldata.title );
-						this.$mediums.html( eldata.mediums );
-						this.$dimensions.html( eldata.dimensions );
-						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>
\ No newline at end of file
diff --git a/static/js/grid.js b/static/js/grid.js
new file mode 100644
index 0000000..faf9df5
--- /dev/null
+++ b/static/js/grid.js
@@ -0,0 +1,467 @@
+/*
+* debouncedresize: special jQuery event that happens once after a window resize
+*
+* latest version and complete README available on Github:
+* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
+*
+* Copyright 2011 @louis_remi
+* Licensed under the MIT license.
+*/
+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 ) {
+        // Save the context
+        var context = this,
+            args = arguments,
+            dispatch = function() {
+                // set correct event type
+                event.type = "debouncedresize";
+                $event.dispatch.apply( context, args );
+            };
+
+        if ( resizeTimeout ) {
+            clearTimeout( resizeTimeout );
+        }
+
+        execAsap ?
+            dispatch() :
+            resizeTimeout = setTimeout( dispatch, $special.threshold );
+    },
+    threshold: 250
+};
+
+// ======================= imagesLoaded Plugin ===============================
+// https://github.com/desandro/imagesloaded
+
+// $('#my-container').imagesLoaded(myFunction)
+// execute a callback when all images have loaded.
+// needed because .load() doesn't work on cached images
+
+// callback function gets image collection as argument
+//  this is the container
+
+// original: MIT license. Paul Irish. 2010.
+// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
+
+// blank image data-uri bypasses webkit log warning (thx doug jones)
+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 = [];
+
+    // Register deferred callbacks
+    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 ) {
+        // don't proceed if BLANK image, or image is already loaded
+        if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
+            return;
+        }
+
+        // store element in loaded images array
+        loaded.push( img );
+
+        // keep track of broken and properly loaded images
+        if ( isBroken ) {
+            broken.push( img );
+        } else {
+            proper.push( img );
+        }
+
+        // cache image and its state for future calls
+        $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
+
+        // trigger deferred progress method if present
+        if ( hasNotify ) {
+            deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
+        }
+
+        // call doneLoading and clean listeners if all images are loaded
+        if ( $images.length === loaded.length ){
+            setTimeout( doneLoading );
+            $images.unbind( '.imagesLoaded' );
+        }
+    }
+
+    // if no images, trigger immediately
+    if ( !$images.length ) {
+        doneLoading();
+    } else {
+        $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
+            // trigger imgLoaded
+            imgLoaded( event.target, event.type === 'error' );
+        }).each( function( i, el ) {
+            var src = el.src;
+
+            // find out if this image has been already checked for status
+            // if it was, and src has not changed, call imgLoaded on it
+            var cached = $.data( el, 'imagesLoaded' );
+            if ( cached && cached.src === src ) {
+                imgLoaded( el, cached.isBroken );
+                return;
+            }
+
+            // if complete is true and browser supports natural sizes, try
+            // to check for image status manually
+            if ( el.complete && el.naturalWidth !== undefined ) {
+                imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
+                return;
+            }
+
+            // cached images don't fire load sometimes, so we reset src, but only when
+            // dealing with IE, or image is complete (loaded) and failed manual check
+            // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
+            if ( el.readyState || el.complete ) {
+                el.src = BLANK;
+                el.src = src;
+            }
+        });
+    }
+
+    return deferred ? deferred.promise( $this ) : $this;
+};
+
+// == now my code ==
+
+var Grid = (function() {
+    var $selector = '#og-grid',
+        $grid = $($selector),
+        $items = $grid.children('li'),
+        current = -1,
+        previewPosition = -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;
+            previewPosition = -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();
+            console.log($item.index());
+            console.log(current);
+            current === $item.index() ? 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') { // this block needs to be refactored to be more readable
+            if (previewPosition != position) {
+                if (position > previewPosition) {
+                    scrollExtra = preview.height;
+                }
+                hidePreview();
+            } else {
+                preview.update($item);
+                return false;
+            }
+        }
+
+        previewPosition = 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.expandedIndex = this.$item.index();
+        this.create();
+        this.update();
+    }
+
+    Preview.prototype = {
+        create : function() { // need to add dimensions and mediums here
+            this.$title = $('<h3></h3>');
+            this.$description = $('<p></p>');
+            this.$details = $('<div class="og-details"></div>').append(this.$title, this.$description);
+            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.$previewElement = $('<div class="og-expander"></div>').append(this.$previewInner);
+
+            this.timout = 25;
+
+            this.$item.append(this.getElement());
+
+            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 $itemElement = this.$item.children('a'),
+                elementData = {
+                    largesrc : $itemElement.data('largesrc'),
+                    title : $itemElement.data('title'),
+                    description : $itemElement.data('description'),
+                };
+
+            this.$title.html(elementData.title);
+            this.$description.html(elementData.description);
+
+            var self = this;
+
+            if (typeof self.$largeImg != 'undefined') {// change name to largeSrc
+                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', elementData.largesrc);
+            }
+        },
+        open : function() {
+            setTimeout($.proxy(function() {
+                this.setHeight();
+                this.positionPreview();
+            }, this), this.timeout)
+        },
+        close : function() {
+            var self = this,
+                onEndFn = function() { // good got rename this function!
+                    if( support ) {
+                        $(this).off(transEndEventName);
+                    }
+                    self.$item.removeClass('og-expanded');
+                    self.$previewElement.remove();
+                };
+
+            setTimeout($.proxy( function() {
+
+                if (typeof this.$largeImg !== 'undefined') {
+                    this.$largeImg.fadeOut( 'fast' );
+                }
+
+                this.$previewElement.css('height', 0);
+                var $expandedItem = $items.eq(this.expandedIndex);
+                $expandedItem.css('height', $expandedItem.data('height')).on(transEndEventName, onEndFn);
+
+                if (!support) {
+                    onEndFn.call();
+                }
+
+            }, this ), this.timout);
+
+            return false;
+        },
+        getHeight : function() {
+            var previewHeight = winSize.height - this.$item.data('height') - marginExpanded,
+                itemHeight = winSize.height;
+
+            if (previewHeight < settings.minHeight) {
+                previewHeight = settings.minHeight;
+                itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
+            }
+
+            this.height = previewHeight;
+            this.itemHeight = itemHeight;
+        },
+        setHeight : function() {
+            var self = this,
+                onEndFn = function() {
+
+                    if (support) {
+                        self.$item.off(transEndEventName);
+                    }
+
+                    self.$item.addClass('og-expanded');
+                };
+
+            this.getHeight();
+            this.$previewElement.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'),
+            //     previewOffsetTop = this.$previewElement.offset().top - scrollExtra,
+            //     scrollValue = this.height + this.$item.data('height');
+            //
+            //     if (marginExpanded <= winSize.height) {
+            //         scrollValue += position;
+            //     } else if (this.height < winSize.height) {
+            //         scrollValue += previewOffsetTop - (winSize.height - this.height)
+            //     } else {
+            //         scrollValue += previewOffsetTop;
+            //     }
+
+            // scroll page
+            // case 1 : preview height + item height fits in window´s height
+            // case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
+            // case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
+            var position = this.$item.data( 'offsetTop' ),
+                previewOffsetT = this.$previewElement.offset().top - scrollExtra,
+                scrollValue = this.height + this.$item.data( 'height' ) + marginExpanded <= winSize.height ? position : this.height < winSize.height ? previewOffsetT - ( winSize.height - this.height ) : previewOffsetT;
+
+
+            $body.animate({scrollTop : scrollValue}, settings.speed);
+        },
+        setTransition : function() {
+            this.$previewElement.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
+            this.$item.css('transition', 'height ' + settings.speed + 'ms ' + settings.easing);
+        },
+        getElement : function() {
+            return this.$previewElement;
+        }
+    }
+
+    return {
+        init : init,
+        addItems : addItems
+    };
+
+})();
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
deleted file mode 100644
index e69de29..0000000
--- a/static/js/main.js
+++ /dev/null