//
// Image Loading Ver1.0
// Created by Phong Hoang (phong.hoang@orientsoftware.net)
// Usage:
// var imageloading = new ImageLoading(Element name / Element, [{src, border, alt, autoLoad}]);
// imageLoading.loadImage(); //call this method if autoLoad in config is false
//
var ImageLoading = Class.create();
ImageLoading.prototype = {
	initialize: function(element){
		var temp = element.toString();
		element = $(element);
		if(element == null){
			alert(temp + ' is undefined');
			return false;
		}
		
		this.timer = null;
		this.imageTemp = null;
		var defaults = {
			src:''
			,border:0
			,alt:''
			,autoLoad:false
			,indicator:'/images/indicator.gif'
			,spacer:'/images/spacer.gif'
		}
		
		this.options = Object.extend(defaults, arguments[1] || {});
		this.preloadImage(this.options.indicator, this.options.spacer);
		
		Element.makePositioned(element);
		
		if(element.tagName=='IMG'){
			this.image = element;
		}else{
			var img = document.createElement('IMG');
			element.appendChild(img);
			this.image = $(img);
		}
		
		for(var att in this.options){
			if(typeof this.image[att]!='undefined'){
				if(att=='src') continue;
				if(typeof this.options[att] == 'object'){
					var attObj = this.image[att];
					if(typeof attObj == 'undefined') continue;
					var optObj = this.options[att];
					for(var o in optObj){
						attObj[o] = optObj[o];
					}
				}else{
					this.image[att] = this.options[att];
				}
			}
		}
		
		this.image.src = this.options.spacer;
		
		Element.makePositioned(this.image);
		
		
		
		if(this.options.autoLoad){
			this.loadImage();
		}
		this.initialized = true;
	}
	
	,setSRC: function(url){
		this.options.src = url;
	}
	,getSRC: function(){
		return this.options.src;
	}
	,setHeight:function(height){
		var s = new String(height);
		s = s.toLowerCase();
		if(s.substr(s.length-2)=='px' || s.substr(s.length-2)=='pt'){
			s = s.substr(0,s.length-2);
		}
		var n = parseInt(s, 10);
		if(typeof n == 'NaN'){
			return false;
		}else{
			this.options.height = n;
		}
		
	}
	,getHeight:function(){
		return this.options.height;
	}
	,setWidth:function(width){
		var s = new String(width);
		s = s.toLowerCase();
		if(s.substr(s.length-2)=='px' || s.substr(s.length-2)=='pt'){
			s = s.substr(0,s.length-2);
		}
		var n = parseInt(s, 10);
		if(typeof n == 'NaN'){
			return false;
		}else{
			this.options.width = n;
		}
	}
	,getWidth:function(){
		return this.options.width;
	}
	
	
	,destroy:function(){
		delete this.imageTemp;
		if(this.timer){
			clearInterval(this.timer);
			this.timer = null;
		}
	}
	,loadImage:function(url){
		if(typeof(this.image) != 'object') return;
		if(typeof url != 'undefined'){
			this.options.src = url;
		}
		if(this.options.src=='') return 0;
		this.image.src = this.options.spacer;
		this.image.setStyle({background:'url('+this.options.indicator+') center center no-repeat'});
		//this.image.style.backgroundImage = 'url('+this.options.indicator+')';
		if(this.imageTemp==null){
			this.imageTemp = new Image();
		}
		this.imageTemp.src = this.options.src;
		if(this.timer==null){
			this.timer = setInterval(this.loopCheckComplete.bind(this), 1000);
		}
	}
	
	,loopCheckComplete:function(){
		if(this.imageTemp.complete){
			this.image.src = this.imageTemp.src;
			this.image.style.backgroundImage = 'none';
			
			Element.setStyle(this.image, {opacity:0.0});
			Effect.Appear(this.image, {from:0.0, to:1.0, duration:0.5});
			if(this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
			if(typeof this.onComplete != 'undefined'){
				this.onComplete(this);
			}
		}
	}
	
	//onComplete event
	//void onComplete(ImageLoading obj){}
	
	,preloadImage:function(){
		for(var i=0; i<arguments.length;i++)
		{
			if(typeof arguments[i] != 'string') continue;
			var img = new Image();
			img.src = arguments[i];
		}
	}
	
};