/**
 * File: http://www.garagemahals.com/assets/templates/bio/js/scripts.js
 */

window.addEvent('domready', function(evt){
	var b = new Bio($('bio'));
	$$('a.biopup').each(function(el){
		el.addEvent('click', function(){
			b.toggle();
		});
	});
});

var Bio = new Class({
	initialize: function(el){
		this.el = el;
		this.shown = false;
		this.overlay = $('overlay');
		this.fx = new Fx.Morph(this.el, {duration: 'normal', transition: Fx.Transitions.Sine.easeOut});

		this.overlay.addEvent('click', this.hide.bind(this));

		this.coordinates = $('bio').getStyles('width', 'height', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'border-top', 'border-right', 'border-bottom', 'border-left');
		
		this.coordinates = new Hash(this.coordinates).map(function(val, key){
			return val.toInt();
		});

		this.el.getElement('.controls .close').addEvent('click', this.hide.bind(this));
	},

	toggle: function(){
		if (this.shown)
			this.hide();
		else
			this.show();
			
	},

	getPosition: function(){
		var wsize = window.getSize();
		var scrollsize = window.getScrollSize();
		var scrolledto = window.getScroll();
		
		var viewport = {left: scrolledto.x, right: scrolledto.x + wsize.x, bottom: scrolledto.y + wsize.y, top: scrolledto.y, middle_x: (wsize.x / 2) + scrolledto.x, middle_y: (wsize.y / 2) + scrolledto.y};
		newtop 		= viewport.middle_y - ((this.coordinates.get('height') + this.coordinates.get('padding-top') + this.coordinates.get('padding-bottom') + this.coordinates.get('border-top') + this.coordinates.get('border-bottom')) / 2)
		starttop 	= viewport.middle_y;
		newleft		= viewport.middle_x - ((this.coordinates.get('width') + this.coordinates.get('padding-left') + this.coordinates.get('padding-right') + this.coordinates.get('border-left') + this.coordinates.get('border-right')) / 2)
		startleft 	= viewport.middle_x;

		return {scrollsize: scrollsize, newtop: newtop, starttop: starttop, newleft: newleft, startleft: startleft};
	},

	show: function(){
		var p = this.getPosition();

		this.overlay.setStyles({'display': 'block', 'position': 'absolute', 'top': 0, 'left': 0, 'width': p.scrollsize.x, 'height': p.scrollsize.y, 'background-color': '#000', 'opacity': 0.6});
		
		this.fx.removeEvents('complete');
		this.fx.addEvent('complete', this.showDelay.bind(this));

		this.fx.start({
			'width': [0, this.coordinates.width],
			'height': [0, this.coordinates.height],
			'display': ['none', 'block'],
			'opacity': [0, 1],
			'top': [p.starttop, p.newtop],
			'left': [p.startleft, p.newleft]
		});
		
		window.addEvent('resize', this.resizeOverlay.bind(this));
	},

	hide: function(){
		var p = this.getPosition();

		this.fx.removeEvents('complete');
		this.fx.addEvent('complete', this.hideDelay.bind(this));

		this.fx.start({
			'width': [this.coordinates.width, 0],
			'height': [this.coordinates.height, 0],
			'opacity': [1, 0],
			'top': [p.newtop, p.starttop],
			'left': [p.newleft, p.startleft]
			});

		window.removeEvents('resize');
	},

	showDelay: function(evt){
		this.shown = true;
	},

	hideDelay: function(evt){
		this.shown = false;
		this.el.setStyle('display', 'none');
		this.overlay.setStyles({'display': 'none'});
	},

	resizeOverlay: function(){
		if (!this.shown)
			return;

		var p = this.getPosition();
		this.overlay.setStyles({'width': p.scrollsize.x, 'height': p.scrollsize.y});
		this.el.setStyles({'top': p.newtop, 'left': p.newleft});
	}
});