window.addEvent('domready', function() 
{	
	g_window_width = $('portfolio_strip').getSize().x;
	g_scroll_width = window.getScroll().x;
 	
	var offsetScroll = 0;
	
	var windowMax = window.getScroll().x + window.getSize().x + offsetScroll;
	var windowMin = window.getScroll().x  - offsetScroll - 450;
	
	var scrollPos = window.getScroll().x;
	
	var winSize = window.getSize().x;
	
	$$('.imgProg').each(function(image)
	{	
	
		image.set('_src',image.get('src'));//save org pic
		image.set('src','templates/timclarke/images/loader.gif');//set loading img
		image.set('class','imgProg offScroll');
		
		var loader = new ImagesLoader(image, windowMax, windowMin);
	
		image.addEvent('destroy', function()//scrolling window
		{
			
			loader = null;
			image.removeEvents('scrolled');
		
		}.bind(this));	
		
		
	});
 
	window.addEvent('scroll', function()//scrolling window
	{	
	
		//winSize = window.getSize().x;
		scrollPos = window.getScroll().x;
		
		windowMax = scrollPos + winSize + offsetScroll;
		windowMin = scrollPos - offsetScroll - 450;

		$$('.imgProg').fireEvent('scrolled', [windowMin, windowMax], 1000);//wait
	});
 
	window.addEvent('resize', function()//scrolling window
	{	
	
		winSize = window.getSize().x;
		scrollPos = window.getScroll().x;
		
		windowMax = scrollPos + winSize + offsetScroll;
		windowMin = scrollPos - offsetScroll - 450;

		$$('.imgProg').fireEvent('scrolled', [windowMin, windowMax], 1000);//wait
	});
	
	$$('.imgProg').fireEvent('scrolled');//init thumb load
 
});

var ImagesLoader = new Class({
 
	options: {
		src: '..',
		pos: 0
	},
 
	initialize: function(img, max, min)
	{
		this.image = img;
		this.src = img.get('_src');
		this.offsetScroll = 0;
		this.windowMin = min;
		this.windowMax = max;
		this.loadCheck = false;
		
		this.image.addEvent('scrolled', this.scrolled.bind(this));

	},
 
	scrolled: function(wMin, wMax)
	{
		
		this.windowMin = wMin;
		this.windowMax = wMax;
		
		if (Browser.Engine.trident){

			this.bound = this.image.getBoundingClientRect();
			this.html = this.image.getDocument().documentElement;
			this.imgPos = this.bound.left + this.html.scrollLeft - this.html.clientLeft;

		}else{
			
			this.imgPos = this.image.offsetLeft;
			
		}		
		
		if(this.imgPos > this.windowMin && this.imgPos < this.windowMax)
		{	
				
				if(this.loadCheck == false){
					this.loadImage();
					this.loadCheck = true;
					//console.log('onScreen '+this.src);
				}
			this.image.removeEvents('scrolled');
		}
	},
	
	fadeIn: function()
	{
		//console.log('fadein '+this.src);
		this.image.fade('hide');
     	this.image.set({'src' : this.src, 'class':'imgProg onScroll'});//restore org pic	
     	this.image.get('tween', {property: 'opacity', duration: 1300}).start(1);
		this.destroy();
	},
 
	loadImage: function()
	{
		//var self = this;
		//console.log('loading '+this.src);
		this.newImg = new Asset.image(this.src, { 
			onload: function()
			{
				this.fadeIn();
			}.bind(this)
		});
	},

	destroy: function()
	{
		//console.log('destroy'+this.src);
	
		this.scrolled = null;
		this.newImg = null;
		this.src = null;
		this.offsetScroll = null;
		this.windowMax = null;
		this.windowMin = null;
		this.loadCheck = null;
		
		this.image.fireEvent('destroy');
	}
 
});