var changeMyPlan = {};
changeMyPlan.buttonActive = false;

$(document).ready(function() {
    /*var selectedPlan = 'none';
    function inactive() {
    $(".chooseplan-active").addClass("chooseplan-decoy");
    $(".chooseplan-active").removeClass("chooseplan-active");
    $(".chooseplan-inactive").addClass("chooseplan-decoy");
    $(this).removeClass("chooseplan-decoy");
    $(".chooseplan-inactive").removeClass("chooseplan-inactive");
    $(this).addClass("chooseplan-active");
    $(".chooseplan-decoy").html("<a href='#'>Choose this Plan</a><div class='overlay'></div>");
    $('.chooseplan-decoy').css('cursor', 'default');
    var selectedPlan = $(this).parent().attr("id");
    $(this).addClass(selectedPlan + '-active');

    }

    function active(selectedPlan) {
    $(this).removeClass('mix-it-up-plan-active'); $(this).removeClass('chocolate-lovers-plan-active');
    $(this).removeClass('classic-plan-active'); $(this).removeClass('on-the-go-plan-active');
    $(".chooseplan-active").removeClass("chooseplan-active");
    $(this).addClass("chooseplan-inactive");
    $(".chooseplan-decoy").html("<a href='#'>Choose this Plan</a>");
    $(".chooseplan-decoy").addClass("chooseplan-inactive");
    $(".chooseplan-decoy").removeClass("chooseplan-decoy");
    $('.chooseplan-inactive').css('cursor', 'pointer');
    selectedPlan = 'none';
    }


    $('.chooseplan-inactive').livequery('click', inactive);
    $('.chooseplan-active').livequery('click', active);*/

    if (!changeMyPlan.buttonActive) {
        $("#bottom-next").addClass("off");
    }

    $('.plan-box').bind('mouseover mouseleave click', function(e) {
        switch (e.type) {
            case "mouseover":
                $(this).addClass('hover').css('opacity', '1');
                $('.plan-box:not(.hover)').css('opacity', '0.5');
                break;
            case "mouseleave":
                $(this).removeClass('hover').css('opacity', '0.5');
                $('.plan-box:not(.inactive)').css('opacity', '1');
                break;
            case "click":
                $('.plan-box').removeClass('active').addClass('inactive');
                $(this).addClass('active').removeClass('inactive');
                changeMyPlan.buttonActive = true;
                $("#bottom-next").removeClass("off");
                // take the plan ID and insert it into hidden input
                var planNumber = $(this).find("span.plan-value").text();
                $("#CalendarId").val(planNumber);
                e.stopPropagation();
                break;
            default:
                break;
        }
    });


    $("#bottom-next").click(function(event) {
        //next-form.myform.submit();
        if (changeMyPlan.buttonActive) {
			$("#next-form").submit();
        } else {
			event.preventDefault();
		}
    });

    $("a#date-prev, a#date-next").live('click', function() {
        if (!($(this).hasClass("disabled"))) {
            changeMyPlan.calendarAjaxRequest(this, { 'arrowMode': true });
        }

    });

    $("#start-date-selection-calendar tbody td").live('click', function() {
        if ($(this).attr("id")) {
            changeMyPlan.calendarAjaxRequest(this, { 'arrowMode': false });
            changeMyPlan.buttonActive = true;
            $("#bottom-next").removeClass("off");
        }
    });

    $("#start-date-selection-calendar tbody td[id*='201']").live("mouseover", function(event) {
		$(this).addClass("start");
	});
	
    $("#start-date-selection-calendar tbody td[id*='201']").live("mouseout", function(event) {
		$(this).removeClass("start");
	});

    // $("div.plan-box").click(function(event) {
    // 
    // 	event.preventDefault();
    // });
});

changeMyPlan.calendarAjaxRequest = function(el, options) {
	// arrows are passed the id and a null, 
	// td's are passed the same value for both
	var month = null;
	var dateString = "";
	
	if (options.arrowMode) {
        var c = $(el).attr("class");
        var a = c.split(" ");
        var d = /^\d{2}\/\d{2}\/\d{4}$/;
        $(a).each(function(i,k){
            if(k.match(d) && k.match(d).length == 1){
                month = k;
            }
        });
		if(month == null){
            return false;
        }
		dateString = null;
	} else {
		month = $(el).attr("id");
		dateString = $(el).attr("id");
	}
	$("#select-start-date").empty().html('<img class="loader" src="/_res/i/site/ajax-loader.gif" alt="">');
    $.post(
		'/my-challenge/update-start-date-calendar', 
		{ monthToDisplay: month, startDate: dateString },
        function(data) {
            $("#select-start-date").html(data.Result.ResultPackets);
        }, 
		"json" 
	);
};