/**
 * this is grappellis timepicker.
 * works pretty similar to ui.datepicker:
 *  - adds a button to the element
 *  - creates a node (div) at the bottom called ui-timepicker
 *  - element.onClick fills the ui-timepicker node with the time_list (all times you can select)
 */

(function( $ ) {
$.widget("ui.timepicker", {
    // default options
    options: {
        // template for the container of the timepicker
        template: '<div id="ui-timepicker" class="module" style="position: absolute; display: none;"></div>',
        // selector to get the ui-timepicker once it's added to the dom
        timepicker_selector: "#ui-timepicker",
        // needed offset of the container from the element
        offset: {
            top: 0
        },
        // if time_list wasn't sent when calling the timepicker we use this
        default_time_list: [
            'now',
            '00:00',
            '01:00',
            '02:00',
            '03:00',
            '04:00',
            '05:00',
            '06:00',
            '07:00',
            '08:00',
            '09:00',
            '10:00',
            '11:00',
            '12:00',
            '13:00',
            '14:00',
            '15:00',
            '16:00',
            '17:00',
            '18:00',
            '19:00',
            '20:00',
            '21:00',
            '22:00',
            '23:00'
        ],
        // leave this empty!!!
        // NOTE: you can't set a default for time_list because if you call:
        // $("node").timepicker({time_list: ["01:00", "02:00"]})
        // ui.widget will extend/merge the options.time_list whith the one you sent.
        time_list: []
    },
    
    /**
     * init timepicker for a specific element
     */
    _create: function() {
        // for the events
        var self = this;
        
        // to close timpicker if you click somewhere in the document
        $(document).mousedown(function(evt) {
            if (self.timepicker.is(":visible")) {
                var $target = $(evt.target);
                if ($target[0].id != self.timepicker[0].id && $target.parents(self.options.timepicker_selector).length == 0 && !$target.hasClass('hasTimepicker') && !$target.hasClass('ui-timepicker-trigger')) {
                    self.timepicker.hide();
                }
            }
        });
        
        // get/create timepicker's container
        if ($(this.options.timepicker_selector).size() == 0) {
            $(this.options.template).appendTo('body');
        }
        this.timepicker = $(this.options.timepicker_selector);
        this.timepicker.hide();
        
        // modify the element and create the button
        this.element.addClass("hasTimepicker");
        this.button = $('<button type="button" class="ui-timepicker-trigger"></button>');
        this.element.after(this.button);
        
        // disable button if element is disabled
        if (this.element.attr("disabled")) {
            this.button.attr("disabled", true);
        }
        // register event
        else {
            this.button.click(function() {
                self._toggleTimepicker();
            });
        }
    },
    
    /**
     * called when button is clicked
     */
    _toggleTimepicker: function() {
        if (this.timepicker.is(":visible")) {
            this.timepicker.hide();
        } else {
            this.element.focus();
            this._generateTimepickerContents();
            this._showTimepicker();
        }
    },
    
    /**
     * fills timepicker with time_list of element and shows it.
     *
     * called by _toggleTimepicker
     */
    _generateTimepickerContents: function() {
        var self = this,
            template_str = "<ul>";
        
        // there is no time_list for this instance so use the default one
        if (this.options.time_list.length == 0) {
            this.options.time_list = this.options.default_time_list;
        }
        
        for (var i = 0; i < this.options.time_list.length; i++) {
            if (this.options.time_list[i] == "now") {
                var now = new Date(),
                    hours = now.getHours(), 
                    minutes = now.getMinutes();
                    
                hours = ((hours < 10) ? "0" + hours : hours);
                minutes = ((minutes < 10) ? "0" + minutes : minutes);
                
                template_str += '<li class="ui-state-active row">' + hours + ":" + minutes + '</li>';
            } else {
                template_str += '<li class="ui-state-default row">' + this.options.time_list[i] + '</li>';
            }
        }
        template_str += "</ul>";
        
        // fill timepicker container
        this.timepicker.html(template_str);
        
        // click handler for items (times) in timepicker
        this.timepicker.find('li').click(function() {
            // remove active class from all items
            $(this).parent().children('li').removeClass("ui-state-active");
            // mark clicked item as active
            $(this).addClass("ui-state-active");
            
            // set the new value and hide the timepicker
            self.element.val($(this).html());
            self.timepicker.hide();
        });
    },
    
    /**
     * sets offset and shows timepicker containter
     */
    _showTimepicker: function() {
        this.timepicker_offset = this.element.offset();
        this.timepicker_offset.top += this.element.outerHeight() + this.options.offset.top;
        this.timepicker.css(this.timepicker_offset);
        this.timepicker.show();
    },
    
    destroy: function() {
        $.Widget.prototype.destroy.apply(this, arguments); // default destroy
        // now do other stuff particular to this widget
    }
});
})(django.jQuery);