<javascript>
		function calBig()
		{

			$("#calviewsmall").click(function(){
			$("#caltopwhole").fadeOut("slow");
			$("#calbottomwhole").fadeOut("slow");
		    $("#calviewsmall").animate({
			        width: "100%",
			        height: "100%",
			        position: "absolute",
			        top: "30",
			        left: "0",
			      }, 1500 );

   		    $("#caldayview").fadeOut("slow");
   		    $("#calviewsmall").fadeOut("fast",function ()
   		    {
   		    	$("#calviewbig1").fadeIn("fast");
   		    });
		 });

		}

		function calSmall(day)
		{
			$("#calviewbig1").click(function(){
			$("#calviewbig1").fadeOut("fast");
		    $("#calviewsmall").animate({
			        width: "150px",
			        height: "137px",
			        position:"absolute",
			        left:"147px",
			        top:"110px",
			      }, 1500, function()
			{
		    $("#calbottomwhole").fadeIn("slow");
		    $("#caltopwhole").fadeIn("slow");
   		    $("#caldayview").fadeIn("slow");
   		    $("#calviewsmall").fadeIn("slow");
		 });
		 });

		}

</javascript>

{if $calendar_list|@count > 0}
<div id="caldayview" style="z-index:1">
<div id="caltopwhole">
<center><strong><font size="3">{$monthyeardate}</font></strong></center>

	<ul>
		{section name=i loop=$calendar_list}
			<li><a href="event/calendar.php?GID={$calendar_list[i].GID}" target="_blank">{$calendar_list[i].title}</a></li>
		{/section}
	</ul>
</div>
</div>
<div id="calviewsmall" onclick="javascript:calBig();" style="cursor:hand; width:150px; height:137px; border:1px solid black; z-index:1; position:absolute; left:147px; top:110px">
<div id="calbottomwhole">
<table class='cal' cellspacing='1' style="width: 150px">
<tr><center><strong>{$monthyear}</strong></center></tr>
<tr class='dayhead' style="height:10px;">
			<td>&nbsp;S</td>
			<td>&nbsp;M</td>
			<td>&nbsp;T</td>
			<td>&nbsp;W</td>
			<td>&nbsp;T</td>
			<td>&nbsp;F</td>
			<td>&nbsp;S</td>
</tr>
{$caloutputsmall}
</table>
</div>
</div>
<div id="calviewbig1" style="display:none;">
<table class='cal' cellspacing='1' style="width: 100%;">
<tr><center><strong><font size="3">{$monthyear}</font></strong></center></tr>
<tr class='dayhead' style="height:10px;">
			<td>&nbsp;S</td>
			<td>&nbsp;M</td>
			<td>&nbsp;T</td>
			<td>&nbsp;W</td>
			<td>&nbsp;T</td>
			<td>&nbsp;F</td>
			<td>&nbsp;S</td>
</tr>
{$caloutput}
</table>
</div>
{else}
<div id="calviewbig">
<table class='cal' cellspacing='1' style="width: 100%">
<tr><center><strong><font size="3">{$monthyear}</font></strong></center></tr>
<tr class='dayhead' style="height:10px;">
			<td>&nbsp;S</td>
			<td>&nbsp;M</td>
			<td>&nbsp;T</td>
			<td>&nbsp;W</td>
			<td>&nbsp;T</td>
			<td>&nbsp;F</td>
			<td>&nbsp;S</td>
</tr>
{$caloutput}
</table>
</div>
{/if}