<div id="mainB">
  <div class="bg">
     <div class="bg1">

     </div>
  </div>
</div>
<div class="over">
  <div class="dial">
    <div class="grad">
        
    </div>
  </div>
  <div class="container">
  <div class="nav">
    <ul id="nav">
      <li id="email">
        <a>
          <img src="http://grantcr.com/files/iemail.png" />
        </a>
      </li>
      <li id="photo">
        <a>
          <img src="http://grantcr.com/files/iphoto.png" />
        </a>
      </li>
      <li id="cloud" class="active">
        <a>
          <img src="http://grantcr.com/files/icloud.png" />
        </a>
      </li>
      <li id="portfolio">
        <a>
          <img src="http://grantcr.com/files/portfolio.png" />
        </a>
      </li>
      <li id="settings">
        <a>
          <img src="http://grantcr.com/files/settings.png" />
        </a>
      </li>
    </ul>
  </div>
  </div>
</div>

@import "compass/css3";


#mainB {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:url("http://grantcr.com/files/bg.png") 0 0;
  z-index:-9000;
  opacity: 0.98;
}
.bg {
  background:url("http://grantcr.com/files/texture.png") 0 0;
  height:100%;
  opacity:0.99;
  z-index:-7000;
  
}
.bg1 {
  background:url("http://grantcr.com/files/bgg.png") 0 0;
  height:100%;
  opacity:0.95;
  z-index:-7000;
}
.over {
  background:url("http://grantcr.com/files/top.png") top center no-repeat;
  position:fixed;
  
  opacity:0.8;
  width:100%;
  top:-150px;
  bottom:90%;
  z-index:300;
  height:500px;
  
}
.dial {
  width:165px;
  height:165px;
  border-radius:50%;
  position:relative;
  
  display:block;
  margin: auto auto;
  top:300px;
  opacity:0.9;
  @include filter-gradient(#c9cfd7, #b0b7c1, vertical);
  @include background-image(linear-gradient(top, rgba(201,207,215,1) 0%,rgba(43,47,62,0.97) 46%,rgba(43,47,62,0.97) 48%,rgba(43,47,62,1) 52%,rgba(43,47,62,1) 55%,rgba(176,183,193,1) 100%));
  z-index:99999;
  box-shadow: 2px 15px 15px 7px rgba(0,0,0,0.3),
              -15px 2px 5px rgba(0,0,0,0.2),
              1px 10px 15px rgba(0,0,0,0.5),
              0px 10px 5px rgba(0,0,0,0.7);
 
  
  
  .grad {
      background:url("http://grantcr.com/files/dail.png") 0 0 no-repeat;
      width:165px;
      z-index:999;
      height:165px;
      position:absolute;
      top:3px;
      border-radius:50%;
      left:3px;
      opacity:1;
      
    
    }
}
.container {
  width:325px;
  position:relative;
  margin:0 auto;
  height:100%;
}
.nav {
  position:relative;
  width: 100%;
  top:200px;
  
}
#nav li {
  display:inline-block;
  list-style-type:none;
  float:left;
  margin-right:43px;
  
  a {
    cursor: pointer; 
  }
  
  &:nth-of-type(1) {
    position:relative;
    left:10px;
    
    
    &:after {
      content:" ";
      background:url("http://grantcr.com/files/circle.png") center center no-repeat;
      position:absolute;
      width:10px;
      height:10px;
      top:7px;
      left:35px;
    }
  }
  
  &:nth-of-type(2) {
    position:relative;
    top:-85px;
    left:-25px;
    
    &:after {
      content:" ";
      background:url("http://grantcr.com/files/circle.png") center center no-repeat;
      position:absolute;
      width:10px;
      height:10px;
      left:30px;
      top:25px;
    }
    
  }
  &:nth-of-type(3) {
    position:relative;
    top:-120px;
    
    &:before {
      content:" ";
      background:url("http://grantcr.com/files/circle.png") center center no-repeat;
      width:10px;
      height:10px;
      position:absolute;
      top:30px;
      left:12px;
    }
    
  }
  &:nth-of-type(4) {
    position:relative;
    top:-85px;
    left:25px;
    
    &:before {
      content:" ";
      background:url("http://grantcr.com/files/circle.png") center center no-repeat;
      width:10px;
      position:absolute;
      height:10px;
      top: 25px;
      left: -15px;
    }
  }
  &:nth-of-type(5) {
    position:relative;
    left:-15px;
    top:-1px;
    margin:0;
    
    &:before {
      content:" ";
      background:url("http://grantcr.com/files/circle.png") center center no-repeat;
      position:absolute;
      width: 10px;
      height:10px;
      left: -17px;
      top:8px;
    }
  }
}
.active > a{
  box-shadow: 0px 0px 100px 25px rgba(255,255,255,0.2);
  
}
.r0 {
  transition: all 1s ease;
  transform:rotate(0deg);
 
}
.rr1 {
  transition: all 1s ease;
  transform:rotate(45deg);
 
}
.rr2 {
  transition: all 1s ease;
  transform:rotate(90deg);
 
}
.lr1 {
  transition: all 1s ease;
  transform:rotate(-45deg);
 
}
.lr2 {
  transition: all 1s ease;
  transform:rotate(-90deg);
 
}

function doSwap() {
  $("#nav li").each(function() {
    if ($(this).hasClass("active")) {
      swap($(this));
    }
    else {
      swapBack($(this));
    }
  });
}
doSwap();
function clear(o) {
  $("#nav li").each(function() {
    $(this).removeClass("active");
  });
}
$("#nav li").click(function() {
  clear();
  $(this).addClass("active");
  doSwap();
  rotate('.dial',$(this));
                     
});

function rotate(m,o) {
  var id = "#" + $(o).attr("id");
  var menu = $(m);
  
  menu.removeClass('r0 lr1 lr2 rr1 rr2');
  
  if (id == "#email") {
    menu.addClass("lr2");
  }
  if (id == "#photo") {
    menu.addClass('lr1');
    
  }
  if (id == "#cloud") {
    menu.addClass('r0');
  }
  if (id == "#portfolio") {
    menu.addClass('rr1');
  }
  if (id == "#settings") {
    menu.addClass('rr2');
  }
      
  
}

function swap(o) {
  var id = "#" + $(o).attr("id");
  var cimg = new String;
  var burl = "http://grantcr.com/files/",
      ext = ".png"
  cimg = id + " img";
  console.log($(cimg).attr("src"));
  
  if (id == "#email") {
    var nimg = burl + "iemailh" + ext;
    $(cimg).attr("src",nimg);
  }
  if (id == "#photo") {
    var nimg = burl + "photosh" + ext;
    $(cimg).attr("src",nimg);
  }
  if (id == "#cloud") {
    var nimg = burl + "icloudh" + ext;
    $(cimg).attr("src",nimg);
  }
  if (id == "#portfolio") {
    var nimg = burl + "portfolioh" + ext;
    $(cimg).attr("src",nimg);
  }
  if (id == "#settings") {
    var nimg = burl + "settingsh" + ext;
    $(cimg).attr("src",nimg);
  }
  
}

function swapBack(o) {
  var id = "#" + $(o).attr("id");
  var cimg = new String;
  var burl = "http://grantcr.com/files/",
      ext = ".png"
  cimg = id + " img";
  console.log($(cimg).attr("src"));
  
  if (id == "#email") {
    var nimg = burl + "iemail" + ext;
    $(cimg).attr("src",nimg);
  }
  if (id == "#photo") {
    var nimg = burl + "iphoto" + ext;
    $(cimg).attr("src",nimg);
  }
  if (id == "#cloud") {
    var nimg = burl + "icloud" + ext;
    $(cimg).attr("src",nimg);
  }
  if (id == "#portfolio") {
    var nimg = burl + "portfolio" + ext;
    $(cimg).attr("src",nimg);
  }
  if (id == "#settings") {
    var nimg = burl + "settings" + ext;
    $(cimg).attr("src",nimg);
  }
  
}