added carousel to dashboard page

lms/static/sass/multicourse/_dashboard.scss

@@ -124,6 +124,103 @@
         }
       }
     }
+
+    .news-carousel {
+      @include clearfix;
+      margin: 30px 10px 0;
+      border: 1px solid rgb(200,200,200);
+      background: rgb(252,252,252);
+      @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
+
+      * {
+        font-family: $sans-serif;
+      }
+
+      header {
+        @include clearfix;
+        height: 50px;
+      }
+
+      .page-dots {
+        float: right;
+        margin: 18px 15px 0 0;
+
+        li {
+          float: left;
+          margin-left: 6px;
+        }
+      }
+
+      .page-dot {
+        display: block;
+        width: 11px;
+        height: 11px;
+        border-radius: 11px;
+        background: $light-gray;
+
+        &:hover {
+          background: #ccc;
+        }
+
+        &.current {
+          background: $blue;
+        }
+      }
+
+      h4 {
+        float: left;
+        margin-left: 15px;
+        font-size: 15px;
+        line-height: 48px;
+        font-weight: 700;
+        text-transform: uppercase;
+      }
+
+      .pages {
+        position: relative;
+      }
+
+      .page {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        &:first-child {
+          display: block;
+        }
+      }
+
+      section {
+        padding: 0 10px;
+      }
+
+      .news-image {
+        height: 125px;
+        margin-bottom: 15px;
+
+        img {
+          width: 100%;
+          border: 1px solid $light-gray;
+        }
+      }
+
+      h5 {
+        margin-bottom: 8px;
+        margin-left: 5px;
+
+        a {
+          font-size: 16px;
+          font-weight: 700;
+        }
+      }
+
+      .excerpt {
+        margin-left: 5px;
+        font-size: 13px;
+        padding-bottom: 40px;
+      }
+    }
   }
 
   .my-courses {

lms/templates/dashboard.html

@@ -14,6 +14,48 @@
   <script type="text/javascript">
   (function() {
 
+    var carouselPageHeight = 0;
+    var carouselIndex = 0;
+    var carouselDelay = 5000;
+    var carouselPages = $('.news-carousel .page').length;
+
+
+    $('.news-carousel .page').each(function() {
+      console.log($(this).outerHeight());
+      carouselPageHeight = Math.max($(this).outerHeight(), carouselPageHeight);
+    });
+    $('.news-carousel .pages').css('height', carouselPageHeight);
+    $('.news-carousel .page-dot').bind('click', setCarouselPage);
+    var carouselTimer = setInterval(nextCarouselPage, carouselDelay);
+
+    function nextCarouselPage() {
+      carouselIndex = carouselIndex + 1 < carouselPages ? carouselIndex + 1 : 0;
+      setCarouselPage(null, carouselIndex);
+    }
+
+    function setCarouselPage(e, index) {
+      console.log('set');
+      var $pageToShow;
+      var transitionSpeed;
+      $('.news-carousel .page-dots').find('.current').removeClass('current');
+
+      if(e) {
+        clearInterval(carouselTimer);
+        carouselTimer = setInterval(nextCarouselPage, carouselDelay);
+        carouselIndex = $(this).closest('li').index();
+        transitionSpeed = 250;
+        $pageToShow = $('.news-carousel .page').eq($(this).closest('li').index());
+        $(this).addClass('current');
+      } else {
+        transitionSpeed = 750;
+        $pageToShow = $('.news-carousel .page').eq(index);
+        $('.news-carousel .page-dot').eq(index).addClass('current');
+      }
+
+      $pageToShow.fadeIn(transitionSpeed);
+      $('.news-carousel .page').not($pageToShow).fadeOut(transitionSpeed);
+    }
+
     $(".unenroll").click(function(event) {
       $("#unenroll_course_id").val( $(event.target).data("course-id") );
       $("#unenroll_course_number").text( $(event.target).data("course-number") );
@@ -107,6 +149,51 @@
         </li>
       </ul>
     </section>
+
+    <article class="news-carousel">
+      <header>
+        <h4>edX News</h4>
+        <nav class="page-dots">
+          <ol>
+            <li><a href="#" class="page-dot current"></a></li>
+            <li><a href="#" class="page-dot"></a></li>
+            <li><a href="#" class="page-dot"></a></li>
+          </ol>
+        </nav>
+      </header>
+      <div class="pages">
+        <section class="page">
+          <div class="news-image">
+            <a href="#"><img src="/static/content-berkeley-cs169x/images/course_image.jpg" /></a>
+          </div>
+          <h5><a href="#">BerkeleyX to offer Computer Graphics course</a></h5>
+          <div class="excerpt">
+            <p>BerkeleyX will be offering CS184.1x: Foundations of Computer Graphics starting on November 5, 2012.</p>
+            <p><a href="#">Learn More ›</a></p>
+          </div>
+        </section>
+        <section class="page">
+          <div class="news-image">
+            <a href="#"><img src="/static/content-mit-6002x/images/course_image.jpg" /></a>
+          </div>
+          <h5><a href="#">MIT has a new class</a></h5>
+          <div class="excerpt">
+            <p>BerkeleyX will be offering CS184.1x: Foundations of Computer Graphics starting on November 5, 2012.</p>
+            <p><a href="#">Learn More ›</a></p>
+          </div>
+        </section>
+        <section class="page">
+          <div class="news-image">
+            <a href="#"><img src="/static/6.00x/images/course_image.jpg" /></a>
+          </div>
+          <h5><a href="#">Look at this class, too!</a></h5>
+          <div class="excerpt">
+            <p>BerkeleyX will be offering CS184.1x: Foundations of Computer Graphics starting on November 5, 2012.</p>
+            <p><a href="#">Learn More ›</a></p>
+          </div>
+        </section>
+      </div>
+    </article>
   </section>
 
   <section class="my-courses">