/*
* A time picker for jQuery
* Based on original timePicker by Sam Collet (http://www.texotela.co.uk) -
* copyright (c) 2006 Sam Collett (http://www.texotela.co.uk)
*
* Dual licensed under the MIT and GPL licenses.
* Copyright (c) 2009 Anders Fajerson
* @name     timePicker
* @version  0.2
* @author   Anders Fajerson (http://perifer.se)
* @example  $("#mytime").timePicker();
* @example  $("#mytime").timePicker({step:30, startTime:"15:00", endTime:"18:00"});
*/

(function($) {
    $.fn.timePicker = function(options) {
        // Build main options before element iteration
        var settings = $.extend({}, $.fn.timePicker.defaults, options);

        return this.each(function() {
            $.timePicker(this, settings);
        });
    };

    $.timePicker = function(elm, settings) {
        var e = $(elm)[0];
        return e.timePicker || (e.timePicker = new jQuery._timePicker(e, settings));
    };

    $._timePicker = function(elm, settings) {

        var tpOver = false;
        var keyDown = false;
        var startTime = timeToDate(settings.startTime, settings);
        var endTime = timeToDate(settings.endTime, settings);

        $(elm).attr('autocomplete', 'OFF'); // Disable browser autocomplete

        var times = [];
        var time = new Date(startTime); // Create a new date object.
        while (time <= endTime) {
            times[times.length] = formatTime(time, settings);
            time = new Date(time.setMinutes(time.getMinutes() + settings.step));
        }

        var $tpDiv = $('<div class="time-picker' + (settings.show24Hours ? '' : ' time-picker-12hours') + '"></div>');
        var $tpList = $('<ul></ul>');

        // Build the list.
        for (var i = 0; i < times.length; i++) {
            $tpList.append("<li>" + times[i] + "</li>");
        }
        $tpDiv.append($tpList);
        // Append the timPicker to the body and position it.
        var elmOffset = $(elm).offset();
        $tpDiv.appendTo('body').css({ 'top': elmOffset.top, 'left': elmOffset.left }).hide();

        // Store the mouse state, used by the blur event. Use mouseover instead of
        // mousedown since Opera fires blur before mousedown.
        $tpDiv.mouseover(function() {
            tpOver = true;
        }).mouseout(function() {
            tpOver = false;
        });

        $("li", $tpList).mouseover(function() {
            if (!keyDown) {
                $("li.selected", $tpDiv).removeClass("selected");
                $(this).addClass("selected");
            }
        }).mousedown(function() {
            tpOver = true;
        }).click(function() {
            setTimeVal(elm, this, $tpDiv, settings);
            tpOver = false;
        });

        var showPicker = function() {
            if ($tpDiv.is(":visible")) {
                return false;
            }
            $("li", $tpDiv).removeClass("selected");

            // Show picker. This has to be done before scrollTop is set since that
            // can't be done on hidden elements.
            $tpDiv.show();

            // Try to find a time in the list that matches the entered time.
            var time = elm.value ? timeStringToDate(elm.value, settings) : startTime;
            var startMin = startTime.getHours() * 60 + startTime.getMinutes();
            var min = (time.getHours() * 60 + time.getMinutes()) - startMin;
            var steps = Math.round(min / settings.step);
            var roundTime = normaliseTime(new Date(0, 0, 0, 0, (steps * settings.step + startMin), 0));
            roundTime = (startTime < roundTime && roundTime <= endTime) ? roundTime : startTime;
            var $matchedTime = $("li:contains(" + formatTime(roundTime, settings) + ")", $tpDiv);

            if ($matchedTime.length) {
                $matchedTime.addClass("selected");
                // Scroll to matched time.
                $tpDiv[0].scrollTop = $matchedTime[0].offsetTop;
            }

            return true;
        };
        // Attach to click as well as focus so timePicker can be shown again when
        // clicking on the input when it already has focus.
        $(elm).focus(showPicker).click(showPicker);
        // Hide timepicker on blur
        $(elm).blur(function() {
            if (!tpOver) {
                $tpDiv.hide();
            }
        });
        // Keypress doesn't repeat on Safari for non-text keys.
        // Keydown doesn't repeat on Firefox and Opera on Mac.
        // Using kepress for Opera and Firefox and keydown for the rest seems to
        // work with up/down/enter/esc.
        var event = ($.browser.opera || $.browser.mozilla) ? 'keypress' : 'keydown';
        $(elm)[event](function(e) {
            var $selected;
            keyDown = true;
            var top = $tpDiv[0].scrollTop;
            switch (e.keyCode) {
                case 38: // Up arrow.
                    // Just show picker if it's hidden.
                    if (showPicker()) {
                        return false;
                    };
                    $selected = $("li.selected", $tpList);
                    var prev = $selected.prev().addClass("selected")[0];
                    if (prev) {
                        $selected.removeClass("selected");
                        // Scroll item into view.
                        if (prev.offsetTop < top) {
                            $tpDiv[0].scrollTop = top - prev.offsetHeight;
                        }
                    }
                    else {
                        // Loop to next item.
                        $selected.removeClass("selected");
                        prev = $("li:last", $tpList).addClass("selected")[0];
                        $tpDiv[0].scrollTop = prev.offsetTop - prev.offsetHeight;
                    }
                    return false;
                    break;
                case 40: // Down arrow, similar in behaviour to up arrow.
                    if (showPicker()) {
                        return false;
                    };
                    $selected = $("li.selected", $tpList);
                    var next = $selected.next().addClass("selected")[0];
                    if (next) {
                        $selected.removeClass("selected");
                        if (next.offsetTop + next.offsetHeight > top + $tpDiv[0].offsetHeight) {
                            $tpDiv[0].scrollTop = top + next.offsetHeight;
                        }
                    }
                    else {
                        $selected.removeClass("selected");
                        next = $("li:first", $tpList).addClass("selected")[0];
                        $tpDiv[0].scrollTop = 0;
                    }
                    return false;
                    break;
                case 13: // Enter
                    if ($tpDiv.is(":visible")) {
                        var sel = $("li.selected", $tpList)[0];
                        setTimeVal(elm, sel, $tpDiv, settings);
                    }
                    return false;
                    break;
                case 27: // Esc
                    $tpDiv.hide();
                    return false;
                    break;
            }
            return true;
        });
        $(elm).keyup(function(e) {
            keyDown = false;
        });
        // Helper function to get an inputs current time as Date object.
        // Returns a Date object.
        this.getTime = function() {
            return timeStringToDate(elm.value, settings);
        };
        // Helper function to set a time input.
        // Takes a Date object.
        this.setTime = function(time) {
            elm.value = formatTime(normaliseTime(time), settings);
            // Trigger element's change events.
            $(elm).change();
        };

    }; // End fn;

    // Plugin defaults.
    $.fn.timePicker.defaults = {
        step: 30,
        startTime: new Date(0, 0, 0, 0, 0, 0),
        endTime: new Date(0, 0, 0, 23, 30, 0),
        separator: ':',
        show24Hours: true
    };

    // Private functions.

    function setTimeVal(elm, sel, $tpDiv, settings) {
        // Update input field
        elm.value = $(sel).text();
        // Trigger element's change events.
        $(elm).change();
        // Keep focus for all but IE (which doesn't like it)
        if (!$.browser.msie) {
            elm.focus();
        }
        // Hide picker
        $tpDiv.hide();
    }

    function formatTime(time, settings) {
        var h = time.getHours();
        var hours = settings.show24Hours ? h : (((h + 11) % 12) + 1);
        var minutes = time.getMinutes();
        return formatNumber(hours) + settings.separator + formatNumber(minutes) + (settings.show24Hours ? '' : ((h < 12) ? ' AM' : ' PM'));
    }

    function formatNumber(value) {
        return (value < 10 ? '0' : '') + value;
    }

    function timeToDate(input, settings) {
        return (typeof input == 'object') ? normaliseTime(input) : timeStringToDate(input, settings);
    }

    function timeStringToDate(input, settings) {
        if (input) {
            var array = input.split(settings.separator);
            var hours = parseFloat(array[0]);
            var minutes = parseFloat(array[1]);

            // Convert AM/PM hour to 24-hour format.
            if (!settings.show24Hours) {
                if (hours === 12 && input.substr('AM') !== -1) {
                    hours = 0;
                }
                else if (hours !== 12 && input.indexOf('PM') !== -1) {
                    hours += 12;
                }
            }
            var time = new Date(0, 0, 0, hours, minutes, 0);
            return normaliseTime(time);
        }
        return null;
    }

    /* Normalise time object to a common date. */
    function normaliseTime(time) {
        time.setFullYear(2001);
        time.setMonth(0);
        time.setDate(0);
        return time;
    }

})(jQuery);