ADateTimePicker.Inherits(AHTML);
function ADateTimePicker (name, parent)
{
    this.Inherits(AHTML);



    // Component identification name (works as an element id).
    this.Name = name;

    // Component parent element.
    this.Parent = $(parent);

    // Holds component date & time value
    this.Time = null;

    this.TabIndex = 0;
    this.Disabled = false;
    this.DroppingDirection = 'down';

    // Months, weekdays and custom strings
    this.MonthsNames = [];
    this.DaysNames = [];
    this.Strings = [];

    // Picker components elements
    this.EditElm = null;
    //this.EditButtonElm = null;
    this.PickerElm = null;
    this.MonthElm = null;
    this.MonthPickerElm = null;
    this.GridElm = null;
    this.PickerControlsElm = null;

    this.PickerVisible = false;
    this.MonthPickerVisible = false;



    this.ShowEdit = function ()
    {
        this.EditElm = document.createElement('input');
        this.EditElm.setAttribute('id', this.Name);
        this.EditElm.setAttribute('name', this.Name);
        this.EditElm.setAttribute('type', 'text');
        this.EditElm.className = 'text ADateTimePicker-Edit';
		//alert(this.Name);
        this.Parent.appendChild(this.EditElm);
		
    }

    this.ShowPicker = function ()
    {
        this.PickerVisible = true;
        this.PickerElm = document.createElement('div');
        this.PickerElm.setAttribute('id', this.Name + '-Picker');
        this.PickerElm.className = 'ADateTimePicker-Picker';

        this.PickerElm.innerHTML =
            '<table cellpadding="0" cellspacing="0" border="0" width="100%">' +
                '<tr>' +
                    '<td id="' + this.Name + '-Prev"></td>' +
                    '<td id="' + this.Name + '-Month"></td>' +
                    '<td id="' + this.Name + '-Next"></td>' +
                '</tr>' +
                '<tr><td id="' + this.Name + '-Grid" class="ADateTimePicker-Grid" colspan="3"></td></tr>' +
                '<tr><td id="' + this.Name + '-PickerControls" class="ADateTimePicker-PickerControls" colspan="3"></td></tr>' +
            '</table>';

        $(this.Name + '-Container').appendChild(this.PickerElm);

        this.PickerElm.style.left = this.PickerElm.offsetLeft - this.PickerElm.offsetWidth;

        this.SetTime();
        this.ShowMonth();
        this.ShowGrid();
        this.ShowPickerControls();
        if ('up' == this.DroppingDirection)
        {
            this.PickerElm.style.top = this.PickerElm.offsetTop - this.PickerElm.offsetHeight -
                $(this.Name + '-Container').offsetHeight;
        }
    }

    this.HidePicker = function ()
    {
        this.PickerVisible = false;
        $(this.Name + '-Container').removeChild($(this.Name + '-Picker'));
        this.GridElm = null;
    }

    this.TogglePickerVisibilty = function ()
    {
        this.PickerVisible ? this.HidePicker() : this.ShowPicker();
    }

    this.ShowMonth = function ()
    {
        this.MonthElm = $(this.Name + '-Month');
        this.MonthElm.className = 'ADateTimePicker-Month';
        this.MonthElm._this = this;
        this.AddEventListner(this.MonthElm, 'mousedown', this.ShowMonthPicker);
        this.MonthElm.innerHTML = this.MonthsNames[this.Time.getMonth()] + ' ' +
            this.Time.getFullYear();
        this.ShowMonthControl('Prev');
        this.ShowMonthControl('Next');
    }

    this.ShowMonthControl = function (controlType)
    {
        var control = $(this.Name + '-' + controlType);
        control.className = 'ADateTimePicker-' + controlType;
        control._this = this;
        'Prev' == controlType ? control.value = -1 : control.value = 1;
        this.AddEventListner(control, 'click', this.MonthAdd);
    }

    this.UpdateMonth = function (value)
    {
        var year = this.Time.getFullYear();
        var month = this.Time.getMonth();

        if (0 > month + 1 + value)
        {
            // Reduce year
            year += -1;
            month = 12 + month - value;
        }
        else if (11 < month + 1 + value)
        {
            // Increase year
            year += 1;
            month = value - (12 - month);
        }
        else
        {
            // Year stays the same
            month += value;
        }

        this.Time.setFullYear(year);
        this.Time.setMonth(month);
        this.MonthElm.innerHTML = this.MonthsNames[this.Time.getMonth()] + ' ' +
            this.Time.getFullYear();
        this.UpdateEditValue();
        this.ShowGrid();
    }

    this.MonthAdd = function (event)
    {
        var element = $this(event);
        element._this.UpdateMonth(element.value);
        if (element._this.MonthPickerVisible)
        {
            element._this.HideMonthPicker();
        }
    }

    this.MonthHightlight = function (event)
    {
        var element = $this(event);
        var obj = element._this;
        if (element.highlighted)
        {
            element.highlighted = false;
            obj.RemoveClass(element, 'highlighted');
        }
        else
        {
            element.highlighted = true;
            obj.AddClass(element, 'highlighted');
        }
    }

    this.MonthOut = function (event)
    {
        $this(event)._this.RemoveClass($this(event), 'highlighted');
    }

    this.SetEditValue = function (value) {this.EditElm.value = value}

    this.ShowMonthPicker = function (event)
    {
        var obj = $this(event)._this;
        obj.MonthPickerVisible = true;

        var table = document.createElement('table');
        table.setAttribute('id', obj.Name + '-MonthPicker');
        table.className = 'ADateTimePicker-MonthPicker';
        table.cellPadding = table.cellSpacing = 0;

        var thead = document.createElement('thead');
        table.appendChild(thead);

        // Draw months
        for (var i = -2; i < 3; i ++)
        {
            var tr = document.createElement('tr');
            var td = document.createElement('td');

            var month = obj.Time.getMonth();
            var year = obj.Time.getFullYear();
            if (0 > month + i)
            {
                // Reduce year
                year += -1;
                month = 12 + month + i;
            }
            else if (12 < month + 1 + i)
            {
                // Increase year
                year += 1;
                month = i - (12 - month);
            }
            else
            {
                // Year stays the same
                month += i;
            }

            td.innerHTML = obj.MonthsNames[month] + ' ' + year;
            td.className = 'ADateTimePicker-MonthPickerMonth';
            if (0 == i)
            {
                td.className += ' highlighted';
            }
            td._this = obj;
            td.value = i;
            td.highlighted = false;

            obj.AddEventListner(td, 'click', obj.MonthAdd);
            obj.AddEventListner(td, 'mouseover', obj.MonthHightlight);
            obj.AddEventListner(td, 'mouseout', obj.MonthHightlight);

            tr.appendChild(td);
            thead.appendChild(tr);
        }

        $(obj.Name + '-Picker').appendChild(table);
        obj.MonthPickerElm = table;

        // Adjust size and position
        var monthTop = obj.MonthElm.offsetTop;
        var monthLeft = obj.MonthElm.offsetLeft;
        var monthWidth = obj.MonthElm.offsetWidth;
        var monthHeight = obj.MonthElm.offsetHeight;
        var paddingTop = parseInt(obj.GetStyleProperty(obj.PickerElm, 'paddingTop', 'padding-top'));
        var paddingLeft = parseInt(obj.GetStyleProperty(obj.PickerElm, 'paddingLeft', 'padding-left'));

        table.style.width = monthWidth;
        table.style.top = monthTop + (monthHeight / 2) -
            (table.offsetHeight / 2) + paddingTop;
        table.style.left = monthLeft + paddingLeft;
    }

    this.HideMonthPicker = function ()
    {
        this.MonthPickerVisible = false;
        $(this.Name + '-Picker').removeChild($(this.Name + '-MonthPicker'));
    }

    this.ToggleMonthPickerVisibilty = function ()
    {
        this.MonthPickerVisible ? this.HideMonthPiker() : this.ShowMonthPicker();
    }

    this.ShowGrid = function ()
    {
        if (this.GridElm)
        {
            // Remove previous data
            $(this.Name + '-Grid').removeChild($(this.Name + '-GridData'));

        }

        var table = document.createElement('table');
        var thead = document.createElement('thead');

        table.cellPadding = table.cellSpacing = 0;
        table.width = '100%';
        table.setAttribute('id', this.Name + '-GridData');
        table.className = 'ADateTimePicker-GridData';

        // Weekdays
        tr = document.createElement('tr');
        var weekdays = this.DaysNames;
        for (var i = 0; i < weekdays.length; i ++)
        {
            td = document.createElement('td');
            td.className = 'ADateTimePicker-Weekday';
            td.innerHTML = weekdays[i];
            tr.appendChild(td);
        }
        thead.appendChild(tr);

        // Days
        var gridDate = new Date(this.Time);
        var currMonth = gridDate.getMonth();
        gridDate.setDate(1);
        var nextDay = new Date(gridDate.getTime());
        var frontPadding = gridDate.getDay() - 1;
        if (-1 == frontPadding)
        {
            frontPadding = 6;
        }

        var cells = 0;
        while (nextDay.getMonth() == gridDate.getMonth())
        {
            gridDate.setTime(nextDay.getTime());

            if (0 == cells % 7)
            {
                // New row begin
                var tr = document.createElement('tr');
            }

            if (0 == cells && 0 < frontPadding)
            {
                // Front padding
                while (0 < frontPadding)
                {
                    var td = document.createElement('td');
                    var day = new Date(gridDate.getTime() - 86400000 * frontPadding);
                    td.innerHTML = day.getDate();
                    td.value = day.getTime();
                    td._this = this;
                    td.className = 'ADateTimePicker-DayPadded';
                    this.AddDayAttributes(td);
                    this.AddEventListner(td, 'click', this.DayClick);
                    tr.appendChild(td);
                    frontPadding --;
                    cells ++;
                }
            }

            var td = document.createElement('td');
            td.innerHTML = gridDate.getDate();
            td.className = 'ADateTimePicker-Day';
            td.value = gridDate.getTime();
            td._this = this;
            this.AddDayAttributes(td);
            this.AddEventListner(td, 'click', this.DayClick);
            tr.appendChild(td);
            cells ++;

            if (0 == cells % 7)
            {
                // Row close
                thead.appendChild(tr);
            }

            nextDay.setTime(nextDay.getTime() + 86400000);
        }

        var rearPadding = 1;
        if (0 != cells % 7)
        {
            // Rear padding
            while (0 != cells % 7)
            {
                var td = document.createElement('td');
                var day = new Date(gridDate.getTime() + 86400000 * rearPadding);
                td.innerHTML = day.getDate();
                td.value = day.getTime();
                td._this = this;
                td.className = 'ADateTimePicker-DayPadded';
                this.AddDayAttributes(td);
                this.AddEventListner(td, 'click', this.DayClick);
                tr.appendChild(td);
                cells ++;
                rearPadding ++;
            }
            thead.appendChild(tr);
        }

        table.appendChild(thead);
        $(this.Name + '-Grid').appendChild(table);
        this.GridElm = table;
    }

    this.AddDayAttributes = function (element)
    {
        var elementDate = new Date();
        elementDate.setTime(element.value);

        elementDate.setHours(0, 0, 0, 0);

        var componentDate = new Date(this.Time);
        componentDate.setHours(0, 0, 0, 0);

        var today = new Date();
        today.setHours(0, 0, 0, 0);

        if (elementDate.getTime() == componentDate.getTime())
        {
            this.AddClass(element, 'selected');
        }
        if (elementDate.getTime() == today.getTime())
        {
            this.AddClass(element, 'today');
        }
    }

    this.DayClick = function (event)
    {
        var element = $this(event);
        var obj = element._this;
        obj.Time.setTime(element.value);
        obj.UpdateEditValue();
        obj.HidePicker();
    }

    this.ShowPickerControls = function ()
    {
        var control = document.createElement('input');
        control.setAttribute('type', 'button');
        control.setAttribute('value', this.Strings[0]);
        control.className = 'ADateTimePicker-PickerControl';
        control._this = this;
        this.AddEventListner(control, 'click', this.SetToToday);
        $(this.Name + '-PickerControls').appendChild(control);

        var control = document.createElement('input');
        control.setAttribute('type', 'button');
        control.setAttribute('value', this.Strings[1]);
        control.className = 'ADateTimePicker-PickerControl';
        control._this = this;
        this.AddEventListner(control, 'click', this.SetToNone);
        $(this.Name + '-PickerControls').appendChild(control);
    }

    this.SetToToday = function (event)
    {
        var element = $this(event);
        var obj = element._this;
        obj.Time = new Date();
        obj.UpdateEditValue();
        obj.HidePicker();
    }

    this.SetToNone = function (event)
    {
        var element = $this(event);
        var obj = element._this;
        obj.Time = '';
        obj.UpdateEditValue();
        obj.HidePicker();
    }

    // Closes an opened picker if user clicks somewhere outside of the picker.
    this.CloseIfOpened = function (event)
    {

    }


    // Tries to load edit component value into internal time property (dd.mm.yyyy hh:mm)
    this.SetTime = function ()
    {
        var value = String(this.EditElm.value);
        value = value.replace(/(\d+).(\d+).(\d+)/, "$3/$2/$1");
        value = value.replace(/^(\d\d\/)/, "20$1");
        var newTime = new Date(value);
        if (!isNaN(newTime))
        {
            this.Time = newTime;
        }
        else
        {
            this.Time = new Date();
        }
    }

    // Loads component time property value back into edit element (dd.mm.yyyy hh:mm).
    this.UpdateEditValue = function ()
    {
        if (0 < String(this.Time).length)
        {
            this.EditElm.value = this.PadString(this.Time.getDate(), 2) + '.' +
                this.PadString(this.Time.getMonth()+1, 2) + '.' +
                this.Time.getFullYear();
				inpName=this.Name+'1';
				document.getElementById(inpName).value=this.PadString(this.Time.getDate(), 2) + '.' +
                this.PadString(this.Time.getMonth()+1, 2) + '.' +
                this.Time.getFullYear();
        }
        else
        {
            // Empty value
            this.EditElm.value = '';
        }
    }

    // Pad string with leading zeros.
    this.PadString = function (string, length, char)
    {
        var char = char || '0';
        var padding = "";
        var paddingLength = length - String(string).length;
        for (var i = 0; i < paddingLength; i++)
        {
            padding += char;
        }
        return padding + string;
    }

    this.SetMonthsNames = function (names) {this.MonthsNames = names}
    this.SetDaysNames = function (names) {this.DaysNames = names}
    this.SetStrings = function (names) {this.Strings = names}
    this.SetDroppingDirection = function (direction) {this.DroppingDirection = direction}

    this.SetTabIndex = function (tabindex)
    {
        this.TabIndex = tabindex;
        this.EditElm.tabIndex = this.TabIndex;
    }
    this.SetDisabled = function (disabled)
    {
        this.Disabled = disabled;
        this.EditElm.disabled = this.Disabled;
    }



    this.ShowEdit();
}