.content
  .menu
    .menu-wrapper
      %ul.menu-items
        %li.menu-item
          %button.menu-item-button
            %i.fa.fa-reply-all
          .menu-item-bounce
        %li.menu-item
          %button.menu-item-button
            %i.fa.fa-inbox
          .menu-item-bounce
        %li.menu-item
          %button.menu-item-button
            %i.fa.fa-trash
          .menu-item-bounce
      %button.menu-toggle-button
        %i.fa.fa-plus.menu-toggle-icon

body{
  background: #2a2b30;
}


.menu {
	width: 300px;
	height: 200px;
	margin: 0 auto 100px;
	position: relative;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
  &-wrapper{
  position: absolute;
	left: 50%;
	bottom: 10px;
  }
  &-toggle-button,&-item-bounce,&-item-button{
    background: #4f4f64;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin-left: -40px;
	margin-top: -40px;
	height: 80px;
	color: #fff;
	border: none;
	outline: none;
	position: relative;
   
  }
  
  &-toggle-button {
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
   
}
  &-toggle-icon {
	font-size: 30px;
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
	line-height: 80px;
}
&-items {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
}
  &-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}
&-item-bounce {
	position: absolute;
	top: 0;
	left: 0;
}
  
  &-item-button {
	width: 60px;
	height: 60px;
	margin-left: -30px;
	margin-top: -30px;
	position: absolute;
	top: 0;
	left: 0;
	color: #AD4C4C;
    .fa{
      font-size:1.5rem;
      color:#fff;
    }
    .fa-inbox{
      transform: rotate(182deg);
    }
    .fa-reply-all{
      transform: rotate(-120deg);
    }
    .fa-trash{
      transform: rotate(120deg);
    }
}
}

$(document).ready(function(){
	var menuItemNum=$(".menu-item").length;
	var angle=120;
	var distance=90;
	var startingAngle=180+(-angle/2);
	var slice=angle/(menuItemNum-1);
	TweenMax.globalTimeScale(0.8);
	$(".menu-item").each(function(i){
		var angle=startingAngle+(slice*i);
		$(this).css({
			transform:"rotate("+(angle)+"deg)"
		})
		$(this).find(".menu-item-icon").css({
			transform:"rotate("+(-angle)+"deg)"
		})
	})
	var on=false;

	$(".menu-toggle-button").mousedown(function(){
		TweenMax.to($(".menu-toggle-icon"),0.1,{
			scale:0.65
		})
	})
	$(document).mouseup(function(){
		TweenMax.to($(".menu-toggle-icon"),0.1,{
			scale:1
		})
	});
	$(document).on("touchend",function(){
		$(document).trigger("mouseup")
	})
	$(".menu-toggle-button").on("mousedown",pressHandler);
	$(".menu-toggle-button").on("touchstart",function(event){
		$(this).trigger("mousedown");
		event.preventDefault();
		event.stopPropagation();
	});

	function pressHandler(event){
		on=!on;

		TweenMax.to($(this).children('.menu-toggle-icon'),0.4,{
			rotation:on?45:0,
			ease:Quint.easeInOut,
			force3D:true
		});

		on?openMenu():closeMenu();
		
	}
	function openMenu(){
		$(".menu-item").each(function(i){
			var delay=i*0.08;

			var $bounce=$(this).children(".menu-item-bounce");

			TweenMax.fromTo($bounce,0.2,{
				transformOrigin:"50% 50%"
			},{
				delay:delay,
				scaleX:0.8,
				scaleY:1.2,
				force3D:true,
				ease:Quad.easeInOut,
				onComplete:function(){
					TweenMax.to($bounce,0.15,{
						// scaleX:1.2,
						scaleY:0.7,
						force3D:true,
						ease:Quad.easeInOut,
						onComplete:function(){
							TweenMax.to($bounce,3,{
								// scaleX:1,
								scaleY:0.8,
								force3D:true,
								ease:Elastic.easeOut,
								easeParams:[1.1,0.12]
							})
						}
					})
				}
			});

			TweenMax.to($(this).children(".menu-item-button"),0.5,{
				delay:delay,
				y:distance,
				force3D:true,
				ease:Quint.easeInOut
			});
		})
	}
	function closeMenu(){
		$(".menu-item").each(function(i){
			var delay=i*0.08;

			var $bounce=$(this).children(".menu-item-bounce");

			TweenMax.fromTo($bounce,0.2,{
				transformOrigin:"50% 50%"
			},{
				delay:delay,
				scaleX:1,
				scaleY:0.8,
				force3D:true,
				ease:Quad.easeInOut,
				onComplete:function(){
					TweenMax.to($bounce,0.15,{
						// scaleX:1.2,
						scaleY:1.2,
						force3D:true,
						ease:Quad.easeInOut,
						onComplete:function(){
							TweenMax.to($bounce,3,{
								// scaleX:1,
								scaleY:1,
								force3D:true,
								ease:Elastic.easeOut,
								easeParams:[1.1,0.12]
							})
						}
					})
				}
			});
			

			TweenMax.to($(this).children(".menu-item-button"),0.3,{
				delay:delay,
				y:0,
				force3D:true,
				ease:Quint.easeIn
			});
		})
	}
})