var lazyImages = Class.create({
    initialize: function (idName,type) {
        // code to execute - build array and variables
        this.imgHide = $$(type + idName);
        this.classNm = ''+idName;
        //site.log('=== Image lazyload class:' + this.classNm);
    },
    reload: function () {
        // code to execute - show
        //var rClass = this.classNm;
        var reCount = 0;
        this.imgHide.each(function (item) {
            var new_source = item.readAttribute('_src');
            item.writeAttribute({
                src: new_source
            })
            reCount++;
            //item.removeClassName(rClass); DISABLED
        });
        //site.log('+++ Image lazyload - reloaded ' + '' + this.classNm + ':' + this.imgHide.length + '/' + reCount);
        // refurbish page
        document.fire("custom:contentrefresh");
    },
    unload: function () {
        // code to execute - hide
        //site.log('--- Image lazyload - unloaded ' + '' + this.classNm + ':' + this.imgHide.length);
        this.imgHide.each(function (item) {
            var old_source = item.readAttribute('src');
            var new_source = '/files/system/gfx/id_loader.gif';
            item.writeAttribute({
                src: new_source
            })
            item.writeAttribute({
                '_src': old_source
            });
        });
    }
});

// initialize the lazyload with classes and observers to use/load
document.observe("dom:loaded", function () {
// ################################### these loads are performed just after the DOM is loaded ###################################

    // Hide gallery-images 3-10
    var hide0 = new lazyImages('secImg','.'); // initialize
    hide0.unload();
    
    // Hide product-overview-images 10-?
	var hide3 = new lazyImages('thiImg','.'); // initialize
	hide3.unload();
	
	// **** generisk page:loaded ******
	var lazyPageLoad = new lazyImages('lazypage','.'); // initialize
	lazyPageLoad.unload();
	
	// **** generisk transition:loaded ******
	var lazyTransLoad = new lazyImages('lazychange','.'); // initialize
	lazyTransLoad.unload();
	
// ################################### these loads are performed after the page has been loaded ###################################

    // **** genrisk page:loaded ******
	chainWindowLoaded.addFunction(function(){
	   lazyPageLoad.reload();
    },'lazyPageLoad',999);

// ################################### these loads are performed after the transition has been performed ###################################
    
    // **** generisk transition:loaded ******
    chainWindowLoaded.addFunction(function(){
	   lazyTransLoad.reload();
    },'lazyTransLoad',999);
    
    // ****** galleri ******
    // Gallery-images are hidden in the product-snippet
    chainWindowLoaded.addFunction(function(){
        hide0.reload();
    },'LazyGallery',99);
    
    // ****** farver ******
    chainWindowLoaded.addFunction(function(){
     	// thumbnail-images are hidden in html _src
        var hide1 = new lazyImages('cThmb','.');  // initialize
        Event.observe('loadColor', 'click', function(event) {
             hide1.reload(); // load thumbnails src from _src
         });
        Event.observe('loadColor2', 'click', function(event) {
             hide1.reload(); // load thumbnails src from _src
         });
    },'LazyColors');
    
    // ****** produktoversigt ******
    chainWindowLoaded.addFunction(function(){
        var hide4 = new lazyImages('thiImg','.'); // initialize again - the source has been copied
        hide4.reload();
    },'LazyProducts',99);

});