var CONFIG = {};
var Overlayer, images, logos;

window.addEvent('domready', function() {

	Overlayer = new Overlay();

	$$('a[href=#]').each(function(el, i) {
		el.setStyle('cursor', 'default');
		el.addEvent('click', function(e) {
			e.stop();		
		}.bind(this));
	}.bind(this));
	
	$$('ul.buttons a').each(function(el) {
		var tweener = new Fx.Tween(el, {
			duration: 100,
			property: 'background-position',
			transition: 'sine:in',
			link: 'cancel'
		});
		el.addEvents({
			'mouseenter': function(e) {
				tweener.start('0 -35px');
			}.bind(this),
			'mouseleave': function(e) {
				tweener.start('0 0');
			}.bind(this)
		});
	}.bind(this));

	if($('pushbox')) {
		/*
		new Pushbox({
			lists: $('pushbox').getElements('ul.items'),
			items: $('pushbox').getElements('ul.items li a')
		});
		*/
		new TweenHeader({
			background: $('header').getElement('h1'),
			logo: $('header').getElement('a.logo')
		});
		(function() {
			images = new TweenLogos({
				logos: $('pushbox').getElements('ul.items li')
			});
			logos = new TweenLogos({
				logos: $('pushbox').getElements('ul.logos li a')
			});
		}.delay(150, this));
	}
	
	if($('tooltip')) {
		new Tooltip({
			button: $(document.body).getElement('.service a'),
			tooltip: $('tooltip')
		});
	}
	
});



var Pushbox = new Class({
	options: {
		lists: null,
		items: null,
		squeezeWidth: 186,
	    maxWidth: 216
	},
	Implements: Options,
	
	initialize: function(options) {
		this.setOptions(options);
		this.addEvents();
	},
	
	addEvents: function() {
		
		this.options.lists.each(function(el, i) {
			var accTransition = new Fx.Transition(function(pos, x) {
				return 1 - Math.pow(Math.abs(Math.log(pos) / Math.log(x && x[0] || Math.E)), pos);
			}, 5.3);
			
			var items = el.getElements('a'),
				fx = new Fx.Elements(items, {wait: false, duration: 100, transition: accTransition.easeIn, link:'cancel'}),
				startWidths = [],
				options = this.options;
	
			items.each(function(item,i) {
				startWidths.push(item.getStyle('width').toInt());
				
				item.addEvent('mouseenter',function(){
					var fxSettings = {};
					fxSettings[i] = {
						'width': [item.getStyle('width').toInt(),options.maxWidth]
					};
					items.each(function(sibling,ii) {
						if(sibling != item) {
							var w = sibling.getStyle('width').toInt();
							if (w != options.squeezeWidth) {
								fxSettings[ii] = {
									'width': [w,options.squeezeWidth]
								};
							}
						}
					},this);
					fx.start(fxSettings);
				},this);
			},this);
	
			el.addEvent('mouseleave',function() {
				var fxSettings = {};
				items.each(function(item,i) {
					fxSettings[i] = {
						width: [item.getStyle('width').toInt(), startWidths[i]]
					};
				});
				fx.start(fxSettings);
			});
		}.bind(this));
    }
});



var TweenLogos = new Class({
	options: {
		logos: null
	},
	Implements: Options,
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.options.delay = 0;
		this.options.delayBetweenItems = 45;
		this.options.speed = 400;
		
		this.options.arrTops = [];
		this.options.logos.each(function(el) {
			this.options.arrTops.push(el.getStyle('margin-top').toInt());
			el.setStyles({'margin-top': el.getStyle('margin-top').toInt() - 20, 'opacity': 0});
		}.bind(this));
		
		this.initLogos();
		this.setHovers();
		this.setGlasses();
	},
	
	initLogos: function() {
		this.options.logos.each(function(el, i) {
			var fxLogo = new Fx.Morph(el, { 'duration': this.options.speed, 'transition': 'quint:in:out', 'link': 'cancel' });
			(function() {
				var opac = 1;
				if(el.getParent('ul').hasClass('logos')) {	
					opac = 0.5;
				}
				fxLogo.start({'marginTop': this.options.arrTops[i], 'opacity': opac});
			}.delay(this.options.delay, this));
			this.options.delay = this.options.delay + this.options.delayBetweenItems;
		}.bind(this));
	},
	
	setHovers: function() {
		this.options.logos[0].getParent('ul').getElements('a').each(function(el, i) {
			var tweenLogo = new Fx.Tween(el, {'duration': 200, 'transition': 'quint:in:out', 'link':'cancel'});
			el.addEvents({
				'mouseenter': function(e) {
					if(el.getParent('ul').hasClass('logos')) {	
						tweenLogo.start('opacity', 1);
						images.hover(i);
					} else {
						logos.fadeIn(i);	
					}
				}.bind(this),
				'mouseleave': function(e) {
					if(el.getParent('ul').hasClass('logos')) {	
						tweenLogo.start('opacity', 0.5);
						images.leave(i);
					} else {
						logos.fadeOut(i);	
					}
				}.bind(this)
			});		
		}.bind(this));	
	},
	
	setGlasses: function() {
		this.options.logos.each(function(el, i) {
			if(el.getParent('ul').hasClass('items')) {
				var tweenGlass = new Fx.Tween(el.getElement('span'), {'duration': 200, 'transition': 'quint:in:out', 'link':'cancel'});
				el.addEvents({
					'mouseenter': function(e) {
						e.stop();
						tweenGlass.start('height', 97);
					}.bind(this),
					'mouseleave': function(e) {
						tweenGlass.start('height', 0);
					}.bind(this)
				});
			}
		}.bind(this));
	},
	
	hover: function(i) {
		var tweenGlass = new Fx.Tween(this.options.logos[i].getElement('span'), {'duration': 200, 'transition': 'quint:in:out', 'link':'cancel'});
		tweenGlass.start('height', 97);
	},
	
	leave: function(i) {
		var tweenGlass = new Fx.Tween(this.options.logos[i].getElement('span'), {'duration': 200, 'transition': 'quint:in:out', 'link':'cancel'});
		tweenGlass.start('height', 0);
	},
	
	fadeIn: function(i) {
		var tweenLogo = new Fx.Tween(this.options.logos[i], {'duration': 200, 'transition': 'quint:in:out', 'link':'cancel'});
		tweenLogo.start('opacity', 1);
	},
	
	fadeOut: function(i) {
		var tweenLogo = new Fx.Tween(this.options.logos[i], {'duration': 200, 'transition': 'quint:in:out', 'link':'cancel'});
		tweenLogo.start('opacity', 0.5);
	}
}); 	



var TweenHeader = new Class({
	options: {
		background: null,
		logo: null
	},
	Implements: Options,
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.options.delay = 0;
		this.options.delayBetweenItems = 45;
		this.options.speed = 500;
		
		this.options.fxBackground = new Fx.Morph(this.options.background, {'duration': this.options.speed, 'transition': 'quint:in:out', 'link': 'cancel'});
		this.options.fxLogo = new Fx.Morph(this.options.logo, {'duration': this.options.speed, 'transition': 'quint:in:out', 'link': 'cancel'});
		
		this.tween();
	},
	
	tween: function() {
		this.options.fxBackground.start({
			'top': 50,
			'opacity': 1
		});
		(function() {
			this.options.fxLogo.start({
				'top': 50,
				'opacity': 1
			});	  
		}.delay(150, this));
	}
});



var Tooltip = new Class({
	options: {
		button: null,
		tooltip: null
	},
	Implements: Options,
	
	initialize: function(options) {
		this.setOptions(options);
		this.options.tooltip.fade('hide');
		this.options.fxTooltip = new Fx.Tween.CSS3(this.options.tooltip, { duration: 300, transition: 'quint:in', link: 'cancel' });
		this.addEvents();
	},
	
	addEvents: function() {
		var topPos = this.options.tooltip.getStyle('top').toInt();
		this.options.button.addEvents({
			'mouseenter': function(e) {
				e.stop();
				this.options.tooltip.fade('in');
				this.options.fxTooltip.start('top', (topPos + 20));
			}.bind(this),
			'mouseleave': function(e) {
				e.stop();
				this.options.tooltip.fade('out');
				this.options.fxTooltip.start('top', topPos);
			}.bind(this)
		});
	}
});



/* Overlay */
Overlay = new Class({
	options: {
		toggler: 'a.overlay',
		overlay: 'overlayer',
		content: 'overlay-content',
		close: 'btn-close',
		mask: null
	},
	Implements: Options,
	
	initialize: function(options)
	{
		this.setOptions(options);
		this.options.mask = new Mask;
		this.options.mask.addEvent('click', function(){
			this.hide();
		}.bind(this));
		
		this.createElements();
		this.addEvents();
	},
	
	createElements: function()
	{
		this.options.toggler = $$(this.options.toggler);
		this.options.overlay = new Element('div', { 'id': this.options.overlay }).inject(document.body, 'bottom');
		this.options.content = new Element('div', { 'id': this.options.content }).inject(this.options.overlay);
		this.options.close = new Element('a', { 'id': this.options.close }).inject(this.options.overlay);
	},
	
	addEvents: function()
	{
		this.options.toggler.each(function(button, key){
			button.addEvent('click', function(e){
				e.stop();
				this.getPage(button.get('rel'), button.get('href'));
			}.bind(this));
		}.bind(this));
		
		this.options.close.addEvent('click', function(e)
		{
			this.hide();
		}.bind(this));
	},
	
	getPage: function(rel, href)
	{
		if (rel == 'inline')
		{
			this.options.content.set('html', $(title).get('html'));
			this.show();
			this.setOverlayPosition(this.calc());
		}
		else 
		{
			var getPage = new Request.HTML({
				url: href,
				onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
					this.options.content.set('html', responseHTML);
					this.show();
					this.setOverlayPosition(rel, this.calc());
					//this.initPage(arrRel[1], arrRel[2]);
				}.bind(this)
			}).get();
		}
	},
	
	initPage: function(mediaId, mediaType)
	{
		
	},
	
	calc: function()
	{
		return this.options.overlay.measure(function(){ return this.getSize(); });
	},
	
	setOverlayPosition: function(rel, size)
	{
		this.options.overlay.set('class', rel);
	},
	
	show: function()
	{
		this.options.mask.show();
		this.options.overlay.setStyle('display', 'block');
	},
	
	hide: function()
	{
		this.options.mask.hide();
		this.options.content.set('html', '');
		this.options.overlay.setStyle('display', 'none');		
	}
	
});




// Element Implements
Element.implement(
{
	hasEvent: function(eventType,fn)
	{
		var myEvents = this.retrieve('events');
		return myEvents && myEvents[eventType] && (fn == undefined || myEvents[eventType].keys.contains(fn));
	},
	show: function()
	{
		this.setStyle('display','block');
	},
	inline: function()
	{
		this.setStyle('display','inline');
	},
	hide: function()
	{
		this.setStyle('display','none');
	}
});