/**
 Bootstrap-datetimepicker.
 Based on [smalot bootstrap-datetimepicker plugin](https://github.com/smalot/bootstrap-datetimepicker).
 Before usage you should manually include dependent js and css:

 <link href="css/datetimepicker.css" rel="stylesheet" type="text/css"></link>
 <script src="js/bootstrap-datetimepicker.js"></script>

 For **i18n** you should include js file from here: https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales
 and set `language` option.

 @class datetime
 @extends abstractinput
 @final
 @since 1.4.4
 @example
 <a href="#" id="last_seen" data-type="datetime" data-pk="1" data-url="/post" title="Select date & time">15/03/2013 12:45</a>
 <script>
 $(function(){
    $('#last_seen').editable({
        format: 'yyyy-mm-dd hh:ii',    
        viewformat: 'dd/mm/yyyy hh:ii',    
        datetimepicker: {
                weekStart: 1
           }
        }
    });
 });
 </script>
 **/
(function ($) {
    "use strict";

    var DateTime = function (options) {
        this.init('datetime', options, DateTime.defaults);
        this.initPicker(options, DateTime.defaults);
    };

    $.fn.editableutils.inherit(DateTime, $.fn.editabletypes.abstractinput);

    $.extend(DateTime.prototype, {
        initPicker: function (options, defaults) {
            //'format' is set directly from settings or data-* attributes

            //by default viewformat equals to format
            if (!this.options.viewformat) {
                this.options.viewformat = this.options.format;
            }

            //try parse datetimepicker config defined as json string in data-datetimepicker
            options.datetimepicker = $.fn.editableutils.tryParseJson(options.datetimepicker, true);

            //overriding datetimepicker config (as by default jQuery extend() is not recursive)
            //since 1.4 datetimepicker internally uses viewformat instead of format. Format is for submit only
            this.options.datetimepicker = $.extend({}, defaults.datetimepicker, options.datetimepicker, {
                format: this.options.viewformat
            });

            //language
            this.options.datetimepicker.language = this.options.datetimepicker.language || 'en';

            //store DPglobal
            this.dpg = $.fn.datetimepicker.DPGlobal;

            //store parsed formats
            this.parsedFormat = this.dpg.parseFormat(this.options.format, this.options.formatType);
            this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat, this.options.formatType);
        },

        render: function () {
            this.$input.datetimepicker(this.options.datetimepicker);

            //adjust container position when viewMode changes
            //see https://github.com/smalot/bootstrap-datetimepicker/pull/80
            this.$input.on('changeMode', function (e) {
                var f = $(this).closest('form').parent();
                //timeout here, otherwise container changes position before form has new size
                setTimeout(function () {
                    f.triggerHandler('resize');
                }, 0);
            });

            //"clear" link
            if (this.options.clear) {
                this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    this.clear();
                }, this));

                this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
            }
        },

        value2html: function (value, element) {
            //formatDate works with UTCDate!
            var text = value ? this.dpg.formatDate(this.toUTC(value), this.parsedViewFormat, this.options.datetimepicker.language, this.options.formatType) : '';
            if (element) {
                DateTime.superclass.value2html.call(this, text, element);
            } else {
                return text;
            }
        },

        html2value: function (html) {
            //parseDate return utc date!
            var value = this.parseDate(html, this.parsedViewFormat);
            return value ? this.fromUTC(value) : null;
        },

        value2str: function (value) {
            //formatDate works with UTCDate!
            return value ? this.dpg.formatDate(this.toUTC(value), this.parsedFormat, this.options.datetimepicker.language, this.options.formatType) : '';
        },

        str2value: function (str) {
            //parseDate return utc date!
            var value = this.parseDate(str, this.parsedFormat);
            return value ? this.fromUTC(value) : null;
        },

        value2submit: function (value) {
            return this.value2str(value);
        },

        value2input: function (value) {
            if (value) {
                this.$input.data('datetimepicker').setDate(value);
            }
        },

        input2value: function () {
            //date may be cleared, in that case getDate() triggers error
            var dt = this.$input.data('datetimepicker');
            return dt.date ? dt.getDate() : null;
        },

        activate: function () {
        },

        clear: function () {
            this.$input.data('datetimepicker').date = null;
            this.$input.find('.active').removeClass('active');
            if (!this.options.showbuttons) {
                this.$input.closest('form').submit();
            }
        },

        autosubmit: function () {
            this.$input.on('mouseup', '.minute', function (e) {
                var $form = $(this).closest('form');
                setTimeout(function () {
                    $form.submit();
                }, 200);
            });
        },

        //convert date from local to utc
        toUTC: function (value) {
            return value ? new Date(value.valueOf() - value.getTimezoneOffset() * 60000) : value;
        },

        //convert date from utc to local
        fromUTC: function (value) {
            return value ? new Date(value.valueOf() + value.getTimezoneOffset() * 60000) : value;
        },

        /*
         For incorrect date bootstrap-datetimepicker returns current date that is not suitable
         for datetimefield.
         This function returns null for incorrect date.
         */
        parseDate: function (str, format) {
            var date = null, formattedBack;
            if (str) {
                date = this.dpg.parseDate(str, format, this.options.datetimepicker.language, this.options.formatType);
                if (typeof str === 'string') {
                    formattedBack = this.dpg.formatDate(date, format, this.options.datetimepicker.language, this.options.formatType);
                    if (str !== formattedBack) {
                        date = null;
                    }
                }
            }
            return date;
        }

    });

    DateTime.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        /**
         @property tpl
         @default <div></div>
         **/
        tpl: '<div class="editable-date well"></div>',
        /**
         @property inputclass
         @default null
         **/
        inputclass: null,
        /**
         Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
         Possible tokens are: <code>d, dd, m, mm, yy, yyyy, h, i</code>

         @property format
         @type string
         @default yyyy-mm-dd hh:ii
         **/
        format: 'yyyy-mm-dd hh:ii',
        formatType: 'standard',
        /**
         Format used for displaying date. Also applied when converting date from element's text on init.
         If not specified equals to <code>format</code>

         @property viewformat
         @type string
         @default null
         **/
        viewformat: null,
        /**
         Configuration of datetimepicker.
         Full list of options: https://github.com/smalot/bootstrap-datetimepicker

         @property datetimepicker
         @type object
         @default { }
         **/
        datetimepicker: {
            todayHighlight: false,
            autoclose: false
        },
        /**
         Text shown as clear date button.
         If <code>false</code> clear button will not be rendered.

         @property clear
         @type boolean|string
         @default 'x clear'
         **/
        clear: '&times; clear'
    });

    $.fn.editabletypes.datetime = DateTime;

}(window.jQuery));
/**
 Bootstrap datetimefield input - datetime input for inline mode.
 Shows normal <input type="text"> and binds popup datetimepicker.
 Automatically shown in inline mode.

 @class datetimefield
 @extends datetime

 **/
(function ($) {
    "use strict";

    var DateTimeField = function (options) {
        this.init('datetimefield', options, DateTimeField.defaults);
        this.initPicker(options, DateTimeField.defaults);
    };

    $.fn.editableutils.inherit(DateTimeField, $.fn.editabletypes.datetime);

    $.extend(DateTimeField.prototype, {
        render: function () {
            this.$input = this.$tpl.find('input');
            this.setClass();
            this.setAttr('placeholder');

            this.$tpl.datetimepicker(this.options.datetimepicker);

            //need to disable original event handlers
            this.$input.off('focus keydown');

            //update value of datepicker
            this.$input.keyup($.proxy(function () {
                this.$tpl.removeData('date');
                this.$tpl.datetimepicker('update');
            }, this));

        },

        value2input: function (value) {
            this.$input.val(this.value2html(value));
            this.$tpl.datetimepicker('update');
        },

        input2value: function () {
            return this.html2value(this.$input.val());
        },

        activate: function () {
            $.fn.editabletypes.text.prototype.activate.call(this);
        },

        autosubmit: function () {
            //reset autosubmit to empty
        }
    });

    DateTimeField.defaults = $.extend({}, $.fn.editabletypes.datetime.defaults, {
        /**
         @property tpl
         **/
        tpl: '<div class="input-group date"><input type="text" class="form-control" readonly><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>',
        /**
         @property inputclass
         @default 'input-medium'
         **/
        inputclass: 'input-medium',

        /* datetimepicker config */
        datetimepicker: {
            todayHighlight: false,
            autoclose: true
        }
    });

    $.fn.editabletypes.datetimefield = DateTimeField;

}(window.jQuery));