.page
    a.control-menu(href="#").close
      .fa.fa-bars
      .fa.fa-times
    .menu-wrapper
        .menu
            a.element.one(href="#")
                .element-wrapper
                    i.icon.fa.fa-camera
                    span.tag portfolio
                    .loading loading
            a.element.two(href="#")
                .element-wrapper
                    i.icon.fa.fa-coffee
                    span.tag coffee
            a.element.three(href="#")
                .element-wrapper
                    i.icon.fa.fa-heart
                    span.tag love
            a.element.four(href="#")
                .element-wrapper
                    i.icon.fa.fa-dribbble
                    span.tag dribbble
                      small I wouldn't mind an invite

html, body
  height: 100%
  background: #313
  font-family: lato, sans-serif
  font-weight: 400
  width: 100%
  overflow: hidden
  
.page
  position: relative
  height: 100%

.control-menu
  position: absolute
  font-size: 24px
  top: 10px
  border-radius: 24px
  right: 10px
  color: white
  z-index: 200
  text-decoration: none
  .fa
    width: 32px
    height: 32px
    display: block
    line-height: 32px
    border-radius: 32px
    text-align: center
  &.open
    .fa-bars
      display: block
    .fa-times
      display: none
  &.close
    .fa-bars
      display: none
    .fa-times
      display: block
      background-color: #666

.menu
  width: 100%
  float: left
  overflow: hidden
  position: relative
  transition: all .3s ease
  height: 100%
    
.menu-wrapper
  transition: all .3s ease
  height: 100%
  
.menu.closed
  transform: translateX(100%) scale(.6) !important
  transform-origin: top right
  transition: all .4s ease

.element
  display: block
  height: 25% 
  width: 100%
  font-size: 32px
  text-align: center
  color: white
  display: table
  text-decoration: none
  transition: all .3s

  &.one
    background-color: #F1C40F
  &.two
    background-color: #E67E22
  &.three
    background-color: #E74C3C
  &.four
    background-color: #E30E82
  .element-wrapper
    display: table-cell
    vertical-align: middle
    position: relative
  .icon
    display: block
  .tag
    display: block
    padding-top: 10px
    font-size: 28px
    text-decoration: none
    opacity: 0
    height: 0
    text-transform: uppercase
    transform: translateY(200px)
    width: 100%
  .loading
    height: 0
    opacity: 0

.element.element--closed
  height: 0%
  overflow: hidden
  display: block
  *
    opacity : 0
    transition: all 1s ease
    
.element.element--active
  font-size: 64px
  transition: all .3s
  height: 100%
    
  .tag
    opacity: 1
    height: 100px
    transform: translateY(0)
    transition: all .2s .3s ease
    
    small
      font-size: .4em
      display: block

var menu = (function() {
  'use strict';

  function elementController(){

    $('.element').on('click', function(){

      var $this = $(this),
        height = $this.height(),
        i = $this.index()

      if($this.hasClass('element--active')){

        $this
          .removeClass('element--active')
          .siblings()
            .removeClass('element--closed');

      } else {

        $this
          .addClass('element--active')
          .siblings()
            .addClass('element--closed');

      }

      return false;

    });

  }

  function bindUI(){


    $('.control-menu').on('click', function(){

      $(this)
        .toggleClass('open')
        .toggleClass('close');

      $('.menu')
        .toggleClass('closed');

    });

    elementController();

  }

  function init() {

    bindUI();
 
  }

  return {
    init:init
  };

}());

$(function(){

  menu.init();

})