/***
*
*  FadeBox (a transitionbox class - to be used with quickslides...)
*    
***/
var FadeBox = new Class({
        //
		//  INITIALIZE
		//
		Implements: [Options,Events],
		options: {
				in_opacity:1,
				duration:750,
				smoothing:1,
				overflow:"hidden",
				empty:false,
				center:true
		},
		initialize: function(elm,options){
				this.setOptions(options);
				this.element = document.id(elm)
				this.width = this.element.getStyle("width").toInt()
				this.height = this.element.getStyle("height").toInt()
				if (this.options.overflow) this.element.setStyle('overflow',this.options.overflow)
				if (this.options.empty) this.element.empty()
				else {
						this.current = this.element.getElement('img')
						if (this.options.center) this.center(this.current)
				}		
				
		},
		//
		//	TRANSITION 
		//
		swap: function(elm){
				old = this.current
				this.current = document.id(elm)
				this.current.setStyle('opacity',0)
				if (this.options.center) this.center(this.current)
				this.element.grab(this.current)
				if (!old) this.trans(this.current,this.options.in_opacity,this.complete.bind(this))
				else {
						this.trans(old,0,this.out.bind(this,old))
						this.trans(this.current,this.options.in_opacity,this.complete.bind(this),this.options.duration *  this.options.smoothing)
				}
				this.fireEvent("TRANSITION_START")
				return this	
		},
		//
		//	INTERNAL
		//
		trans: function(elm,opac,func,delay){
				var twn = new Fx.Tween(elm,{
						duration:this.options.duration,
						onComplete:func.bind(this)
				})
				var go = function(opac){
						twn.start("opacity",opac)
				}
				if (delay) go.delay(delay,this,opac)
				else go(opac)
		},
		out: function(old){
				if (old) old.destroy()
				this.fireEvent("TRANSITION_OUT")
		},
		complete: function(){
				this.fireEvent("TRANSITION_COMPLETE")
		},
		center: function(elm){
				if (elm){
						elm.setStyles({
								position:"absolute",
								top:this.centerVal(elm,this.height,"height"),
								left:this.centerVal(elm,this.width,"width")
						})		
				}
		},
		centerVal: function(elm,dim,type){
				var val = elm.getStyle(type)
				if (!val || val=="0px" || val=="0") val = elm.get(type)
				else val = val.toInt()
				return (!val || val=="0px" || val=="0") ? 0 : (dim - val)/2
		},
		//
		//  ELEMENT
		//
		toElement: function(){
				return this.element
		}
});