window.addEvent('domready', function() {
	var openspeed = 300;
	var closespeed = 300;
	var stacks=$$('.stack');
	
	stacks.each(function(element, index){
		var stack=element.getElementById('stack');
		stack			
		.setStyles({top: '5px', left: '0px'});
		
		stack
		.getChildren('li')		
		.setStyles({top: '0px', left: '0px'});
				
		new EventToggle(
			element.getFirst('img'), 
			[function(e) {
				e.stop();
	
				var vertical = 0;
				var horizontal = 0;
				
				var stack=element.getElementById('stack');
				
				var up={duration: 500, transition: 'Back:out'}
				
				stack
				.getChildren('li')
				.set('morph', up)
				.each(function(li, index) {
					li
					.morph({top: '-' + vertical + 'px', left: horizontal + 'px'});
					
					vertical = vertical + 55;
					horizontal = (horizontal+.35)*2;								
				});
				
				stack
				.set('morph', up)
				.morph({top: '-50px', left: '10px'})
				.addClass('openStack');
				
				stack
				.getElements('li img')
				.set('morph', up)
				.morph({width: '55px', 'margin-left': '3px'});
				
				element.getFirst('img')
				.tween('paddingTop', 0)
			},
			function(e) {
				e.stop();
				var stack=element.getElementById('stack');
				var down={duration: 'long', transition: 'Bounce:out'};
				stack			
				.removeClass('openStack')
				.set('morph', down)
				.morph({top: '5px', left: '0px'});
				
				stack
				.getChildren('li')
				.set('morph', down)
				.morph({top: '0px', left: '0px'});
				
				stack
				.getElements('li img')
				.set('morph', down)
				.morph({width: '79px', 'margin-left': '0px'});
	
				element
				.getFirst('img')
				.tween('paddingTop', 35)
			}]
		);
		element.getElements('a')
		.addEvent('mouseenter', function(e) {
			e.stop();
			this
			.getElement('img')
			.set('morph', {duration: 1500, transition: 'Elastic:out'})			
			.morph({width: '61px', 'margin-left': '0px'});
			this
			.getElement('span')
			.set('tween', {duration: 1500, transition: 'Elastic:out'})
			.tween('margin-right', '30px');
		})
		.addEvent('mouseleave', function(e) {
			e.stop();

			this
			.getElement('img').morph({width: '55px', marginLeft: '3px'});
			this
			.getElement('span').tween('margin-right', 0);
		});
	});
	
	
	/*
	// Stacks additional animation
	$('.stack li a').hover(function(){
		$("img",this).animate({width: '61px', marginLeft: '0px'}, 100);
		$("span",this).animate({marginRight: '30px'});
	},function(){
		$("img",this).animate({width: '55px', marginLeft: '3px'}, 100);
		$("span",this).animate({marginRight: '0'});
	});
	*/
});