/*****************************************************************
 *
 * lazierLoad 0.2 - by Bramus! - http://www.bram.us/
 * inspired upon http://www.appelsiini.net/projects/lazyload/
 *
 * v 0.2 - 2007.09.12 - added options: treshold, replaceImage, loadingImage
 * v 0.1 - 2007.09.11 - initial release
 *
 * Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
 *
 *****************************************************************/
 
	if (!JS_BRAMUS) { var JS_BRAMUS = new Object(); }

	JS_BRAMUS.lazierLoad 					= Class.create();
	JS_BRAMUS.lazierLoad.prototype 		= {
		options				: null,
		
		initialize			: function(options) {			
			// find all images and lazyLoad 'm				
			$$('img').each(function(image) {
				new JS_BRAMUS.lazierLoadImage(image, (options || {}));  
			});
		}		
		
	}


	JS_BRAMUS.lazierLoadImage 			= Class.create();
	JS_BRAMUS.lazierLoadImage.prototype 	= {
		
		options				: null,			// options
		
		element				: null,			// the img element
		loading				: false,		// loading
		loaded				: false,		// loaded
		posFromTop			: 0,			// position of element from top
		viewportHeight		: 0,			// height of the viewport
		lazyScroller		: null,			// cached bounds function - see http://www.prototypejs.org/api/event/stopObserving
	
		initialize			: function(image, options) {
	
			// set the options
			this.options				= options || {};
			this.options.treshold		= this.options.treshold || 100;
			this.options.replaceImage	= this.options.replaceImage || "blank.gif";
			this.options.loadingImage	= this.options.loadingImage || "spinner.gif";
		
			// calculate position of image
			this.element		= image;
			this.posFromTop		= Position.page(this.element)[1];
			this.viewportHeight	= document.viewport.getHeight();
			
			// image "above the fold" already
			if (this.posFromTop < (this.viewportHeight + this.options.treshold)) {
				this.loading	= true;
				this.loaded		= true;
			
			// image not "above the fold"
			} else {
			
				// set blank and loading image
				this.element.origSrc 	= this.element.src;
				this.element.src 		= this.options.replaceImage;
				this.element.setStyle({ backgroundImage: 'url(' + this.options.loadingImage + ')', backgroundPosition: '50% 50%', backgroundRepeat: 'no-repeat' });
			
				// observe the page scroll event	
				this.lazyScroller = this.lazyScroll.bindAsEventListener(this);
				Event.observe(window, 'scroll', this.lazyScroller.bind(this), false);	
			}
		},
		
		lazyScroll			: function() {
					
			// image not loaded and not loading
			if ((this.loaded == false) && (this.loading != true)) {
			
				// image "above the fold" ?
				if ((document.viewport.getScrollOffsets()[1] + document.viewport.getHeight() + this.options.treshold) > this.posFromTop) {

					this.loading	= true;
					
					// load in the new image
					var newImage 	= null;
					newImage 		= new Image();
					newImage.src 	= this.element.origSrc;

					// image is in cache (IE6 & IE7 ... Firefox can handle the onload well even file was in cache);
					if (newImage.complete) {
							this.element.src 	= newImage.src;
							this.loaded			= true;
							
					// image not in cache
					} else {
						newImage.onload = function() {
							this.element.src 	= newImage.src;
							this.loaded			= true;
						}.bind(this);
					}

					// stop the observer
					Event.stopObserving(window, 'scroll', this.lazyScroller);
				}
			}
			
		}
	}
	
	function initLazierLoad() { myLL = new JS_BRAMUS.lazierLoad( {treshold: 100, replaceImage: '/grf/blank.gif', loadingImage: '/grf/loading.gif'} ); }
	Event.observe(document, 'contentloaded', initLazierLoad, false);