/// <reference path="jquery.js" />
$(document).ready(function(evnt) {
	DdmSys.TimeCapsule.Init();
});

DdmSys.TimeCapsule = {
	Init: function() {
		$("#timeBottomRight ul li").each(function(i) {
			$(this).click(function() {
				$("div#timeBottomLeft").find("div").each(function(j) {
					$("#timeBottomRight ul li").eq(j).find('span:first').css({ backgroundColor: 'Green' });

					if ($(this).css('display') == 'block') {
						$(this).fadeOut(100, function() {
							$("#timeBottomRight ul li").eq(i).find('span:first').css({ backgroundColor: 'Orange' });
							$("div#timeBottomLeft").find("div").eq(i).fadeIn(400);
						});
					}
				});
			});

			$($(this)[0]).find('span:first').css({
				height: '30px',
				width: '30px',
				cursor: 'pointer',
				backgroundColor: 'Green',
				display: 'block',
				float: 'left',
				clear: 'both'
			});

			$($(this)[0]).find('span:last').css({
				height: '30px',
				display: 'block',
				cursor: 'pointer',
				float: 'left',
				whiteSpace: 'nowrap',
				paddingLeft: '4px',
				paddingTop: '4px'
			});
		});

		$("#timeBottomRight ul li").eq(0).find('span:first').css({ backgroundColor: 'Orange' });
		$("div#timeBottomLeft").find("div").slice(1).each(function(i) {
			$(this).css({ display: 'none' });
		});

	}
}