var LazyLoad = new Class({

  Implements: [Options,Events],

  options: {

    range: 50

  },

  /* initialize */
  initialize: function(options) {

    this.findImages();
    
  },

 
  
  findImages: function() {


        var found_images = [];
        var image_refs = [];

        var imgElements = [];
       

        $$('.image_holder').each(function(span) {

            var width = span.getCoordinates().width;
            var factor = width/2.2;

           span.setStyle('min-height',factor);

            var img = span.get('id');
            found_images.push(img);
            image_refs.push(span);

         });

         var image_loader = Asset.images(found_images, {

            properties: {
                'class': 'myImage',
                title: 'myImage'
            },

            onComplete: function(){

                var count = 0;
                imgElements.each(function(div,index,array){
                
                    (function(){array[index].fade('in');}).delay(100+(count*300));
                  
                    count++;
                });


                $$('.image_holder').each(function(span) {span.setStyle('min-height',0)});

            },

            onProgress: function(c, i, s) {

                var  image_holder = image_refs[i];
            
                //ORIGINAL img_element = new Element('img', {'src' : s}).setStyles({'opacity':0,'width':'100%'});                
                img_element = new Element('div', {'class' : 'header_bg_i'}).setStyles({'background':"url("+s+") no-repeat 5px",'opacity':0,'width':'100%'});
                /*<div class="bordertop"></div>
				  <div class="bordermiddle" id="bordermiddle"></div>
		          <div class="borderbottom" id="borderbottom"></div>
		         */
              
                bordertop = new Element('div', {'class' : 'bordertop'});
                bordermiddle = new Element('div', {'class' : 'bordermiddle'});
                borderbottom = new Element('div', {'class' : 'borderbottom'});
                
                img_element.adopt(bordertop);
                img_element.adopt(bordermiddle);
                img_element.adopt(borderbottom);
                
                if(Browser.name == 'ie')
                    img_element.setStyles({'height':'100%'});

                imgElements.push(img_element);
                image_holder.adopt(img_element);
                
            }.bind(this)

        });

  }

});