/* Calendar - step 3
    ---------------------------------------------------------------------------------------------------- */
    function Calendar(el)
    {
        
        this.el     = $(el);
        this.header = $('thead', this.el);
        this.body   = $('tbody', this.el);

        this.open = function() {
            this.el.removeClass().addClass('open calendar');
            this.showBody();
        };        
        this.close = function() {
            this.el.removeClass().addClass('calendar');
            this.hideBody();
        };

        this.showBody = function() {
            this.body.show();
        };

        this.hideBody = function() {
            this.body.hide();
        };

        this.toggle = function() {

            this.body.is(':visible') ? this.close() : this.open();

        };

        this.selectDate = function(date) {
            this.header.find('th').text(date);
        };
    }
     // var calendar = {
     //    init: function(el)
     //    {
     //        this.el = $(el);
     //        this.header = $('thead', this.el);
     //        this.body = $('tbody', this.el);
     //    },

     //    open: function() {
     //        this.header.removeClass().addClass('open');
     //        this.showBody();
     //    },        
     //    close: function() {
     //        this.header.removeClass();
     //        this.hideBody();
     //    },

     //    showBody: function() {
     //        this.body.show();
     //    },
     //    hideBody: function() {
     //        this.body.hide();
     //    }

     // };

     var calendar = new Calendar('#calendar');

     calendar.header.click(function(){
            calendar.toggle();
     });     

     calendar.body.find('td.num').click(function(){
            calendar.selectDate($(this).data('date'));
     });