#CalendarMonth000000001
<tmpl_if admin>
    <p><tmpl_var adminControls></p>
</tmpl_if>

<tmpl_if displayTitle>
    <h1><tmpl_var title></h1>
</tmpl_if>

<tmpl_if description>
    <tmpl_var description>
</tmpl_if>


<table cellspacing="0" cellpadding="0" width="630" id="mCAL">
<tr>
    <td style="text-align:right">
        <a class="tab" href="<tmpl_var urlDay>">Day</a>
        <a class="tab" href="<tmpl_var urlWeek>">Week</a>
        <a class="tab" href="<tmpl_var urlMonth>">Month</a>
        <a class="tab" href="<tmpl_var urlSearch>">Search</a>

        <div class="controls"><tmpl_if editor><a href="<tmpl_var urlAdd>">Add Event</a></tmpl_if> &bull; <a href="<tmpl_var urlPrint>">Print</a> 
            <!--&bull; <a href="#">Subscribe</a>-->
        </div>
    </td>
</tr>
<tr>
    <td class="months">
        <div style="padding:3px 0px;">
            <a href="<tmpl_var pagePrevUrl>" style="font-weight:bold;margin-right:8px;">&laquo; <tmpl_var pagePrevYear></a>&bull;
            <tmpl_loop months>
            <a style="margin-right:4px;" href="<tmpl_var monthUrl>" class="monthLink<tmpl_if monthCurrent> current</tmpl_if>"><tmpl_var monthAbbr></a>
            </tmpl_loop>
            &bull;
                <a href="<tmpl_var pageNextUrl>" style="font-weight:bold;padding-left:8px"><tmpl_var pageNextYear> &raquo;</a> 
        </div>
    </td>
</tr>
<tr>
    <td>
        <div  class="curMonth">
            <tmpl_var monthName> <tmpl_var year>
        </div>
    </td>
</tr>
<tr>
    <td style="width:100%">
    
    <!-- the calendar table -->
        <table id="month" width="100%" cellspacing="2" cellpadding="0">
        <!-- day names -->
        <tr><tmpl_loop dayNames>
            <th><tmpl_var dayName></th>
        </tmpl_loop></tr>
        
        <!-- the grid -->
        <tmpl_loop weeks><tr>
        <tmpl_loop days><td><div class="<tmpl_if dayMonth>active</tmpl_if><tmpl_if dayCurrent> current</tmpl_if>">
            <tmpl_if dayMonth>
               <a class="number" href="<tmpl_var dayUrl>"><tmpl_var dayMonth></a>
            <tmpl_if events>
            <ul class="events">
			   <tmpl_loop events>
                <li><a href="<tmpl_var eventUrl>">
                    <tmpl_var eventMenuTitle>
                </a>
				</li>
                </tmpl_loop>
		    </ul>
			
			<a href="#" id="event_<tmpl_var dayMonth>" class="moreButton" onmouseover="return showEvents('overlay<tmpl_var dayMonth>');">
				<img src="<tmpl_var extrasUrl>/wobject/Calendar/images/more.gif" />
			</a>
			
            </tmpl_if> <!--/events-->
            </tmpl_if> <!--/day-->
        </div></td></tmpl_loop> <!--/days-->
        </tr></tmpl_loop>
    </table>
</tr>
</table>
<tmpl_loop weeks><tmpl_loop days><tmpl_if events>
      <div id="overlay<tmpl_var dayMonth>" class="moreDisplay">
         <div>
            <ul>
			<tmpl_loop events>
			<li><a href="<tmpl_var eventUrl>"><tmpl_var eventTitle></a><br/></li>
            </tmpl_loop>
		 </ul>            
      </div>
   </div>
</tmpl_if></tmpl_loop></tmpl_loop>

~~~

<style type="text/css">
		#mCAL * {
			margin:0px;			
		}
		#mCAL td {
			font-size:10px;
			font-family:arial;
		}
		#mCAL .tab {

			border-bottom-style: none;
			font-weight: bold;
			padding: 2px 15px 0px 15px;
			text-align: center;
			background-color: #E9ECF3;
			-moz-border-radius-topLeft: 10px;
			-moz-border-radius-topRight: 10px;
			color: #7588B5;
			text-decoration: none;
			font-size: 10pt;
			display: block;
			float: left;
			margin-right: 5px;
		}
		#mCAL .tab:hover {
			color:black;
		}	
		#mCAL .active {
			background-color:#DFE3EE;
			color:#404F77;
			border-bottom:solid #DFE3EE 1px;
		}	
		#mCAL .controls {
			float:right;
			vertical-align:bottom;
		}
		#mCAL a {
			font-size:11px;
			color:#517AC8;
		}	
		#mCAL .months {
			text-align:center;
			background-color:#DFE3EE;			
		}
		#mCAL .months a {
			color:#517AC8;
			text-decoration:none;
		}
		#mCAL .months .monthLink {
			text-decoration:none;			
			padding-left:5px;
			padding-right:5px;
			color:#AAB8D5;
			font-size:12px;
			font-weight:bold;
		}	

		#mCAL .months .current, #mCAL .months .monthLink:hover {
			font-weight:bold;
			color:#517AC8;
			background-color:#fff;			
			-moz-border-radius:5px;
		}
		#mCAL .curMonth {
			text-align:center;
			margin: 2px 0px;
			background-color:#517AC8;
			color:white;
			font-size:14px;
			font-weight:bold;
		}



/**** Month view ****/
/* Table */
#mCAL table#month
{

}

#mCAL table#month *
{
	padding:		0px;
	margin:			0px;
}

#mCAL table#month a
{
	text-decoration:	none;
}

#mCAL table#month th
{
	-moz-box-sizing:border-box;
	width:			85px;
	background-color:	#517AC8;
	text-align:		center;
	font-weight:		bold;
	color:			white;	
}

#mCAL table#month div
{
	position:		relative;
	width:			85px;
	height:			85px;
	margin:			0px;
	background-color:	#E9ECF3;
}

#mCAL table#month ul 
{	
	overflow:		hidden;
}

#mCAL table#month .active 
{
	-moz-border-radius-topLeft:	8px;
	-moz-border-radius-bottomLeft:	8px;
	-moz-border-radius-bottomRight:	8px;
	vertical-align:		top;		
	background-color:	#CCD2E3;
	border:			solid #CCD2E3 1px;
}

#mCAL table#month .current 
{
	background-color:	#FFE4B3;
	border-color:		orange;
}

#mCAL table#month .number 
{
	-moz-border-radius-bottomLeft:5px;
	display:		block;
	position:		absolute;
	top:			0px;
	right:			0px;
	height:			10px;
	width:			10px;
	background-color:	#516BA4;
	color:			white;
	text-align:		center;
	vertical-align:		middle;
	padding:		0px 3px 2px 2px;
	font-weight:		bold;
}

#mCAL table#month .current .number
{
	background-color:	orange;
	color:			black;
}

#mCAL table#month .events 
{
	padding:		3px;
	padding-top:		8px;
	font-weight:		bold;			
}

#mCAL table#month .events a 
{
	color:			#4F4F4F;
	text-decoration:	none;
	font-size:		9px;
}

#mCAL table#month .moreButton 
{
	border-style:		none;
	position:		absolute;
	bottom:			0px;
	width:			100%;
	height:			9px;
	background-color:	#517AC8;	
	font-size:		5px;
	text-align:		center;
	-moz-border-radius-bottomLeft:	8px;
	-moz-border-radius-bottomRight:	8px;
}

#mCAL table#month .moreButton img
{
	border:			none;
}


/* MORE STYLES */

.moreDisplay 
{
	position: 		absolute;
	border:			solid orange 1px;
	border-top:		solid orange 2px;
	font-family:		arial;
	font-size:		10px;
	width:			300px;
	height: 		auto;
	padding:		2px;
	background-color:	#FFD3A8;
	color:			black;
	display:        none;
	z-index: 		100;
}

.moreDisplay a {
   color: black;
}

* html body table#month td { position: relative; z-index: 1; }
</style>

<script type="text/javascript" src='^Extras;yui/build/yahoo/yahoo.js'></script>
<script type="text/javascript" src='^Extras;yui/build/event/event.js' ></script>

<script>
<!--
//<![CDATA[
	
   //-----------------------------------------------------------------------------------   	
   function isSelfOrChildOf(parent,node) {
      if(parent == node) return true;
	  if(parent == null || node == null) return false;
	  var childLen = parent.childNodes.length;
      for (var i = 0; i < childLen; i++) {
         var child = parent.childNodes[i];
	     if(child.nodeType != 1) continue; //Skip text and attribute nodes
	     if(isSelfOrChildOf (child,node)) {
	        return true;
	     }
      }
      return false;
   }	
   
   //-----------------------------------------------------------------------------------   
   function findParentNodeFromChild (node,tagName) {
      if(node == null) return node;
	  var parent = node.parentNode;
	  if(parent == null) return node;
	  if(parent.tagName == tagName) {
	     return parent;
	  }
	  return findParentNodeFromChild (parent,tagName);
   }
   
   
   //-----------------------------------------------------------------------------------   
   function showEvents(eventId) {
	  var evt = YAHOO.util.Event.getEvent();
      var targ = YAHOO.util.Event.getTarget(evt);
	  
	  var elem = document.getElementById(eventId);
	  var td;
      var pPagex;
      var pPagey;
          
      //IE is stupid
      var isIE = navigator.userAgent.indexOf("MSIE") > -1;
      var isIE7 = navigator.userAgent.indexOf("MSIE 7") > -1;
      if(isIE && !isIE7) {
         //IE 6 and below don't register offsetTop or offsetLeft for the div
         td = findParentNodeFromChild(targ,"TD");
         pPagex = td.offsetTop;
         pPagey = td.offsetLeft;
      } else {
         var cDiv = findParentNodeFromChild(targ,"DIV");
	     pPagex = cDiv.offsetTop;
	     pPagey = cDiv.offsetLeft;
         td = findParentNodeFromChild(cDiv,"TD");
      }
      
      var tdHeight = td.offsetHeight;

	  var eventX = tdHeight + pPagex;
	  var eventY = pPagey;
		  
	  elem.style.top = eventX + 'px';
	  elem.style.left = eventY + 'px';
	  elem.style.display = "block";
      
	  //Register listener
	  YAHOO.util.Event.addListener(document.body,"mousemove",hideEvents,{ "targ":targ, "elem": elem, "td": td })
	  return false;
   }
   
   //-----------------------------------------------------------------------------------   
   function hideEvents(e, el) {
	  if(!e || !el) return;
	  
	  var elem = el.elem;
	  var td = el.td;
	  var targ = el.targ;
	  
	  var evtTarg = YAHOO.util.Event.getTarget(e);
	  
	  var inDiv = isSelfOrChildOf(elem,evtTarg);
      var inTd = isSelfOrChildOf(td,evtTarg);
	  var inTarget = isSelfOrChildOf(targ,evtTarg);
	  
	  if(inDiv || inTd || inTarget) {
	     //do nothing
	  } else {
	     elem.style.display = "none";
		 YAHOO.util.Event.removeListener (document.body,"mousemove",hideEvents);    
	  }
	  return false;
   }
   
//]]>
-->      
</script>

