html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,font,img,ins,kbd,q,s,samp,
small,strike,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  text-align: left;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ol,ul {
  list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
  content: "";
}

#container {
  width: 1020px;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px 20px 30px 20px;
}

  .top-ad {
    text-align: center;
    padding-bottom: 15px;
  }

  h1 {
    font-size: 30px;
    padding: 0 0 20px 0;
    text-align: center;
  }
  
  h1 span {
    font-size: 18px;
  }

  #left {
    overflow: hidden;
    float: left;
  }
  
    #left p {
      width: 470px;
      padding: 20px 0 0 0;
      font-family: Arial, Helvetica, sans-serif;
    }

#sky {
  width: 500px;
  height: 500px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #525252;
}

#sky.animate {
  animation-name: sky;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes sky {
  0% {
    background-color: #525252;
  }
  
  33% {
    background-color: #6293e5;
  }

  66% {
    background-color: #6293e5;
  }

  100% {
    background-color: #525252;
  }
}

#ground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 500px;
  height: 154px;
  background: #6c5228;
  z-index: 4;
}

#ground.animate {
  animation-name: ground;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes ground {
  0% {
    background: #6c5228;
  }
  
  33% {
    background: #48a037;
  }

  66% {
    background: #48a037;
  }

  100% {
    background: #6c5228;
  }
}

#sun {
  background: #ffd630;
  width: 130px;
  height: 130px;
  position: absolute;
  border-radius: 70px;
  z-index: 2;
  bottom: 0;
  left: 340px;
}

#sun.animate {
  animation-name: sunrise;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes sunrise {
  0% {
    bottom: 0;
    left: 340px;
    background: #f00;
  }
  
  33% {
    bottom: 340px;
    left: 340px;
    background: #ffd630;
  }

  66% {
    bottom: 340px;
    left: 40px;
    background: #ffd630;
  }

  100% {
    bottom: 0;
    left: 40px;
    background: #f00;
  }
}

#cloud {
  position: relative;
  top: 50px;
  left: -100px;
  opacity: 0;
  z-index: 3;
}

#cloud.animate {
  animation-name: cloud;
  animation-duration: 12s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes cloud {
  0% {
    opacity: 0;
    left: -100px;
  }
  
  50% {
    opacity: 1;
    left: 60px;
  }
  
  75% {
    opacity: 1;
    left: 100px;
  }
  
  100% {
    opacity: 0;
    left: 500px;
  }
}

.cloud {
  border-radius: 90px / 30px;
  width: 160px;
  height: 50px;
  background: #fff;
  position: absolute;
  top: 10px;
}

.cloud-2 {
  left: 50px;
  top: 0;
}

.cloud-3 {
  left: 110px;
  top: 20px;

}

#moon {
  position: relative;
  opacity: 0;
  top: 50px;
  left: -100px;
}

#moon.animate {
  animation-name: moon;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-delay: 0s;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@keyframes moon {
  0% {
    opacity: 0;
    left: -100px;
  }
  
  50% {
    opacity: 0;
    left: -100px;
  }
  
  90% {
    opacity: 0;
    left: -100px;
  }
  
  100% {
    opacity: 1;
    left: 50px;
  }
}

  .moon {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: #fff;
    position: absolute;
  }
  
  .moon-2 {
    background: #525252;
    position: absolute;
    top: -20px;
    left: 20px;
  }

#code {
  float: left;
  margin: 0 0 0 20px;
  width: 494px;
}

ul.headers {
  overflow: hidden;
}

  ul.headers li {
    float: left;
    width: 85px;
    border: dashed 1px #ccc;
    margin: 0 4px;
  }

  ul.headers li a {
    display: block;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 10px;
  }
  
  ul.headers li a:hover, ul.headers li a:active {
    background: #ccc;
    color: #fff;
  }

#tab_content {
  border: #ccc 1px dashed;
  margin: 20px 0 20px 3px;
  padding: 0 0 20px 10px;
  width: 456px; 
}

div.tab {
  font-family: Arial, Helvetica, sans-serif;
  margin: 30px 0 0 10px;
}

div.tab pre {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
}

input[type="button"] {
  margin: 20px 0 0 165px;
  padding: 5px;
}

$(function () {
  var s = null,

  AnimationSpace = {
    settings: {
      tabHeaders: null,
      tabSections: null,
      currentIndex: null,
      speed: 800,
      collection: null,
      i: null,
      j: null,
      startButton: $("#startbutton")
    },

    init: function () {
      s = this.settings;
      s.tabSections = $("div.tab");
      $(s.tabSections[0]).slideDown(s.speed);
      $(s.tabSections[1]).slideUp(s.speed);
      $(s.tabSections[2]).slideUp(s.speed);
      $(s.tabSections[3]).slideUp(s.speed);
      $(s.tabSections[4]).slideUp(s.speed);
      this.getClickedTab();
      this.startAnimation();
    },
  
    getClickedTab: function () {
      s = this.settings;
      s.tabHeaders = $("#sidebar_tabs ul.headers a");
      s.collection = $("#tab_content div.tab");
      $(s.tabHeaders).click(function () {
        s.currentIndex = $(this).parent().index();
        for (s.i = 0, s.j = s.collection.length; s.i < s.j; s.i += 1) {
          if (s.i !== s.currentIndex) {
            $(s.tabSections[s.i]).slideUp(s.speed);

          } else {
            $(s.tabSections[s.i]).slideDown(s.speed);
          }
        }
        return false;
      });
    },
    
    startAnimation: function () {
      s = this.settings;
      
      s.startButton.click(function() {
        $("div.target").toggleClass("animate");
        if (s.startButton.attr("value") === "ANIMATE THE SCENE") {
          s.startButton.attr("value", "RESET THE ANIMATION");
        } else {
          s.startButton.attr("value", "ANIMATE THE SCENE"); 
        }
      });
    }

  };

  AnimationSpace.init();
});