window.addEvent('domready', function(){
	if(!$('workflow')){ return; }
	var modules = $$('#workflow .mod');
	var buttons = $$('#workflow .mod .button');
	var textContainers = $$('#workflow .mod .text');
	textContainers.each(function(tc){ tc.setStyles({display:'block', opacity:0}); });
	var curTextContainer;
	var closedModWidth = 60;
	var openedModWidth = 650;
	var inicialLeft = [];
	modules.each(function(module){ inicialLeft.push(module.getStyle('left').replace('px', '').toInt()); });
	var curModule;
	var curModuleIndex;
	var curModuleStartLeft;
	var prevModule;
	var activeModules = [];
	var moduleOpen = false;
	buttons.each(function(button){
		button.addEvent('click', buttonClick);
	});
	
	function buttonClick(e){
		if(curTextContainer){ curTextContainer.setStyle('opacity', 0); }
		if(curModule){ prevModule = curModule; }
		if(curModule && curModule == e.target.getParent('div[class="mod"]')){
			activeModules.each(function(activeModule, index){
				activeModule.morph({
					'width': closedModWidth,
					'left': inicialLeft[index]
				});
			});
			prevModule = null;
			curModule = null;
			return;
		} else if(curModule && curModule != e.target.getParent('div[class="mod"]')){
			curModule.tween('width', closedModWidth);
			prevModuleIndex = curModuleIndex;
		}
		activeModules = [];
		curModule = e.target.getParent('div[class="mod"]');
		for(var i = 0; i < modules.length; i++){
			activeModules.push(modules[i]);
			if(modules[i] === curModule){
				curModuleIndex = i;
				break;
			}
		}
		curModuleStartLeft = curModule.getStyle('left').replace('px', '').toInt();
		activeModules.each(function(activeModule, index){
			if(activeModule != curModule){
				if(inicialLeft[index] == activeModule.getStyle('left').replace('px','').toInt()){
					var newLeft = curModuleStartLeft - openedModWidth + (closedModWidth * (index + 1)) - ((activeModules.length-1) * closedModWidth);
					activeModule.tween('left', newLeft);
				}
			} else {
				if(inicialLeft[index] == activeModule.getStyle('left').replace('px','').toInt()){
					if(prevModule){ prevModule.tween('width', closedModWidth); }
					var morph = new Fx.Morph(activeModule, {
						onStart: function(){ if(curTextContainer){ curTextContainer.setStyle('opacity', 0); } },
						onComplete: function(e){
							curTextContainer = e.getFirst('div[class="text"]');
							var textFade = new Fx.Tween(curTextContainer, {
								onComplete: function(){
									buttons.each(function(button){
										button.addEvent('click', buttonClick);
									});
								}
							});
							textFade.start('opacity', 1);
						}
					});
					morph.start({
						width: openedModWidth,
						left: curModuleStartLeft - openedModWidth + (closedModWidth * (index + 1)) - ((activeModules.length-1) * closedModWidth)
					});
				}
			}
		});
		// close module after
		modules.each(function(module, index){
			if(index > curModuleIndex){
				if(module.getStyle('left').replace('px','').toInt() != inicialLeft[index]){
					module.tween('left', inicialLeft[index]);
					var tween = new Fx.Tween(curModule, {
						onComplete: function(e){
							curTextContainer = e.getFirst('div[class="text"]');
							curTextContainer.fade('in');
							buttons.each(function(button){
								button.addEvent('click', buttonClick);
							});
						}
					});
					tween.start('width', openedModWidth);
				}
			}
		});
		removeClickFromButtons();
	}
	
	function removeClickFromButtons(){
		buttons.each(function(button){
			button.removeEvent('click', buttonClick);
		});
	}
});