MonthSelector = function(containerId, selfName, curDate, startDate, endDate){

    this.containerId = containerId;
    this.selfName    = selfName;
    
    this.monthNames = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    
    this.curDate    = (typeof curDate   != "undefined") ? curDate   : new Date();
    this.startDate  = (typeof startDate != "undefined") ? startDate : new Date("January 1, 1000");
    this.endDate    = (typeof endDate   != "undefined") ? endDate   : new Date("January 1, 3000");
    
    this.curYear    = this.curDate.getFullYear();
    this.curMonth   = this.curDate.getMonth()+1;    
}

MonthSelector.prototype.updateYearDisplay = function(){
    for (var i=1; i<13; i++){
        document.getElementById("y" + i).innerHTML = this.curYear;
    }
}

MonthSelector.prototype.loadPrevYear = function(){
    this.curYear--;
    this.show();
}

MonthSelector.prototype.loadNextYear = function(){
    this.curYear++;
    this.show();
}

MonthSelector.prototype.getTwoDigitValue = function(num){
    num = num.toString();
    if (num.length == 2) return num;
    else return "0" + num;
}
    
    
MonthSelector.prototype.getHtml = function(){
    var html = "\
            <div id='topLabel'><a href='javascript:" + this.selfName + ".hide()'>Select Month</a></div> \
            <div style='float:right;' class='button'><a href='javascript:" + this.selfName + ".hide()'>X</a></div> \
            <div id='msSeparator'>&nbsp;</div>                          \
            <ul class='monthSelector'>                                  \
        ";
    
    for (var i=1; i<13; i++){
        var curDate = new Date(this.monthNames[i-1] + " 1, " + this.curYear);
        
        if ( curDate >= this.startDate && curDate <= this.endDate ){
            html += "<li><a href=\"javascript:" + this.selfName + ".processSelection('" + i + "')\" onfocus='this.blur()'>" + this.monthNames[i-1] + " <span id='y" + i + "'>" + this.curYear + "</span></a></li>";
        } 
        else {
            html += "<li><div>" + this.monthNames[i-1] + " <span id='y" + i + "'>" + this.curYear + "</span></div></li>";
        }
    }
    
    html += "\
            </ul>                               \
            <div id='msNav'>                      \
        ";
    
    if (this.curYear > this.startDate.getFullYear()){
        html += "<div style='float:left;' class='button'><a href=\"javascript:" + this.selfName + ".loadPrevYear()\" onfocus='this.blur()'>&laquo;&laquo;&laquo;</a></div>";
    }
    
    if (this.curYear < this.endDate.getFullYear()){
        html += "<div style='float:right;' class='button'><a href=\"javascript:" + this.selfName + ".loadNextYear()\" onfocus='this.blur()'>&raquo;&raquo;&raquo;</a></div>";
    }
    
    html += "</div>";
    
    return html;
}
    
    
MonthSelector.prototype.show = function(){
    var node = document.getElementById(this.containerId);
    node.innerHTML = this.getHtml();
    node.style.display = "block";
}
    
    
MonthSelector.prototype.hide = function(){
    var node = document.getElementById(this.containerId);
    node.style.display = "none";
}
    
/*
MonthSelector.prototype.toggle = function(){
    var elem = document.getElementById(this.containerId);
    if (elem.style.display != "block"){
        elem.style.display = "block";
    } else {
        elem.style.display = "none";
    }
}   


MonthSelector.prototype.load = function(){
    // add node to body
    var docBody = document.getElementsByTagName("body").item(0);
    this.node = document.createElement("div");
    this.node.id = this.containerId;
    
    this.node.innerHTML = this.getHtml();
    docBody.appendChild(this.node);
}
*/


MonthSelector.prototype.processSelection = function(month){
    // override this method for actual response
    alert("MonthSelector.processSelection() hasn't been re-defined as needed.");        
}