<?xml version="1.0" encoding="UTF-8" ?>
<!--

    Copyright (C) 2009 eXo Platform SAS.
    
    This is free software; you can redistribute it and/or modify it
    under the terms of the GNU Lesser General Public License as
    published by the Free Software Foundation; either version 2.1 of
    the License, or (at your option) any later version.
    
    This software is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
    Lesser General Public License for more details.
    
    You should have received a copy of the GNU Lesser General Public
    License along with this software; if not, write to the Free
    Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
    02110-1301 USA, or see the FSF site: http://www.fsf.org.

-->

<!--
 **
 * Created by The eXo Platform SARL
 * Author : dang.tung
 *          tungcnw@gmail.com
 * Sep 30, 2008          
 *
-->
<Module>
	<ModulePrefs author="eXoPlatform"
		title="Calendar"
		directory_title="Calendar"
		title_url="http://www.exoplatform.org"
		description="What date is it? Use this cool calendar to keep track of the date in style. You can switch easily between daily, monthly or yearly view."
		thumbnail="http://localhost:8080/eXoGadgets/skin/DefaultSkin/portletIcons/Calendar.png"
		height="205">
		<Locale lang="ar" language_direction="rtl"/>
	</ModulePrefs>
	<Content type="html">
	<![CDATA[
		<style type="text/css">
			body {
				margin: 0;
				outline: none;
				font: normal 100%/1.25  Verdana, Tahoma, Arial, Helvetica, sans-serif;
				text-decoration: none;
				text-align: center;
			}
		
			img {
				border:none;
			}
		
			li {
				list-style-type:none;
			}
		
			.clear {
				clear:both;
				width:0;
				height:0;
				line-height:0;
				font-size:0;
			}
		
			.LeftCalender {
				background: url(/eXoGadgets/skin/image/calender.gif) top left no-repeat;
				width: 190px;
				padding-left: 10px;
				margin: 0 auto;
			}
		
			.RightCalender {
				background: url(/eXoGadgets/skin/image/calender.gif) top right no-repeat;
				padding-right: 12px;
			}
		
			.CenterCalender {
				background: url(/eXoGadgets/skin/image/calender.gif) bottom left repeat-x;
				height: 203px;
			}
		
			.Month {
				text-align: center;
				height: 46px;
			}
		
			.LeftButtonCalendarMonth,
			.RightButtonCalendarMonth {
				background: url(/eXoGadgets/skin/image/ButtonCalendar__BIDI_START_EDGE__.gif) top __BIDI_START_EDGE__ no-repeat;
				width: 17px;
				height: 16px;
				display: block;
				float: __BIDI_START_EDGE__;
				margin-top: 17px;
				cursor: pointer;
			}
		
			.RightButtonCalendarMonth {
				background: url(/eXoGadgets/skin/image/ButtonCalendar__BIDI_START_EDGE__.gif) __BIDI_START_EDGE__ -25px no-repeat;
			}
		
			.Month .text {
				width: 134px;
				font-size: 17px;
				color: #fff;
				line-height: auto;
				float: __BIDI_START_EDGE__;
				text-align: center;
				padding-top: 13px;
				cursor: pointer;
			}
			
			.Day {
				padding-top: 5px;
				text-align: center;
			}
		
			.Row {
				width: 160px;
				margin: 0 auto;
			}
		
			.Row a,
			.RowDay a {
				background: #fff;
				padding-top: 2px;
				width: 18px;
				height: 14px;
				display: block;
				text-align: center;
				font-size: 11px;
				line-height: auto;
				float: __BIDI_START_EDGE__;
				color: #5f5f5f;
				margin: 3px 4px 0 0;
			}
		
			.Row a.fo {
				background: #eb5657;
				color: #fff;
			}
		
			.Row a.last {
				margin-right: 0;
			}
		
			.RowDay {
				width: 160px;
				margin: 0 auto;
				margin-bottom: 3px;
			}
		
			.RowDay a {
				font-size: 12px;
				font-weight: bold;
			}
		
			.RowDay a.fo {
				font-size: 12px;
				font-weight: bold;
				color: #ed1c24;
			}
		
			.Row a.old {
				color: #cfcfcf;
			}
		
			.Prev,
			.Next {
				background: url(/eXoGadgets/skin/image/ButtonCalendar__BIDI_START_EDGE__.gif) center -50px no-repeat;
				width: 15px;
				height: 13px;
				display: block;
				float:__BIDI_START_EDGE__;
				margin-top: 5px;
				cursor: pointer;
			}
		
			.Next {
				background: url(/eXoGadgets/skin/image/ButtonCalendar__BIDI_START_EDGE__.gif) center -70px no-repeat;
				float: __BIDI_END_EDGE__;
			}
			
		</style>
		<script type="text/javascript">
				var months = ['January','February','March','April','May','June','July','August','September','October','November','December'] ;
		    var currentDate;
	      
	      function renderCalendar() {
      	  var dayOfMonth = 1 ;
				  var validDay = 0 ;
				  
				  if(currentDate == null) {
				  	currentDate = new Date();
				  }
				  
				  var cDate = currentDate;
				  var startDayOfWeek = getDayOfWeek(cDate.getFullYear(), cDate.getMonth() + 1, dayOfMonth) ;
				  var daysInMonth = getDaysInMonth(cDate.getFullYear(), cDate.getMonth()) ;
				  var clazz = null;
				  var today = new Date(); 
					var tempCalendar = '<div class="Month">';
					tempCalendar += '<a class="LeftButtonCalendarMonth" onclick="changeYear(-1);" title="Previous Year"></a>';
					tempCalendar += '<div class="text" onclick="goToday();">' + months[cDate.getMonth()] + '-' + cDate.getFullYear() + '</div>';
					tempCalendar += '<a class="RightButtonCalendarMonth" onclick="changeYear(1);" title="Next Year"></a>';
					tempCalendar += '</div>';
					tempCalendar += '<div class="Day">';
					tempCalendar += '<div class="RowDay">';
					tempCalendar += '<a class="fo last">S</a><a>M</a><a>T</a><a>W</a><a>T</a><a>F</a><a class="fo last">S</a><div class="clear"></div>';
					tempCalendar += '</div>';
					for (var week=0; week < 5; week++) {
						tempCalendar += '<div class="Row">';
						for (var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
							if (week == 0 && startDayOfWeek == dayOfWeek) {
			        validDay = 1;
			      	} else if (validDay == 1 && dayOfMonth > daysInMonth) {
			        		validDay = 0;
			      	}
			      	
			      	if (validDay) {
				      	if ((today.getDate() == dayOfMonth) && (today.getMonth() == cDate.getMonth()) && (today.getFullYear() == cDate.getFullYear())) {
				          clazz = 'fo';
				        } else if (dayOfWeek == 6) {
				          clazz = 'last';
				        } else {
				          clazz = '';
				        }
				
				        tempCalendar += '<a class=' + clazz + '>' + dayOfMonth + '</a>';
				        dayOfMonth++ ;
				      } else {
				        tempCalendar += '<a class="old"></a>';
				      }
						}
						tempCalendar += '<div class="clear"></div>';
						tempCalendar += '</div>';
					}
					tempCalendar += '<div><a class="Prev" onclick="changeMonth(-1);" title="Previous Month"></a><a class="Next" onclick="changeMonth(1);" title="Next Month"></a></div>';
					tempCalendar += '</div>';
					currentDate = cDate;
					document.getElementById("Calendar").innerHTML = tempCalendar;
				}
				
				function getDayOfWeek(year,month,day) {
					var date = new Date(year, month-1, day);
					return date.getDay();
				}
				
				function getDaysInMonth(year, month) {
					return [31, ((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))? 29:28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
				}
				
				function changeYear(change) {
  				currentDate.setFullYear(currentDate.getFullYear() + change) ;
  				renderCalendar() ;
				}
				
				function changeMonth(change) {	
          var indexMonth = currentDate.getMonth()+change;

          if(indexMonth == 12) {  
            currentDate.setMonth(0);
          } else {
            if(indexMonth == -1) {
              currentDate.setMonth(11);  
            }  else {
              currentDate.setMonth(indexMonth);
            }
          }
          
				  renderCalendar() ;
				}
				
				function goToday(){
					currentDate = new Date();
					renderCalendar();					
				}
		</script>
		<body onload="renderCalendar()">
			<div class="LeftCalender">
        <div class="RightCalender">
	        <div class="CenterCalender" id="Calendar">
          </div>
        </div>
    	</div>
		</body>
	]]>
	</Content>
</Module>