var image_preloader = null;
var ImagePreloader = new Class({
	initialize:function() {
		this.showPreloaders();
	}
	,showPreloaders:function() {
		this.color_images = $$('.free_pos img.img_color');
		this.gray_images = $$('.free_pos img.img_gray');
		this.spinners = $$('.free_pos img.image_spinner');
		
		if(!this.color_images || this.color_images.length == 0) {
			return;
		}
		var me = this;
		
		var show_color_image = function(dx) {
			me.color_images[dx].setStyles({opacity:1,visibility:'visible'});
			me.color_images[dx].getParent('div.free_pos').addClass("loaded");
			//console.log(me.color_images[dx].get('src'));
		}
		
		var show_gray_image = function(dx) {
			me.color_images[dx].setStyles({opacity:0,visibility:'hidden'});
			me.gray_images[dx].setStyles({opacity:0,visibility:'visible'});
			me.gray_images[dx].fade('in');
		}
		
		var hide_spinner = function(dx) {
			me.spinners[dx].hide();
		}
		
		var show_image = function(dx) {
			//console.log("show image:" +dx);
			hide_spinner.delay(0,null, dx);
			show_gray_image.delay(100,null,dx);
			show_color_image.delay(600,null,dx);
		}
		
		
		var start_loading = function() {
			for(var i = 0; i < me.gray_images.length; ++i) {
				show_image(i);
			}
		}
		
		var grays = Asset.images(this.gray_images.get('src'), {
				onComplete:function() {
					start_loading();
				}
		});
		this.setImageSizes();
		this.checkInternetExplorer();
		
	}
	/*
	,checkPreloadersAndGrayBlocksAfterLoading: function() {
		var color_images = $$('.free_pos img.img_color');
		var gray_images = $$('.free_pos img.img_gray');
		var spinners = $$('.free_pos img.image_spinner');
		for(var i = 0; i < spinners.length; ++i) {
			var spinner = spinners[i];
			if(!spinner 
				|| spinner.getStyle('display') == "none" 
				|| spinner.getStyle('opacity') == 0) {
				continue;	
			}
			spinner.fade('out');
		}
		
		for(var i = 0; i < color_images.length; ++i) {
			var col_img = color_images[i];
			if(col_img.hasClass('loaded')) {
				continue;
			}
			col_img.getParent('div.free_pos').addClass("loaded");
		}
	}
	*/
	
	,setImageSizes: function() {
		var img = $$('.free_pos img.preload');
		var len = img.length;
		for(var i = 0; i < len; ++i) {
			var s = img[i].getParent('.free_pos').getSize();
			img[i].setStyles({width:s.x +"px", height:s.y +"px"});
		}
	}
	
	,showImagesAfterLoadingWithXHR: function() {
		this.color_images = $$('.free_pos img.img_color');
		this.gray_images = $$('.free_pos img.img_gray');
		this.spinners = $$('.free_pos img.image_spinner');
		
		if(!this.color_images || this.color_images.length == 0) {
			return;
		}
		
		var me = this;
		var hide_spinners = function() {
			me.spinners.fade('out');
		}
		
		var show_color_images = function() {
			me.color_images.setStyles({opacity:1, visibility:'visible'});
			me.color_images.getParent('div.free_pos').addClass("loaded");
		}
		
		var show_gray_images = function() {
			me.gray_images.setStyles({opacity:0, visibility:'visible'});
			me.gray_images.fade('in');
		}
		
		hide_spinners();
		show_gray_images.delay(400);
		show_color_images.delay(600);
		this.setImageSizes();
		//this.checkPreloadersAndGrayBlocksAfterLoading.delay(800);
		//this.checkInternetExplorer()
		
	}
	
	,checkInternetExplorer: function() {
		if(Browser.name == "ie") {
			this.showImagesAfterLoadingWithXHR();
		}
	}
});


document.addEvent('domready', function(){
	image_preloader = new ImagePreloader();	
});