Ext.ns('Ext.ux.LazyImages');

Ext.ux.LazyImages = function() {

	var imageEls = []
		,loadTop = 0;
    
	return {
	
		options: {
			range: 200
			,scanIncrement: 50
			,image: '/js/ext3/resources/images/default/s.gif'
			,elements: 'img'
		}

		,init: function(options) {
			
			this.options = Ext.apply(this.options, options || {});

			loadTop = Ext.lib.Dom.getViewHeight() + this.options.range;
			
			Ext.select(this.options.elements).each(function(el) {


				if(el.getTop() > loadTop)
				{
					el = Ext.get(el.dom);
					el.set({osrc: el.dom.src});
					el.dom.src = this.options.image;

					imageEls.push(el);
				}


			}, this);
			
			Ext.get(document).on('scroll', function(e) {
			
				var top = Ext.lib.Dom.getViewHeight() + Ext.getBody().getScroll().top + this.options.range;
				
				if(top > loadTop + this.options.scanIncrement)
				{
					loadTop = top;
				
					var remainingEls = [];
					Ext.each(imageEls, function(el) {
					
						if(el.getTop() < loadTop)
						{
							var src = el.getAttribute('osrc');
							if(src && src != el.dom.src)
							{
								el.setOpacity(0).on('load', function() {
									this.fadeIn();
								}, el, {single: true});
								
								el.dom.src = el.getAttribute('osrc');
							}
						}
						else
						{
							remainingEls.push(el);
						}

					}, this);
					
					imageEls = remainingEls;
				}

			}, this);
		
		}
	};
}();

//Ext.onReady(Ext.ux.LazyImages.init, Ext.ux.LazyImages);