dataMonth.js

var now = new Date();
var monthnumber = now.getMonth();
var yearnumber = now.getFullYear();
var count = 0;
var months = new Array(13);

months[0] = "Jan";
months[1] = "Feb";
months[2] = "Mar";
months[3] = "Apr";
months[4] = "May";
months[5] = "Jun";
months[6] = "Jul";
months[7] = "Aug";
months[8] = "Sep";
months[9] = "Oct";
months[10] = "Nov";
months[11] = "Dec";

var chineseMonths = new Array(13);
chineseMonths[0] = "1月";
chineseMonths[1] = "2月";
chineseMonths[2] = "3月";
chineseMonths[3] = "4月";
chineseMonths[4] = "5月";
chineseMonths[5] = "6月";
chineseMonths[6] = "7月";
chineseMonths[7] = "8月";
chineseMonths[8] = "9月";
chineseMonths[9] = "10月";
chineseMonths[10] = "11月";
chineseMonths[11] = "12月";

document.write('<div class="year"><ul>');

document.write('<li id="' + yearnumber + '" class=""><a href="#">' + yearnumber + '</a></li> ');

yearnumber = yearnumber + 1;
document.write('<li id="' + yearnumber + '" class=""><a href="#">' + yearnumber + '</a></li> ');
yearnumber = yearnumber + 1;
document.write('<li id="' + yearnumber + '" class=""><a href="#">' + yearnumber + '</a></li> ');

document.write('</div></ul>');
document.write('<div class="month"><ul>');
for (i = 0; i < 12; i++) {
    var mi = (i) % 12;
    var m = months[mi];
    var cm = chineseMonths[mi] count = count + 1;

    var cls = "";
    if (i == 0) {
        cls = ' class="active"'
    }

    document.write('<li id="' + m + '" class=""><a href="#">' + cm + '</a></li> ');
}
document.write('</div></ul>');

$(document).ready(function() {
    $('.no_results').parent().remove();

    //do some prep for the date
    var myDate = new Date();
    var monthsThreeLetter = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var currentYear = myDate.getFullYear();
    var currentMonth = monthsThreeLetter[myDate.getMonth()];

    //select current date
    // $("#calendarselector .year li#" + currentYear).addClass("current");
    $('#calendarselector .month').attr("id", "for" + currentYear);

    //add past class to months that have passed
    deselectYears();
    deselectMonths();
    displayData();

    //change month & display new month data
    $('#calendarselector .month li').click(function() {
        // if it isn't in the past allow them to select it. 
        // (maybe there is a better way to make this if - i will look into it) 
        if (! ($(this).hasClass("past"))) {
            $('#calendarselector .month li').removeClass('current');
            $(this).addClass("current");
            displayData();
        } //end if not past
        return false;
    });

    /*	$('#calendarselector .month li').on('touchstartstart', function() {
		var thisClass =	$(this).attr('class');
 		if(thisClass !== "past"){
			$('#calendarselector .month li').each(function(){
		  	 	$(this).removeClass('current').css({"background":"none"});
		  	 })
			 $(this).addClass('current').css({"background":"none repeat scroll 0 0 #689AAC"});
			 $('#calendarselector .month ul li a:hover').css('background','none');
			 
			displayData();
		 }
 		return false;


	});*/

    //CHANGE YEAR
    //this will change the id on the "month" div to indicate what year and also change the selected state on the "year" div.
    $('#calendarselector .year li').click(function() {
        if (! ($(this).hasClass("past"))) {
            $('#calendarselector .year li').removeClass('current');
            $(this).addClass("current");

            //pull id name and add "forYEAR" as id to the month div. Maybe it will make it easier to populate the data?
            var clickedId = $(this).attr("id");
            $('#calendarselector .month').attr("id", "for" + clickedId);

            //change month to the nearest active month if it's this year
            $('#calendarselector .month li').removeClass('current');

            deselectMonths();
            displayData();
        }
        return false;
    });
    /*$('#calendarselector .year li').on('touchstart', function() {
	if ( !($(this).hasClass("past")) )
		  {
			$('#calendarselector .month li').each(function(){
		  	 	$(this).removeClass('current').css({"background":"none"});
		  	 })
		 	$('#calendarselector .year li').removeClass('current');
		  	$(this).addClass("current");
	     
		  //pull id name and add "forYEAR" as id to the month div. Maybe it will make it easier to populate the data?
		   var clickedId= $(this).attr("id");		
		  	 $('#calendarselector .month').attr("id","for" + clickedId);
			//change month to the nearest active month if it's this year
						 $('#calendarselector .month li').removeClass('current');
			
			deselectMonths(true);
			displayData();
			}
		return false;	

	});*/

    function deselectYears() {
        var myDate = new Date();
        var yearIDs = new Array();
        $('.programdisplay').each(function() {
            var fullid = this.id;
            yearIDs.push(fullid.substring(3));
        });
        var selectfirstyear = 0;
        for (k = 0; k < 3; k++) {
            var flag = false;
            selectedYear = myDate.getFullYear() + k;
            for (i = 0; i < yearIDs.length; i++) {

                if (selectedYear == yearIDs[i]) {
                    flag = true;
                    selectfirstyear = selectfirstyear + 1;

                }

                if (selectfirstyear == 1) {
                    $("#calendarselector .year li#" + selectedYear).addClass("current");
                }
            }
            if (flag == false) {
                $("#calendarselector .year li#" + selectedYear).addClass("past");
            }

        }

    }
    //if it's the current year, deselect the months that have passed
    function deselectMonths(touch) {
        var selectedYear = $("#calendarselector .year li.current").attr("id");

        $("#calendarselector .month li").removeClass("past");
        $(".programdisplay").attr("id");
        var allIDs = new Array();
        $('.programdisplay').filter('[id*=' + selectedYear + ']').each(function() {
            allIDs.push(this.id);

        });
        var Allmonths = new Array();

        for (i = 0; i < allIDs.length; i++) {
            var str = allIDs[i];
            Allmonths.push(str.substring(0, 3));

        }

        var selectfirstmonth = 0;
        $('#calendarselector .month li').each(function() {
            var count = 0;
            for (k = 0; k < Allmonths.length; k++) {
                if (this.id == Allmonths[k]) {
                    selectfirstmonth = selectfirstmonth + 1;
                    count = count + 1;
                }

            }
            if (selectfirstmonth == 1) {
                $('#calendarselector .month li#' + this.id).addClass("current");
                if (touch) $(this).addClass('current').css({
                    "background": "none repeat scroll 0 0 #689AAC"
                });
                selectfirstmonth = selectfirstmonth + 1;
            }
            if (count == 0) {
                $(this).addClass("past");
            }
        });
        if($.inArray(monthsThreeLetter[new Date().getMonth()], Allmonths) != -1){
             $('#calendarselector .month li#' + monthsThreeLetter[new Date().getMonth()]).click();
        }

    }
    //display the data for the monthYear we currently have selected	
    function displayData() {
        var selectedMonth = $("#calendarselector .month li.current").attr("id");
        var selectedYear = $("#calendarselector .year li.current").attr("id");

        $(".programdisplay").removeClass('currentitem');
        $("#calendarselector #" + selectedMonth + selectedYear).addClass("currentitem");
    }

});