$(document).ready(function() {
    $("#roster thead th:first").css({
        'text-align': 'center',
        'padding': '5px 10px'
    });

    $("#roster tbody tr").each(function(i, e) {
		var next = $(e).next()
		if (next && next.hasClass("player-detail")) {
			$(e).addClass("player-summary")
		}
	});

    $("#roster tr:not(.player-detail)").find("td:eq(0)").addClass("player-number");
    $("#roster tr:not(.player-detail)").find("td:eq(1)").addClass("player-name");

    $("#roster tr.player-detail").hide();
    $("#roster tr.player-detail td").css({'padding-top': '0', 'border-top-style': 'none'});

    $("#roster tr.player-summary").click(function() {
	
		// is the player-detail currently hidden
		var hidden = $(this).next("tr").is(':hidden')
		
		// hide previous detail
		$("#roster tr.player-detail:visible").each(function(i, e) {
			$(e).prev().find("td:gt(0)").css({'border-color': 'black'});
	        $(e).hide();
		})
		
		// if the detail was previosly hidden, then show it
        if (hidden) {
            $(this).find(":gt(0)").css({'border-color': 'black white white white'});
            $(this).find(":last").css({'border-color': 'black black white white'});

	        $(this).next("tr").show();
        }
    });
});