/*

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	
		},
		styles_modal: {
			'background-color': '#000000',
			'opacity': .8
		},
		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} };
		},
		id: "Slidey"
	},
	box: Class.empty,
	modal: Class.empty,
	fx: Class.empty,
	visible: false,
	close_button: false,
	timer: 0,
	is_modal: false,
	
	initialize: function(options){
		this.setOptions(options);
		
		// init MODAL
		this.modal = new Element('div', {
			'id': 'slidey_modal',
			'styles': {
				width: window.getSize().size.x,
				height: window.getSize().size.y,
				position: 'absolute',
				top: '0px',
				left: '0px',
				display: 'none'
			}
		})
		.setStyles(this.options.styles_modal)
		.injectTop(document.body);
		
		
		this.box = new Element('div', {
			'id': this.options.id
		})
		.setStyles(this.options.styles)
		.injectAfter(this.modal);
		
		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){
		this.is_modal = arguments[1] || false;
		
		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 = true;
		
		$clear(this.timer);
		
		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));
		}
		
		if (this.is_modal) {
			this.modal.setStyle('display','block');	
			$(document.body).setStyle('overflow','hidden');
			
		}
		
	},
	
	autohide: function(){
		
		if (this.visible && !this.close_button) {
			this.timer = (function(){
				this.hide();
			}).bind(this).delay(this.options.pause, this);	
		}
	},
	
	hide: function(){
		if (!this.visible) return;
		
		this.visible = false;
		
		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]
		});
		
		if (this.is_modal) {
			if (window.webkit) {// (scroll) - safari
				$(document.body).setStyle('overflow','scroll');
			}else{ // (visible) - other browser
				$(document.body).setStyle('overflow','visible');
			}
			this.modal.setStyle('display','none');
		}
		
		$clear(this.timer);
	}
});
Slidey.implement(new Options);
Slidey.implement(new Events);