/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2008 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Revision: $Id$
 * Version:  1.3.1
 *
 *	Ernstig aangepast door Tx november 2008 - d-Media om met xajax webkit proof te worden 
 *
 *  HOW TO:  
 *	- id is de pad van het plaatje
 *	- <img class='lazy' src="images/blank.gif" id="plaatje18.jpg" alt="alternatieve tekst"/>
 *	- class='lazy' plaatjes die niet direct geladen worden 
 *	- <script type="text/javascript">$("img.lazy").lazyload({ threshold : 200, placeholder : "images/spinner.gif" });</script> 
 */
(function($) {
	 $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : "scroll",
            effect       : "show"
        };
                        
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scoll. Not one scroll event per image. */
        var elements = this;
        
		if ("scroll" == settings.event) {
			//console.log("scroll bind");
			$.scrollEvent(elements, settings);
		}       
                
        return this.each(function() {
            var self = this;
            if ("scroll" != settings.event 
                         || $.belowthefold(self, settings) 
                         || $.rightoffold(self, settings)
                         || $.leftoffold(self, settings)) {
                if (settings.placeholder) {
                	$(self).css("background-image", "url("+ settings.placeholder +")");
                	$(self).css("backgroundPosition", "50% 50%");
                	$(self).css("backgroundRepeat", "no-repeat");
                }
                self.loaded = false;
                
            } else {
            	xajax_replaceImage($(self).attr("id"));
           	  	$(self).css("background-image", "none");
           	  	self.loaded = true;
            }
                      
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if(!self.loaded){
                 xajax_replaceImage($(self).attr("id"));
                 $(self).css("background-image", "none");
                 }; 
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                  $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                    	$(self).trigger("appear");
                      }
                });
            }
        });

    };

    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100}) */
    
    $.scrollEvent = function(elements, settings){
    	//console.log("event aan alle elementen koppelen");
    	$.scrollBind(elements, settings);
    	
    	/* Remove image from array so it is not looped next time. */
		var temp = $.grep(elements, function(element) {
		 	return !element.loaded;
		});
		return elements = $(temp);
		
    };
    
    $.scrollBind = function(elements, settings){
    		var counter = 0;
	    	$(window).bind("scroll", function(event){
				//console.log("scrollen..");
				elements.each(function(){
				if (!$.belowthefold(this, settings) &&
			       	!$.rightoffold(this, settings) &&
			       	!$.leftoffold(this, settings)) {
			           	$(this).trigger("appear");
			           	
			       	} else {
			        	if (counter++ > settings.failurelimit) {
			              	return false;
			           	}
			       	}
			    });   	
			});  
		};
		
	$.scrollUnbind = function(){
		$(window).unbind("scroll");
	}
    

    $.belowthefold = function(element, settings) {
        var fold = $(window).height() + $(window).scrollTop();
        return fold <= $(element).offset().top - settings.threshold;
    };
    
    $.rightoffold = function(element, settings) {
        var fold = $(window).width() + $(window).scrollLeft();
        return fold <= $(element).offset().left - settings.threshold;
    };
    
    $.leftoffold = function(element, settings) {
        var fold = $(window).scrollLeft();
        return fold >= $(element).offset().right + settings.threshold;
    };
    
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0})",
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0})"
    });
    
})(jQuery);

function loadImage(curr, next, opts){
	if($(curr).attr("id")!=$(next).attr("id")){
		// Voor de replace effe loader laten zien
		$(curr).parent().addClass('loading');
		xajax_replaceImage($(next).attr("id"));
		// Als replaceImage klaar is hoogte van slideshow div aanpassen aan de div
		var setTop = $(curr).height();
		$(next).parent().css({'height': setTop});
		
}
	
/** Alle kinderen in 1x ophalen, slecht idee	
	$(opts.next).children().each(function(){
		var self = $(this);
		xajax_replaceImage(self.attr("id"));
		console.log($(self).attr("id") + 'r155');
		$(self).css("background-image", "none");
	});    
	**/
}