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='nav'>\
		";
		
		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.");		
	}