/*

Example:
var foobar = new Slidey();
foobar.show($('foobar'));
		
		
var foobar = new Slidey({			
	showPos: function(e,w){
		var totop = w.scroll.y;
		var toleft = 0;
		return {start:{top:(totop-24), left:toleft}, end:{top:totop, left:toleft} };
	}
});
foobar.show($('foobar'));	

Options:

showPos: function(boxSize, windowSize)
* should return {start:{top, left}, end:{top, left}}

hidePos: function(currentTop, currentLeft)
* should return {start:{top, left}, end:{top, left}}

*/

var Slidey = new Class({
	options: {
		pause: 3000,
		fx:{
			duration: 500,
			transition: Fx.Transitions.Quad.easeOut
		},
		styles:{
			position: 'absolute',
			top: '0px',
			left: '0px',
			opacity: 0	
		},
		onComplete: Class.empty,
		
		showPos: function(boxSize, windowSize){			
			var toleft = (windowSize.scrollSize.x / 2) - (boxSize.size.x / 2);
			var totop = (windowSize.scroll.y) + 100;
			
			return {start:{top:(totop-24), left:toleft}, end:{top:totop, left:toleft} };
		},
		hidePos: function(currentTop, currentLeft){
			return {start:{top:currentTop, left:currentLeft}, end:{top:(currentTop-54), left:currentLeft} };
		}
	},
	box: Class.empty,
	fx: Class.empty,
	visible: false,
	close_button: false,
	
	initialize: function(options){
		this.setOptions(options);
		
		this.box = Element('div', {
			'id': 'Slaydee'
		})
		.setStyles(this.options.styles)
		.injectInside(document.body);
		
		this.fx = this.box.effects({
			duration: this.options.fx.duration, 
			transition: this.options.fx.transition,
			wait: true,
			onComplete: this.autohide.bind(this)
		});
		
	},
	
	show: function(el){

		if ($type(el) != "element") return;

		var clone = el.clone();
		if ($type(clone) != "element") return;

		var e = this.box.empty().adopt(clone).getSize();
		var w = window.getSize();
		
		var pos = this.options.showPos(e,w);

		this.box.setStyles({
			'top': pos.start.top,
			'left': pos.start.left
		});

		this.close_button = false;
		this.visible = false;

		this.fx.start({
			opacity: [.3,1],
			top:[pos.start.top, pos.end.top],
			left:[pos.start.left, pos.end.left]
		});
		
		var close = this.box.getElement('a#close');
		if (close) {
			this.close_button = true;
			close.addEvent('click', this.hide.bind(this));
		}
		
	},
	
	autohide: function(){
		
		if (!this.visible && !this.close_button) {
			(function(){
				this.hide();
			}).bind(this).delay(this.options.pause, this);	
		}
	},
	
	hide: function(){
		this.visible = !this.visible;
		
		if (!this.visible) return;

		var pos = this.box.getPosition();

		var pos = this.options.hidePos(pos.y, pos.x);

		this.box.setStyles({
			'top': pos.start.top,
			'left': pos.start.left
		});
		this.fx.start({
			opacity: [1,0],
			top:[pos.start.top, pos.end.top],
			left:[pos.start.left, pos.end.left]
		});

		
	}
});
Slidey.implement(new Options);
Slidey.implement(new Events);