/*###############################################################################################################
//			DatePicker Dll																						#
//			Cirrus Global Solutions																				#
//			Start Date:																							#
//			Close Date:23/12/2006																				#
//			Date Format:mm/dd/yyyy or mm-dd-yyyy and all Date Formats	are supported															#
//			Reference:DHTML																						#
//			Design style is given by Mr.PanduRangaChary															#
//			Modification/Updations :Mr.Ram Pratap																#
//			Guidance:Mr.Ram Pratap																				#
//			Tested by:																							#
//			Developed By:Praveen Kumar B.P.																									#
//			function for displaying the calendar control														#
//																												#
//			 ********************** Next Implimentations *************************								#
//																					#
//			picker  comes with new fetures																			#
//																												#
//###############################################################################################################*/			

//Declare Variables	
var isFF=false;

var isME=false;
var prevCalendar='';
var timerId;	
var dObj;
var  isExisted=false;
//Check Browser Compataibility

function BrowserCompataibility()
{

if(navigator.userAgent.indexOf("MSIE")!=-1)
{
isME=true;
}
if(navigator.userAgent.indexOf("Firefox")!=-1)
{

isFF=true;
}
else
isME=true;
}

BrowserCompataibility();
//Display Calendar When selecting
function Display(id,height,width,imgId,dateformat,cntrlId,displaystyle,enable)
		{
		
		//Check Previous Calendar Id is Existed or not
		if(prevCalendar!='')
		{
		//if Existed hide the calendar
		document.getElementById(prevCalendar).style.display='none';
		
	    }	
	    	
		
		//Concantate Control id to Textbox id
		id=cntrlId+'_'+id;	
		//Concantate Control id to Image id
	    imgId=cntrlId+'_'+imgId;
	    //Check width of the calendar
		 if(width<160)
		   {
		   width=160;
		   }
		  //assigning d as document
		   d = document;
		  //var cal assigned as the div tag where the image as placed

// ***************creating the dynamical div tags for displaying the calendar***********************************

		//if already div tag existed return as null value
		if(d.getElementById("dObj"))
		{
		 return ;
		}
		
		//create the parent div  tag dynamically 		
		
		  dObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
		   //div id as the  concantate the _divpicker to the name of the textbox id
		  dObj.id = id + '_divPicker';		 
		    //get an position of the calendar
		      var cal = document.getElementById(imgId);
		     //if browser is Firefox
		      
		      //if previous calendar is not an existed calendar
		      if((prevCalendar!=id + '_divPicker'))
		      {
		     if(document.getElementById(id + '_divPicker').style.display!='none')
		     {
		   
		      //create styles for calendar
		      createStyles(imgId,height,id,width,cal,displaystyle);
		      }
		      }
		    
		    
		     //if IE create styles
		     else
		     {
		        if((prevCalendar!=id + '_divPicker'))
		      {
		     if(document.getElementById(id + '_divPicker').style.display!='none')
		     {
		   
		      //create styles for calendar
		      createStyles(imgId,height,id,width,cal);
		      }
		      }
		     }
			prevCalendar= id + '_divPicker';
			//calObj.style.visiblity="visible";
			Did=id +'_divPicker';
			dObj.onmouseover=new Function("calDisplay(Did)");
			dObj.onmouseout=new Function("calUnDisplay(Did)");
			
//##############################  Displaying the calendar  ##########################################################    
							//declare the varible  getUserInput ,and get the user enterd input value 
							var getUserInput=document.getElementById(id).value;
					        
								//document.getElementById(id + '_divPicker').style.display='block';
								clearTimeout(timerId);
								Did=id+'_divPicker';
							//if user not entered any value in the textbox
							if(getUserInput=="")
							{
							
							//declare the varaible inputCalendar and pass the calendar name,user input textbox value and current date
							inputCalendar = new Calendar ("inputCalendar", id, new Date(),height,width,dateformat,enable,displaystyle);
							//call the function for creating the calendar
							
					        createCalendar (inputCalendar);//alert(inputCalendar);
						    
							timerId=setTimeout("Close('"+Did+"')", 5000)
								
							}//if close
							//if user can enter some value in input box
							else
							{
							
							//create an array for months and assign the months to the array
							var months=["January","Febraury","March","April","May","June","July","August","September","October","November","December"];
							//create an array for days and assign the values to the days
							var days=["Sun","Mon","Tue","wed","Thu","Fri","Sat"]; 
							//regular expression for user input value it is mm/dd/yyyy or mm-dd-yyyy format
							if(dateformat=="mmddyyyy")
							{
							var regDate=/\b(1[0-2]|0?[1-9])[\-\/](0?[1-9]|[12][0-9]|3[01])[\-\/]((19|20)\d{2})/;
							}
							else if(dateformat=="mmyyyydd")
							{
							var regDate=/\b(1[0-2]|0?[1-9])[\-\/]((19|20)\d{2})[\-\/](0?[1-9]|[12][0-9]|3[01])/;
							}
							else if(dateformat=="ddmmyyyy")
							{
							var regDate=/\b(0?[1-9]|[12][0-9]|3[01])[\-\/](1[0-2]|0?[1-9])[\-\/]((19|20)\d{2})/;
							}
							else if(dateformat=="ddyyyymm")
							{
							var regDate=/\b(0?[1-9]|[12][0-9]|3[01])[\-\/]((19|20)\d{2})[\-\/](1[0-2]|0?[1-9])/;
							}
							else if(dateformat=="yyyymmdd")
							{
							var regDate=/\b((19|20)\d{2})[\-\/](1[0-2]|0?[1-9])[\-\/](0?[1-9]|[12][0-9]|3[01])/;
							}
							else if(dateformat=="yyyydsssdmm")
							{
							var regDate=/\b((19|20)\d{2})[\-\/]\b(0?[1-9]|[12][0-9]|3[01])[\-\/]\b(0?[1-9]|[12][0-9]|3[01])/;
							}
							else
							{
							var regDate=Date(getUserInput);
							}
							if(dateformat!="UTCFormat")
							{
							// declare the variable and check the regular expression of given input value by using exec method
							var matchArray=regDate.exec(getUserInput);
							// if user enter date format matches
							if(matchArray)
							{
							//get the month index
						var theMonth=months[matchArray[1]-1]+" ";
						// get the date 
						var theDate=matchArray[2]+",";
						//get the year
						var theYear=matchArray[3];
						var strFormat=new Array();
							strFormat=getUserInput.split('/');
							var daysInMonth = new Array(0,31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
						//declare the variable dateObj for converting mm/dd/yyyy format to UTC format by adding 5.30 hours
						if(dateformat=="mmddyyyy")
						{
					
						 if(matchArray[2]<=daysInMonth[strFormat[0]])
						    var dateObj=new Date(matchArray[3],matchArray[1]-1,matchArray[2],5,30,0,0);
							else
							{
							alert("Invalid Date");
							document.getElementById(id).value='';
							return false;
							}
							}
							else if(dateformat=="ddmmyyyy")
							{
							if(matchArray[1]<=daysInMonth[strFormat[1]])
						  
							var dateObj=new Date(matchArray[3],matchArray[2]-1,matchArray[1],5,30,0,0);
							else
							{
							alert("Invalid Date");
							document.getElementById(id).value='';
							return false;
							}
							}
							if(dateformat=="mmyyyydd")
						    {
						    if(strFormat[2]<=daysInMonth[strFormat[0]])						  
						    var dateObj=new Date(strFormat[1],strFormat[0]-1,strFormat[2],5,30,0,0);
							else
							{
							alert("Invalid Date");
							document.getElementById(id).value='';
							return false;
							}
							}
							else if(dateformat=="ddyyyymm")
							{
							
							if(strFormat[0]<=daysInMonth[strFormat[2]])
								var dateObj=new Date(strFormat[1],strFormat[2]-1,strFormat[0],5,30,0,0);
							else
							{
							alert("Invalid Date");
							document.getElementById(id).value='';
							return false;
							}
							}
							else if(dateformat=="yyyyddmm")
							{
							if(strFormat[1]<=daysInMonth[strFormat[2]])
							var dateObj=new Date(strFormat[0],strFormat[2]-1,strFormat[1],5,30,0,0);
							else
							{
							alert("Invalid Date");
							document.getElementById(id).value='';
							return false;
							}
							}
							else if(dateformat=="yyyymmdd")
							{
							if(strFormat[2]<=daysInMonth[strFormat[1]])
							var dateObj=new Date(strFormat[0],strFormat[1]-1,strFormat[2],5,30,0,0);
							else
							{
							alert("Invalid Date");
							document.getElementById(id).value='';
							return false;
							}
							}
							else if(dateformat=="UTC Format")
							{
							var dateObj=Date(getUserInput);
							}
							
						
							//declare the varaible inputCalendar and pass the calendar name,user input textbox value and current date
								inputCalendar = new Calendar ("inputCalendar", id, dateObj,height,width,dateformat,enable,displaystyle);
							//call the function for creating the calendar
							
							createCalendar (inputCalendar);
							if(isFF==true)
							{
							document.getElementById(id +'_divdate').style.display='table';
							document.getElementById(id + '_calendar_display').style.display='block';
							}
							else if(isME==true)
							{
							document.getElementById(id + '_calendar_display').style.display='block';
							}
							//document.getElementById(id + '_divPicker').style.display='display';
							timerId=setTimeout("Close('"+Did+"')", 5000)
						}  //if close
					        
						else
						{
						 if(displaystyle=="Button" || displaystyle=="Label" || displaystyle=="TextBox" ||displaystyle=="NullTextBox")
		   	              {
							//declare the varaible inputCalendar and pass the calendar name,user input textbox value and current date
							inputCalendar = new Calendar ("inputCalendar", id, new Date(),height,width,dateformat,enable,displaystyle);
							//call the function for creating the calendar
							
					       createCalendar (inputCalendar);//alert(inputCalendar);
						    
							timerId=setTimeout("Close('"+Did+"')", 5000)
							}
							else
							{
							alert("Invalid date selection");
							document.getElementById(id).value=='';
							return false;
							}
							
						}   
						}
						else
						{
						inputCalendar = new Calendar ("inputCalendar", id, Date(getUserInput),height,width,dateformat,enable,displaystyle);
							//call the function for creating the calendar
							//alert("Invalid date selection");
							
						}              
					    }
						
						
					    
				}

				function createStyles(imgId,height,id,width,cal,displaystyle)
				{
				 if(isFF==true)
		      {
		      //document.getElementById(id).style.position='absolute';
		        //applying styles to the div tag
		      // displaying is visible mode
		     document.getElementById(imgId).style.display = 'block';
		     //position as  the absolute position
		   	    if(displaystyle=="Button" || displaystyle=="Label" || displaystyle=="TextBox")
		   	    {
		   	     //calucaulating the width of the datepicker
		    var posWidth=0;
		    posWidth=document.getElementById(id).style.width;
		    var posTop=0;
		    //calculating the top of the datepicker
		     posTop=document.getElementById(id).offsetTop;
		   
		    var posHeight=0;
		    //calculating the height of the datepicker
		    posHeight=document.getElementById(id).offsetHeight;
		    var posLeft=0;
		   //add the left position and width of date picker
		    posLeft=document.getElementById(id).offsetLeft;
		    var totalLeft=0;	   
		     totalLeft=posLeft+145;
		    
		    var totalTop=0;
			//add the top position and height of date picker
		     totalTop=document.getElementById(id).offsetTop+60;
		     }
		   	    
		   	    else
		   	    {
		     //calculating the  left position of the datepicker
	
		    //calucaulating the width of the datepicker
		    var posWidth=0;
		    posWidth=document.getElementById(imgId).style.width;
		    var posTop=0;
		    //calculating the top of the datepicker
		     posTop=document.getElementById(imgId).offsetTop;
		   
		    var posHeight=0;
		    //calculating the height of the datepicker
		    posHeight=document.getElementById(imgId).offsetHeight;
		    var posLeft=0;
		   //add the left position and width of date picker
		    posLeft=document.getElementById(imgId).offsetLeft;
		    var totalLeft=0;	   
		     totalLeft=posLeft+25;
		    
		    var totalTop=0;
			//add the top position and height of date picker
		     totalTop=document.getElementById(imgId).offsetTop;
		     }
		    }
		    else if(isME==true)
		    {
		     //applying styles to the div tag
		      // displaying is visible mode
		    // cal.style.display = 'block';
		     //position as  the absolute position
		    // cal.style.position = 'absolute';
		     //calculating the  left position of the datepicker
		    var posLeft=cal.offsetLeft;
		    //calucaulating the width of the datepicker
		    if(isFF==true)
		    {
		    var posWidth=cal.offsetWidth-900;
		    }
		    else
		    {
		    var posWidth=cal.offsetWidth;
		    }
		     
		    //calculating the top of the datepicker
		    var posTop=cal.offsetTop;
		    //calculating the height of the datepicker
		     var posHeight=cal.offsetHeight;
		    
		   //add the left position and width of date picker
		     var totalLeft=cal.offsetLeft+posWidth;
			//add the top position and height of date picker
		    var totalTop=cal.offsetTop+cal.offsetHeight;
		    }
		     //height of the div tag as the height of the calendar
		    dObj.style.height =height + "px";
		    //displaying the div tag
		    dObj.style.display = 'block';
		    //position of the tag
		    dObj.style.position = 'absolute';
		    //set the left of the div tag is left of the datepicker added to the width of the datepicker
		    dObj.style.left=totalLeft-162;
			//set the top of the div tag is height of the datepicker added to the top of the datepicker
		    dObj.style.top= totalTop;

			//set the datepicker div tag as in visible mode
			//cal.style.visibility="visible"; 
			//create the child div tag dynamically for displaying control to the user
			var dateObj = dObj.appendChild(d.createElement("div"));
			//div id is the concantate _divdate to the textbox id
			dateObj.id = id + '_divdate';
			//display as the visibility style
			dateObj.style.visiblity="visible";
			//create the child div for placing the calendar control
			
			var calObj;
			
			 calObj = dObj.appendChild(d.createElement("div"));
			//id of the div tag
			calObj.id = id + '_calendar_display';
			//calObj.innerHTML="";
			// height of the  div
			calObj.style.height=height;
			//width of the div
			calObj.style.width=width;
			//visibility of the div	
			calObj.style.disply='block';
			calObj.style.position='absolute';
				}
				
			//********************* function for dispalying calendar when mouse over occures ********************
							
			function calDisplay(id)
				{
				
				//When mouse over on calendar display the dynamic calendar 				
				// document.getElementById(id +'_calendar_display').style.display='block';
				//When mouse over on calendar display the day,month,year controls this three are in div tag with id=_userSelDate
				// document.getElementById(id +'_userSelDate').style.display='block';
				clearTimeout(timerId);
				
				document.getElementById(id).style.visibility="visible";
				}
				
			//*********************** function for invisible mode of calendar when mouse out on the calendar *************

			function calUnDisplay(id)

			{
				clearTimeout(timerId);
				timerId=setTimeout("Close('"+id+"')", 5000)

			//setTime(id);
			//Set the displaying the calendar in invisible mode					
			//document.getElementById(id +'_calendar_display').style.display='none';
			//Set the day,month,year controls are in invisible mode
			// document.getElementById(id +'_userSelDate').style.display='none';
				//document.getElementById(id).style.display='none';				
			}

			//*************************function for closing the calendar ****************************
			function Close(id)
			{
			// set the div tag is invisible mode
			document.getElementById(id).style.display="none";
			//document.getElementById(id).innerHTML="";

			}

			//********************* creating and  displaying the calendar with passing calendar name,userinput textbox id and date object,height and width of the calendar ************ 

			function Calendar (cname, id, date,height,width,dateformat,enable,displaystyle)
			{
			// The css classes for the calendar and header
			// this css class for displaying calendar style
			this.height=height;
            this.enable=enable;
			this.width=width;
			this.displaystyle=displaystyle;
			// ***** if varying the width and height of the calendar change the properties of css styles ****//
			//if width and height of the calendar is default size  or less than the 200 then
			if(width<=200 && height <=200)
			{
		
			

			//this css class for  designing calendar header style
			this.headerStyle = "calHeader";

			

			// this css class apllicable for week styles
			this.weekStyle="calWeekstyle";	
			this.headerCellStyleLabel = "calHeaderCell";
            if(isFF==true)
			{			
			//this css class is applicable only  foe week ends
			this.weekStyle = "calFFWeek";
			//this css class is applicable for even weeks i.e when table row becomes even(ex:0,2,4,6)
			this.evenWeekStyle = "calFFEvenweek";

			//this css class is applicable for odd weeks i.e when table row becomes odd(ex:1,3,5)
			this.oddWeekStyle = "calFFOddweek";
			
			this.calendarStyle="calFFCalendar";
			this.dayStyle = "calFFDay";
			this.todayDayStyle = "calFFToday";
			//this css class for displaying header cell style,this style applied for month and year in calendar header 
				this.headerCellStyle = "calCell";
				
			//this css class aplicable for header left and right cells that is for month forward and month reverse
			this.headerCellStyles = "calFFNextPrevCells";
			//this css class is applicable only for common day styles
			this.commonDayStyle = "calFFCommon";
				//this css class is applible when day becomes saturday or sunday i.e. weekend days
			this.holidayDayStyle = "calFFHoliday";

			}
			else
			{
			this.calendarStyle = "calCalendar";
			//this css class is applicable only  foe week ends
			this.weekStyle = "calWeek";
				//this css class is applicable for even weeks i.e when table row becomes even(ex:0,2,4,6)
			this.evenWeekStyle = "calEvenweek";

			//this css class is applicable for odd weeks i.e when table row becomes odd(ex:1,3,5)
			this.oddWeekStyle = "calOddweek";
			//this css class for today style and it is applible when day was selected(selected day)
			this.todayDayStyle = "calToday";
			//this css class ids applicable only for day style
			this.dayStyle = "calDay";
			//this css class for displaying header cell style,this style applied for month and year in calendar header 
				this.headerCellStyle = "calCell";
				
			//this css class aplicable for header left and right cells that is for month forward and month reverse
			this.headerCellStyles = "calNextPrevCells";
			//this css class is applicable only for common day styles
			this.commonDayStyle = "calCommon";
				//this css class is applible when day becomes saturday or sunday i.e. weekend days
			this.holidayDayStyle = "calHoliday";
			}

		

			

			this.smalltext = "calsmalltext";
			//this css is applicable only for disable day styles that is when table row starts previous month day,that day is in in visible mode
			this.disabledDayStyle = "calDisabled";

			

		
			this.eventDayStyle = "calEvent";
			this.dateformat=dateformat;
			
			
			}

			// if the width height of the calendar >300  then change the property of  calendar

			// if height greater than 200 but less than 250 and width should be <=200 then 

				else if((height>200 && height<250) && (width<=200))
			{
			this.calendarStyle = "calCalendarRegular";

			//this css class for  designing calendar header style
			this.headerStyle = "calHeaderRegular";

			//this css class for displaying header cell style,this style applied for month and year in calendar header 
				this.headerCellStyle = "calCellRegular";
				
			//this css class aplicable for header left and right cells that is for month forward and month reverse
			this.headerCellStyles = "calNextPrevCellsRegular";

			// this css class apllicable for week styles
			this.weekStyle="calWeekstyleRegular";	
			this.headerCellStyleLabel = "calHeaderCellRegular";

			//this css class is applicable only  foe week ends
			this.weekStyle = "calWeekRegular";

			//this css class is applicable for even weeks i.e when table row becomes even(ex:0,2,4,6)
			this.evenWeekStyle = "calEvenweekRegular";

			//this css class is applicable for odd weeks i.e when table row becomes odd(ex:1,3,5)
			this.oddWeekStyle = "calOddweekRegular";

			//this css class ids applicable only for day style
			this.dayStyle = "calDayRegular";

			this.regulartext = "calRegularRegular";
			//this css is applicable only for disable day styles that is when table row starts previous month day,that day is in in visible mode
			this.disabledDayStyle = "calDisabledRegular";

			//this css class is applicable only for common day styles
			this.commonDayStyle = "calCommonRegular";

			//this css class is applible when day becomes saturday or sunday i.e. weekend days
			this.holidayDayStyle = "calHolidayRegular";
			this.eventDayStyle = "calEventRegular";
			//this css class for small text ,this class used for close the calendar
			this.smalltext="calSmalltextRegular";

			//this css class for today style and it is applible when day was selected(selected day)
			this.todayDayStyle = "calTodayRegular";
			this.border="calborderRegular";
			}
			else
			//if((height<300 && (width>300 && width<200))||(height>300 && width>300))
			{
			this.calendarStyle = "calCalendarCommon";

			//this css class for  designing calendar header style
			this.headerStyle = "calHeaderCommon";

			//this css class for displaying header cell style,this style applied for month and year in calendar header 
				this.headerCellStyle = "calCellCommon";
				
			//this css class aplicable for header left and right cells that is for month forward and month reverse
			this.headerCellStyles = "calNextPrevCellsCommon";

			// this css class apllicable for week styles
			this.weekStyle="calWeekstyleRegular";	
			this.headerCellStyleLabel = "calHeaderCellCommon";

			//this css class is applicable only  foe week ends
			this.weekStyle = "calWeekRegular";

			//this css class is applicable for even weeks i.e when table row becomes even(ex:0,2,4,6)
			this.evenWeekStyle = "calEvenweekCommon";

			//this css class is applicable for odd weeks i.e when table row becomes odd(ex:1,3,5)
			this.oddWeekStyle = "calOddweekCommon";

			//this css class ids applicable only for day style
			this.dayStyle = "calDayCommon";

			this.regulartext = "calRegularCommon";
			//this css is applicable only for disable day styles that is when table row starts previous month day,that day is in in visible mode
			this.disabledDayStyle = "calDisabledCommon";

			//this css class is applicable only for common day styles
			this.commonDayStyle = "calCommonCommon";

			//this css class is applible when day becomes saturday or sunday i.e. weekend days
			this.holidayDayStyle = "calHolidayCommon";
			this.eventDayStyle = "calEventCommon";

			this.smalltext="calSmalltextCommon";

			//this css class for today style and it is applible when day was selected(selected day)
			this.todayDayStyle = "calTodayCommon";
			this.border="calborderRegular";
			}

			//this.mouseoverStyle="cal_mouseover";
			// set the default values for properties
			this.fallback_single = 0;

			// It is used to calendar attached to 3 html fields.(day,month and year fields)
			this.fallback_multi = 1;

			// It is used to if the calendar  attached to both field sets(userInput field and userselectDate).
			this.fallback_both = 2;

			// Only view the calendar i.e. cannot modify any (read only)
			this.viewOnly = false;

			// Allows the user to select weekends
			this.allowWeekends = true;

			// Allows the user to select weekdays
			this.allowWeekdays = true;

			//Allow the user to select mouseover
			this.allowmouseOver=true;


			// The minimum date that the user can select 
			minDate = new Date(1900,1,1,5,30,0);

			// The maximum date that the user can select 
			maxDate = new Date(2050,12,31,5,30,0);
			this.minDate =minDate ;

			// The maximum date that the user can select 
			this.maxDate = maxDate;

			// Allow the user to scroll dates, when user select previous or next months
			this.scrolling = true;

			// The id of designed calendar
			this.name = cname;

			// The first day of the week in the calendar it strats from 0 to 6(0-sunday, 6-saturday)
			this.firstDayOfWeek = 0;

			// Fallback method
			this.fallback = this.fallback_both;

			// Sets the date and strips out time information
			// declare the varible for today and create instance for date
			var today=new Date();

			//user will get current date 
			today=today.getDate();

			// calendar date of the date,the object created when calling the function Calendar
			this.calendarDate = date;

			//set the hours from  starts zero for calendar date(UTC:Universal Time)
			this.calendarDate.setUTCHours(0);

			//set the minutes strats from zero for calendar date
			this.calendarDate.setUTCMinutes(0);

			//set the seconds strats from zero  for calendar date
			this.calendarDate.setUTCSeconds(0);

			//set the milliseconds strats from zero 
			this.calendarDate.setUTCMilliseconds(0);

			// Id represents userInput Id that is textbox id
			this.attachedId = id;
			
			

			//The left and right month control icons (when enabled)
			this.controlLeft="<<";
			this.controlRight=">>";
				
			// The left and right month control icons (when disabled)
			this.controlLeftDisabled = "";
			this.controlRightDisabled = "";

			// *************** specifies the labels for this calendar *****************************
			// creating array for dispalying days and months

			//specifies the day labels, create array and bind week days from sunday(0) to saturday(6)
			//this.dayLabels = new Array("Sun", "Mon", "Thu", "Wed", "Tue", "Fri", "Sat");
			this.dayLabels = new Array("S", "M", "T", "W", "T", "F", "S");

			//specifies the month labels, create array and bind months from January(0) to December(6)
			this.monthLabels = new Array("January","Febraury","March","April","May","June","July","August","Sep'ber","October","November","December");
			this.eventDates = new Array();	
			
			if(enable=="Extended")
			{
			(buildDropdown(cname,id,date,height,width));
			// Specifies the dates of any event. The events are to be defined as arrays,
			// with element 0 being the date and element 1 being an id.
			

			//if calendar created first time
			if (this.viewOnly == false)
				{
				
				//if the calendar attached to both fields or 3 html fields
				if ((this.fallback = this.fallback_both) || (this.fallback = this.fallback_multi)) {
					// evalute the user day input changed to selected day
					//eval code can be used for updating the userinput values when he was selected new date on the controls
					eval("document.getElementById(\"" + this.attachedId + "_day\").onchange = function () {updateFromMultiDay("+this.name+", this);}");
					eval("document.getElementById(\"" + this.attachedId + "_month\").onchange = function () {updateFromMultiMonth("+this.name+", this);}");
					eval("document.getElementById(\"" + this.attachedId + "_year\").onchange = function () {updateFromMultiYear("+this.name+", this);}");

				}
			} 
			}
			selectEvent = new Function();
			}


			//********************* function for first calendar date in calendar ********************************	

			function getFirstCalendarDate (calendar)
				{  
			// get first calendar date of the current calendar

			return new Date (calendar.calendarDate.getUTCFullYear()	, calendar.calendarDate.getUTCMonth(),1);
			
			}
			

			//*********************** function for update the user input day *************************************

			function updateUserInputDay (calendar, date)
			{
			// declare the varible newDate and create an object with user updated value
			newDate = new Date (date.value);
			//  set the updated value to newdate
			newDate.setUTCDate(newDate.getUTCDate()+1);
			// assign the calendar date to new date
			sender.calendarDate = newDate;
			// update the calendar or recreate the calendar
			createCalendar (calendar);
			// assign newDate value to user inputDate
			setInputValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat,calendar.displaystyle);
			//document.getElementById('divPicker').style.display='block';
			}

			//*******************************  function for when user change the date on the calendar *************
			function updateFromMultiDay (calendar, Day)
			{

			// check the  userInput value is number or not
			if (isNaN(Day.value)) 
			{
			//set the calendar date value to user input value
				Day.value = calendar.calendarDate.getUTCDate();
				alert("Invalid Date");
			//return becomes false;
				return false;
			}

			// set the calendar date to the userinput value
			calendar.calendarDate.setUTCDate(Day.value);
			//create calendar with new date or update the calendar
			createCalendar (calendar);
			//set the user input value to the calendar date
			setInputValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat,calendar.displaystyle);
			//document.getElementById('divPicker').style.display='block';
			}

			//*******************************function  for when user selected new month on the drop down list **********

			function updateFromMultiMonth (calendar, month) 
			{
			//check the selected index value
			if (isNaN(month.value))
				{
				//get the current month value if user selected wrong index in dropdown (this will not come at any time bcox already we r given value to the ddl)
			month.value = calendar.calendarDate.getUTCMonths() -1;
				//display error message to the user
				alert("Invalid Month");
				return false;
			}

			//if not set the calendar month
			calendar.calendarDate.setUTCMonth(month.value-1);
			//re create the calendar based on user selected month
			createCalendar (calendar);
			//set the input values to the user
			setInputValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat,calendar.displaystyle);
			//document.getElementById('divPicker').style.display='block';
			}

			//************************* function for when user  change the year value *************

			function updateFromMultiYear (calendar, year)
			{
			// if entered year value is not a number
			if (isNaN(year.value))
				{
				// year value
					year.value = calendar.calendarDate.getUTCFullYear();
				alert("Invalid Year");
				return false;
				}

			calendar.calendarDate.setUTCFullYear(year.value);
			//rebuild or recreate the calendar based on user input
			createCalendar (calendar);
			setInputValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat,calendar.displaystyle);
			//document.getElementById('divPicker').style.display='block';
			}

			function updateUserInputDay (calendar, date)
			{
			newDate = new Date (date.value);
			newDate.setUTCDate(newDate.getUTCDate()+1);
			calendar.calendarDate = newDate;
			setInputValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat,calendar.displaystyle);
			//document.getElementById('divPicker').style.display='block';
			}


			//************************* function  for creating  dynamic calendar *******************************

			function createCalendar (calendar)
			{
		
			// declare the variable calHtml1
			var calHtml1;
			//create the table dynamically using DHTML   

			calHtml1 =  ("<table id=\"cal" + calendar.attachedId + "\" class=\"" + calendar.calendarStyle +"\" + cellpadding=0 cellspacing=0 height=\"" + calendar.height +"\"  width=\"" + calendar.width +"\">");
			// add to calHtml1 and  build the calendar header with inherits of static calendar 
			calHtml1 += (buildHeader(calendar));
			calHtml1+=("<tr><td class=\"" + calendar.border +"\"  colspan=7 bgcolor=#3e92ce></td></tr>");
			//add to calHtml1 and build the calendar table for dates
			calHtml1 += buildCalendarTable (calendar);
			//add to calHtml1 and create tr for adjusting space
			calHtml1+=("<tr><td class=\"" + calendar.border +"\"  colspan=7 bgcolor=#3e92ce></td></tr>");
			//add to calHtml1 and create the footer for calendar with today image
			calHtml1+=("<tr height=5  class=\""+ calendar.headerStyle	+ "\" >" + "<td class=\"" + calendar.headerCellStyleLabel + "\" >&nbsp;</td>" + "<td colspan=4 align=center  class=\"" + calendar.headerCellStyleLabel + "\" ><a  style='cursor:hand' onclick=\"setTodayDate(" + calendar.name +  ")\" >Today</a></td>" + " <td colspan=2 class=\"" + calendar.smalltext + "\"  valign=bottom><a style='cursor:hand' onclick='CloseCalendar(" + calendar.name + " )'>close</td>"+ "</tr>");
			//add to calHtml1 and close the table
			calHtml1 += ("</table>");

			//returning or assigning the the calendar table to the div tag
			document.getElementById(calendar.attachedId+ '_calendar_display').innerHTML = calHtml1;	
			// show the calendar to user
			//alert(document.getElementById(calendar.attachedId+ '_calendar_display').innerHTML);
			if(isFF==true)
			 {
			
			  document.getElementById(calendar.attachedId + '_divPicker').style.display='table';
			 }
			else if(isME==true)
			 {
			  document.getElementById(calendar.attachedId + '_divPicker').style.display='block';
			 }
			//alert(calendar.attachedId +'_calendar_display');
			//document.getElementById(calendar.attachedId + '_divPicker').style.display='block';
			//show the controls to the user
			//document.getElementById(calendar.attachedId +'_userSelDate').style.display='block';
			id=calendar.attachedId +'_divPicker';
			
            if(calendar.displaystyle=="Button")
            {
            
            return false;
            }

			}
			//*************************function for closing the calendar ****************************
			function CloseCalendar(calendar)
			{
			
			// set the div tag is invisible mode
			document.getElementById(calendar.attachedId+'_divPicker').style.display="none";
			
			
			}

			//********************************** creating the controls for displaying date,month and year to the user *************

			function buildDropdown(calendar,id,datetime,height,width)
			{
			//declare the varible date  and assign to divtag to it
			var date=document.getElementById(id + '_divdate');

			//if intially div tag contains nothing

			if(date.innerHTML=="")
			{
			//create the contols date for textbox,nonth for dropdown and year for  textbox

			date.innerHTML+=("<input type=text name='day' size=3 id='day'   class= calendar.dateTexts maxlength=2 ><select name='month' id='month'   class=\"" + calendar.ddlText +"\"><option value=1>January</option><option value=2>February</option><option value=3>Mar</option>"
			+"<option value=4>April</option><option value=5>May</option><option value=6>June</option><option value=7>July</option>"
			+"<option value=8>August</option><option value=9>September</option><option value=10>October</option><option value=11>November</option><option value=12>December</option>"
			+"<input type=text name='year' size=4 id='year'  class=\"" + calendar.dateTexts +"\"   maxlength=4>");

			//attach field id to the child controls
			//change the control id day to fieldId_day
			date.childNodes[0].id = id + '_' + date.childNodes[0].id;
			//change the control id month to fieldId_month
			date.childNodes[1].id = id + '_' + date.childNodes[1].id;
			//change the control id year to fieldId_year
			date.childNodes[2].id = id + '_' + date.childNodes[2].id;

			//set the styles to the controls
			date.childNodes[0].style.fontFamily= 'Verdana';
			date.childNodes[0].style.fontsize= '7pt';	
			date.childNodes[0].style.color='black';
			date.childNodes[1].style.fontFamily= 'Verdana';
			date.childNodes[1].style.fontsize= '7pt';	
			date.childNodes[1].style.color='black';
			date.childNodes[2].style.fontFamily= 'Verdana';
			date.childNodes[2].style.fontsize= '7pt';	
			date.childNodes[2].style.color='black';


			// set the sizes to the control based on calendar input values
			//declare the variable total and divide to table width/no of td's 
			var total=width/7;
			//if width is smaller than 180 and greater than 180
			//set the total value
			if(width<180 && width>150)
			{
			total=23;
			}
			//if width is smaller than 180 
			//set the total value
			else if(width<180)
			{
			total=22;
			}
			//if total value is smaller than 27
			//set the total value
			else if(total<27)
			{
			total+=2;
			}
			//set the size of day control
			date.childNodes[0].style.width=1.5*total;
			//set the size of month control
			date.childNodes[1].style.width=3.5*total;
			//set the size of year control
			date.childNodes[2].style.width=2*total;

			}//if close
			//if div contains some thing
			else
			{
			
		
			//date.innerHTML=="";
			}
			//set the field values
			setFieldValue(id,datetime);

			}
			//************************************function for building the calendar header ***********************

			function buildHeader (calendar)
			{

			//assign the next, previous buttons to enable 
			enableLeft = true;
			enableRight = true;
			// check the user selected date not less than january 1 st of 1900 then
			if (calendar.minDate !=minDate) 
			{
			//check the calendar date of the full year is less thean or equal to the minimum date of the year  
				if (calendar.calendarDate.getUTCFullYear() <= calendar.minDate.getUTCFullYear())
				{
				//check the calendar date of the month is less thean or equal to the minimum date  of month

					if (calendar.calendarDate.getUTCMonth() <= calendar.minDate.getUTCMonth())
					{
					//if yes set the left previous button to disable mode
						enableLeft = false;
						
					}
					
				}
				
					
			}


			// check the user selected date not less than january 1 st of 1900 then
			if (calendar.maxDate != maxDate )
			{
			//check the calendar date of the full year is greater than or equal to the maximum date of the year  

				if (calendar.calendarDate.getUTCFullYear() >= calendar.maxDate.getUTCFullYear())
				{
				//check the calendar date of the month is greater than or equal to the maximum date  of month

					if (calendar.calendarDate.getUTCMonth() >= calendar.maxDate.getUTCMonth())
					{
					//if yes set the right next button to disable mode
					
						enableRight = false;
					}
					else
					{
					}
				}
			}
			// declare the varible calHtml2 
			calHtml2 = "";
			// create the table row for header and apply the css class to the header
			calHtml2 +=  (
				"<tr   class=\""
				+ calendar.headerStyle
				+ "\">");
			// add to the table row and create table data for left previous button
			//apply styles to the header left cell
			calHtml2 +=  (
				"<td align=center class=\""
				+ calendar.headerCellStyles
				// check controlleft enable or not when click on icon it call the setPreviousMonth function with calendar name
				+ ((enableLeft)?("\" onclick=\"setPreviousMonth(" + calendar.name + ")"):"")
				+ "\">"
				+ ((enableLeft)?calendar.controlLeft:calendar.controlLeftDisabled)
				+ "</td>");
			// add the table data to the preevious table data and apply css class to the header cell
			calHtml2 +=  (
				"<td align=center colspan=\"5\" class=\""
				+ calendar.headerCellStyleLabel
				+ "\">"
				+ calendar.monthLabels[calendar.calendarDate.getUTCMonth()] 
				//cal the month labels array of the calendar date of the month
				+ " " + calendar.calendarDate.getUTCFullYear()
				// add to the month separated buy comma,add to year of the calendar date of the month
				+ "</td>");
				//add the table data to previous tabledata ,and add the rightenable control 
			calHtml2 +=  (
				"<td align=center class=\""
				// add the css style to the right next month control
				+ calendar.headerCellStyles
				//add the table data to the previous td,it contains enable right control when user click on next month it calls the setNextMonth function

				+ ((enableRight)?("\" onclick=\"setNextMonth(" + calendar.name + ")"):"")
				+ "\">"
					+ ((enableRight)?calendar.controlRight:calendar.controlRightDisabled)
					//close the table data
				+ "</td>");
			//close the table row
			calHtml2 += ("</tr>");
			//create the new table row for displaying week days and apply the weekstyle class to the table row
				calHtml2 +=  (
				"<tr  class=\""
				+ calendar.weekStyle
				+ "\">")
			//assume firstdayof week is zero,and strats day strats from zero(sunday) to 6(saturday)
			for (i = 0; i < 7; i++) {
			//intially add the firstday of week to i that is zero
				showDay = i + calendar.firstDayOfWeek;
				//if show day >6 than again strats from zero
				if (showDay > 6) showDay = showDay - 7;
				//craete table data for displaying week days and css class to the week days
				calHtml2 +=  (
					"<td align=center class=\""
					+ calendar.headerCellStyle
					+ "\">"
					//add the week days to the calendar by calling an daylable array
					+ calendar.dayLabels[showDay]
					//close the table data
					+ "</td>");
					//close the loop
			}
			// close the table row
			calHtml2 += ("</tr>");
			//return all the table information designing the calendar header
			return calHtml2
			}




			// ******************************* function for creating the calendar table ***********************

			function buildCalendarTable (calendar)
			{
			//get first the current date of  the calendar by calling the getFirstCalendarDate function with passing calendar parameter
			currentDate = getFirstCalendarDate(calendar);
			//declare the varible odd assume intailly it is zero
			odd = 0;
			var count=0;
			var row=0;
			//get the first day of calendar,and if it is not the firstday of week until ii becomes true
			while (currentDate.getUTCDay() != calendar.firstDayOfWeek)
			{
			//set the current date to previous date
				currentDate.setUTCDate(currentDate.getUTCDate() - 1);
				count=count+1;
				//close the loop
			}
			//declare the varible calHtml and set it intially nothing
			calHtml = "";
			do
			{
			//add the odd week to 1 that becomes even alternatevely
				odd += 1;
			//create the table row for  for displaying calendar dates for css class check, if odd %2==0 apply evenweekStyle css class,else apply the oddweekstyle css class
			//if no need to apply for different css class for alternatively remove (odd%2)==0) ? calendar.evenWeekStyle : calendar.oddWeekStyle) simply put it calendar.weekStyle
				calHtml +=  (
					"<tr class=\"" + (((odd%2)==0) ? calendar.evenWeekStyle : calendar.oddWeekStyle) + "\">")
				//use the for loop from 0 to 6
				for (i = 0;i < 7;i++)
				{//apply the current day style to calendar day style
					currentDayStyle = calendar.dayStyle;
					//if current day becomes current month of day apply the common day style
					currentEventStyle = calendar.commonDayStyle;
					//set the currentdate format in yyyy/mm/dd
					currentDateString = currentDate.getUTCFullYear() + "/" + (currentDate.getUTCMonth()+1) + "/" + currentDate.getUTCDate();
					//check the current day is less than of minimum date(--) or not
					if (currentDate < calendar.minDate) 
					{
					// call the function CalendarDisabledDay  for disable the calendar date with passing calendar and current date of the calendar
						CalendarDisabledDay (calendar, currentDate,count);
					} 
					//check the current day is greater than the maximum date(--) or not
				
					else if (currentDate > calendar.maxDate) 
					{
					// call the function CalendarDisabledDay  for disable the calendar date with passing calendar and current date of the calendar
				
						CalendarDisabledDay (calendar, currentDate,count);
					}
						//check the current day of the month not equal to the system date of the month
					
					else if (currentDate.getUTCMonth() != calendar.calendarDate.getUTCMonth())
					{
					// call the function CalendarDisabledDay  for disable the calendar date, with passing calendar and current date of the calendar
				
						CalendarDisabledDay (calendar, currentDate,count);
					}
					//check the current date of the month  equal to the system date of the month if its true
					
					else if((currentDate.getUTCDate() == calendar.calendarDate.getUTCDate()))
					{
						//check the current day value is zero(if it is zero it is sunday) or six (if it is six it is saturday)
						if ((currentDate.getUTCDay() == 0) || (currentDate.getUTCDay() == 6))
						{
						//if above condition satisfied allow the week end dates and apply the css style is week end style
							if (calendar.allowWeekends == true)
							{
							// call the CalendarEnabledDay function for displaying the calendar date
								CalendarEnabledDay (calendar, currentDate, calendar.todayDayStyle);
							} 
							else 
							{
							//if  above condition not satisfied Disable the calendar date for that call the CalendarDisabledDay function
								CalendarDisabledDay (calendar, currentDate,count);
								//get the month of the calendar month	
								month = calendar.calendarDate.getUTCMonth();
								//add the month index  to 1,bcoz month starts from zero so if u addded 1 it starts from 1
								calendar.calendarDate.setUTCDate(calendar.calendarDate.getUTCDate()+1);
								//if the month index is not equal to calendardate of the month
								if (month != calendar.calendarDate.getUTCMonth())
								{
									//rebuild or update the calendar
									createCalendar(calendar);
								}
								//set the input value of calendar date for that call the setInputValue function
								setFieldValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat);
								//close else loop
							}
							//close the if loop
						}
						
							else {
							
							if (calendar.allowWeekends == true)
							{
							// call the CalendarEnabledDay function for displaying the calendar date
								CalendarEnabledDay (calendar, currentDate, calendar.todayDayStyle);
							} 
							else 
							{
							//if  above condition not satisfied Disable the calendar date for that call the CalendarDisabledDay function
								CalendarDisabledDay (calendar, currentDate,count);
								//get the month of the calendar month	
								month = calendar.calendarDate.getUTCMonth();
								//add the month index  to 1,bcoz month starts from zero so if u addded 1 it starts from 1
								calendar.calendarDate.setUTCDate(calendar.calendarDate.getUTCDate()+1);
								//if the month index is not equal to calendardate of the month
								if (month != calendar.calendarDate.getUTCMonth())
								{
									//rebuild or update the calendar
									createCalendar(calendar);
								}
								//set the input value of calendar date for that call the setInputValue function
								setFieldValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat);
							}
						}
					}
						//check the current day value is zero(if it is zero it is sunday) or six (if it is six it is saturday)
					
					else if ((currentDate.getUTCDay() == 0) || (currentDate.getUTCDay() == 6))
					{
					//Allow the week ends 
						if (calendar.allowWeekends == true)
						{
						//apply the holidayDayStyle css style to the calendar date
							style = calendar.holidayDayStyle
								//check the loop from zero to event days length
							for (j=0; j < calendar.eventDates.length; j++)
							{
								//if the eventdates of the calendar is same as the currentDateString(yyyy/mm/dd format)
								if (calendar.eventDates[j][0] == currentDateString) 
								{  
									//assign the eventDayStyle to the current date
									style = calendar.eventDayStyle;
									//cal the render function
									RenderDayEvent (calendar, currentDate, style, calendar.eventDates[j][0]);
								}//close the if loop
							}//close the for loop
							//get the style from above loop,if style becomes holidayDayStyle 
							if (style == calendar.holidayDayStyle)
							{
								//enable the calendar dates
								CalendarEnabledDay (calendar, currentDate, style);
							}//close the  if loop
						} //close the if loop
						else 
						{
							//disable the calendar dates
							CalendarDisabledDay (calendar, currentDate,count);	
						}
					} 
					else {
						//if the allow the week days i.e currentdate of the day not zero or six then
						if (calendar.allowWeekdays == true)
						{
							//apply the css style is the common day style to current date
							style = calendar.commonDayStyle
							//check the loop from zero to event days length
							for (j=0; j < calendar.eventDates.length; j++)
							{
								//if the eventdates of the calendar is same as the currentDateString(yyyy/mm/dd format)
								if (calendar.eventDates[j][0] == currentDateString) 
								{  
									//assign the eventDayStyle to the current date
									style = calendar.eventDayStyle;
									//cal the render function
									RenderDayEvent (calendar, currentDate, style, calendar.eventDates[j][0]);
								}
							}
								//get the style from above loop,and if the style become commonDayStyle then
							if (style == calendar.commonDayStyle)
							{ 
								//enable the calendar
								CalendarEnabledDay (calendar, currentDate, style);
							}
						} 
						else 
						{ //disable the calendar
							CalendarDisabledDay (calendar, currentDate,count);	
						}
					}
					//finally add the one day to the current day
					currentDate.setUTCDate(currentDate.getUTCDate() + 1);	
				}
				//close the table row
				calHtml += ("</tr>");
				row=row+1;
				
				}
				//while loop checks the current month of the calendar is system date of the calendar or not
				//loop excutes continuousely untill the current month becomes increase,if currrent month of calendar<than the system date month loop comes out and it goes to above while loop
				while (currentDate.getUTCMonth() == calendar.calendarDate.getUTCMonth());
			//return all the calendar table what we done upto
			if(row<=5)
				{
				calendarNull(calendar);
				}
				if(count>5)
				{
				calendarNullDate(calendar);
				}
			return calHtml;
			}

			//*******************************function for  disable the calendar date ********************************

			function CalendarDisabledDay (calendar, currentDate,count)
			{
			// if day is not the current month  calendar date will be dis appeared in the calendar
			//create the table data and apply the css day class
			if(count>5)
			{

			} 
			else
			{

			calHtml += ('<td align=center class="day">');
			// apply the disabledDayStyle class to span tag
			calHtml += ("<span class=\"" + calendar.disabledDayStyle + "\">");
			// get the current date of the calendar when dates are previous or next month days
			//calHtml += (currentDate.getUTCDate());
			calHtml+=("&nbsp;");
			//close the span
			calHtml += ("</span>");
			//close the table data
			calHtml += ("</td>");
			}
			}

			//*******************************function for  enable the calendar date/display the calendar date ********************************

			// this function call every time  when current date is the current month of the day
			function CalendarEnabledDay (calendar, currentDate, dayStyle)
			{   

			// css class style is  day style is assign to currentdaystyle
			currentDayStyle = dayStyle;	
			// create table data for displaying the date with css class name=day
			calHtml += ('<td align=center class="day">');
			// in the table data create span tag and apply the day style to current date
			// when user select the date it will call the  selectDate function with passing calendar name and selected date of the calendar
			calHtml += ("<span align=center class=\"" + dayStyle + "\"  +  onclick=\"selectDate(" + calendar.name + ", " + currentDate.getUTCDate() + ")\" >");
			//display the current date
			calHtml += (currentDate.getUTCDate());
			// close the span tag
			calHtml += ("</span>");
			//close the table data tag
			calHtml += ("</td>");
			}

			//******************************* function for rendering the calendar when user selects/click on the date *************

			function RenderDayEvent (calendar, currentDate, dayStyle, eventId)
			{
			//get the style of the day and assign the style to currentday style
			currentDayStyle = dayStyle;
			// create the table data
			calHtml += ('<td align=center class="day">');
			// create span tag and assign the current date to it with css class,when user selects an date it will cal the selectdate function
			calHtml += ("<span class=\"" + dayStyle + "\" onclick=\"selectDate(" + calendar.name + ", " + currentDate.getUTCDate() + "," + dayStyle +"); " + calendar.name + ".selectEvent('" + eventId + "')\">");
			//get the current date of the calendar
			calHtml += (currentDate.getUTCDate());
			//close the span tag
			calHtml += ("</span>");
			//close the table data
			calHtml += ("</td>");
			}

			// *************************function for updating userInputValues with passing userInputvalue id and date 

			function setFieldValue(fieldId, date,dateformat)
			{

			// assign the  userInput year text value to the selected year value 
			document.getElementById(fieldId + '_year').value = date.getUTCFullYear();
			// assign the userInput months to the selected month index
			document.getElementById(fieldId + '_month').selectedIndex = date.getUTCMonth();
			// assign the  userInput day text value to the selected day value
			document.getElementById(fieldId + '_day').value = date.getUTCDate();
			//show or dispaly the calendar control to the user
			if(isFF==true)
			{
			document.getElementById(fieldId +'_calendar_display').style.display='table';
			}
			else
			{
			
			document.getElementById(fieldId +'_calendar_display').style.display='block';
			}
			//setInputValue(fieldId,date,dateformat,'Extend','Label')
			// show or display the controls to the user
			//document.getElementById(fieldId +'_userSelDate').style.display='block';
			//new functionality
			//	document.getElementById(fieldId + '_calendar_display').innerHTML = "";	
			}
			// *************************function for updating userInputValues with passing userInputvalue id and date 

			function setInputValue(fieldId, date,dateformat,enable,displaystyle)
			{
			
			
			// assign the userInputValue to the selected date of the user it is in MM/DD/YYYY format
			if(dateformat=="mmddyyyy"){
			 strvalue = (date.getUTCMonth()+1) + "/" + date.getUTCDate()  + "/" + date.getUTCFullYear();}
			 else if(dateformat=="mmyyyydd")
			 {
			 strvalue = (date.getUTCMonth()+1) + "/" + date.getUTCFullYear()  + "/" + date.getUTCDate();
			 }
			 else if(dateformat=="yyyyddmm")
			 {
			  strvalue = date.getUTCFullYear() + "/" + date.getUTCDate()  + "/" + (date.getUTCMonth()+1);
			 }
			 else if(dateformat=="yyyymmdd")
			 {
			   strvalue = date.getUTCFullYear() + "/" + (date.getUTCMonth()+1)  + "/" + date.getUTCDate();
			 }
			 else if(dateformat=="ddyyyymm")
			 {
			  strvalue =date.getUTCDate()+ "/" + date.getUTCFullYear()  + "/" + (date.getUTCMonth()+1);
			 }
			 else if(dateformat=="ddmmyyyy")
			 {strvalue= (date.getUTCDate()) + "/" + (date.getUTCMonth()+1) + "/" + date.getUTCFullYear();}
			 else
			 {
			 strvalue=date;
			 }
			 if(displaystyle=="Label")
			 document.getElementById(fieldId).innerHTML=strvalue;
			 else
             document.getElementById(fieldId).value=strvalue;
             if(enable=="Extended")
			{
			
			// assign the  userInput year text value to the selected year value 
			document.getElementById(fieldId + '_year').value = date.getUTCFullYear();
			// assign the userInput months to the selected month index
			document.getElementById(fieldId + '_month').selectedIndex = date.getUTCMonth();
			// assign the  userInput day text value to the selected day value
			document.getElementById(fieldId + '_day').value = date.getUTCDate();
			}
			//show or dispaly the calendar control to the user
			if(isFF==true)
			{
			
			document.getElementById(fieldId +'_divPicker').style.display='table';
			}
			else
			{
			document.getElementById(fieldId +'_calendar_display').style.display='block';
			}
			// show or display the controls to the user
			//document.getElementById(fieldId +'_userSelDate').style.display='block';
			//new functionality
			//	document.getElementById(fieldId + '_calendar_display').innerHTML = "";	
			}

			//*****************************function for displaying Today date when user select today button ******************

			function setTodayDate(calendar)
			{
			//declare the varaible dt and create object for date	
				var dt=new Date();
			if(calendar.enable=="Extended")
			{
			// set the userInput_Year value to the current date of the year    
			document.getElementById(calendar.attachedId +"_year").value = dt.getFullYear();
			//set the userinputMonth index to current date of month value
			document.getElementById(calendar.attachedId + "_month").selectedIndex = dt.getMonth();
			// set the userInput_day to current date of the day 
			document.getElementById(calendar.attachedId + "_day").value =dt.getDate();
			}
			// write the currentDateString format in MM/DD/YYYY
			if(calendar.dateformat=="mmddyyyy"){
			 dt = (dt.getUTCMonth()+1) + "/" + dt.getUTCDate()  + "/" + dt.getUTCFullYear();}
			 else if(calendar.dateformat=="mmyyyydd")
			 {
			 dt = (dt.getUTCMonth()+1) + "/" + dt.getUTCFullYear()  + "/" + dt.getUTCDate();
			 }
			 else if(calendar.dateformat=="yyyyddmm")
			 {
			  dt = dt.getUTCFullYear() + "/" + dt.getUTCDate()  + "/" + (dt.getUTCMonth()+1);
			 }
			 else if(calendar.dateformat=="yyyymmdd")
			 {
			   dt = dt.getUTCFullYear() + "/" + (dt.getUTCMonth()+1)  + "/" + dt.getUTCDate();
			 }
			 else if(calendar.dateformat=="ddyyyymm")
			 {
			  dt =dt.getUTCDate()+ "/" + dt.getUTCFullYear()  + "/" + (dt.getUTCMonth()+1);
			 }
			 else if(calendar.dateformat=="ddmmyyyy")
			 {dt= (dt.getUTCDate()) + "/" + (dt.getUTCMonth()+1) + "/" + dt.getUTCFullYear();}
			 else if(calendar.dateformat="UTCFormat")
			 {
			 dt=dt;
			 }	
			//assign the userInputValue to current date
				document.getElementById(calendar.attachedId).value=dt;	
				//update the calendar or rebuild the calendar
				//cal1 = new Calendar ("cal1", calendar.attachedId, new Date());
				// createCalendar (cal1);
				// changed functinality
				//if the present date selected calender will be in visible mode

			document.getElementById(calendar.attachedId + '_divPicker').style.display='none';
			}

			// // ***************************function for displaying user selected date, with passing calendar,date and style of selected date ********************************


			function selectDate (calendar, day,style)
			{
			//if the calendar modified or !read only
			if (!calendar.viewOnly)
				{
				//get the style of selected day style
				currentStyle=style;
				// assign the calendar day stule to the todaydaystyle
				calendar.calendarDate.style=this.todayDayStyle;
				//set the calendar date to the  selected day
				calendar.calendarDate.setUTCDate(day);
			//cal the setInputValue function and assign the userinput  value to the selected day
				setInputValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat,calendar.enable,calendar.displaystyle);
			//re create the calendar with updated values	
				createCalendar (calendar);
				
				//document.getElementById(calendar.attachedId +'_userSelDate').style.display='none';
				document.getElementById(calendar.attachedId + '_divPicker').style.display='none';
			}
			}

			// *****************************function for  previous month selection************************************

			function setPreviousMonth (calendar)
			{
			// when user select controlleft button that represents previous month symbol(<<)
			//set the remove 1 from the calendar currentdate month
			calendar.calendarDate.setUTCMonth(calendar.calendarDate.getUTCMonth() - 1);
			//update the calendar or recreate the calendar
			createnewCalendar (calendar);
			// cal the setinputValue function for updating the user input value to calendar updated month
			setInputValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat,calendar.enable,calendar.displaystyle);
			
			//update the calendar and show control to the user
			//document.getElementById(calendar.attachedId + '_divPicker').style.display='block';
			}

			//*************************** function for next month selection *********************

			function setNextMonth (calendar)
			{

				var dt=new Date();
			// add 1 to the current month of the callendar date     
			calendar.calendarDate.setUTCMonth(calendar.calendarDate.getUTCMonth() + 1);
			//cal and assign the user inputs to selected month
			//document.getElementById(calendar.attachedId+ '_calendar_display').innerHTML="";
			//create the calendar with new values
			createnewCalendar (calendar);
			setInputValue(calendar.attachedId, calendar.calendarDate,calendar.dateformat,calendar.enable,calendar.displaystyle);
			//update and re create the calendar control
			//document.getElementById(calendar.attachedId +'_divdate').style.display='block';
			}

			//*********************************create the new calendar **************************************

			function createnewCalendar (calendar)
			{
			//declare the variable calHtml1
			var calHtml1;
			//create the table dynamically using DHTML   
			//calHtml1 =  ("<table id=\"calselDates_" + calendar.attachedId + "\" class=\"" + calendar.calendarStyle +"\" + cellpadding=0 cellspacing=0 height=20 width=200>");
           
			// create the table for calendar with id =cal_UserInput,height=180,width=200
			calHtml1 =  ("<table id=\"cal" + calendar.attachedId + "\" class=\"" + calendar.calendarStyle +"\" + cellpadding=0 cellspacing=0 height=\"" + calendar.height +"\"  width=\"" + calendar.width +"\">");
			// add to calHtml1 and  build the calendar header with inherits of static calendar 
			calHtml1 += (buildHeader(calendar));
			calHtml1+=("<tr><td colspan=7 bgcolor=#3e92ce></td></tr>");
			//add to calHtml1 and build the calendar table for dates
			calHtml1 += buildnewCalendarTable (calendar);
			//add to calHtml1 and create tr for adjusting space
			calHtml1+=("<tr><td colspan=7 bgcolor=#3e92ce></td></tr>");
			//add to calHtml1 and create the footer for calendar with today image
			calHtml1+=("<tr height=5  class=\""+ calendar.headerStyle	+ "\" >" + "<td class=\"" + calendar.headerCellStyleLabel + "\" >&nbsp;</td>" + "<td colspan=4 align=center  class=\"" + calendar.headerCellStyleLabel + "\" ><a  style='cursor:hand' onclick=\"setTodayDate(" + calendar.name +  ")\" >Today</a></td>" + " <td colspan=2 class=\"" + calendar.smalltext + "\"  valign=bottom><a style='cursor:hand' onclick='CloseCalendar(" + calendar.name +  ")'>close</td>"+ "</tr>");
			//add to calHtml1 and close the table
			calHtml1 += ("</table>");
			document.getElementById(calendar.attachedId +'_divPicker').style.display='block';
			//assign the calHtml1 to user input div tag
			document.getElementById(calendar.attachedId+ '_calendar_display').innerHTML = calHtml1;	
			
			// show the calendar to user
			if(isFF==true)
			{
			//createStyles(calendar.attachedId +'_divPicker',calendar.height,calendar.attachedId ,calendar.width);
			//document.getElementById(calendar.attachedId + '_calendar_display').style.display='table';
			document.getElementById(calendar.attachedId +'_divPicker').style.display='block';
			}
			else if(isME==true)
			{
			//document.getElementById(calendar.attachedId + '_calendar_display').style.display='block';
			document.getElementById(calendar.attachedId +'_divPicker').style.display='block';
			}
			//show the controls to the user
			//document.getElementById(calendar.attachedId +'_divPicker').style.display='block';
			id=calendar.attachedId +'_divPicker';

			timerId=setTimeout("Close('"+id+"')", 5000)
			}
			/*function setTime(id)
			{

			setTimeout("Close('"+id+"')", 5000)

			}*/


			function buildnewCalendarTable (calendar)
			{
			//get first the current date of  the calendar by calling the getFirstCalendarDate function with passing calendar parameter
			currentDate = getFirstCalendarDate(calendar);
			//declare the varible odd assume intailly it is zero
			odd = 0;
			var count=0;
			var row=0;
			//get the first day of calendar,and if it is not the firstday of week until ii becomes true
			while (currentDate.getUTCDay() != calendar.firstDayOfWeek)
			{
			//set the current date to previous date
				currentDate.setUTCDate(currentDate.getUTCDate() - 1);
				count=count+1;
				//close the loop
			}

			//declare the varible calHtml and set it intially nothing
			calHtml = "";
			do
			{
			//add the odd week to 1 that becomes even alternatevely
			odd+=1;
			//create the table row for  for displaying calendar dates for css class check, if odd %2==0 apply evenweekStyle css class,else apply the oddweekstyle css class
			//if no need to apply for different css class for alternatively remove (odd%2)==0) ? calendar.evenWeekStyle : calendar.oddWeekStyle) simply put it calendar.weekStyle
				calHtml +=  (
					"<tr class=\"" + (((odd%2)==0) ? calendar.evenWeekStyle : calendar.oddWeekStyle) + "\">")
				//use the for loop from 0 to 6
				for (i = 0;i < 7;i++)
				{//apply the current day style to calendar day style
					currentDayStyle = calendar.dayStyle;
					//if current day becomes current month of day apply the common day style
					currentEventStyle = calendar.commonDayStyle;
					//set the currentdate format in yyyy/mm/dd
					currentDateString = currentDate.getUTCFullYear() + "/" + (currentDate.getUTCMonth()+1) + "/" + currentDate.getUTCDate();
					//check the current day is less than of minimum date(--) or not
					if (currentDate < calendar.minDate) 
					{
					// call the function CalendarDisabledDay  for disable the calendar date with passing calendar and current date of the calendar
						CalendarDisabledDay (calendar, currentDate,count);
					} 
					//check the current day is greater than the maximum date(--) or not
				
					else if (currentDate > calendar.maxDate) 
					{
					// call the function CalendarDisabledDay  for disable the calendar date with passing calendar and current date of the calendar
				
						CalendarDisabledDay (calendar, currentDate,count);
					}
						//check the current day of the month not equal to the system date of the month
					
					else if (currentDate.getUTCMonth() != calendar.calendarDate.getUTCMonth())
					{
					// call the function CalendarDisabledDay  for disable the calendar date, with passing calendar and current date of the calendar
				
						CalendarDisabledDay (calendar, currentDate,count);
					}
					//check the current date of the month  equal to the system date of the month if its true
					
					else if((currentDateString ==document.getElementById(calendar.attachedId).value))
					{
						//check the current day value is zero(if it is zero it is sunday) or six (if it is six it is saturday)
						if ((currentDate.getUTCDay() == 0) || (currentDate.getUTCDay() == 6))
						{
						//if above condition satisfied allow the week end dates and apply the css style is week end style
							if (calendar.allowWeekends == true)
							{
							// call the CalendarEnabledDay function for displaying the calendar date
								CalendarEnabledDay (calendar, currentDate, calendar.todayDayStyle);
							} 
							else 
							{
							//if  above condition not satisfied Disable the calendar date for that call the CalendarDisabledDay function
								CalendarDisabledDay (calendar, currentDate,count);
								//get the month of the calendar month	
								month = calendar.calendarDate.getUTCMonth();
								//add the month index  to 1,bcoz month starts from zero so if u addded 1 it starts from 1
								calendar.calendarDate.setUTCDate(calendar.calendarDate.getUTCDate()+1);
								//if the month index is not equal to calendardate of the month
								if (month != calendar.calendarDate.getUTCMonth())
								{
									//rebuild or update the calendar
									createCalendar(calendar);
								}
								//set the input value of calendar date for that call the setInputValue function
								setFieldValue(calendar.attachedId, calendar.calendarDate);
								//close else loop
							}
							//close the if loop
						}
						
							else {
							
							if (calendar.allowWeekends == true)
							{
							// call the CalendarEnabledDay function for displaying the calendar date
								CalendarEnabledDay (calendar, currentDate, calendar.todayDayStyle);
							} 
							else 
							{
							//if  above condition not satisfied Disable the calendar date for that call the CalendarDisabledDay function
								CalendarDisabledDay (calendar, currentDate,count);
								//get the month of the calendar month	
								month = calendar.calendarDate.getUTCMonth();
								//add the month index  to 1,bcoz month starts from zero so if u addded 1 it starts from 1
								calendar.calendarDate.setUTCDate(calendar.calendarDate.getUTCDate()+1);
								//if the month index is not equal to calendardate of the month
								if (month != calendar.calendarDate.getUTCMonth())
								{
									//rebuild or update the calendar
									createCalendar(calendar);
								}
								//set the input value of calendar date for that call the setInputValue function
								setFieldValue(calendar.attachedId, calendar.calendarDate);
							}
						}
					}
						//check the current day value is zero(if it is zero it is sunday) or six (if it is six it is saturday)
					
					else if ((currentDate.getUTCDay() == 0) || (currentDate.getUTCDay() == 6))
					{
					//Allow the week ends 
						if (calendar.allowWeekends == true)
						{
						//apply the holidayDayStyle css style to the calendar date
							style = calendar.holidayDayStyle
								//check the loop from zero to event days length
							for (j=0; j < calendar.eventDates.length; j++)
							{
								//if the eventdates of the calendar is same as the currentDateString(yyyy/mm/dd format)
								if (calendar.eventDates[j][0] == currentDateString) 
								{  
									//assign the eventDayStyle to the current date
									style = calendar.eventDayStyle;
									//cal the render function
									RenderDayEvent (calendar, currentDate, style, calendar.eventDates[j][0]);
								}//close the if loop
							}//close the for loop
							//get the style from above loop,if style becomes holidayDayStyle 
							if (style == calendar.holidayDayStyle)
							{
							
								//enable the calendar dates
								CalendarEnabledDay (calendar, currentDate, style);
							}//close the  if loop
						} //close the if loop
						else 
						{
							//disable the calendar dates
							CalendarDisabledDay (calendar, currentDate,count);	
						}
					} 
					else {
						//if the allow the week days i.e currentdate of the day not zero or six then
						if (calendar.allowWeekdays == true)
						{
							//apply the css style is the common day style to current date
							style = calendar.commonDayStyle
							//check the loop from zero to event days length
							for (j=0; j < calendar.eventDates.length; j++)
							{
								//if the eventdates of the calendar is same as the currentDateString(yyyy/mm/dd format)
								if (calendar.eventDates[j][0] == currentDateString) 
								{  
									//assign the eventDayStyle to the current date
									style = calendar.eventDayStyle;
									//cal the render function
									RenderDayEvent (calendar, currentDate, style, calendar.eventDates[j][0]);
								}
							}
								//get the style from above loop,and if the style become commonDayStyle then
							if (style == calendar.commonDayStyle)
							{ 
								//enable the calendar
								CalendarEnabledDay (calendar, currentDate, style);
							}
						} 
						else 
						{ //disable the calendar
							CalendarDisabledDay (calendar, currentDate,count);	
						}
					}
					//finally add the one day to the current day
					currentDate.setUTCDate(currentDate.getUTCDate() + 1);	
				}
				//close the table row
				calHtml += ("</tr>");
				row=row+1;
				
				}
				//while loop checks the current month of the calendar is system date of the calendar or not
				//loop excutes continuousely untill the current month becomes increase,if currrent month of calendar<than the system date month loop comes out and it goes to above while loop
				while (currentDate.getUTCMonth() == calendar.calendarDate.getUTCMonth());
			//return all the calendar table what we done upto
			if(row<6)
				{
				calendarNull(calendar);
				}
				if(count>5)
				{
				calendarNullDate(calendar);
				}
			return calHtml;
			}
			function calendarNull(calendar)
			{
			calHtml +=  (
				"<tr height=20  class=\""
				+ calendar.weekStyle
				+ "\">")
			//assume firstdayof week is zero,and strats day strats from zero(sunday) to 6(saturday)
			for (i = 0; i < 7; i++) {
					calHtml +=  (
					"<td align=center class=\""
					+ calendar.headerCellStyle
					+ "\">"
					//add the week days to the calendar by calling an daylable array
					+ "&nbsp;"
					//close the table data
					+ "</td>");
					//close the loop
			}
			// close the table row
			calHtml += ("</tr>");
			}



			function calendarNullDate(calendar)
			{
			calHtml +=  (
				"<tr height=19  class=\""
				+ calendar.weekStyle
				+ "\">")
			//assume firstdayof week is zero,and strats day strats from zero(sunday) to 6(saturday)
			for (i = 0; i < 7; i++) {
					calHtml +=  (
					"<td align=center class=\""
					+ calendar.headerCellStyle
					+ "\">"
					//add the week days to the calendar by calling an daylable array
					+ "&nbsp;"
					//close the table data
					+ "</td>");
					//close the loop
			}
			// close the table row
			calHtml += ("</tr>");
			}