var _getNewEventTemplate = function(){

				var _html='<div id="defaultNewEventTemplate" class="calendarTemplate newEventTemplate">	'
							+'	<div class="aPointer p-left " style="display: block; z-index: 2; " ></div> 	'
							+'	<div class="acalclosebtn topright closeNewEvent"></div>	'
							+'	<div class="header" >	'
							+'		Create New Event	'
							+'	</div>	'
							+'	<div class="formRow">'
							+'			<div class="fleft">	'
							+'				<label>Name: </label>'			
							+'				<div class="value"><input type="text" name="eventName" style="width:19em;" id="eventName"></div>'			
							+'			</div>		'	
							+'	</div>		'			
							+'	<div class="formRow">'
							+'			<label>Time: </label>'			
							+'			<div class="value">'
							+'				<input type="Text" name="eventStartDate" style="width:5em;" id="eventStartDate"/>'
							+'				<input type="Text" name="eventStartTime" style="width:4em;" id="eventStartTime"/>'
							+'				<input type="Text" name="eventEndDate" style="width:5em;" id="eventEndDate"/>'
							+'				<input type="Text" name="eventEndTime" style="width:4em;" id="eventEndTime"/>'
							+'			</div>'			
							+'	</div>		'	
							+'	<div class="formRow">'			
							+'			<div class="fleft" style="margin-right:65px;">	'
							+'				<label>All Day?</label>'			
							+'				<div class="value"><input type="checkbox" class="inputbox" id="allDayEvent"/></div>'			
							+'			</div>	'	
							+'			<div class="fleft">	'
							+'				<label>Group: </label>'			
							+'				<div class="value"><select name="eventGroup" style="width:10em; border:1px solid #C3D9FF;"  id="eventGroup"></select></div>'
							+'			</div>'	
							+'	</div>		'								
							+'	<div class="formRow">'
							+'			<label>Description: </label>'			
							+'			<div class="value"><textarea id="eventDescription" cols="32" rows="2"></textarea></div>'			
							+'	</div>		'	 
							+'		<div class="actions">'
							+'			<a href="javascript:rzAddEvent();" id="addEventBtn" name="edit" class="buttonSmall">Save</a>  '
							+'			<a href="javascript:rzUpdateEvent();" id="updateEventBtn" name="Update" class="buttonSmall" style="display:none;">Update</a> '
							+'			<a href="javascript:rzCloseAddEvent();" name="delete" class="buttonSmall">Close</a>'
							+'		</div>'
							+'	</div>';
					return _html;
};
		Web2Cal.defaultPlugins=function()
		{
		}

		/**
		 * Utility function. Invoked when creating a new event. Populates Date fields. 
		 * Loads the list of categories (groups). If event is all day, Changes time automatically.
		 * 
		 * @param {Object} obj - Event
		 * @param {Object} groups - List of groups 
		 * @param {Object} allday - Boolean to indicate if event is all day
		 * 
		 */
		Web2Cal.defaultPlugins.onNewEvent=function(obj, groups, allday)
		{	  
			var newevt=jQuery("#defaultNewEventTemplate"); 
			//Clear out and reset form
			newevt.find("#eventDesc").val("").end()
				.find("#eventName").val("").focus().end()
				.find("#eventStartDate").val( obj.startTime.toString("MM/dd/yyyy")).end() 
			 	.find("#eventEndDate").val(obj.endTime.toString("MM/dd/yyyy")).end()				
				.find("#addEventBtn").show().end()
				.find("#updateEventBtn").hide().end();
				 
		 	if(allday) 
				newevt.find("#allDayEvent").attr("checked", true).end()				
					  .find("#eventStartTime").val("").end()
					  .find("#eventEndTime").val(""); 
			else 
				newevt.find("#allDayEvent").attr("checked", false).end()
					.find("#eventStartTime").val( obj.startTime.toString("h:mm tt") ).end()
					.find("#eventEndTime").val( obj.endTime.toString("h:mm tt") ); 

			//display a list of groups to select from.
			var groupDD=newevt.find("#eventGroup").get(0);
			removeAllOptions(groupDD);
			for(var g in groups)
			{	
				if(!groups.hasOwnProperty(g))continue;
				var gId = groups[g].groupId;
				addOption(groupDD, groups[g].groupName,groups[g].groupId,false);
			} 
			if(obj.group && obj.group.groupId)	
				newevt.find("#eventGroup").val(obj.group.groupId); 
			
		}
		/**
		 * Utility Function. Reads user's input into New Event form.
		 * Constructs an object with a random event id and returns
		 * 
		 * @return Event Object
		 */
		Web2Cal.defaultPlugins.getNewEventObject=function()
		{
			var newEventContainer = jQuery("#defaultNewEventTemplate"); 
			var name=newEventContainer.find( "#eventName").val();
			var grp=newEventContainer.find("#eventGroup").val();
			var grpName=newEventContainer.find("#eventGroup  option:selected").text(); 
			var strtTime=newEventContainer.find("#eventStartTime").val();
			var endTime=newEventContainer.find("#eventEndTime").val();
			var startDate=newEventContainer.find("#eventStartDate").val();
			var endDate=newEventContainer.find("#eventEndDate").val();
			var description=newEventContainer.find("#eventDescription").val();
			 
			if(name=="")
			{
				name="No Title";
			}
			
			var alldaybox=jQuery("#allDayEvent", newEventContainer).get(0);
			var allday=alldaybox.checked;
			var start	=	getDateFromStrings(startDate, strtTime);
			var end		=	getDateFromStrings(endDate, endTime);			 
			if(allday)
			{
				start.setHours(0,0,0);
				end.setHours(0,0,0);
			} 
			var newev={name:name,  startTime:start, endTime:end
						, allDay:allday
						, group:{groupId:grp, name: grpName}  
						, eventId: Math.ceil(999*Math.random()) 
						, description: description
						};
			return newev; 
		}

	
		
		/**
		 * Utility function to create date object from date string and time string
		 * @param dateString - Date String mm/dd/yyyy
		 * @param timeString - Time String HH:MM AM/PM
		 * @return Date Object
		 */
		function getDateFromStrings(dateString, timeString)
		{
		    var dt = Date.parse(dateString + " "+timeString);
		    return dt;
		}
		Web2Cal.defaultPlugins.load=function(opts)
		{
			var options = opts || new Array();
			var createWeekEventTemplate=function()
			{
				var _html='<div class="calendarTemplate"  id="dayWeekEventTemplate" style="display:none;"> '
							+''
							+' <div class="header" style="">'
							+' 	${formattedStartTime} - ${formattedEndTime}'
							+' </div>	'
							+' <div class="body"  style="padding:1px;">'
							+' 	${eventName}'
							+' </div> '
							+''
						+' </div>';
				return _html;
			}
			var createRecurEventOptions=function()
			{
				var _html='	'
						+'<div id="editRecurEventOptions" style="display:none;"> '
						+'	<P>'
						//+'		Would you like to change only this event or all events in the series?'
						+Web2Cal.LANG.LABEL_EDIT_RECUR_EVENT_DESC
						+'	</P>'
						+'	<input type="button" tabindex="1" class="button" value="Only this instance" id="recurEvent_SAVEONE" />'
						+'	<input type="button" tabindex="2" class="button" value="All events in the series" id="recurEvent_SAVEALL" />'
						//+'	<input type="button" tabindex="3" class="button" value="All following" id="recurEvent_SAVEFOLLOWING" />'
						+'	<input type="button" tabindex="4" class="button" value="Cancel" id="recurEvent_CANCEL" />'
						+'</div>';
				return _html;
			}
			var createWeekSlotTemplate= function()
			{
				var _html='<div class="calendarTemplate"  id="wsSlotTemplate" style="display:none;"> '
							+'		<div>'
							+'			${name}  '
							+'		</div>'
							+'	</div>';
				return _html;
			}
			var createMonthEventTemplate=function()
			{
				var _html='<div class="calendarTemplate"  id="monthEventTemplate" style="display:none;"> '
						+'			<div  style="">'
						+'					${formattedStartTime} - ${eventName}'
						+'			</div>	'
						+'	</div>';
				return _html;
			}
			var createWorkshiftTemplate=function()
			{ 
				var _html = '<div class="calendarTemplate"  id="workshiftEventTemplate" style="display:none;"> '
								+'<div class="header" style="">'
								+'	${formattedStartTime} - ${formattedEndTime}'
								+'</div>	'
								+'<div class="body"  style="padding:1px;">'
								+'	${name}   '
								+'</div> '
							+'</div>';
				return _html;
			}
			var createDefaultPreview = function()
			{
				var _html='<div id="_dapreviewTemplate"  class="calendarTemplate fullPreviewTemplate " style="display:none">'
						+'<div class="wrap0"><div class="wrap1"><div class="wrap2"><div class="wrap4"><div class="whitebg">'
						+'		<div class="aPointer p-left" style="display: block; z-index: 2; "></div>'
						+'		<div class="header">'
						+'			${eventName}'
						+'		</div>' 
						+'		<div class="prevRow">	'		
						+'			<label>From: </label>'		
						+'			<div class="value">${_formattedStartDate} ${formattedStartTime}</div>'		
						+'		</div>	'		
						+'		<div class="prevRow">	'		
						+'			<label>To: </label>'		
						+'			<div class="value">${_formattedEndDate} ${formattedEndTime}</div>'		
						+'		</div>	'	
						+'		<div class="prevRow">	'		
						+'			<label>Description: </label>'		
						+'			<div class="value">${description}</div>'		
						+'		</div>	'	 
						+'		<div class="actions">'
						+'			<a href="javascript:rzEditEvent(\'${eventId}\');" name="edit" class="buttonSmall">Edit</a>'
						+'			<a href="javascript:rzDeleteEvent(\'${eventId}\');" name="delete" class="buttonSmall">Delete</a>'
						+'		</div>' 
						+'	</div></div></div></div></div>'
						+' </div>';
					return _html;
			}
			var createMonthAllDayTemplate=function()
			{
				var _html='<div class="calendarTemplate"  id="monthAllDayTemplate" style="display:none;">'
							//+'	<a href="#" eventId="${eventId}">'
							+'			<span>${formattedStartTime}</span> - <span>${formattedEndTime}</span>	'
							+'			<span>${eventName}</span>'
							//+'  </a> '
							+'</div>';
				return _html;
			} 
			var createQuickFilterTemplate=function()
			{
				var _html='<div id="quickFilterTemplate" style="display:none;">'
							+'	<div class="grp ${color.css}">'
						//	+'			<div class="grpName">'
							+'				<input type="checkbox" id="chkGrp${groupId}" value="${groupId}" class="grpChkBx">${groupName}'
						//	+'			</div>'
							//+'			<div class="grpColr ">'
							+'				<div class="filterBoxColor">'
							+'					A'
							+'				</div>'
							//+'			</div>'
							+' </div>'
						+'</div>';
				return _html;
			} 
			var createNewEventTemplate = function()
			{
				return _getNewEventTemplate();
			}

			var createAgendaTemplate=function()
			{
				var _html=''
					+'<div class="calendarTemplate"  id="agendaViewTemplate" style="display:none;">'
					+'	<div class="agendaDateEvents">'
					
					
					+'			<div class="header">'
					+'				${date.toFullDateString()}'
					+'			</div>'
					+'			<div class="agendaEventsForDate" field="events">' 
						+'				<div class="agendaViewEvent" id="agendaViewEvent${eventId}${_localId}">' 
							+'							<div class="arrowExpand evtDtlArrowIcon" id="eventIcon${eventId}${_localId}"></div>'
							+'							<a href="javascript:void(0)"  onclick="agendaShowEventDetail(\'${eventId}${_localId}\')">${eventName}</a>'
							 +'							( ${formattedStartTime} - ${formattedEndTime} )  '
							
						+'				</div>'	
							+'			<div id="eventDetail${eventId}${_localId}" class="agendaEventDetail" style="display:none;clear:both;">'  
							+'					<div class="prevRow">	'		
										+'			<label>From: </label>'		
										+'			<div class="value">${_formattedStartDate} ${formattedStartTime}</div>'		
										+'		</div>	'		
										+'		<div class="prevRow">	'		
										+'			<label>To: </label>'		
										+'			<div class="value">${_formattedEndDate} ${formattedEndTime}</div>'		
										+'		</div>	'	
										+'		<div class="prevRow">	'		
										+'			<label>Description: </label>'		
										+'			<div class="value">${description}</div>'		
										+'		</div>	'	 	
										+'			<a  href="javascript:void(0)"  class="buttonSmall" id="agendaEditBtn${eventId}" onclick="agendaEditEvent(\'${eventId}\')">Edit</a>'
										+'			<a  href="javascript:void(0)"  id="agendaDeleteBtn${eventId}"  onclick="agendaDeleteEvent(\'${eventId}\')"  class="buttonSmall">Delete</a>' 
								 
							+'			</div>' 
					 
							+'	</div>'  
					
					
					+'	</div>' 
					+'</div> ';

					return _html;
			}
			var load=function()
			{

				if(_windowDefaultPluginLoaded == false) //Load only once per page.
				{ 
					jQuery("body").append(createWeekEventTemplate())
								.append(createWeekSlotTemplate())
								.append(createMonthEventTemplate())
								.append(createDefaultPreview())	
								.append(createWorkshiftTemplate())	
								.append(createRecurEventOptions())								
								.append(createQuickFilterTemplate()) 							
								.append(createMonthAllDayTemplate()) 
								.append(createAgendaTemplate());
					 
						jQuery("body").append(createNewEventTemplate())
					 
					_windowDefaultPluginLoaded=true;
				}
			}
			var _windowDefaultPluginLoaded=false;
			  load();
		}

function removeAllOptions(from){if(!hasOptions(from)){return;}for(var i=(from.options.length-1);i>=0;i--){from.options[i] = null;}from.selectedIndex = -1;}
function addOption(obj,text,value,selected){if(obj!=null && obj.options!=null){obj.options[obj.options.length] = new Option(text, value, false, selected);}}
function hasOptions(obj){if(obj!=null && obj.options!=null){return true;}return false;}

function updateDateForTime(time, opts, prevTime)
{
 	var incrementAmt;
 	if(time=="12:00 AM" && prevTime!="12:00 AM") //don't increment again and again.. only if user has changed increment
 	{
 		var df=opts.dateField; //get date field
 		if(df)
 		{ 
			incrementAmt =1;
 		}
 	}
 	else if(prevTime=="12:00 AM" && time!="12:00 AM")
 	{ 	
 		var df=opts.dateField;
 		if(df)
 		{ 
			incrementAmt = -1;
 		}
 	}
	if (incrementAmt) {
		var value = jQuery(opts.dateField).val();
		var dt = Date.parse(value)
		dfObj.value = dt.addDays(increment).toString("mm/dd/yyyy");
	}
}

function extractEventColor(obj, template)
{
	if(!obj || !template) return "";
	return "<div class='colorbox "+obj.color.css+"'><div class='filterBoxColor'></div></div>";
}
 function agendaShowEventDetail(evId)
 {
 	jQuery("#eventDetail"+evId).toggle();
 	if(jQuery("#eventIcon"+evId).hasClass("arrowCollapse"))
 	{
 		jQuery("#eventIcon"+evId).removeClass("arrowCollapse").addClass("arrowExpand");
		jQuery("#agendaViewEvent"+evId).removeClass("highLightAgendaEvent");
 	}
 	else
 	{
 		jQuery("#eventIcon"+evId).removeClass("arrowExpand").addClass("arrowCollapse");
		jQuery("#agendaViewEvent"+evId).addClass("highLightAgendaEvent");
 	}
 }
 function agendaExpandAllDetails()
 {
 	jQuery("div.agendaEventDetail").show();
 	jQuery(".evtDtlArrowIcon").removeClass("arrowExpand").addClass("arrowCollapse"); 	
	jQuery(".agendaViewEvent").addClass("highLightAgendaEvent");
 }
 
 function agendaCollapseAllDetails()
 {
 	jQuery("div.agendaEventDetail").hide();
 	jQuery(".evtDtlArrowIcon").removeClass("arrowCollapse").addClass("arrowExpand");
	jQuery(".agendaViewEvent").removeClass("highLightAgendaEvent");
 }
 
