$(window).scroll(function() {

    $('.og-grid li').each(function(i) {

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        if (bottom_of_window > bottom_of_object) {
            $(this).animate({
                'opacity': '1'
            }, 500);
        }
    });
});

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 = $('#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: 380,
                speed: 1,
                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 updateGrid($newitems) {

        $items = $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();

        });
    }

    function initItemsEvents($items) {
        $items.on('click', 'span.close', function() {
			if(gridEnabled){
				hidePreview();
				return false;
			}
        }).children('a').on('click', function(e) {

            var $item = $(this).parent();
            if ($('.expander').height() != null) {
                previewPos++;
            }

            current === $item.index() ? hidePreview() : showPreview($item);
            return false;
        });
    }

    function getWinSize() {
        winsize = {
            width: $window.width(),
            height: $window.height()
        };
    }

    var expandedClassName = '';
	function browserVersion(){

	  var ua = window.navigator.userAgent;
	  var msie = ua.indexOf ("MSIE");
	  if ( msie > 0 ){      
		 return parseInt(ua.substring (msie+5, ua.indexOf (".", msie )));
	  } else {                
		 return 0;
	  }
	}

    function showPreview($item) {

        var preview = $.data(this, 'preview'),
        position = $item.data('offsetTop');
        expandedClassName = $item.attr('class');
        scrollExtra = 0;
        
        if (typeof preview != 'undefined') {
            
            if (previewPos !== position) {

                if (position > previewPos) {
				
					if(($.browser.msie && browserVersion() >= 10) || !$.browser.msie){
						scrollExtra = preview.height + 30;
					} else {
						scrollExtra = 30;
					}
                    
                }
                hidePreview();
            } else {
                preview.update($item);
                return false;
            }

        }
        previewPos = position;
        preview = $.data(this, 'preview', new Preview($item));
        preview.open();
        addPrevNextLinks($item);
        var itemEl = $item.children('a');
        var itemId = itemEl.attr('id');
    }

    function addPrevNextLinks($item) {

        checkFirstLastImage($item);
        $(".prev-link").click(function() {
		
			if(gridEnabled){
				$item = $item.prev();
				showPreview($item);
				checkFirstLastImage($item);
				var newBid = $item.find("a").attr("id");
				replaceBidInURL(newBid);
			}
        });
        $(".next-link").click(function() {
			if(gridEnabled){
				$item = $item.next();
				showPreview($item);
				checkFirstLastImage($item);
				var newBid = $item.find("a").attr("id");
				replaceBidInURL(newBid);
			}
        });
        $(".expander").on("swiperight", function() {
			if(gridEnabled){
				showPreview($item.prev());
				$item = $item.prev();
				checkFirstLastImage($item);
				var newBid = $item.find("a").attr("id");
				replaceBidInURL(newBid);
			}
        });
        $(".expander").on("swipeleft", function() {
			if(gridEnabled){
				showPreview($item.next());
				$item = $item.next();
				checkFirstLastImage($item);
				var newBid = $item.find("a").attr("id");
				replaceBidInURL(newBid);
			}
        });
    }

    function checkFirstLastImage($item) {
        if ($item.prev().index() == -1) {
            $(".prev-link").hide();
        } else {
            $(".prev-link").show();
        }

        if ($item.next().index() == -1) {
            
			if (photos.length > imageIndex) {
				if(ajaxReady){
					loadPhotos(imageIndex, imageIndex + 21);
				}
            } else {
                $(".next-link").hide();
            }
        } else {
            $(".next-link").show();
        }
    }

    function hidePreview() {
        current = -1;
        var preview = $.data(this, 'preview');
        preview.close();
        $.removeData(this, 'preview');
    }

    function Preview($item) {
        this.$item = $item;
        this.expandedIdx = this.$item.index();
        this.create();
        this.update();
    }

    Preview.prototype = {
        create: function() {

            this.$details = $('<div class="details"></div>');
            this.$largeImage = $('<table><tr><td><div class="loading"></div><div class="large-img"></div></td></tr></table>');
            this.$fullimage = $('<div class="fullimg"></div>').append(this.$largeImage);
            this.$container = $('<div class="image-container"></div>').append(this.$fullimage);
            this.$closePreview = $('<span class="close"></span>');
            this.$prev = $('<div class="prev-link arrow-link"></div>');
            this.$next = $('<div class="next-link arrow-link"></div>');
            this.$previewInner = $('<div class="expander-inner"></div>').append(this.$prev, this.$closePreview, this.$container, this.$details, this.$next);
            this.$previewEl = $('<div class="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('expanded');
                this.$item.addClass('expanded');
                this.positionPreview();
            }

            current = this.$item.index();
            $('.fullimg').removeClass('portrait').removeClass('landscape');
            $('.fullimg').addClass(expandedClassName);
            var $itemEl = this.$item.children('a'),
            eldata = {
                id: $itemEl.attr('id'),
                largesrc: $itemEl.data('largesrc')
            };
            var itemId = $itemEl.attr('id');
            getImageDetails(itemId);
            var self = this;
            if (typeof self.$largeImg != 'undefined') {
                self.$largeImg.remove();
            }

            if (self.$fullimage.is(':visible')) {

                $('.loading').show();
                $('<img class="sample-img"/>').load(function() {

                    var $img = $(this);
                    if ($img.attr('src') === self.$item.children('a').data('largesrc')) {
                        $('.loading').hide();
                        self.$fullimage.find('img:first').remove();
                        self.$largeImg = $img.fadeIn('fast');
                        self.$largeImg = $img.css('opacity', '1');
                        $('.large-img').html(self.$largeImg);
                    }
                }).attr({"src": eldata.largesrc, "data-id": eldata.id});
            }
			

        },
        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('expanded');
                        self.$previewEl.remove();
                    };
            setTimeout($.proxy(function() {

                if (typeof this.$largeImg !== 'undefined') {
                    this.$largeImg.fadeOut('slow');
                }
                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() {

            this.height = 475;
            this.itemHeight = 750;
        },
        setHeights: function() {

            var self = this,
                    onEndFn = function() {
                        if (support) {
                            self.$item.off(transEndEventName);
                        }
                        self.$item.addClass('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');
            var previewOffsetT = this.$previewEl.offset().top - scrollExtra;
            var scrollVal = 0;
            scrollVal = previewOffsetT - (winsize.height * 0.2);
            $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,
        update: updateGrid
    };
})();