function ocGetElemById(objID)
{
    if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
}

/*
 *  ocCalendar - constructor for ocCalendar "class"
 *
 *   IN: id - HTML id of <div> element where calendar will reside
 *   IN: picker - whether in date picker mode (otherwise date listing 
 */
function ocCalendar( id, picker ) {
    
	this.location = ocGetElemById( id );  
	
    this.picker = picker ? picker : false;
    
    this.id = id;
    
    
    
    /* Initialse selected array with any existing dates - these will be in
       HTML elements of class 'oc-date'. */
       
    this.selected = new Array();  
    var initial = getElementsByClassName( 'oc-date', '*', this.location );
        
    if ( initial.length > 0 ) {
        if ( this.picker ) {
        	
            initial = initial[0].getAttribute( 'value' );
            this.selected[ initial ] = true;
            initial = initial.split( '-' );
            this.month = initial[1] - 0;
            this.year = initial[0] - 0;
            
        } else {
        	
        	var now = new Date();
            now = [ now.getFullYear(), ( now.getMonth() + 1 ) ];
            for ( date in initial ) {
                date = initial[date].className.match( /\d\d\d\d-\d\d-\d\d/ )[0];
                this.selected[ date ] = true;
                if ( !this.year ) {
                    var className = date;
                    date = date.split( '-' );
                    date[0] = date[0] - 0;
                    date[1] = date[1] - 0;
                    if ( date[0] > now[0] ||
                        ( date[0] == now[0] && date[1] >= now[1] ) ) {
                        this.year = date[0];
                        this.month = date[1];
                        date = getElementsByClassName( className, 
                                                'div', this.location );
                        date[0].className += ' visible';
                    }    
                }
            }
            if ( !this.year ) {
                this.year = now[0];
                this.month = now[1];
            }
        }
    } else {
        var now = new Date();
        this.month = now.getMonth() + 1;
        this.year = now.getFullYear();
    }
        
    
	this.html();    
}
ocCalendar.prototype = {
    
    imagePath: '/wp-content/themes/OneClimateV3/images/',
    
    monthName: [ 'January', 'February', 'March', 'April', 'May', 'June', 
                 'July', 'August', 'September', 'October', 'November', 
                 'December' ], 
            
    daysInMonth: [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ],
                          
    select: function( td ) { 
        this.selected = new Array();
        var key = this.year + '-' + ( this.month < 10 ? '0' : '' ) + 
                  this.month + '-' + 
                  ( ( td.firstChild.nodeValue - 0 ) < 10 ? '0' : '' ) +
                    td.firstChild.nodeValue;
        this.selected[key] = true;
        this.html();
    },
    
    /*
     *  list - lists events associated with selected calendar cell
     *
     *   IN: td - HTML element object of selected calendar table cell
     */
    list: function( td ) {
        
        /* compute selected date in yyyy-mm-dd format */
        
        var date = td.firstChild.nodeValue;
        date = this.year + ( this.month < 10 ? '-0' : '-' ) +
               this.month + ( date < 10 ? '-0' : '-' ) + date;
        
        /* make currently visible list of events invisible */
        
        var dates = getElementsByClassName( 'visible', 'div', this.location );
        for ( i in dates ) 
            dates[i].className = removeClass( dates[i].className, 'visible' );
               
        /* make <div> containing list of this date's events visible */
        
        var dates = getElementsByClassName( date, 'div', this.location );
        for ( i in dates ) dates[i].className += ' visible';
    },
    
    clear: function() {
        this.selected = new Array();
        this.html();
    },
    
    next: function() {
        if ( this.month == 12 ) {
            this.month = 1;
            this.year++;
        } else
            this.month++;
        this.html();
        if (this.id == 'calew') {
        	var strDate = this.year + '-' + this.month + '-' + '01';
        	updateEvents(strDate,'month');  
       	}
			      
    },
    
    prev: function() {
        if ( this.month == 1 ) {
            this.month = 12;
            this.year--;
        } else
            this.month--;
        this.html();
        
		if (this.id == 'calew') {
        	var strDate = this.year + '-' + this.month + '-' + '01';
        	updateEvents(strDate,'month');
        }
        
    },
        
    html: function() {
            var numDays = this.daysInMonth[this.month - 1];
    if ( this.month == 2 ) {
        if ( this.year % 400 == 0 )
            numDays++;
        else if ( this.year % 100 == 0 )
            numDays = numDays;
        else if ( this.year % 4 == 0 )
            numDays++;
    }

    /* Generate the HTML to display any currently selected date info */
    
    var title = ocGetElemById( this.location.id + '-title' );
    title = title ? title.value : 'Event Date';
    var expl = ocGetElemById( this.location.id + '-expl' );
    expl = expl ? expl.value : 'Select a date from our calendar';
    
    var html = '<div class="field-label">' + title + '</div><p>' +
               expl + '</p>';
    
    for ( date in this.selected ) {
        html += '<input name="oc-date" type="hidden" value="' + date + 
                '" class="oc-date"/>';
        date = date.split( '-' );
        html += '<p>' + (date[2] - 0) + ' ' + this.monthName[date[1] - 1] +
                ' ' + date[0] + '</p>';
        if ( ocGetElemById( 'cal1-clear' ) )
            html += '<br ><a onclick="' + this.location.id + '.clear();"/>' +
                    ocGetElemById( 'cal1-clear' ).value + '</a>';
    }
    if ( this.picker )
        this.location.firstChild.innerHTML = html;
    /* else
        this.location.lastChild.innerHTML = html; */
    
    /* Now generate the HTML for the calendar table */
    
    html = '<table>';
    html += '<tr class="months">';
    html += '<td class="first" onclick="' + this.location.id + '.prev();">' +
            '<img src="' + this.imagePath + 'arrow_prev.gif"></td>';
    html += '<td colspan=5>' + this.monthName[this.month - 1] + ' ' + 
            this.year + '</td>';
    html += '<td class="last" onclick="' + this.location.id + '.next();">' +
            '<img src="' + this.imagePath + 'arrow_next.gif"></td>';
    html += '</tr>';
    html += '<tr class="days"><td>S</td><td>M</td><td>T</td><td>W</td>';
    html += '<td>T</td><td>F</td><td>S</td></tr>';
    
    var td = new Date();
    var now = td.getFullYear() + ( td.getMonth() < 9 ? '-0' : '-' ) +
             ( td.getMonth() + 1 ) + ( td.getDate() < 10 ? '-0' : '-' ) +
               td.getDate();
    td.setDate( 1 );
    td.setFullYear( this.year );
    td.setMonth( this.month - 1 );
    cd = td.getDay();
    
    var tdClass;
    var onClick;
    for ( var j = 0; j <= 5 ; j++ ) {
        html += '<tr class="dates">';
        for ( var i = 0; i <= 6; i++ ) {
            d = ( j * 7 ) + i;
            if ( d >= cd && d - cd < numDays ) {
                td = this.year + '-' + ( this.month < 10 ? '0' : '' ) + 
                     this.month + '-' + 
                     ( d - cd + 1 < 10 ? '0' : '' ) + ( d - cd + 1 );
                tdClass = '';
                onClick = null;
                if ( this.selected[td] ) {
                    tdClass += 'selected';
                    if ( !this.picker ) onClick = 'list'
                } else if ( this.picker )
                    onClick = 'select';
                if ( td == now ) tdClass += ' today';
                
				var strDate = this.year + '-' + this.month + '-' + ( d - cd + 1 );
				
				
                
                if (this.id == 'calew') {
				html += '<td ' + ( tdClass.length > 0 ? 
                        ' class = "' + tdClass + '"' : '' ) +( onClick ?
                         ' onclick="' + 'updateEvents(\'' + strDate + '\',\'day\'' + ');">' : '>' ) + ( d - cd + 1 ) + '</td>';
    			} else {
    				
    				html += '<td ' + ( tdClass.length > 0 ? 
                        ' class = "' + tdClass + '"' : '' ) +( onClick ?
                        ' onclick="' + this.location.id + '.' + onClick +
                        '( this );">' : '>' ) + ( d - cd + 1 ) + '</td>';
    				
    			}
                        
                                                
        
            } else
                html += '<td class="empty">&nbsp;</td>';
        }
        html += '</tr>';
    }
    html += '</table>';
   
    if ( this.picker )
        this.location.lastChild.innerHTML = html;
    else
        this.location.firstChild.innerHTML = html;        
    }
    
}