title: 'this' does not work properly in another event. I'm clueless as to why
body: <p>Short story, I don't know why it's not working, I've tried Console.Log() to figure out what 'this' is and the event just keeps passing window. It's a click event that's suppose to activate effects on a certain figure in this carousel, which is why I can't just individually search for class (at least to my knowledge). Any fix from the smarter?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var carFigure = null;
  //----------The Events
  $('.figure').click(toggleCarousel(this));
  //$('.figure').mouseover(stopCarousel(this));
  //$('.figure').mouseleave(startCarousel(carFigure));
  
  //------------Switcharoo function
  function toggleCarousel(event) {
      var bool = false;
      console.log(event)
      if (bool) {
          stopCarousel(event);
          bool = false;
      }
      else {
          startCarousel(event);
          bool = true;
      }
  }
  
  
  //----------The action functions
  function stopCarousel(e) {
  if (carFigure != null) { document.getElementById('carousel').style.animationPlayState = "paused";
          var p = e.parentElement;
          var a = p.getElementsByTagName('DIV')[2];
          if (a.getElementsByTagName('IMG')[0].style.transform = "none") {
              a.getElementsByTagName('IMG')[0].style.transform = "scale(1.2, 1.2) translateY(-25%)";
              a.getElementsByTagName('IMG')[0].style.borderRadius = "100%";
              a.getElementsByTagName('H5')[0].style.color = "rgba(255,255,255, 0)";
              this.getElementsByClassName('links')[0].style.transform = "translateY(-250%)";
              this.getElementsByClassName('links')[0].style.opacity = "1";
              carFigure = null;
          }
      }
  };
  function startCarousel(e) {
      if (e != null) {
          carFigure = e;
          document.getElementById('carousel').style.animationPlayState = "running";
          var p = e.parentElement;
          var a = p.getElementsByTagName('DIV')[2];
          a.getElementsByTagName('IMG')[0].style.transform = "none";
          a.getElementsByTagName('IMG')[0].style.borderRadius = "0";
          a.getElementsByTagName('H5')[0].style.color = "rgba(255,255,255, 1)";
          this.getElementsByClassName('links')[0].style.transform = "none";
          this.getElementsByClassName('links')[0].style.opacity = "0";
      }
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>--HTML Version (Snippet)
  &lt;div class="carcontainer"&gt;
      &lt;div id="carousel"&gt;
          &lt;figure&gt;
              &lt;div class="figure"&gt;
                  &lt;div class="links"&gt;
                      &lt;a&gt;&lt;img src="~/Content/images/LinkedInIco.png" /&gt;&lt;/a&gt;
                      &lt;a href="http://www.example.com"&gt;&lt;img src="~/Content/images/WebsiteIco.png" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;h5&gt;Person Name&lt;/h5&gt;
                  &lt;img src="~/Content/images/Name.jpg" alt="" /&gt;
              &lt;/div&gt;
          &lt;/figure&gt;
          &lt;figure&gt;
              &lt;div class="figure"&gt;
                  &lt;div class="links"&gt;
                      &lt;a&gt;&lt;img src="~/Content/images/LinkedInIco.png" /&gt;&lt;/a&gt;
                      &lt;a href="http://www.example.com"&gt;&lt;img src="~/Content/images/WebsiteIco.png" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;h5&gt;Person Name&lt;/h5&gt;
                  &lt;img src="~/Content/images/Name.jpg" alt="" /&gt;
              &lt;/div&gt;
          &lt;/figure&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>