var TFADE = 0.3;

var Fader = Class.create();
Object.extend(Fader.prototype, {
	_last: null,
	_page: null,
	
	initialize: function() {
		this._page = 0;
		
		var _elems = $Rels(document, "fadeable");
		this._last = null;
		var me = this;
		
		for (var i=0; i<_elems.length; i++) {
			this._createDetailButton(_elems[i]);
			this._createCloseButton(_elems[i]);
		}
	},
	
	goToPage: function(p) {
		var me = this;
					
		if (me._last) {
			if (Element.getStyle($Rel(me._last, "Detail"), "opacity") * 1 - 0.001 > 0) {
				me.fade($Rel(me._last, "Detail"), 1.0, 0.0);
			}
			me._last = null;
			
			setTimeout(function() {
				if (Slider.goTo('Projects', p)) {
					if (me._page > 0)
						Element.setStyle("Pagina" + me._page + "On", { visibility: "hidden" });
				
					me._page = p;
					Element.setStyle("Pagina" + me._page + "On", { visibility: "inherit" } );
				}					
			}, TFADE);
		} else {
			if (Slider.goTo('Projects', p)) {
				if (me._page > 0)
					Element.setStyle("Pagina" + me._page + "On", { visibility: "hidden" });

				this._page = p;
				Element.setStyle("Pagina" + this._page + "On", { visibility: "inherit" } );
			}
		}
	},
		
	_createDetailButton: function(obj) {
		var me = this;
		
		Event.observe($Rel(obj, "btnMoreInfo"), 'click', function(e) {
			if (me._last && Element.getStyle($Rel(me._last, "Detail"), "opacity") * 1 - 0.001 > 0) {
				me.fade($Rel(me._last, "Detail"), 1.0, 0.0);
			}
			me._last = obj;
			
			if (Element.getStyle($Rel(obj, "Detail"), "opacity") * 1 - 0.001 < 0.9) {
				me.fade($Rel(obj, "Detail"), 0.0, 1.0);
			}
		});
	},
	
	_createCloseButton: function(obj) {
		var me = this;
		Event.observe($Rel(obj, "btnClose"), 'click', function(e) {
			if (Element.getStyle($Rel(obj, "Detail"), "opacity") * 1 - 0.001 > 0) {
				me.fade($Rel(obj, "Detail"), 1.0, 0.0);
			}
		});
	},
		
	fade: function(obj, f, t, dur) {
		dur = dur ? dur : TFADE;
		var me = this;
		if ((obj.hasAttribute && !obj.hasAttribute("active")) || (!obj.hasAttribute && !obj["active"])) {
			var _from = Element.getStyle(obj, "opacity") * 1.0;
			
			new Effect.Opacity(
				obj,
				{
					from: f,
					to: t,
					duration: dur,
					afterFinish: function() { 
						Element.setStyle(obj, { "opacity": t });
						obj.removeAttribute("active"); 
					}
				}
			);
			
			obj.setAttribute("active", "true");
		} else {
			setTimeout(function() { me.fade(obj, f,t); }, TFADE);
		}
	}
});