issue 10: put a calendar on it

app/css/datePicker.css

@@ -0,0 +1,129 @@
+
+
+table.jCalendar {
+	border: 1px solid #000;
+	background: #aaa;
+    border-collapse: separate;
+    border-spacing: 2px;
+}
+table.jCalendar th {
+	background: #333;
+	color: #fff;
+	font-weight: bold;
+	padding: 3px 5px;
+}
+
+table.jCalendar td {
+	background: #ccc;
+	color: #000;
+	padding: 3px 5px;
+	text-align: center;
+}
+table.jCalendar td.other-month {
+	background: #ddd;
+	color: #aaa;
+}
+table.jCalendar td.today {
+	background: #666;
+	color: #fff;
+}
+table.jCalendar td.selected {
+	background: #f66;
+	color: #fff;
+}
+table.jCalendar td.selected.dp-hover {
+	background: #f33;
+	color: #fff;
+}
+table.jCalendar td.dp-hover,
+table.jCalendar tr.activeWeekHover td {
+	background: #fff;
+	color: #000;
+}
+table.jCalendar tr.selectedWeek td {
+	background: #f66;
+	color: #fff;
+}
+table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
+	background: #bbb;
+	color: #888;
+}
+table.jCalendar td.unselectable,
+table.jCalendar td.unselectable:hover,
+table.jCalendar td.unselectable.dp-hover {
+	background: #bbb;
+	color: #888;
+}
+
+/* For the popup */
+
+/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */
+
+div.dp-popup {
+	position: relative;
+	background: #ccc;
+	font-size: 10px;
+	font-family: arial, sans-serif;
+	padding: 2px;
+	width: 171px;
+	line-height: 1.2em;
+}
+div#dp-popup {
+	position: absolute;
+	z-index: 199;
+}
+div.dp-popup h2 {
+	font-size: 12px;
+	text-align: center;
+	margin: 2px 0;
+	padding: 0;
+}
+a#dp-close {
+	font-size: 11px;
+	padding: 4px 0;
+	text-align: center;
+	display: block;
+}
+a#dp-close:hover {
+	text-decoration: underline;
+}
+div.dp-popup a {
+	color: #000;
+	text-decoration: none;
+	padding: 3px 2px 0;
+}
+div.dp-popup div.dp-nav-prev {
+	position: absolute;
+	top: 2px;
+	left: 4px;
+	width: 100px;
+}
+div.dp-popup div.dp-nav-prev a {
+	float: left;
+}
+/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
+div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
+	cursor: pointer;
+}
+div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
+	cursor: default;
+}
+div.dp-popup div.dp-nav-next {
+	position: absolute;
+	top: 2px;
+	right: 4px;
+	width: 100px;
+}
+div.dp-popup div.dp-nav-next a {
+	float: right;
+}
+div.dp-popup a.disabled {
+	cursor: default;
+	color: #aaa;
+}
+div.dp-popup td {
+	cursor: pointer;
+}
+div.dp-popup td.disabled {
+	cursor: default;
+}

app/css/main.css

@@ -1 +1,9 @@
-/* TODO: Add your app CSS here */
+#days {
+	position: fixed;
+	left: 20px;
+	top: 60px;
+}
+
+#messages {
+  margin-left: 110px;
+}

app/index.html

@@ -21,8 +21,8 @@
     <a href="https://github.com/pangratz/irc-log-viewer"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
     <div class="container" >
       <div class="row" >
-        <div class="span2" id="days" ></div>
-        <div class="span10" id="messages" ></div>
+        <div class="span3" id="days" ></div>
+        <div class="span9" id="messages" ></div>
       </div>
     </div>
   </body>

app/lib/core.js

@@ -2,6 +2,8 @@ require('jquery');
 require('ember');
 require('moment');
 require('jquery.couch');
+require('date');
+require('jquery.datePicker');
 
 IRC = Ember.Application.create({
     VERSION: '0.0.1-snapshot',
@@ -50,6 +52,19 @@ IRC = Ember.Application.create({
         if (dataSource) {
             dataSource.loadDay(date);
         }
-    }
+    },
+
+		ready: function() {
+				$("#days").datePicker({
+					inline:true,
+					startDate: '01/01/1970',
+					endDate: (new Date()).asString()
+				}).bind('dateSelected', function(e, selectedDate, $td){
+					if (IRC.dataSource) {
+						console.log(selectedDate);
+            IRC.dataSource.loadDay(selectedDate);
+					}
+				});
+		}
 
-});
+});

app/lib/main.js

@@ -18,13 +18,7 @@ Ember.View.create({
     dateBinding: 'IRC.messagesController.date'
 }).appendTo('#messages');
 
-Ember.View.create({
-    templateName: 'days'.tmpl(),
-    daysBinding: 'IRC.daysController',
-    loadingBinding: 'IRC.daysController.loading'
-}).appendTo('#days');
-
 Ember.run(function() {
     IRC.dataSource.loadDay(IRC.createDate());
     IRC.dataSource.loadDays();
-});
+});