Weadev = {};

Weadev.Menu = {
	currentSubject: null,
	backgroundImagePath: '/media/de/weadev/layout/bg/',
	defaultBackgroundImage: 'default',
	currentBackground: null, 
	backgroundImages: ['weadev', 'design', 'development', 'support', 'technologies', 'solutions'],
	preloadImages: function() {
		$('background_default').show();
		$('background_fading').setOpacity(0);
		$('background_fading').setStyle({ zIndex: -1 });
		Weadev.Menu.currentBackground = $('background_' + Weadev.Menu.defaultBackgroundImage);
		Weadev.Menu.backgroundImages.each(function(element) {
			image = new Element('img', { id: 'background_'+element, style: 'display: none', src: Weadev.Menu.backgroundImagePath+element+'.png' });
			image.addClassName('background');
			image.removeAttribute('height');
			image.removeAttribute('width');
			Weadev.Menu.currentBackground.insert({ after: image });
		});
	},
	changeBackground: function(newBackground) {
		new Effect.Opacity($('background_fading'), { from: 0, to: 0.5, duration: 0.5,
			afterFinish: function() {
				Weadev.Menu.currentBackground.hide();
				Weadev.Menu.currentBackground.setOpacity(0);
				newBackground.setOpacity(0.5);
				newBackground.show();
				new Effect.Opacity($('background_fading'), { from: 0.5, to: 0, duration: 0.5 });
				Weadev.Menu.currentBackground = newBackground;
			}.bind(newBackground)
		});
	},
	changeSubject: function(newSubject) {
		if(Weadev.Menu.currentSubject != null && Weadev.Menu.currentSubject.visible()) {
			Weadev.Menu.currentSubject.down('div.header').removeClassName('open');
			Effect.BlindUp(Weadev.Menu.currentSubject.down('div.content'), { duration: 0.5 });
		}
		if(newSubject != null) {
			Effect.BlindDown(newSubject.down('div.content'), { duration: 0.5 });
			newSubject.down('div.header').addClassName('open');
		}
		Weadev.Menu.currentSubject = newSubject;
	}
};

Event.observe(window, 'load', function() {
	Weadev.Menu.preloadImages();
});

Event.observe(document, 'dom:loaded', function() {
	$$('div.menu div.subject').each(function (element) {
		element.down('div.content').hide();
		element.down('div.header').removeClassName('open');
		element.down('div.header').observe('click', function(event) {
			newSubject = Event.element(event).up('div.subject');
			if(newSubject == Weadev.Menu.currentSubject) {
				Weadev.Menu.changeSubject(null);
				Weadev.Menu.changeBackground($('background_default'));
			} else {
				Weadev.Menu.changeSubject(newSubject);
				Weadev.Menu.changeBackground($('background_' + newSubject.id.replace('menu_', '')));
			}
		});
	});
});