1 /**
  2 * Constructs a new DateRange.
  3 * @class Represents a DateRange.
  4 * @augments wso2vis.c.Control
  5 * @constructor
  6 */
  7 wso2vis.c.DateRange = function() {
  8 	this.currentTimestamp = 0;
  9 	this.firstStart = true; // user to hide the date selection box in the first start
 10 	this.startHr;
 11 	this.endHr = 0;	
 12 	this.startEndHrState = "init";   
 13 	this.pageMode = 'hour'; //This is a flag set to keep the page mode (hour,day,or month);
 14 
 15 	wso2vis.c.Control.call(this);
 16     
 17     this.showHours(true);
 18     this.showDays(true);
 19     this.showMonths(true);
 20 }
 21 
 22 wso2vis.extend(wso2vis.c.DateRange, wso2vis.c.Control);
 23 
 24 /* Define all properties. */
 25 wso2vis.c.DateRange.prototype.property("showHours");
 26 wso2vis.c.DateRange.prototype.property("showDays");
 27 wso2vis.c.DateRange.prototype.property("showMonths");
 28 
 29 wso2vis.c.DateRange.prototype.onApplyClicked = function(mode, date1, date2) {
 30 }
 31 
 32 wso2vis.c.DateRange.prototype.create = function() {
 33 /*YAHOO.util.Event.onDOMReady(function() {*/
 34 	//variables to keep the date interval start and end
 35 	var styleTabMonthDisplay = '';
 36 	var styleTabDayDisplay = ''; 
 37 	var styleTabHourDisplay = '';
 38 	var styleMonthDisplay = '';
 39 	var styleDayDisplay = ''; 
 40 	var styleHourDisplay = '';
 41 	
 42 	this.pageMode = 'none';
 43 	
 44     if (this.showMonths()) {
 45 	    this.pageMode = 'month';
 46 	    styleMonthDisplay = '';
 47 	    styleDayDisplay = 'style="display:none"';
 48 	    styleHourDisplay = 'style="display:none"';
 49 	}
 50 	else {
 51 	    styleTabMonthDisplay = 'style="display:none"';
 52 	    styleMonthDisplay = 'style="display:none"';
 53 	}
 54 	
 55 	if (this.showDays()) {
 56 	    this.pageMode = 'day';
 57 	    styleMonthDisplay = 'style="display:none"';
 58 	    styleDayDisplay = '';
 59 	    styleHourDisplay = 'style="display:none"';
 60 	}
 61 	else {
 62 	    styleTabDayDisplay = 'style="display:none"';
 63 	    styleDayDisplay = 'style="display:none"';
 64 	}
 65 	
 66 	if (this.showHours()) {
 67 	    this.pageMode = 'hour';
 68 	    styleMonthDisplay = 'style="display:none"';
 69 	    styleDayDisplay = 'style="display:none"';
 70 	    styleHourDisplay = '';
 71 	}
 72 	else {
 73 	    styleTabHourDisplay = 'style="display:none"';
 74 	    styleHourDisplay = 'style="display:none"';
 75 	}
 76 	
 77 	if (this.pageMode == 'none')
 78 	    return;
 79 	
 80 	var canvas = YAHOO.util.Dom.get(this.canvas());
 81 	canvas.innerHTML = '<div style="height:40px;"><a style="cursor:pointer;" onClick="wso2vis.fn.toggleDateSelector('+this.getID()+')"> \
 82                 <table class="time-header"> \
 83                 	<tr> \
 84                     	<td><span id="dateDisplay'+this.getID()+'"></span><img src="../images/down.png" alt="calendar" align="middle" style="margin-bottom: 4px;margin-left:5px;margin-right:5px" id="imgObj'+this.getID()+'"/></td> \
 85                     </tr> \
 86                 </table> \
 87             </a></div> \
 88             <div class="dates-selection-Box yui-skin-sam" style="display:none" id="datesSelectionBox'+this.getID()+'"> \
 89             	<div class="dates" style="float:left"> \
 90                     <table> \
 91                         <tr> \
 92                             <td>Range</td> \
 93                             <td><input type="text" name="in" id="in'+this.getID()+'" class="in"></td> \
 94                             <td> -</td> \
 95                             <td><input type="text" name="out" id="out'+this.getID()+'" class="out"></td> \
 96                         </tr> \
 97                     </table> \
 98                 </div> \
 99                 <ul class="dates-types" id="datesTypes'+this.getID()+'"> \
100                     <li><a class="nor-right" id="datesSelectionBox'+this.getID()+'MonthTab" onClick="wso2vis.fn.setPageMode(\'month\',this,'+this.getID()+')" '+ styleTabMonthDisplay+'>Month</a></li> \
101                     <li><a class="nor-rep" id="datesSelectionBox'+this.getID()+'DayTab" onClick="wso2vis.fn.setPageMode(\'day\',this,'+this.getID()+')" '+ styleTabDayDisplay+'>Day</a></li> \
102                     <li><a class="sel-left" id="datesSelectionBox'+this.getID()+'HourTab" onClick="wso2vis.fn.setPageMode(\'hour\',this,'+this.getID()+')" ' + styleTabHourDisplay+'>Hour</a></li> \
103                 </ul> \
104                 <div class="dateBox-main" id="dateBox-main'+this.getID()+'"><div id="cal1Container'+this.getID()+'" '+ styleDayDisplay+'></div></div> \
105                 <div class="timeBox-main" id="timeBox-main'+this.getID()+'" '+ styleHourDisplay+'></div> \
106                 <div class="monthBox-main" id="monthBox-main'+this.getID()+'" '+ styleMonthDisplay+'></div> \
107                 <div style="clear:both;padding-top:5px;"><input type="button" value="Apply" onClick="wso2vis.fn.updatePage('+this.getID()+', true);wso2vis.fn.toggleDateSelector('+this.getID()+')" class="button"/></div> \
108             </div> \
109             <div style="clear:both"></div>';
110 									   
111 	var d = new Date();
112 	var dateDisplay = YAHOO.util.Dom.get("dateDisplay"+this.getID());
113 	var inTxtTop = getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear();
114 	var outTxtTop = "";
115 	var inTxt = YAHOO.util.Dom.get("in"+this.getID()),
116 		outTxt = YAHOO.util.Dom.get("out"+this.getID()),
117 		inDate, outDate, interval;
118 
119 	inTxt.value = "";
120 	outTxt.value = "";
121 	
122 	var d = new Date();
123 	this.currentTimestamp = d.getTime();
124 
125 	var cal = new YAHOO.example.calendar.IntervalCalendar("cal1Container"+this.getID(), {pages:3,width:60});
126     var copyOfID = this.getID();
127 
128 	cal.selectEvent.subscribe(function() {
129 		interval = this.getInterval();
130 		if (interval.length == 2) {
131 			inDate = interval[0];
132 			inTxt.value = (inDate.getMonth() + 1) + "/" + inDate.getDate() + "/" + inDate.getFullYear();
133 			inTxtTop = getStringMonth(inDate.getMonth()) + ' ' + inDate.getDate() + ',' + inDate.getFullYear();
134 			wso2vis.fn.getControlFromID(copyOfID).startHr = inDate.getTime();
135 			if (interval[0].getTime() != interval[1].getTime()) {
136 				outDate = interval[1];
137 				outTxt.value = (outDate.getMonth() + 1) + "/" + outDate.getDate() + "/" + outDate.getFullYear();
138 				outTxtTop = getStringMonth(outDate.getMonth()) + ' ' + outDate.getDate() + ',' + outDate.getFullYear();
139 				wso2vis.fn.getControlFromID(copyOfID).endHr = outDate.getTime();
140 			} else {
141 				outTxt.value = "";
142 				outTxtTop = "";
143 			}
144 		}
145 		dateDisplay.innerHTML = inTxtTop + " - " + outTxtTop;
146 	}, cal, true);
147 
148 	cal.render();
149 	genTimeHours(this.getID());
150 	genTimeMonths(this.getID());
151 
152 	//Set the time ranges
153     var tmpString;
154 	if (this.showMonths()) {
155 	    var twoMonthLate = new Date(getPrevMonth(getPrevMonth(d.getTime()))); //Get the prev month
156 		tmpString = getStringMonth(twoMonthLate.getMonth()) + ' ' + twoMonthLate.getDate() + ',' + twoMonthLate.getFullYear();
157 		tmpString += ' -> ' + getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear();		
158 		wso2vis.fn.getControlFromID(this.getID()).startHr = twoMonthLate.getTime();
159 		wso2vis.fn.getControlFromID(this.getID()).endHr = d.getTime();
160 	}
161 	
162 	if (this.showDays()) {
163 	    var sevenDayLate = new Date(d.getTime() - 7*oneDay); //Get the yesterdays midnight
164 		tmpString = getStringMonth(sevenDayLate.getMonth()) + ' ' + sevenDayLate.getDate() + ',' + sevenDayLate.getFullYear();
165 		tmpString += ' -> ' + getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear();		
166 		wso2vis.fn.getControlFromID(this.getID()).startHr = sevenDayLate.getTime();
167 		wso2vis.fn.getControlFromID(this.getID()).endHr = d.getTime();
168 	}
169 	
170 	if (this.showHours()) {
171         wso2vis.fn.setPageMode('hour', document.getElementById('datesSelectionBox'+this.getID()+'HourTab'), this.getID());
172 	}
173 	else if (this.showDays()) {
174 	    wso2vis.fn.setPageMode('day', document.getElementById('datesSelectionBox'+this.getID()+'DayTab'), this.getID());
175 	}
176 	else if (this.showMonths()) {
177 	    wso2vis.fn.setPageMode('month', document.getElementById('datesSelectionBox'+this.getID()+'MonthTab'), this.getID());
178 	}
179 
180 	wso2vis.fn.updatePage(this.getID());
181 }; 
182 
183 
184 function genHourTable(timestamp, id) {
185 	var timeBoxMain = document.getElementById('timeBox-main'+id);
186 	var d = new Date(timestamp);
187 	var externDiv = document.createElement("DIV");
188 	YAHOO.util.Dom.addClass(externDiv, 'timeBox-sub');
189 	var insideStr = '<div class="date-title">' + getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear() + '</div>' +
190 					'<div class="timeBox-Wrapper">' +
191 					'<ul>';
192 	for (var i = 0; i <= 23; i++) {
193 		insideStr += '<li title="' + (timestamp + i * oneHour) + '" onclick="wso2vis.fn.setHourRange(this, '+id+')">' + i + '</li>';
194 	}
195 	insideStr += '</ul></div>';
196 	externDiv.innerHTML = insideStr;
197 
198 	timeBoxMain.appendChild(externDiv);
199 }
200 
201 function genTimeHours(id) {
202 	var clearToday = getClearTimestamp(wso2vis.fn.getControlFromID(id).currentTimestamp);
203 
204 
205 	//set the buttons
206 	var timeBoxMain = document.getElementById('timeBox-main'+id);
207 	var navButtons = '<div class="navButtons"><a class="left" onclick="wso2vis.fn.navHour(\'left\','+id+')"><<</a><a class="right" onclick="wso2vis.fn.navHour(\'right\','+id+')">>></a></div>';
208 	var navButtonDiv = document.createElement("DIV");
209 	navButtonDiv.innerHTML = navButtons;
210 	timeBoxMain.innerHTML = "";
211 	timeBoxMain.appendChild(navButtonDiv);
212 
213 	genHourTable(clearToday - oneDay * 2, id);
214 	genHourTable(clearToday - oneDay, id);
215 	genHourTable(clearToday, id);
216 }
217 
218 /**
219 * Creates Month range selector.
220 * @param {string} timestamp the time stamp.
221 * @param {number} id .
222 */
223 function genMonthTable(timestamp, id) {
224 	var timeBoxMain = document.getElementById('monthBox-main'+id);
225 	var d = new Date(timestamp);
226 	var externDiv = document.createElement("DIV");
227 	YAHOO.util.Dom.addClass(externDiv, 'monthBox-sub');
228 	var insideStr = '<div class="date-title">' + d.getFullYear() + '</div>' +
229 					'<div class="monthBox-Wrapper">' +
230 					'<ul>';
231 	var iTime = timestamp;
232 	for (var i = 0; i < m_names.length; i++) {
233 		insideStr += '<li title="' + iTime + '" onclick="wso2vis.fn.setMonthRange(this, '+id+')">' + m_names[i] + '</li>';
234 		iTime = getNextMonth(iTime);
235 	}
236 	insideStr += '</ul></div>';
237 	externDiv.innerHTML = insideStr;
238 
239 	timeBoxMain.appendChild(externDiv);
240 }
241 
242 /**
243 * @param {number} id .
244 */
245 function genTimeMonths(id) {
246 	//set the buttons
247 	var timeBoxMain = document.getElementById('monthBox-main'+id);
248 	var navButtons = '<div class="navButtons"><a class="left" onclick="wso2vis.fn.navMonth(\'left\','+id+')"><<</a><a class="right" onclick="wso2vis.fn.navMonth(\'right\', '+id+')">>></a></div>';
249 	var navButtonDiv = document.createElement("DIV");
250 	navButtonDiv.innerHTML = navButtons;
251 	timeBoxMain.innerHTML = "";
252 	timeBoxMain.appendChild(navButtonDiv);
253 	var jan1st = new Date((new Date(wso2vis.fn.getControlFromID(id).currentTimestamp)).getFullYear(),0,1);
254 	genMonthTable(getPrevYear(wso2vis.fn.getControlFromID(id).currentTimestamp), id); 
255 	genMonthTable(jan1st.getTime(), id);
256 }
257 
258 function getNextYear(timestamp){
259 	now = new Date(timestamp);
260 	var current;
261 	current = new Date(now.getFullYear() + 1, 0, 1);
262 	return current.getTime();
263 }
264 
265 function getPrevYear(timestamp){
266 	now = new Date(timestamp);
267 	var current;
268 	current = new Date(now.getFullYear() - 1, 0, 1);
269 	return current.getTime();
270 }
271 
272 //util function
273 function getStringMonth(num) {
274 	var m_names = new Array("January", "February", "March",
275 			"April", "May", "June", "July", "August", "September",
276 			"October", "November", "December");
277 
278 	return m_names[num];
279 }
280 
281 function getClearTimestamp(timestamp) {
282 	var d = new Date(timestamp);
283 	var dateClear = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
284 	return (dateClear.getTime()+d.getTimezoneOffset()*1000 * 60);
285 }
286 
287 function formatDate(inDate) {
288 	var year = inDate.split(" ")[0].split("-")[0];
289 	var month = inDate.split(" ")[0].split("-")[1];
290 	var day = inDate.split(" ")[0].split("-")[2];
291 	var hour = inDate.split(" ")[1].split(":")[0];
292 
293 	return m_names[month - 1] + " " + day + "-" + hour +":00";
294 }
295 
296 
297 
298 
299 /**
300 * YAHOO IntervalCalender.
301 */
302 function IntervalCalendar(container, cfg) {
303 	this._iState = 0;
304 	cfg = cfg || {};
305 	cfg.multi_select = true;
306 	IntervalCalendar.superclass.constructor.call(this, container, cfg);
307 
308 	this.beforeSelectEvent.subscribe(this._intervalOnBeforeSelect, this, true);
309 	this.selectEvent.subscribe(this._intervalOnSelect, this, true);
310 	this.beforeDeselectEvent.subscribe(this._intervalOnBeforeDeselect, this, true);
311 	this.deselectEvent.subscribe(this._intervalOnDeselect, this, true);
312 }
313 
314 IntervalCalendar._DEFAULT_CONFIG = YAHOO.widget.CalendarGroup._DEFAULT_CONFIG;
315 
316 YAHOO.lang.extend(IntervalCalendar, YAHOO.widget.CalendarGroup, {
317 _dateString : function(d) {
318 	var a = [];
319 	a[this.cfg.getProperty(IntervalCalendar._DEFAULT_CONFIG.MDY_MONTH_POSITION.key) - 1] = (d.getMonth() + 1);
320 	a[this.cfg.getProperty(IntervalCalendar._DEFAULT_CONFIG.MDY_DAY_POSITION.key) - 1] = d.getDate();
321 	a[this.cfg.getProperty(IntervalCalendar._DEFAULT_CONFIG.MDY_YEAR_POSITION.key) - 1] = d.getFullYear();
322 	var s = this.cfg.getProperty(IntervalCalendar._DEFAULT_CONFIG.DATE_FIELD_DELIMITER.key);
323 	return a.join(s);
324 },
325 
326 _dateIntervalString : function(l, u) {
327 	var s = this.cfg.getProperty(IntervalCalendar._DEFAULT_CONFIG.DATE_RANGE_DELIMITER.key);
328 	return (this._dateString(l)
329 			+ s + this._dateString(u));
330 },
331 
332 getInterval : function() {
333 	// Get selected dates
334 	var dates = this.getSelectedDates();
335 	if (dates.length > 0) {
336 		// Return lower and upper date in array
337 		var l = dates[0];
338 		var u = dates[dates.length - 1];
339 		return [l, u];
340 	}
341 	else {
342 		// No dates selected, return empty array
343 		return [];
344 	}
345 },
346 
347 setInterval : function(d1, d2) {
348 	// Determine lower and upper dates
349 	var b = (d1 <= d2);
350 	var l = b ? d1 : d2;
351 	var u = b ? d2 : d1;
352 	// Update configuration
353 	this.cfg.setProperty('selected', this._dateIntervalString(l, u), false);
354 	this._iState = 2;
355 },
356 
357 resetInterval : function() {
358 	// Update configuration
359 	this.cfg.setProperty('selected', [], false);
360 	this._iState = 0;
361 },
362 
363 _intervalOnBeforeSelect : function(t, a, o) {
364 	// Update interval state
365 	this._iState = (this._iState + 1) % 3;
366 	if (this._iState == 0) {
367 		// If starting over with upcoming selection, first deselect all
368 		this.deselectAll();
369 		this._iState++;
370 	}
371 },
372 
373 _intervalOnSelect : function(t, a, o) {
374 	// Get selected dates
375 	var dates = this.getSelectedDates();
376 	if (dates.length > 1) {
377 		/* If more than one date is selected, ensure that the entire interval
378 		 between and including them is selected */
379 		var l = dates[0];
380 		var u = dates[dates.length - 1];
381 		this.cfg.setProperty('selected', this._dateIntervalString(l, u), false);
382 	}
383 	// Render changes
384 	this.render();
385 },
386 
387 _intervalOnBeforeDeselect : function(t, a, o) {
388 	if (this._iState != 0) {
389 		/* If part of an interval is already selected, then swallow up
390 		 this event because it is superfluous (see _intervalOnDeselect) */
391 		return false;
392 	}
393 },
394 
395 _intervalOnDeselect : function(t, a, o) {
396 	if (this._iState != 0) {
397 		// If part of an interval is already selected, then first deselect all
398 		this._iState = 0;
399 		this.deselectAll();
400 
401 		// Get individual date deselected and page containing it
402 		var d = a[0][0];
403 		var date = YAHOO.widget.DateMath.getDate(d[0], d[1] - 1, d[2]);
404 		var page = this.getCalendarPage(date);
405 		if (page) {
406 			// Now (re)select the individual date
407 			page.beforeSelectEvent.fire();
408 			this.cfg.setProperty('selected', this._dateString(date), false);
409 			page.selectEvent.fire([d]);
410 		}
411 		// Swallow up since we called deselectAll above
412 		return false;
413 	}
414 }
415 });
416 
417 YAHOO.namespace("example.calendar");
418 YAHOO.example.calendar.IntervalCalendar = IntervalCalendar;
419 
420 /* <end> YAHOO IntervalCalender */
421 
422 
423 
424 function gotoInitMode(id){
425 	var allDivs1 = document.getElementById("timeBox-main"+id).getElementsByTagName("*");
426 	var allDivs2 = document.getElementById("monthBox-main"+id).getElementsByTagName("*");
427 
428 	for (i = 0; i < allDivs1.length; i++) {
429 		YAHOO.util.Dom.removeClass(allDivs1[i], 'selected');
430 	}
431 	for (i = 0; i < allDivs2.length; i++) {
432 		YAHOO.util.Dom.removeClass(allDivs2[i], 'selected');
433 	}
434 	wso2vis.fn.getControlFromID(id).startEndHrState = "init";
435 }
436 
437 function getNextMonth(timestamp){
438 	now = new Date(timestamp);
439 	var current;
440 	if (now.getMonth() == 11) {
441 	current = new Date(now.getFullYear() + 1, 0, 1);
442 	} else {
443 	current = new Date(now.getFullYear(), now.getMonth() + 1, 1);
444 	}
445 	return current.getTime();
446 }
447 
448 function getPrevMonth(timestamp){
449 	now = new Date(timestamp);
450 	var current;
451 	if (now.getMonth() == 0) {
452 	current = new Date(now.getFullYear() - 1, 11, 1);
453 	} else {
454 	current = new Date(now.getFullYear(), now.getMonth() - 1, 1);
455 	}
456 	return current.getTime();	
457 }
458 
459 var oneDay = 1000 * 60 * 60 * 24;
460 var oneHour = 1000 * 60 * 60;
461 var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");	
462 
463 wso2vis.fn.setPageMode = function(mode, clickedObj, id) {
464 	var d = new Date();
465 	wso2vis.fn.getControlFromID(id).pageMode = mode;
466 	var dateDisplay = YAHOO.util.Dom.get("dateDisplay"+id);
467 	var allObjs = document.getElementById("datesTypes"+id).getElementsByTagName("*");
468 	for (var i = 0; i < allObjs.length; i++) {
469 		if (YAHOO.util.Dom.hasClass(allObjs[i], "sel-left")) {
470 			YAHOO.util.Dom.removeClass(allObjs[i], "sel-left");
471 			YAHOO.util.Dom.addClass(allObjs[i], "nor-left");
472 		}
473 		if (YAHOO.util.Dom.hasClass(allObjs[i], "sel-right")) {
474 			YAHOO.util.Dom.removeClass(allObjs[i], "sel-right");
475 			YAHOO.util.Dom.addClass(allObjs[i], "nor-right");
476 		}
477 		if (YAHOO.util.Dom.hasClass(allObjs[i], "sel-rep")) {
478 			YAHOO.util.Dom.removeClass(allObjs[i], "sel-rep");
479 			YAHOO.util.Dom.addClass(allObjs[i], "nor-rep");
480 		}
481 	}
482 	var timeBoxMain = document.getElementById('timeBox-main'+id);
483 	var cal1Container = document.getElementById('cal1Container'+id);
484 	var monthBoxMain = document.getElementById('monthBox-main'+id);
485 	gotoInitMode(id);            
486 	if (wso2vis.fn.getControlFromID(id).pageMode == 'hour') {
487 		timeBoxMain.style.display = '';
488 		cal1Container.style.display = 'none';
489 		monthBoxMain.style.display = 'none';
490 		YAHOO.util.Dom.removeClass(clickedObj, "nor-left");
491 		YAHOO.util.Dom.addClass(clickedObj, "sel-left");
492 		if (wso2vis.fn.getControlFromID(id).startEndHrState == 'init') {
493 			var hourLate = new Date(d.getTime() - oneHour*8);
494 			var tmpString = getStringMonth(hourLate.getMonth()) + ' ' + hourLate.getDate() + ',' + hourLate.getFullYear() + ' - <span class="hourStrong">' + hourLate.getHours() + ':00</span>';
495 			tmpString += ' -> ' + getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear() + ' - <span class="hourStrong">' + d.getHours() + ':00</span>';
496 			dateDisplay.innerHTML = tmpString;
497 		}
498 		wso2vis.fn.updatePage(id);
499 	}
500 	if (wso2vis.fn.getControlFromID(id).pageMode == 'day') {
501 		d = new Date(d.getFullYear(),d.getMonth(),d.getDate(),0,0,0);
502 		timeBoxMain.style.display = 'none';
503 		monthBoxMain.style.display = 'none';
504 		cal1Container.style.display = '';
505 		YAHOO.util.Dom.removeClass(clickedObj, "nor-rep");
506 		YAHOO.util.Dom.addClass(clickedObj, "sel-rep");
507 		if (wso2vis.fn.getControlFromID(id).startEndHrState == 'init') {
508 			var sevenDayLate = new Date(d.getTime() - 7*oneDay); //Get the yesterdays midnight
509 			var tmpString = getStringMonth(sevenDayLate.getMonth()) + ' ' + sevenDayLate.getDate() + ',' + sevenDayLate.getFullYear();
510 			tmpString += ' -> ' + getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear();
511 			dateDisplay.innerHTML = tmpString;
512 			wso2vis.fn.getControlFromID(id).startHr = sevenDayLate.getTime();
513 			wso2vis.fn.getControlFromID(id).endHr = d.getTime();
514 		}
515 		wso2vis.fn.updatePage(id);
516 	}
517 	if (wso2vis.fn.getControlFromID(id).pageMode == 'month') {
518 		d = new Date(d.getFullYear(),d.getMonth(),1,0,0,0);
519 		timeBoxMain.style.display = 'none';
520 		monthBoxMain.style.display = '';
521 		cal1Container.style.display = 'none';
522 		YAHOO.util.Dom.removeClass(clickedObj, "nor-right");
523 		YAHOO.util.Dom.addClass(clickedObj, "sel-right");
524 		if (wso2vis.fn.getControlFromID(id).startEndHrState == 'init') {
525 			var twoMonthLate = new Date(getPrevMonth(getPrevMonth(d.getTime()))); //Get the prev month
526 			var tmpString = getStringMonth(twoMonthLate.getMonth()) + ' ' + twoMonthLate.getDate() + ',' + twoMonthLate.getFullYear();
527 			tmpString += ' -> ' + getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear();
528 			dateDisplay.innerHTML = tmpString;
529 			wso2vis.fn.getControlFromID(id).startHr = twoMonthLate.getTime();
530 			wso2vis.fn.getControlFromID(id).endHr = d.getTime();
531 		}
532 		wso2vis.fn.updatePage(id);
533 	}
534 }
535 
536 wso2vis.fn.updatePage = function(id, butt){
537 	if (butt !== undefined)
538 	   (wso2vis.fn.getControlFromID(id)).onApplyClicked(wso2vis.fn.getControlFromID(id).pageMode, wso2vis.fn.getControlFromID(id).startHr, wso2vis.fn.getControlFromID(id).endHr);
539 	
540 	if (!wso2vis.fn.getControlFromID(id).firstStart) {
541 		var now = new Date();
542 		if (wso2vis.fn.getControlFromID(id).startEndHrState == "init") {
543 			if (wso2vis.fn.getControlFromID(id).pageMode == "hour") {
544 				now = getClearTimestamp(now.getTime());
545 				wso2vis.fn.getControlFromID(id).startHr = now - 8 * oneHour;
546 				wso2vis.fn.getControlFromID(id).endHr = now;
547 			} else if (wso2vis.fn.getControlFromID(id).pageMode == "day") {
548 				now = new Date(now.getFullYear(), now.getMonth(), now.getDate());
549 				wso2vis.fn.getControlFromID(id).startHr = now.getTime() - oneDay * 7;
550 				wso2vis.fn.getControlFromID(id).endHr = now.getTime();
551 			} else if (wso2vis.fn.getControlFromID(id).pageMode == "month") {
552 				now = new Date(now.getFullYear(), now.getMonth(), 1);
553 				wso2vis.fn.getControlFromID(id).startHr = getPrevMonth(getPrevMonth(now.getTime()));
554 				wso2vis.fn.getControlFromID(id).endHr = now.getTime();
555 			}
556 		}else if(wso2vis.fn.getControlFromID(id).startEndHrState == "startSet") {
557 			wso2vis.fn.getControlFromID(id).endHr = wso2vis.fn.getControlFromID(id).startHr;
558 			if (wso2vis.fn.getControlFromID(id).pageMode == "hour") {
559 				wso2vis.fn.getControlFromID(id).startHr = wso2vis.fn.getControlFromID(id).startHr - 8 * oneHour;
560 			 } else if (wso2vis.fn.getControlFromID(id).pageMode == "day") {
561 				wso2vis.fn.getControlFromID(id).startHr = wso2vis.fn.getControlFromID(id).startHr - oneDay * 7;
562 			} else if (wso2vis.fn.getControlFromID(id).pageMode == "month") {
563 				wso2vis.fn.getControlFromID(id).startHr = getPrevMonth(getPrevMonth(wso2vis.fn.getControlFromID(id).startHr));
564 			}
565 		} else if(wso2vis.fn.getControlFromID(id).startEndHrState == "endSet") {
566 		}
567 	}
568 	wso2vis.fn.getControlFromID(id).firstStart = false;
569 	//var startHrToSend = wso2vis.fn.getControlFromID(id).startHr-oneHour*1/2;
570 	//var endHrToSend = wso2vis.fn.getControlFromID(id).endHr-oneHour*1/2;
571 };
572 
573 wso2vis.fn.setHourRange = function(theli, id) {
574 	var inTxt = YAHOO.util.Dom.get("in"+id),outTxt = YAHOO.util.Dom.get("out"+id),dateDisplay=YAHOO.util.Dom.get("dateDisplay"+id);
575 	var timestamp = theli.title;
576 	timestamp = parseInt(timestamp);
577 	var allDivs = document.getElementById("timeBox-main"+id).getElementsByTagName("*");
578 
579 	if (wso2vis.fn.getControlFromID(id).startEndHrState == "init") {
580 		wso2vis.fn.getControlFromID(id).startHr = timestamp;
581 		for (var i = 0; i < allDivs.length; i++) {
582 			YAHOO.util.Dom.removeClass(allDivs[i], 'selected');
583 		}
584 		YAHOO.util.Dom.addClass(theli, 'selected');
585 		wso2vis.fn.getControlFromID(id).startEndHrState = "startSet";
586 		//set the headers and the text boxes
587 		var d = new Date(timestamp);
588 		inTxt.value = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear() + " - " + d.getHours()+":00";
589 		outTxt.value = '';
590 		var tmpString = getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear() + ' - <span class="hourStrong">' + d.getHours() + ':00</span>';
591 		dateDisplay.innerHTML = tmpString;
592 
593 	} else if (wso2vis.fn.getControlFromID(id).startEndHrState == "endSet") {
594 		wso2vis.fn.getControlFromID(id).startHr = timestamp;
595 		for (var i = 0; i < allDivs.length; i++) {
596 			YAHOO.util.Dom.removeClass(allDivs[i], 'selected');
597 		}
598 		YAHOO.util.Dom.addClass(theli, 'selected');
599 		wso2vis.fn.getControlFromID(id).startEndHrState = "startSet";
600 
601 		//set the headers and the text boxes
602 		var d = new Date(timestamp);
603 		inTxt.value = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear() + " - " + d.getHours()+":00";
604 		outTxt.value = '';
605 		var tmpString = getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear() + ' - <span class="hourStrong">' + d.getHours() + ':00</span>';
606 		dateDisplay.innerHTML = tmpString;
607 
608 	} else if (wso2vis.fn.getControlFromID(id).startEndHrState == "startSet") {
609 		wso2vis.fn.getControlFromID(id).endHr = timestamp;
610 		if (wso2vis.fn.getControlFromID(id).startHr > wso2vis.fn.getControlFromID(id).endHr) {//Swap if the end time is smaller than start time
611 			var tmp = wso2vis.fn.getControlFromID(id).endHr;
612 			wso2vis.fn.getControlFromID(id).endHr = wso2vis.fn.getControlFromID(id).startHr;
613 			wso2vis.fn.getControlFromID(id).startHr = tmp;
614 		}
615 		for (var i = 0; i < allDivs.length; i++) {
616 			if (allDivs[i].title <= wso2vis.fn.getControlFromID(id).endHr && allDivs[i].title >= wso2vis.fn.getControlFromID(id).startHr) {
617 				YAHOO.util.Dom.addClass(allDivs[i], 'selected');
618 			}
619 			else {
620 				YAHOO.util.Dom.removeClass(allDivs[i], 'selected');
621 			}
622 		}
623 		wso2vis.fn.getControlFromID(id).startEndHrState = "endSet";
624 
625 		//set the headers and the text boxes
626 		var dStart = new Date(wso2vis.fn.getControlFromID(id).startHr);
627 		var dEnd = new Date(wso2vis.fn.getControlFromID(id).endHr);
628 		inTxt.value = (dStart.getMonth() + 1) + "/" + dStart.getDate() + "/" + dStart.getFullYear() + " - " + dStart.getHours()+":00";
629 		outTxt.value = (dEnd.getMonth() + 1) + "/" + dEnd.getDate() + "/" + dEnd.getFullYear() + " - " + dEnd.getHours()+":00";
630 		var tmpString = getStringMonth(dStart.getMonth()) + ' ' + dStart.getDate() + ',' + dStart.getFullYear() + ' - <span class="hourStrong">' + dStart.getHours() + ':00</span>' +' -> ' +getStringMonth(dEnd.getMonth()) + ' ' + dEnd.getDate() + ',' + dEnd.getFullYear() + ' - <span class="hourStrong">' + dEnd.getHours() + ':00</span>';
631 		dateDisplay.innerHTML = tmpString;
632 	}
633 };
634 
635 wso2vis.fn.navHour = function(direction, id) {
636 	if (direction == "left") {
637 		wso2vis.fn.getControlFromID(id).currentTimestamp -= oneDay;
638 	} else if (direction == "right") {
639 		wso2vis.fn.getControlFromID(id).currentTimestamp += oneDay;
640 	}
641 	genTimeHours(id);
642 	var allDivs = document.getElementById("timeBox-main"+id).getElementsByTagName("*");
643 	if (wso2vis.fn.getControlFromID(id).startEndHrState == "startSet") {
644 		for (var i = 0; i < allDivs.length; i++) {
645 			if (allDivs[i].title == wso2vis.fn.getControlFromID(id).startHr) {
646 				YAHOO.util.Dom.addClass(allDivs[i], 'selected');
647 			}
648 		}
649 	} else if (wso2vis.fn.getControlFromID(id).startEndHrState == "endSet") {
650 		for (var i = 0; i < allDivs.length; i++) {
651 			if (allDivs[i].title <= wso2vis.fn.getControlFromID(id).endHr && allDivs[i].title >= wso2vis.fn.getControlFromID(id).startHr) {
652 				YAHOO.util.Dom.addClass(allDivs[i], 'selected');
653 			}
654 			else {
655 				YAHOO.util.Dom.removeClass(allDivs[i], 'selected');
656 			}
657 		}
658 	}
659 };
660 
661 wso2vis.fn.navMonth = function(direction, id){
662 	if (direction == "left") {
663 		wso2vis.fn.getControlFromID(id).currentTimestamp = getPrevYear(wso2vis.fn.getControlFromID(id).currentTimestamp);
664 	} else if (direction == "right") {
665 		wso2vis.fn.getControlFromID(id).currentTimestamp = getNextYear(wso2vis.fn.getControlFromID(id).currentTimestamp);
666 	}
667 	genTimeMonths(id);
668 	var allDivs = document.getElementById("monthBox-main"+id).getElementsByTagName("*");
669 	if (wso2vis.fn.getControlFromID(id).startEndHrState == "startSet") {
670 		for (var i = 0; i < allDivs.length; i++) {
671 			if (allDivs[i].title == wso2vis.fn.getControlFromID(id).startHr) {
672 				YAHOO.util.Dom.addClass(allDivs[i], 'selected');
673 			}
674 		}
675 	} else if (wso2vis.fn.getControlFromID(id).startEndHrState == "endSet") {
676 		for (var i = 0; i < allDivs.length; i++) {
677 			if (allDivs[i].title <= wso2vis.fn.getControlFromID(id).endHr && allDivs[i].title >= wso2vis.fn.getControlFromID(id).startHr) {
678 				YAHOO.util.Dom.addClass(allDivs[i], 'selected');
679 			}
680 			else {
681 				YAHOO.util.Dom.removeClass(allDivs[i], 'selected');
682 			}
683 		}
684 	}
685 };
686 
687 wso2vis.fn.setMonthRange = function(theli, id){
688 	var inTxt = YAHOO.util.Dom.get("in"+id),outTxt = YAHOO.util.Dom.get("out"+id),dateDisplay=YAHOO.util.Dom.get("dateDisplay"+id);
689 	var timestamp = theli.title;
690 	timestamp = parseInt(timestamp);
691 	var allDivs = document.getElementById("monthBox-main"+id).getElementsByTagName("*");
692 
693 	if (wso2vis.fn.getControlFromID(id).startEndHrState == "init") {
694 		wso2vis.fn.getControlFromID(id).startHr = timestamp;
695 		for (var i = 0; i < allDivs.length; i++) {
696 			YAHOO.util.Dom.removeClass(allDivs[i], 'selected');
697 		}
698 		YAHOO.util.Dom.addClass(theli, 'selected');
699 		wso2vis.fn.getControlFromID(id).startEndHrState = "startSet";
700 		//set the headers and the text boxes
701 		var d = new Date(timestamp);
702 		inTxt.value = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();
703 		outTxt.value = '';
704 		var tmpString = getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear();
705 		dateDisplay.innerHTML = tmpString;
706 
707 	} else if (wso2vis.fn.getControlFromID(id).startEndHrState == "endSet") {
708 		wso2vis.fn.getControlFromID(id).startHr = timestamp;
709 		for (var i = 0; i < allDivs.length; i++) {
710 			YAHOO.util.Dom.removeClass(allDivs[i], 'selected');
711 		}
712 		YAHOO.util.Dom.addClass(theli, 'selected');
713 		wso2vis.fn.getControlFromID(id).startEndHrState = "startSet";
714 
715 		//set the headers and the text boxes
716 		var d = new Date(timestamp);
717 		inTxt.value = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();
718 		outTxt.value = '';
719 		var tmpString = getStringMonth(d.getMonth()) + ' ' + d.getDate() + ',' + d.getFullYear() ;
720 		dateDisplay.innerHTML = tmpString;
721 
722 	} else if (wso2vis.fn.getControlFromID(id).startEndHrState == "startSet") {
723 		wso2vis.fn.getControlFromID(id).endHr = timestamp;
724 		if (wso2vis.fn.getControlFromID(id).startHr > wso2vis.fn.getControlFromID(id).endHr) {//Swap if the end time is smaller than start time
725 			var tmp = wso2vis.fn.getControlFromID(id).endHr;
726 			wso2vis.fn.getControlFromID(id).endHr = wso2vis.fn.getControlFromID(id).startHr;
727 			wso2vis.fn.getControlFromID(id).startHr = tmp;
728 		}
729 		for (var i = 0; i < allDivs.length; i++) {
730 			if (allDivs[i].title <= wso2vis.fn.getControlFromID(id).endHr && allDivs[i].title >= wso2vis.fn.getControlFromID(id).startHr) {
731 				YAHOO.util.Dom.addClass(allDivs[i], 'selected');
732 			}
733 			else {
734 				YAHOO.util.Dom.removeClass(allDivs[i], 'selected');
735 			}
736 		}
737 		wso2vis.fn.getControlFromID(id).startEndHrState = "endSet";
738 
739 		//set the headers and the text boxes
740 		var dStart = new Date(wso2vis.fn.getControlFromID(id).startHr);
741 		var dEnd = new Date(wso2vis.fn.getControlFromID(id).endHr);
742 		inTxt.value = (dStart.getMonth() + 1) + "/" + dStart.getDate() + "/" + dStart.getFullYear();
743 		outTxt.value = (dEnd.getMonth() + 1) + "/" + dEnd.getDate() + "/" + dEnd.getFullYear();
744 		var tmpString = getStringMonth(dStart.getMonth()) + ' ' + dStart.getDate() + ',' + dStart.getFullYear() + ' -> ' + getStringMonth(dEnd.getMonth()) + ' ' + dEnd.getDate() + ',' + dEnd.getFullYear();
745 		dateDisplay.innerHTML = tmpString;
746 	}
747 };
748 
749 wso2vis.fn.toggleDateSelector = function(id) {
750 	var anim = "";
751 	var attributes = "";
752 	var datesSelectionBox = document.getElementById('datesSelectionBox' + id);
753 	var imgObj = document.getElementById('imgObj'+id);
754 	if (datesSelectionBox.style.display == "none") {
755 		attributes = {
756 			opacity: { to: 1 },
757 			height: { to: 230 }
758 		};
759 		anim = new YAHOO.util.Anim('datesSelectionBox' + id, attributes);
760 		datesSelectionBox.style.display = "";
761 		imgObj.src = "../images/up.png";
762 	} else {
763 		attributes = {
764 			opacity: { to: 0 },
765 			height: { to: 0 }
766 		};
767 		anim = new YAHOO.util.Anim('datesSelectionBox' + id, attributes);
768 
769 		anim.onComplete.subscribe(function() {
770 			datesSelectionBox.style.display = "none";
771 		}, datesSelectionBox);
772 		imgObj.src = "../images/down.png";
773 	}
774 
775 	anim.duration = 0.3;
776 	anim.animate();
777 }
778 
779