//
// 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();
var DisplayModeConst = {normal:0, streng:1, center:2, auto:3};
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:'http://focus-asia.travel/img/indicator.gif'
			,spacer:'http://focus-asia.travel/img/spacer.gif'
			,opacity:1.0
			,onComplete:null
			,displayMode:DisplayModeConst.normal
			,defWidth:0
			,defHeight:0
		}
		
		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);
			Element.makePositioned(this.image);
		}
		
		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;
		
		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;
		var style = {background:'url('+this.options.indicator+') center center no-repeat'};
		if(this.options.defWidth>0) style['width'] = this.options.defWidth + 'px';
		if(this.options.defHeight>0) style['height'] = this.options.defHeight + 'px';
		this.image.setStyle(style);
		
		//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), 200);
		}
	}
	
	,setImageSource:function(image, src){
		image.src = src;
		image.style.backgroundImage = 'none';
	}
	,setImageBackground:function(image, src){
		image.setStyle({background:'url('+src+') center center no-repeat'});
	}
	,resetImageSize:function(image){
		image.width = image.height = "";
		image.setStyle({width:'auto', height:'auto'});
	}
	
	,loopCheckComplete:function(){
		if(this.imageTemp.complete){
			var style = {};
			if(this.options.defWidth>0) style['width'] = 'auto';
			if(this.options.defHeight>0) style['height'] = 'auto';
			if(style && this.options.displayMode != DisplayModeConst.auto) this.image.setStyle(style);
			
			if(this.options.displayMode == DisplayModeConst.normal){
				if(this.options.defWidth > this.imageTemp.width || this.options.defHeight > this.imageTemp.height || this.image.width > this.imageTemp.width || this.image.height > this.imageTemp.height){
					this.setImageBackground(this.image, this.imageTemp.src);
				}else{
					this.setImageSource(this.image, this.imageTemp.src);
				}
			}else if(this.options.displayMode == DisplayModeConst.streng){	
				this.setImageSource(this.image, this.imageTemp.src);
			}else if(this.options.displayMode == DisplayModeConst.center){
				this.setImageBackground(this.image, this.imageTemp.src);
			}else if(this.options.displayMode == DisplayModeConst.auto){
				if(this.options.defWidth > this.imageTemp.width || this.options.defHeight > this.imageTemp.height || this.image.width > this.imageTemp.width || this.image.height > this.imageTemp.height){
					this.setImageBackground(this.image, this.imageTemp.src);
				}else{
					this.resetImageSize(this.image);
					this.setImageSource(this.image, this.imageTemp.src);
				}
			}
			//this.image.tag = this.imageTemp.src;
			Element.setStyle(this.image, {opacity:0.0});
			Effect.Appear(this.image, {from:0.0, to:this.options.opacity, duration:0.5});
			if(this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
			if(this.options.onComplete != null && typeof this.options.onComplete == 'function'){
				this.options.onComplete(this);
			}
			delete this.imageTemp;
			this.imageTemp = null;
		}
	}
	
	//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];
		}
	}
	
};