if(!javaxt) var javaxt={};

if(!javaxt.dhtml) javaxt.dhtml={};

if(!javaxt.dhtml.calendar) javaxt.dhtml.calendar={};

//******************************************************************************

//** Day View

//*****************************************************************************/

/**

* Used to render a day

*

******************************************************************************/

javaxt.dhtml.calendar.Day = function(parent, config) {

this.className = "javaxt.dhtml.calendar.Day";

var me = this;

var defaultConfig = {

/** Style for individual elements within the component. Note that you can

* provide CSS class names instead of individual style definitions.

*/

style: {

},

/** Day names or abbreviations to use in the column headers

*/

dayNames : [],

/** Number of days to render in the view */

days: 1,

/** Date to render

*/

date: new Date(),

/** Instance of an EventStore

*/

eventStore: null,

/** Amount of time, in milliseconds, to wait before a mousedown is

* treated as a "hold" instead of a "click"

*/

holdDelay: 500,

/** If true, enables debug logging to the console */

debug: false

};

//DOM elements

var el;

var bodyDiv;

var headerRow, footerRow;

var multidayRow, multidayEventsTable;

var currTimeDiv, getCurrentDate;

//Class variables

var date, startDate, endDate;

var cells = {};

var widths = {};

var scrollWidth;

var scrollable = true;

var eventHeight;

var eventPadding;

var rendered;

//Browser detection used to adjust event padding

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

var isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 ||

window.navigator.userAgent.indexOf("Trident/") > -1;

//**************************************************************************

//** Constructor

//**************************************************************************

/** Creates a new instance of the calendar control. */

var init = function(){

//Clone the config so we don't modify the original config object

var clone = {};

merge(clone, config);

//Merge clone with default config

merge(clone, defaultConfig);

config = clone;

//Ensure the "javaxt-noselect" style rule is present in the document

javaxt.dhtml.utils.addNoSelectRule();

//Call super

new javaxt.dhtml.calendar.View(me, config);

//Process config

if (!config.eventStore) config.eventStore = new javaxt.dhtml.calendar.EventStore();

config.holdDelay = isNumber(config.holdDelay) ? parseInt(config.holdDelay) : defaultConfig.holdDelay;

config.debug = config.debug===true;

//Specify function used to get current date

getCurrentDate = config.getCurrentDate==null ?

getCurrentDate = function(){return new Date();} : config.getCurrentDate;

//Configure renderers

if (config.renderers){

for (var rendererName in config.renderers) {

if (config.renderers.hasOwnProperty(rendererName)) {

if (me[rendererName]){

//Override the default renderer

(function(rendererName) {

me[rendererName] = function(){

var renderer = config.renderers[rendererName];

return renderer.apply(me, arguments);

};

})(rendererName);

}

}

}

}

//Call the beforerender callback

rendered = false;

var listener = me.getListener('beforerender');

if (listener!=null) listener.callback.apply(listener.scope, [me]);

//Set date and render the calendar

me.setDate(config.date);

onRender(el, function(){

//Call the afterrender callback

listener = me.getListener('afterrender');

if (listener!=null) listener.callback.apply(listener.scope, [me]);

rendered = true;

//Call the update callback

listener = me.getListener('update');

if (listener!=null) listener.callback.apply(listener.scope, [me]);

});

addResizeListener(parent, onResize);

};

//**************************************************************************

//** hasHours

//**************************************************************************

this.hasHours = function(){

return true;

};

//**************************************************************************

//** show

//**************************************************************************

this.show = function(){

parent.appendChild(el);

};

//**************************************************************************

//** hide

//**************************************************************************

this.hide = function(){

parent.removeChild(el);

};

//**************************************************************************

//** showFooter

//**************************************************************************

this.showFooter = function(){

footerRow.style.display = '';

};

//**************************************************************************

//** hideFooter

//**************************************************************************

this.hideFooter = function(){

footerRow.style.display = "none";

};

//**************************************************************************

//** enableTouch

//**************************************************************************

this.enableTouch = function(){

scrollable = true;

};

//**************************************************************************

//** disableTouch

//**************************************************************************

this.disableTouch = function(){

scrollable = false;

};

//**************************************************************************

//** onResize

//**************************************************************************

/** Recomputes event positions after the view is resized.

*/

var onResize = function(){

if (!rendered) return;

if (!el || !el.parentNode) return; //view is hidden (not the active view)

//Re-lay-out the events (their positions are measured from the grid, which

//stretches/shrinks with the view). Scroll position is preserved.

var scrollTop = bodyDiv ? bodyDiv.scrollTop : null;

var events = me.getEvents();

me.clear();

me.addEvents(events);

if (scrollTop!=null) bodyDiv.scrollTop = scrollTop;

updateCurrTime();

};

//**************************************************************************

//** renderTable

//**************************************************************************

/** Used to render a new table for the current date.

*/

var renderTable = function(){

//Remove any previously rendered table

if (el!=null){

for (var i=0; i<parent.childNodes.length; i++){

if (parent.childNodes[i]==el){

parent.removeChild(el);

break;

}

}

}

//Reset variables

cells = {};

widths = {};

//Create main table

var div, tr, td;

var table = el = createTable(parent);

table.className = "javaxt-cal-day javaxt-noselect";

//Create header row

tr = table.addRow();

addStyle(tr, config.style.header);

tr.setAttribute("desc", "header");

headerRow = tr;

var header = tr.addColumn({width: "100%", height: "inherit"});

//Create row for multiday events

tr = table.addRow();

addStyle(tr, config.style.multidayHeader);

tr.setAttribute("desc", "multiday events");

tr.style.display = "none";

tr.style.visibility = "hidden"; //visible

multidayRow = tr;

td = tr.addColumn({width: "100%", height: "inherit"});

var multidayDiv = createElement('div', td, {

width: "100%",

height: "inherit",

position: "relative"

});

multidayDiv.setAttribute("desc", "multiday-div");

//Create body row

tr = table.addRow();

addStyle(tr, config.style.body);

tr.setAttribute("desc", "body");

td = tr.addColumn({width: "100%", height: "100%"});

bodyDiv = createElement('div', td, {

width: "100%",

height: "100%",

position: "relative"

});

bodyDiv.setAttribute("desc", "body-div");

div = createElement('div', bodyDiv, {

width: "100%",

height: "100%",

position: "absolute",

overflow: 'scroll',

overflowX: 'hidden'

});

bodyDiv = div;

//Add logic to enable/disable scroll. This is important for touch devices.

bodyDiv.addEventListener('touchstart', function(e) {

if (!scrollable) e.preventDefault();

}, false);

bodyDiv.addEventListener('touchmove', function(e) {

if (!scrollable) e.preventDefault();

}, false);

//Add scroll listener

var listener = me.getListener('scroll');

if (listener){

div.addEventListener('scroll', function(e) {

listener.callback.apply(listener.scope, [me]);

}, false);

}

//Create footer row

tr = table.addRow();

tr.setAttribute("desc", "footer");

footerRow = tr;

var footer = tr.addColumn({width: "100%", height: "inherit"});

//Create current time indicator

currTimeDiv = createElement("div", bodyDiv, {

position: "absolute",

width: "100%",

display: "none"

});

addStyle(currTimeDiv, config.style.currentTimeIndicator);

//Populate header

var headerTable = createTable(header);

tr = headerTable.addRow();

td = tr.addColumn();

var spacerUL = createElement('div', td);

var d = new Date(startDate);

for (var i=0; i<config.days; i++){

td = tr.addColumn({width: (100/config.days) + '%', height: "100%"});

addStyle(td, config.style.headerCol);

td.appendChild(me.createColumnHeader(d.getDay()));

d.setDate(d.getDate()+1);

}

td = tr.addColumn();

var spacerUR = createElement('div', td);

//Grow the header row to fit its column headers (e.g. a custom renderer

//that stacks the weekday over the date). No-op for single-line headers.

resizeHeader(headerRow);

//Populate footer

var footerTable = createTable(footer);

tr = footerTable.addRow();

td = tr.addColumn();

var spacerLL = createElement('div', td);

var d = new Date(startDate);

for (var i=0; i<config.days; i++){

td = tr.addColumn({width: (100/config.days) + '%', height: "100%"});

addStyle(td, config.style.footerCol);

td.appendChild(me.createColumnFooter(d.getDay()));

d.setDate(d.getDate()+1);

}

td = tr.addColumn();

var spacerLR = createElement('div', td);

//Populate multiday div

var multidayContent = createElement('div', multidayDiv, {

width: "100%",

height: "100%",

position: "relative"

});

multidayContent.setAttribute("desc", "multiday-content");

div = createElement('div', multidayContent, {

width: "100%",

height: "100%",

position: "absolute",

overflow: 'scroll',

overflowX: 'hidden'

});

var multidayTable = createTable(div);

tr = multidayTable.addRow();

td = tr.addColumn();

var spacerML = createElement('div', td);

for (var i=0; i<config.days; i++){

td = tr.addColumn({width: (100/config.days) + '%', height: "1px"});

addStyle(td, config.style.multidayCol);

}

multidayEventsTable = multidayTable.firstChild;

//Populate body

var bodyTable = createTable(bodyDiv);

var row = bodyTable.addRow();

//Create left column to render hours

var leftCol = row.addColumn({verticalAlign: "top"});

var hours = createTable(leftCol);

for (var i=0; i<24; i++){

var tr = hours.addRow();

var td = tr.addColumn();

addStyle(td, config.style.hour);

if (i==23) addStyle(td, config.style.hourLast);

if (i==0) td.style.borderTop = "0px";

td.appendChild(me.createHourLabel(i));

}

//Create main table used to render days

var d = new Date(startDate);

for (var i=0; i<config.days; i++){

td = row.addColumn({width: (100/config.days) + '%', height: "100%", verticalAlign: "top"});

addStyle(td, config.style.cell);

td.valign="top";

//Create div used to store events and the table grid

var outerDiv = createElement('div', td, {

width: "100%",

height: "100%",

position: "relative",

cursor: "inherit"

});

var innerDiv = createElement('div', outerDiv, {

width: "100%",

height: "100%",

position: "absolute",

whiteSpace: 'nowrap',

overflow: 'hidden',

cursor: "inherit"

});

var cell = innerDiv;

var cellID = (d.getMonth()+1) + "-" + d.getDate() + "-" + d.getFullYear();

cell.date = new Date(d);

cells[cellID] = cell;

//Create table

var innerTable = createTable(cell);

//Add 1 row for every 30 minutes

for (var j=0; j<24*2; j++){

var tr = innerTable.addRow();

var col = tr.addColumn();

addStyle(col, config.style.halfHour);

if (j % 2 != 0) addStyle(col, config.style.halfHourSep);

if (j==47) addStyle(col, config.style.hourLast);

if (j==0) col.style.borderTop = "0px";

addListeners(tr, config.holdDelay);

}

d.setDate(d.getDate()+1);

}

//Update the spacer in the left column of the header

var lt = _getRect(leftCol.childNodes[0]).width;

spacerUL.style.width =

spacerML.style.width =

spacerLL.style.width = lt + 'px';

//Update the spacer in the right column of the header

var bodyWidth = _getRect(bodyDiv).width;

var tableWidth = _getRect(leftCol.parentNode.parentNode.parentNode).width;

scrollWidth = Math.abs(bodyWidth-tableWidth);

spacerUR.style.width =

spacerLR.style.width = scrollWidth + 'px';

//Position the current time indicator once the grid is laid out. Measuring

//row offsets requires layout, so defer via onRender - running this while

//the view is still hidden/0-sized (e.g. mid view-switch) would pin the

//indicator to the top (12am) until the next timer tick. onResize corrects

//it again if the grid height changes after it first renders.

currTimeDiv.style.left = lt + 'px';

onRender(el, updateCurrTime);

//Kick off scheduled task to periodically update the current time indicator

var epoch = getCurrentDate().getTime() / 1000;

var secondsSinceLastTimerTrigger = epoch % 60;

var secondsUntilNextTimerTrigger = 60 - secondsSinceLastTimerTrigger;

setTimeout(function() {

setInterval(updateCurrTime, 60*1000);

updateCurrTime();

}, secondsUntilNextTimerTrigger*1000);

//Measure the event geometry now that the grid is in the DOM. This must

//happen before events are loaded so multiday wrappers and single-day

//event padding are sized correctly.

updateEventMetrics();

//Scroll to start of workday

me.scrollTo(6.5);

//Call the "update" listener

if (rendered){

var listener = me.getListener('update');

if (listener!=null) listener.callback.apply(listener.scope, [me]);

}

};

//**************************************************************************

//** addListeners

//**************************************************************************

/** Used to initialize a cell for click and hold events.

*/

var addListeners = function(cell, holdDelay){

//This timeout, started on mousedown, triggers the beginning of a hold

var holdStarter = null;

//This flag indicates the user is currently holding the mouse down

var holdActive = false;

//OnClick

//cell.onclick = NOTHING!! not using onclick at all - onmousedown and onmouseup take care of everything

//MouseDown

var onMouseDown = function(e){

var tr = this;

//Set the holdStarter and wait for the predetermined delay, and then begin a hold

holdStarter = setTimeout(function() {

holdStarter = null;

holdActive = true;

//start hold

var listener = me.getListener('cellhold');

if (listener){

var callback = listener.callback;

var scope = listener.scope;

var date = getDate();

callback.apply(scope, [date, tr, me, e]);

}

}, holdDelay);

};

//MouseUp

var onMouseUp = function(e){

var tr = this;

//Get date associated with the selected cell

var date = getDate();

//If the mouse is released immediately (i.e., a click), before the

//holdStarter runs, then cancel the holdStarter and do the click

if (holdStarter) {

clearTimeout(holdStarter);

var listener = me.getListener('cellclick');

if (listener){

var callback = listener.callback;

var scope = listener.scope;

callback.apply(scope, [date, tr, me, e]);

}

}

//Otherwise, if the mouse was being held, end the hold

else if (holdActive) {

holdActive = false;

//End hold

var listener = me.getListener('cellrelease');

if (listener){

var callback = listener.callback;

var scope = listener.scope;

callback.apply(scope, [date, tr, me, e]);

}

}

};

cell.onmousedown = onMouseDown;

cell.onmouseup = onMouseUp;

cell.ontouchstart = function(e) {

var touch = e.touches[0];

var x = touch.pageX;

var y = touch.pageY;

this.onmousedown.apply(this, [{

clientX: x,

clientY: y

}]);

};

cell.ontouchend = function(e){

var touch = e.changedTouches[0];

var x = touch.pageX;

var y = touch.pageY;

this.onmouseup.apply(this, [{

clientX: x,

clientY: y

}]);

};

//Get date associated with the selected cell

var getDate = function(){

var tbody = cell.parentNode;

var _cell = tbody.parentNode.parentNode;

var date = new Date(_cell.date);

var hour = 0;

for (var i=0; i<tbody.childNodes.length; i++){

var tr = tbody.childNodes[i];

if (tr===cell){

hour = (i/2);

break;

}

}

date.setTime(date.getTime() + ((hour*60) * 60 * 1000));

return date;

};

};

//**************************************************************************

//** createColumnHeader

//**************************************************************************

/** Returns a div used to indicate the day of the week. The div is inserted

* into a column header that corresponds to a given date. This method can

* be safely overridden to generate custom headers.

*/

this.createColumnHeader = function(i){

var outerDiv = createElement('div', {

width: "100%",

height: "100%",

position: "relative",

cursor: "inherit"

});

var innerDiv = createElement('div', outerDiv, {

width: "100%",

height: "100%",

position: "absolute",

whiteSpace: 'nowrap',

overflow: 'hidden',

cursor: "inherit"

});

var text = config.dayNames[i];

if (config.days>1) text = text.substring(0,3);

//else text+= ", " + config.monthNames[d.getMonth()] + " " + d.getDate();

innerDiv.innerHTML = text;

return outerDiv;

};

this.createColumnFooter = function(i){

return createElement('div');

};

//**************************************************************************

//** createHourLabel

//**************************************************************************

/** Returns a div used to indicate the hour of day (e.g. 12pm). This method

* can be safely overridden to generate custom labels for hours.

*/

this.createHourLabel = function(hour){

var div = createElement('div', {

float: "right",

padding: "0px 7px 0px 7px"

});

//Update hour and set meridian

var meridian = 'AM';

if (hour==0) hour = 12;

else if (hour==12) meridian = 'PM';

else if (hour>12){

hour = (hour-12);

meridian = 'PM';

}

//Create table to render the hour and meridian

var hdr = createTable(div);

var tr = hdr.addRow();

var td = tr.addColumn();

addStyle(td, config.style.labelHour);

td.innerHTML = hour;

td = tr.addColumn();

addStyle(td, config.style.labelMeridian);

td.innerHTML = meridian;

return div;

};

//**************************************************************************

//** updateCurrTime

//**************************************************************************

/** Used to update the position of the current time indicator.

*/

var updateCurrTime = function(){

var date = getCurrentDate();

var cellID = (date.getMonth()+1) + "-" + date.getDate() + "-" + date.getFullYear();

var cell = cells[cellID];

if (cell){

var hours = date.getHours();

var h1 = getVerticalOffset(hours, cell);

var h2 = getVerticalOffset(hours+1, cell);

var pixelsPerMinute = (h2-h1)/60;

var h = h1+(date.getMinutes()*pixelsPerMinute);

currTimeDiv.style.display = '';

currTimeDiv.style.top = h + "px";

}

else{

currTimeDiv.style.display = "none";

}

};

//**************************************************************************

//** scrollTo

//**************************************************************************

/** Used to scroll to a specific time of day.

* @param hour Time of day, specified as a decimal (e.g. 6.5 for 6:30 AM)

*/

this.scrollTo = function(hour){

var cellID = (date.getMonth()+1) + "-" + date.getDate() + "-" + date.getFullYear();

var cell = cells[cellID];

var offset = getVerticalOffset(hour, cell);

bodyDiv.scrollTop = offset+1; //+1 for border

};

//**************************************************************************

//** getScrollDiv

//**************************************************************************

this.getScrollDiv = function(){

return bodyDiv;

};

//**************************************************************************

//** getVerticalOffset

//**************************************************************************

/** Returns the vertical offset (relative to the cell) of a given hour. The

* offset is measured directly from the rendered grid rows rather than summed

* from cached row heights - the rows stretch to fill the available space

* (e.g. on large screens) and fractional heights would otherwise accumulate

* rounding error, causing events to drift away from the hour lines.

*/

var getVerticalOffset = function(hour, cell){

var tbody = cell.childNodes[0].childNodes[0];

var rows = tbody.childNodes;

if (rows.length==0) return 0;

var cellTop = _getRect(cell).top;

//There are 2 rows per hour; find the row that starts at (or just after)

//the requested hour and return the top of that row relative to the cell.

var i = Math.ceil(hour*2);

if (i < rows.length) return _getRect(rows[i]).top - cellTop;

//At/after the end of the day - use the bottom of the last row.

return _getRect(rows[rows.length-1]).bottom - cellTop;

};

//**************************************************************************

//** getEventStore

//**************************************************************************

this.getEventStore = function(){

return config.eventStore;

};

//**************************************************************************

//** addEvent

//**************************************************************************

this.addEvent = function(event){

addEvent(event);

};

//**************************************************************************

//** addEvent

//**************************************************************************

/** Private method used to add an event to the view.

* @param deferUpdates Option to postpone or defer updating the event

* width and position when there are overlapping events. This option is

* provided for optimization.

*/

var addEvent = function(event, deferUpdates){

log("Adding " + event.getSubject() + "...");

var numDays = event.numDays();

//Check if we've already rendered the given event

if (numDays>=1){

for (var i=1; i<multidayEventsTable.childNodes.length; i++){

var tr = multidayEventsTable.childNodes[i];

for (var j=1; j<tr.childNodes.length; j++){

var td = tr.childNodes[j];

if (td.childNodes.length>0){

var div = td.childNodes[0];

if (div.event.equals(event)){

return;

}

}

}

}

}

else{

var divs = getDivs(event.getStartDate());

for (var i=0; i<divs.length; i++){

var div = divs[i];

if (div.event.equals(event)){

return;

}

}

}

//If we're still here, add the event

var style = getStyle(event, config);

event.setStyle(style);

if (numDays>=1){

addMultiDayEvent(event);

}

else{

addSingleDayEvent(event, deferUpdates);

}

//Update the event store

config.eventStore.add(event);

};

//**************************************************************************

//** addEvents

//**************************************************************************

/** Used to add multiple events to the view. This method is recommended for

* bulk loading and is significantly faster than calling addEvent multiple

* times.

*/

this.addEvents = function(events){

//Add events but defer updating position and widths of overlapping events

for (var i=0; i<events.length; i++){

addEvent(events[i], true);

}

//Generate list of all single-day events in the view

var singleDayEvents = [];

events = me.getEvents();

for (var i=0; i<events.length; i++){

var event = events[i];

if (event.numDays()<1){

var div = getDiv(event);

if (div!=null) singleDayEvents.push(event);

}

}

//Local variables

var processedEvents = [];

var isProcessed = function(event){

for (var i=0; i<processedEvents.length; i++){

if (processedEvents[i].equals(event)){

return true;

}

}

return false;

};

//Iterate through single-day events and update widths

for (var i=0; i<singleDayEvents.length; i++){

var event = singleDayEvents[i];

var updateWidth = !isProcessed(event);

if (updateWidth){

var overlappingEvents = getOverlappingEvents(event);

if (overlappingEvents.length>0){

//Compute number of columns

var numColumns = 2;

if (overlappingEvents.length>1){

//The following logic is somewhat flawed and may yeild

//a column count slightly higher than expected...

for (var j=0; j<overlappingEvents.length; j++){

var _event = overlappingEvents[j];

var _startDate = _event.getStartDate();

var _endDate = _event.getEndDate();

var numIntersects = 0;

for (var k=0; k<overlappingEvents.length; k++){

if (!overlappingEvents[k].equals(_event)){

var a = overlappingEvents[k].getStartDate();

var b = overlappingEvents[k].getEndDate();

if (_startDate.getTime() < b.getTime() && a.getTime() < _endDate.getTime()){

numIntersects++;

}

}

}

if (numIntersects>0){

var _numColumns = 1 + 1 + numIntersects;

if (_numColumns>numColumns) numColumns = _numColumns;

}

}

}

var width = (Math.floor((1/(numColumns))*100));

log("Update " + event.getSubject() + " width to " + width + "%");

var outerDiv = getDiv(event);

outerDiv.style.width = width + "%";

for (var j=0; j<overlappingEvents.length; j++){