3 files changed, 64 insertions, 0 deletions
diff --git a/widgets/comments/comments.coffee b/widgets/comments/comments.coffee
new file mode 100644
index 0000000..ff659ec
--- /dev/null
+++ b/widgets/comments/comments.coffee
@@ -0,0 +1,24 @@
+class Dashing.Comments extends Dashing.Widget
+
+  @accessor 'quote', ->
+    "“#{@get('current_comment')?.body}”"
+
+  ready: ->
+    @currentIndex = 0
+    @commentElem = $(@node).find('.comment-container')
+    @nextComment()
+    @startCarousel()
+
+  onData: (data) ->
+    @currentIndex = 0
+
+  startCarousel: ->
+    setInterval(@nextComment, 8000)
+
+  nextComment: =>
+    comments = @get('comments')
+    if comments
+      @commentElem.fadeOut =>
+        @currentIndex = (@currentIndex + 1) % comments.length
+        @set 'current_comment', comments[@currentIndex]
+        @commentElem.fadeIn()
diff --git a/widgets/comments/comments.html b/widgets/comments/comments.html
new file mode 100644
index 0000000..7c580be
--- /dev/null
+++ b/widgets/comments/comments.html
@@ -0,0 +1,7 @@
+<h1 class="title" data-bind="title"></h1>
+<div class="comment-container">
+  <h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3>
+  <p class="comment" data-bind='quote'></p>
+</div>
+
+<p class="more-info" data-bind="moreinfo"></p>
diff --git a/widgets/comments/comments.scss b/widgets/comments/comments.scss
new file mode 100644
index 0000000..2ace30e
--- /dev/null
+++ b/widgets/comments/comments.scss
@@ -0,0 +1,33 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #eb9c3c;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-comment styles
+// ----------------------------------------------------------------------------
+.widget-comments {
+
+  background-color: $background-color;
+
+  .title {
+    color: $title-color;
+    margin-bottom: 15px;
+  }
+
+  .name {
+    padding-left: 5px;
+  }
+
+  .comment-container {
+    display: none;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+}