/**
 * @namespace DatePicker
 * @author Rick Hopkins
 * @version 0.1
 * @classDescription A date picker object. Created with the help of MooTools v1.1
 */

var DatePicker = new Class({
    /** set and create the date picker text box */
    initialize: function(rsID, options){
        this.inputName = rsID;
        this.id = rsID + '_cal';
        this.containerID = this.id + '_container';
        this.input = false;
        this.calendar = false;
        this.calImageURL = '/images/cal.gif';
        this.format = options.format || 'mm/dd/yyyy';
        this.value = options.value || '';
        this.zIndex = options.zIndex || false;
        this.monthNames = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
        this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        this.dayNames = ['Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota','Niedziela'];
        this.interval = null;
        this.active = false;
        this.className = options.className || false;

        /** create the parent container */
        document.write('<span id="' + this.containerID + '" style="position: relative; width: 155px; padding: 0px;' + (this.zIndex ? ' z-index: ' + this.zIndex + ';' : '') + '"></span>');
        
        /** set some actions for the container span */
        $(this.containerID).onmouseover = function(){
            $clear(this.interval);
            }.bind(this);
        $(this.containerID).onmouseout = function(){
            this.interval = setInterval(
                function(){
                    if (this.calendar && !this.active){ this.calendar.setStyles({'display':'none'}); }
                    }.bind(this), 
                500);
            }.bind(this);
        
        /** create the text box */
        this.input = new Element('input');
        this.input.setProperties({'type':'text', 'name':this.inputName, 'value':this.value, 'readOnly':true});
        this.input.setStyles({'width':'150px', 'background':'url(\'' + this.calImageURL + '\') no-repeat center right'});
        this.input.injectInside($(this.containerID));

        /** create the onclick action */
        this.input.onclick = this.createCal.bind(this);
        }, 
    
    /** Create the calendar and allow the user to select a date */
    createCal: function(month, year){
        /** clear the interval */
        $clear(this.interval);
        
        /** create the span container if it doesn't exist */
        if (!this.calendar){
            this.calendar = new Element('span');
            this.calendar.injectAfter(this.input);
            }
        
        /** create the date object */
        var date = new Date();
        
        /** create the date object */
        if (month && year){
            date.setFullYear(year, month);
            }
        date.getYear() % 4 == 0 ? this.daysInMonth[1] = 29 : this.daysInMonth[1] = 28;
        
        /** set the day to first of the month */
        date.setDate(1);
        var firstDay = 1 - date.getDay();
        
        /** get the position of the input box, position span and show with styles */
        var hdStyle = 'font-weight: bold; text-align: center; background-color: #EEEEEE;';
        var dayStyle = 'text-align: center;';
        
        /** set the styles on the span */
        this.calendar.setStyles({'position':'absolute', 'top':'19px', 'left':'1px', 'display':'', 'width':'151px', 'backgroundColor':'#FFFFFF', 'border':'1px solid #CCCCCC', 'padding':'1px', 'margin':'0px 0px 3px 0px'});
        
        /** create the month select box */
        var monthSelStr = '<select id="' + this.id + '_monthSelect">';
        for (var m = 0; m < this.monthNames.length; m++){
            if (date.getMonth() == m){
                monthSelStr += '<option selected="selected" value="' + m + '">' + this.monthNames[m] + '</option>';
                } else {
                monthSelStr += '<option value="' + m + '">' + this.monthNames[m] + '</option>';
                }
            }
        monthSelStr += '</select>';
        
        /** create the year select box */
        var yearSelStr = '<select id="' + this.id + '_yearSelect">';
        for (var y = (date.getFullYear() + 10); y >= (date.getFullYear() - 10); y--){
            if (date.getFullYear() == y){
                yearSelStr += '<option selected="selected" value="' + y + '">' + y + '</option>';
                } else {
                yearSelStr += '<option value="' + y + '">' + y + '</option>';
                }
            }
        yearSelStr += '</select>';
        
        /** start creating calendar */
        var calStr = '<table cellpadding="0" cellspacing="0" style="border-left: 1px solid #E0E0E0; border-top: 1px solid #E0E0E0;" ' + (this.className ? 'class="'+ this.className +'"' : '') + '>';
        calStr += '<tr>';
        calStr += '<td colspan="7" style="' + hdStyle + ' border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;">' + monthSelStr + yearSelStr + '</td>';
        calStr += '</tr>';
        
        /** create day names */
        calStr += '<tr>';
        for (var i = 0; i < this.dayNames.length; i++){
            calStr += '<td style="' + hdStyle + ' border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;">' + this.dayNames[i].substr(0, 1) + '</td>';
            }
        calStr += '</tr>';
        
        /** create the day cells */
        while (firstDay <= this.daysInMonth[date.getMonth()]){
            calStr += '<tr>';
            for (i = 0; i < 7; i++){
                if ((firstDay <= this.daysInMonth[date.getMonth()]) && (firstDay > 0)){
                    calStr += '<td style="' + dayStyle + ' border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0; cursor: pointer;" class="'+ this.id + '_calDay' +'" axis="' + date.getFullYear() + '|' + (date.getMonth() + 1) + '|' + firstDay + '">' + firstDay + '</td>';
                    } else {
                    calStr += '<td style="' + dayStyle + ' border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;">&nbsp;</td>';
                    }
                firstDay++;
                }
            calStr += '</tr>';
            }
        
        /** close the date picker table */
        calStr += '</table>';
        
        /** put html string into span container */
        this.calendar.innerHTML = calStr;
        
        /** set the onmouseover events for all calendar days */
        $$('td.' + this.id + '_calDay').each(function(el){
            el.onmouseover = function(){
                el.setStyle('background-color', '#E0E0E0');
                }.bind(this);
            }.bind(this));
        
        /** set the onmouseout events for all calendar days */
        $$('td.' + this.id + '_calDay').each(function(el){
            el.onmouseout = function(){
                el.setStyle('background-color', '#FFFFFF');
                }.bind(this);
            }.bind(this));
        
        /** set the onclick events for all calendar days */
        $$('td.' + this.id + '_calDay').each(function(el){
            el.onclick = function(){
                ds = el.axis.split('|');
                this.input.value = this.formatValue(ds[0], ds[1], ds[2]);
                document.getElementById('_'+this.inputName).value = this.input.value;
                this.calendar.remove();
                this.calendar = false;
                }.bind(this);
            }.bind(this));
        
        /** set the onchange event for the month & year select boxes */
        $(this.id + '_monthSelect').onfocus = function(){ this.active = true; }.bind(this);
        $(this.id + '_monthSelect').onchange = function(){
            this.createCal($(this.id + '_monthSelect').value, $(this.id + '_yearSelect').value);
            this.active = false;
            }.bind(this);
        
        $(this.id + '_yearSelect').onfocus = function(){ this.active = true; }.bind(this);
        $(this.id + '_yearSelect').onchange = function(){
            this.createCal($(this.id + '_monthSelect').value, $(this.id + '_yearSelect').value);
            this.active = false;
            }.bind(this);
        }, 
    
    /** Format the returning date value according to the selected formation */
    formatValue: function(year, month, day){
        /** setup the date string variable */
        var dateStr = '';
        
        /** check the length of day */
        if (day < 10){ day = '0' + day; }
        if (month < 10){ month = '0' + month; }
        
        /** check the format & replace parts // thanks O'Rey */
        dateStr = this.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
        
        /** return the date string value */
        return dateStr;
        }
    });