rsence 2.1.11 → 2.2.0

data/js/datetime/calendar/themes/default/calendar.html

@@ -1,3 +1,14 @@
+<div class="calendar_bg">
+  <div class="calendar_nw"></div>
+  <div class="calendar_n"></div>
+  <div class="calendar_ne"></div>
+  <div class="calendar_w"></div>
+  <div class="calendar_c"></div>
+  <div class="calendar_e"></div>
+  <div class="calendar_sw"></div>
+  <div class="calendar_s"></div>
+  <div class="calendar_se"></div>
+</div>
 <div class="calendar_control" id="control#{_ID}">
   <div class="calendar_head">
     <div class="calendar_head_prev_month" onclick="HSystem.views[#{this.viewId}].prevMonth();"></div>

data/js/datetime/datetimepicker/datetimepicker.js

@@ -0,0 +1,217 @@
+/*   RSence
+ *   Copyright 2010 Riassence Inc.
+ *   http://riassence.com/
+ *
+ *   You should have received a copy of the GNU General Public License along
+ *   with this software package. If not, contact licensing@riassence.com
+ */
+
+var
+HDateTimePicker = HControl.extend({
+  setLocked: function(_lockedState){
+    var
+    _enabledState = !_lockedState;
+    this.yyyy.setEnabled(_enabledState);
+    this.mm.setEnabled(_enabledState);
+    this.dd.setEnabled(_enabledState);
+    this.h.setEnabled(_enabledState);
+    this.m.setEnabled(_enabledState);
+  },
+  refreshValue: function(_readMode){
+    if(!this.drawn){
+      return;
+    }
+    if(!this.m){
+      return;
+    }
+    this.setLocked( HVM.values[ this.options.lockedId ].value );
+    var
+    date = new Date( this.value*1000 ),
+    yyyy = date.getUTCFullYear(),
+    mm = date.getUTCMonth()+1,
+    dd = date.getUTCDate(),
+    h = date.getUTCHours(),
+    m = date.getUTCMinutes();
+    if(_readMode){
+      var
+      nuDate = new Date( this.value*1000 ),
+      doSet = false;
+      if(this.yyyyValue.value !== yyyy){
+        nuDate.setUTCFullYear( this.yyyyValue.value ); doSet = true;
+      }
+      if(this.mmValue.value !== mm){
+        nuDate.setUTCMonth( this.mmValue.value-1 ); doSet = true;
+      }
+      if(this.ddValue.value !== dd){
+        nuDate.setUTCDate( this.ddValue.value ); doSet = true;
+      }
+      if(this.hValue.value !== h){
+        nuDate.setUTCHours( this.hValue.value ); doSet = true;
+      }
+      if(this.mValue.value !== m){
+        nuDate.setUTCMinutes( this.mValue.value ); doSet = true;
+      }
+      if(doSet){
+        this.setValue( nuDate.getTime()/1000 );
+        this.setMonthMax( nuDate );
+      }
+    }
+    else{
+      this.yyyyValue.set( yyyy );
+      this.mmValue.set( mm );
+      this.ddValue.set( dd );
+      this.hValue.set( h );
+      this.mValue.set( m );
+    }
+  },
+  setMonthMax: function( nuDate ){
+    nuDate.setUTCSeconds( 0 );
+    nuDate.setUTCMinutes( 0 );
+    nuDate.setUTCHours( 0 );
+    nuDate.setUTCDate( 1 );
+    var
+    mm = nuDate.getUTCMonth();
+    if(mm === 11){
+      nuDate.setUTCMonth( 0 );
+      nuDate.setUTCFullYear( nuDate.getUTCFullYear()+1 );
+    }
+    else {
+      nuDate.setUTCMonth( mm+1 );
+    }
+    var
+    ms = nuDate.getTime() - 1000,
+    maxDaysDate = new Date(ms),
+    maxDays = maxDaysDate.getUTCDate();
+    // console.log('maxDaysDate:',maxDaysDate.getUTCFullYear(),'-',maxDaysDate.getUTCMonth(),'-',maxDaysDate.getUTCDate());
+    // console.log('maxDays:',maxDays);
+    if(maxDays !== this.dd.numField.options.maxValue){
+      // console.log('reset maxValue..');
+      this.dd.numField.options.maxValue = maxDays;
+      (this.dd.numField.options.maxValue < this.dd.numField.value) && this.ddValue.set( maxDays );
+      this.dd.stepper.options.maxValue = maxDays;
+    }
+  },
+  die: function(){
+    this.yyyyValue.die();
+    this.yyyy.die();
+    this.mmValue.die();
+    this.mm.die();
+    this.ddValue.die();
+    this.dd.die();
+    this.hValue.die();
+    this.h.die();
+    this.mValue.die();
+    this.m.die();
+    this.base();
+  },
+  drawSubviews: function(){
+    ELEM.setStyle( this.elemId, 'overflow', 'visible' );
+    var
+    _NumStepperField = HView.extend({
+      setEnabled: function(_state){
+        this.numField.setEnabled(_state);
+        this.stepper.setEnabled(_state);
+        if(_state){
+          this.stepper.show();
+        }
+        else{
+          this.stepper.hide();
+        }
+      },
+      drawSubviews: function(){
+        ELEM.setStyle( this.elemId, 'overflow', 'visible' );
+        this.numField = HNumericTextControl.extend({
+          refreshValue: function(){
+            this.base();
+            this.parent.parent.refreshValue(true);
+          },
+          textBlur: function(){
+            this.setValue(
+              this.validateText(
+                this.getTextFieldValue()
+              )
+            );
+          }
+        }).nu(
+          [ 0, 0, this.rect.width-10, 21 ],
+          this, {
+            events: {
+              textEnter: false
+            },
+            minValue: this.options.minValue,
+            maxValue: this.options.maxValue,
+            valueObj: this.options.valueObj
+          }
+        );
+        this.stepper = HStepper.nu(
+          [ this.rect.width-15, 0, 15, 21 ],
+          this, {
+            minValue: this.options.minValue,
+            maxValue: this.options.maxValue,
+            valueObj: this.options.valueObj
+          }
+        );
+      }
+    }),
+    _numStepperRect = HRect.nu( 0, 0, 50, 21 );
+    this.yyyyValue = HValue.nu( false, 2010 );
+    this.yyyy = _NumStepperField.nu(
+      HRect.nu( _numStepperRect ),
+      this, {
+        minValue: 2010,
+        maxValue: 2020,
+        valueObj: this.yyyyValue
+      }
+    );
+    _numStepperRect.setWidth( 35 );
+    _numStepperRect.offsetBy( 55, 0 );
+    this.mmValue = HValue.nu( false, 12 );
+    this.mm = _NumStepperField.nu(
+      HRect.nu( _numStepperRect ),
+      this, {
+        minValue: 1,
+        maxValue: 12,
+        valueObj: this.mmValue
+      }
+    );
+    _numStepperRect.offsetBy( 40, 0 );
+    this.ddValue = HValue.nu( false, 24 );
+    this.dd = _NumStepperField.nu(
+      HRect.nu( _numStepperRect ),
+      this, {
+        minValue: 1,
+        maxValue: 31,
+        valueObj: this.ddValue
+      }
+    );
+    _numStepperRect.offsetBy( 50, 0 );
+    this.hValue = HValue.nu( false, 22 );
+    this.h = _NumStepperField.nu(
+      HRect.nu( _numStepperRect ),
+      this, {
+        minValue: 0,
+        maxValue: 23,
+        valueObj: this.hValue
+      }
+    );
+    _numStepperRect.offsetBy( 40, 0 );
+    this.mValue = HValue.nu( false, 45 );
+    this.m = _NumStepperField.nu(
+      HRect.nu( _numStepperRect ),
+      this, {
+        minValue: 0,
+        maxValue: 59,
+        valueObj: this.mValue
+      }
+    );
+    _numStepperRect.offsetBy( 37, 2 );
+    _numStepperRect.setWidth( 60 );
+    HStringView.nu(
+      HRect.nu( _numStepperRect ),
+      this, {
+        valueObj: HVM.values[this.options.tzValueId]
+      }
+    );
+    this.refreshValue();
+  }
+});

data/js/datetime/datetimevalue/datetimevalue.js

@@ -16,10 +16,6 @@ HDateTime = HClass.extend({
   msDay: 86400000,
   msHour: 3600000,
   msMinute: 60000,
-  months_localized: [
-    'January', 'February', 'March', 'April', 'May', 'June', 'July',
-    'August', 'September', 'October', 'November', 'December'
-  ],
   
 /** = Description
   * Returns month name of the given date.
@@ -33,7 +29,7 @@ HDateTime = HClass.extend({
   **/
   monthName: function(_date){
     _date = (_date instanceof Date)?_date:this.date();
-    return this.months_localized[_date.getUTCMonth()];
+    return HLocale.dateTime.strings.monthsLong[_date.getUTCMonth()];
   },
   
 /** = Description
@@ -77,6 +73,13 @@ HDateTime = HClass.extend({
     return _date.getUTCDate();
   },
 
+  setMday: function( _mday ){
+    var
+    _date = this.date();
+    _date.setUTCDate( _mday );
+    return Math.round( _date.getTime()/1000 );
+  },
+
 /** = Description
   * Returns month number for the date given as input.
   * Note that months are numbered from 0 to 11.
@@ -93,6 +96,13 @@ HDateTime = HClass.extend({
     return _date.getUTCMonth();
   },
 
+  setMonth: function( _month ){
+    var
+    _date = this.date();
+    _date.setUTCMonth( _month );
+    return Math.round( _date.getTime()/1000 );
+  },
+
 /** = Description
   * Returns year for given date.
   *
@@ -108,6 +118,13 @@ HDateTime = HClass.extend({
     return _date.getUTCFullYear();
   },
 
+  setYear: function( _year ){
+    var
+    _date = this.date();
+    _date.setUTCFullYear( _year );
+    return Math.round( _date.getTime()/1000 );
+  },
+
 /** = Description
   * Returns the timezone offset in milliseconds.
   *

data/js/datetime/timesheet/themes/default/timesheet.css

@@ -1,30 +1,59 @@
-.timesheet_hours_col {
+.timesheet_label,
+.timesheet_items,
+.timesheet_timeline,
+.timesheet_timeline_hour,
+.timesheet_timeline_line,
+.timesheet_timeline_notch {
   position: absolute;
-  top: 0px; left: 0px; width: 32px;
-  font-family: Arial, sans-serif;
+}
+
+.timesheet_label,
+.timesheet_items,
+.timesheet_timeline {
+  font-family: Helvetica, Arial, sans-serif;
   font-size: 11px;
-  color: #666;
+  color: #000;
   vertical-align: middle;
-  text-align: right;
+  text-align: left;
 }
-.timesheet_hours_row {
-  position: absolute;
-  left: 0px; width: 32px;
+
+.timesheet_label {
+  left: 33px; top: 0px; right: 0px; height: 16px;
+  font-size: 15px;
 }
-.timesheet_lines_col {
-  position: absolute;
-  top: 0px; left: 36px; right: 0px;
-  border-left: 1px solid #aaa;
-  border-bottom: 1px solid #aaa;
-  border-right: 1px solid #aaa;
+
+.timesheet_timeline {
+  left: 0px; top: 0px; right: 0px; bottom: 0px;
+  cursor: move;
 }
-.timesheet_lines_row0,
-.timesheet_lines_row1 {
-  position: absolute;
-  left: 0px; right: 0px; height: 1px;
-  line-height: 1px; font-size: 0px;
-  background-color: #ccc;
+
+.timesheet_timeline_hour {
+  left: 0px; width: 26px; text-align: right; height: 14px;
+}
+
+.timesheet_timeline_line {
+  left: 31px; right: 3px; height: 1px; background-color: #bbb;
+}
+.timesheet_timeline_notch {
+  left: 31px; right: 3px; height: 1px; background-color: #ddd;
+}
+
+.timesheet_items {
+  left: 29px; top: 19px; right: 1px; bottom: 11px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+}
+
+.nohours .timesheet_timeline_notch,
+.nohours .timesheet_timeline_line {
+  left: 2px;
+}
+.nohours .timesheet_timeline_hour {
+  display: none;
+}
+.nohours .timesheet_label {
+  left: 4px;
 }
-.timesheet_lines_row0 {
-  background-color: #aaa;
+.nohours .timesheet_items {
+  left: 0px;
 }

data/js/datetime/timesheet/themes/default/timesheet.html

@@ -1,2 +1,4 @@
-<div class="timesheet_hours_col" id="label#{_ID}"></div>
-<div class="timesheet_lines_col" id="state#{_ID}"></div>
+<div id="label#{_ID}" class="timesheet_label"></div>
+<div id="timeline#{_ID}" class="timesheet_timeline"></div>
+<div id="value#{_ID}" class="timesheet_items"></div>
+${this.themeSettings(30, 20, 0, 10, -6);}

data/js/datetime/timesheet/timesheet.js

@@ -6,149 +6,442 @@
  *   with this software package. If not, contact licensing@riassence.com
  */
 
-/*** = Description
-  ** HTimesheet is a simple timesheet control. 
-  ***/
+HLocale.components.HTimeSheet = {
+  strings: {
+    newItemLabel: 'New item'
+  }
+};
+
+
 var//RSence.DateTime
 HTimeSheet = HControl.extend({
   
-  componentName: 'timesheet',
+  debug: false,
   
-  /* Default amount of pixels per hour. Override with options when necessary. */
-  pxPerHour: 24,
-  
-  /* Default amount of pixels from left. Override with options when necessary. */
-  itemOffsetLeft: 36,
-  
-  /* Default amount of pixels from right. Override with options when necessary. */
-  itemOffsetRight: 0,
+  localeStrings: HLocale.components.HTimeSheet.strings,
+  componentName: 'timesheet',
+  markupElemNames: [
+    'label', 'value', 'timeline'
+  ],
   
   defaultEvents: {
-    draggable: true
+    draggable: true,
+    click: true,
+    doubleClick: true,
+    resize: true
   },
   
   controlDefaults: HControlDefaults.extend({
-    pxPerHour: null,
-    itemOffsetLeft: null,
-    itemOffsetRight: null,
-    itemMinHeight: 24,
-    newItemLabel: 'New Item',
-    constructor: function(_ctrl){
-      if(this.pxPerHour !== null){
-        _ctrl.pxPerHour = this.pxPerHour;
+    timeStart: 0,      // 1970-01-01 00:00:00
+    timeEnd:   86399,  // 1970-01-01 23:59:59
+    tzOffset:  0,      // timezone offset in seconds; eg: 7200 => UTC+2
+    itemMinHeight: 16,
+    hideHours: false,
+    autoLabel: false,  // automatically set the label to the date
+    autoLabelFn: 'formatDate',
+    autoLabelFnOptions: { longWeekDay: true },
+    notchesPerHour: 4,    // by default 1/4 of an hour precision (15 minutes)
+    itemOffsetLeft: 64,   // Theme settings; don't enter in options
+    itemOffsetRight: 0,   // Theme settings; don't enter in options
+    itemOffsetTop: 20,    // Theme settings; don't enter in options
+    itemOffsetBottom: 0,  // Theme settings; don't enter in options
+    itemDisplayTime: true,
+    allowClickCreate: false,
+    allowDoubleClickCreate: true,
+    minDragSize: 5,       // minimum amount of pixels dragged required for accepting a drag
+    hourOffsetTop: -4,    // Theme settings; don't enter in options
+    constructor: function( _ctrl ){
+      if( this.defaultLabel === undefined ){
+        this.defaultLabel = _ctrl.localeStrings.newItemLabel;
       }
-      if(this.itemOffsetLeft !== null){
-        _ctrl.itemOffsetLeft = this.itemOffsetLeft;
+    }
+  }),
+  
+  themeSettings: function( _itemOffsetLeft, _itemOffsetTop, _itemOffsetRight, _itemOffsetBottom, _hourOffsetTop ){
+    if( this.options.hideHours ){
+      ELEM.addClassName( this.elemId, 'nohours' );
+      this.options.itemOffsetLeft = 0;
+    }
+    else if( _itemOffsetLeft !== undefined ) {
+      this.options.itemOffsetLeft = _itemOffsetLeft;      
+    }
+    if( _itemOffsetTop !== undefined ) {
+      this.options.itemOffsetTop = _itemOffsetTop;      
+    }
+    if( _itemOffsetRight !== undefined ) {
+      this.options.itemOffsetRight = _itemOffsetRight;      
+    }
+    if( _itemOffsetBottom !== undefined ) {
+      this.options.itemOffsetBottom = _itemOffsetBottom;      
+    }
+    if( _hourOffsetTop !== undefined ) {
+      this.options.hourOffsetTop = _hourOffsetTop;      
+    }
+  },
+  
+  autoLabel: function(){
+    var
+    _locale = HLocale.dateTime,
+    _label  = _locale[this.options.autoLabelFn]( this.options.timeStart, this.options.autoLabelFnOptions );
+    if( this.label !== _label ){
+      this.label = _label;
+      this.refreshLabel();
+    }
+  },
+  
+  clearHours: function(){
+    for( var i = 0; i < this.hourItems.length; i++ ){
+      ELEM.del( this.hourItems[i] );
+    }
+  },
+  
+  drawHours: function(){
+    
+    var
+    _parentElemId = this.markupElemIds.timeline,
+    _dateStart  = new Date( this.options.timeStart * 1000 ),
+    _dateEnd    = new Date( this.options.timeEnd * 1000 ),
+    _hourStart  = _dateStart.getUTCHours(),
+    _hourEnd    = _dateEnd.getUTCHours(),
+    _hours      = (_hourEnd - _hourStart) + 1,
+    _rectHeight = ELEM.getSize( _parentElemId )[1],
+    _topOffset  = this.options.itemOffsetTop,
+    _height     = _rectHeight - _topOffset - this.options.itemOffsetBottom,
+    _pxPerHour  = _height / _hours,
+    _notchesPerHour = this.options.notchesPerHour,
+    _pxPerLine  = _pxPerHour / _notchesPerHour,
+    _hour       = _hourStart,
+    _bottomPos  = _rectHeight-_height-_topOffset-2,
+    _hourItem,
+    _lineItem,
+    _hourTop,
+    _lineTop,
+    i,
+    _pxPerNotch = _pxPerHour / _notchesPerHour,
+    _notchItem,
+    _notchTop;
+    
+    ELEM.setStyle( _parentElemId, 'visibility', 'hidden', true );
+    
+    ELEM.setStyle( this.markupElemIds.value, 'bottom', _bottomPos+'px' );
+    
+    if( this['hourItems'] !== undefined ){
+      this.clearHours();
+    }
+    this.itemOptions = {
+      notchHeight: _pxPerNotch,
+      notches: (_hours * _notchesPerHour),
+      offsetTop: _topOffset,
+      offsetBottom: _bottomPos,
+      height: _height
+    };
+    this.hourItems = [];
+    for( ; _hour < (_hourEnd+1); _hour++ ){
+      _hourItem = ELEM.make( this.markupElemIds.timeline, 'div' );
+      _lineTop  = Math.round(_topOffset + (_hour*_pxPerHour));
+      if( _hour !== _hourStart ){
+        _hourTop  = _lineTop + this.options.hourOffsetTop;
+        ELEM.setStyle( _hourItem, 'top', _hourTop+'px' );
+        ELEM.addClassName( _hourItem, 'timesheet_timeline_hour' );
+        ELEM.setHTML( _hourItem, _hour+':00' );
+        this.hourItems.push( _hourItem );
+        _lineItem = ELEM.make( _parentElemId, 'div' );
+        ELEM.addClassName( _lineItem, 'timesheet_timeline_line' );
+        ELEM.setStyle( _lineItem, 'top', _lineTop + 'px' );
+        this.hourItems.push( _lineItem );
       }
-      if(this.itemOffsetRight !== null){
-        _ctrl.itemOffsetRight = this.itemOffsetRight;
+      for( i=1; i < _notchesPerHour; i++ ){
+        _notchItem = ELEM.make( _parentElemId, 'div' );
+        ELEM.addClassName( _notchItem, 'timesheet_timeline_notch' );
+        _notchTop = Math.round(_lineTop + (_pxPerNotch*i));
+        ELEM.setStyle( _notchItem, 'top', _notchTop+'px' );
+        this.hourItems.push( _notchItem );
       }
     }
-  }),
+    
+    ELEM.setStyle( this.markupElemIds.timeline, 'visibility', 'inherit' );
+    
+  },
   
-/** = Description
-  * Redraws the timesheet.
-  *
-  **/
+  // extra hook for refreshing; updates label and hours before doing common things
   refresh: function(){
-    if(this.drawn){
-      var _areaHeight = this.rect.height;
-      this.pxPerHour = (_areaHeight-(_areaHeight%48)) / 24;
-      if(this.options['hideLabel']){
-        this.setStyleOfPart( 'label', 'display', 'none' );
-        this.setStyleOfPart( 'state', 'left', '0px' );
-        this.itemOffsetLeft = 0;
+    if( this.drawn ){
+      if( this.options.autoLabel ){
+        this.autoLabel();
       }
-      else{
-        this.setStyleOfPart( 'label', 'height', (this.pxPerHour*24)+'px' );
-      }
-      this.setStyleOfPart( 'state', 'height', (this.pxPerHour*24)+'px' );
+      this.drawHours();
     }
     this.base();
   },
   
-/** = Description
-  * Refreshes the hour labels.
-  *
-  **/
-  refreshLabel: function(){
-    var hour = 1,
-        hours = [],
-        rowHeight = this.pxPerHour;
-        lineHeight = Math.round(this.pxPerHour/2);
-    for(; hour < 24; hour++){
-      hours.push('<div style="line-height:'+rowHeight+'px;height:'+rowHeight+'px;top:'+Math.round((hour*rowHeight)-lineHeight)+'px" class="timesheet_hours_row">'+hour+':00</div>');
+  // set the timezone offset (in seconds)
+  setTzOffset: function( _tzOffset ){
+    this.options.tzOffset = _tzOffset;
+    this.refresh();
+  },
+  
+  // set the start timestamp of the timesheet
+  setTimeStart: function( _timeStart ){
+    this.options.timeStart = _timeStart;
+    this.refresh();
+  },
+  
+  // set the end timestamp of the timesheet
+  setTimeEnd: function( _timeEnd ){
+    this.options.timeEnd = _timeEnd;
+    this.refresh();
+  },
+  
+  // sets the range of timestams of the timesheet
+  setTimeRange: function( _timeRange ){
+    if( (_timeRange instanceof Array) && (_timeRange.length === 2) ){
+      this.setTimeStart( _timeRange[0] );
+      this.setTimeEnd(   _timeRange[1] );
+    }
+    else if(
+      (_timeRange instanceof Object) &&
+      (_timeRange['timeStart'] !== undefined) &&
+      (_timeRange['timeEnd'] !== undefined)
+    ){
+      this.setTimeStart( _timeRange.timeStart );
+      this.setTimeEnd(   _timeRange.timeEnd   );
     }
-    this.markupElemIds && this.markupElemIds.label && ELEM.setHTML(this.markupElemIds.label,hours.join(''));
-    this.refreshState();
   },
   
-/** = Description
-  * Refreshes the lines which mark hours and half-hours.
-  *
-  **/
-  refreshState: function(){
-    var line = 0,
-        lines = [],
-        lineHeight = Math.round(this.pxPerHour/2);
-    for(; line < 48; line++){
-      lines.push('<div style="top:'+(line*lineHeight)+'px" class="timesheet_lines_row'+(line%2)+'"></div>');
+  // sets the timestamp of the timesheet
+  setDate: function( _date ){
+    var
+    _range = (this.options.timeEnd - this.options.timeStart),
+    _newTimeRange = [
+      _date,
+      _date + _range
+    ];
+    this.setTimeRange( _newTimeRange );
+    this.refresh();
+  },
+  
+  // draw decorations
+  drawSubviews: function(){
+    this.drawHours();
+    var
+    _options = this.options,
+    _minDuration = Math.round(3600/_options.notchesPerHour),
+    _dummyValue = {
+      // id: 'new',
+      label: '',
+      start: 0,
+      duration: _minDuration,
+      // locked: false,
+      color: '#cc0000'
+    };
+    this.dragPreviewRect = this.rectFromValue({start:_options.timeStart,duration:_minDuration});
+    this.minDuration = _minDuration;
+    this.dragPreview = HTimeSheetItem.nu(
+      this.dragPreviewRect,
+      this, {
+        value: _dummyValue,
+        visible: false,
+        displayTime: this.options.itemDisplayTime
+      }
+    );
+    this.dragPreview.setStyleOfPart('state','color','#fff');
+  },
+  
+  // event listener for clicks, simulates double clicks in case of not double click aware browser
+  click: function( x, y, b ){
+    var
+    prevClickTime = false,
+    notCreated = !this.clickCreated && !this.doubleClickCreated && !this.dragCreated;
+    // this.doubleClickSimCreated = false;
+    if( !this.startDragTime && this.prevClickTime ){
+      prevClickTime = this.prevClickTime;
+    }
+    else if (this.startDragTime){
+      prevClickTime = this.startDragTime;
+    }
+    if( notCreated && this.options.allowClickCreate ){
+      // console.log('click create');
+      this.clickCreate( x,y );
+      this.clickCreated = true;
+      this.doubleClickCreated = false;
+      this.prevClickTime = false;
+    }
+    else if( notCreated && this.options.allowDoubleClickCreate ){
+      var
+      currTime = new Date().getTime(),
+      timeDiff = prevClickTime?(currTime - prevClickTime):-1;
+      if( timeDiff > 150 && timeDiff < 500 && !this.doubleClickCreated ){
+        // console.log('click double create');
+        this.clickCreate( x, y );
+        this.clickCreated = false;
+        this.doubleClickCreated = true;
+        this.doubleClickSimCreated = true;
+      }
+      else {
+        this.doubleClickCreated = false;
+      }
+      this.prevClickTime = currTime;
+    }
+    else {
+      this.clickCreated = false;
+      this.doubleClickCreated = false;
+      this.prevClickTime = false;
     }
-    this.markupElemIds && this.markupElemIds.label && ELEM.setHTML(this.markupElemIds.state,lines.join(''));
   },
-  dragItem: false,
   
-/** = Description
-  * Creates an item into timesheet with default label 'New Item'.
-  *
-  * = Parameters
-  * +origY+:: Y coordinate of the new item.
-  *
-  **/
-  createItem: function(origY){
-    var _lineHeight = Math.round(this.pxPerHour/2);
-    origY = Math.floor( origY / _lineHeight )*_lineHeight;
-    var maxY = _lineHeight*48,
-        lineHeight = Math.round(this.pxPerHour/2);
-    if(origY>maxY){
-      origY = maxY;
+  // creates an item on click
+  clickCreate: function(x,y){
+    var
+    _startTime = this.pxToTime( y-this.pageY() ),
+    _endTime = _startTime + this.minDuration;
+    this.refreshDragPreview( _startTime, _endTime );
+    this.dragPreview.bringToFront();
+    this.dragPreview.show();
+    if( this.activateEditor( this.dragPreview ) ){
+      this.editor.createItem( HVM.clone( this.dragPreview.value ) );
+    }
+    else {
+      this.dragPreview.hide();
     }
-    this.dragItem = this.createTimeSheetItem( { label: this.options.newItemLabel }, origY, lineHeight, 'create' );
   },
   
-/** = Description
-  * Dragging is used to mark items on the timesheet.
-  * 
-  * = Parameters
-  * +x+:: x coordinate of the origin of drag
-  * +y+:: y coordinate of the origin of drag
-  *
-  **/
-  startDrag: function(x,y){
-    this._startDragTime = new Date().getTime();
-    this._startDragCoords = [x,y];
+  // event listener for double clicks
+  doubleClick: function(x,y){
+    this.prevClickTime = false;
+    this.doubleClickCreated = false;
+    var notCreated = !this.clickCreated && !this.doubleClickCreated && !this.doubleClickSimCreated && !this.dragCreated;
+    if( !this.options.allowDoubleClickCreate && this.options.allowClickCreate && notCreated ){
+      this.click(x,y);
+    }
+    else if ( this.options.allowDoubleClickCreate && !this.options.allowClickCreate && notCreated ){
+      // console.log('double click create');
+      this.clickCreate( x, y );
+      this.clickCreated = false;
+      this.doubleClickCreated = true;
+    }
+    else {
+      // console.log('no double click create');
+      this.clickCreated = false;
+    }
+    this.doubleClickSimCreated = false;
+  },
+  
+  // update the preview area
+  refreshDragPreview: function( _startTime, _endTime ){
+    this.dragPreviewRect.setTop( this.timeToPx( _startTime, true ) );
+    this.dragPreviewRect.setBottom( this.timeToPx( _endTime, true ) );
+    if( this.dragPreviewRect.height < this.options.itemMinHeight ){
+      this.dragPreviewRect.setHeight( this.options.itemMinHeight );
+    }
+    this.dragPreview.drawRect();
+    this.dragPreview.value.start = _startTime;
+    this.dragPreview.value.duration = _endTime - _startTime;
+    this.dragPreview.refreshValue();
+  },
+  
+  // drag & drop event listeners, used for dragging new timesheet items
+  startDrag: function( x, y, b ){
+    // console.log('st');
+    this._startDragY = y;
+    this.startDragTime = this.pxToTime( y-this.pageY() );
+    this.refreshDragPreview( this.startDragTime, this.startDragTime + this.minDuration );
+    this.dragPreview.bringToFront();
+    this.dragPreview.show();
     return true;
   },
   
-  drag: function(x,y){
-    if(((new Date().getTime()) - this._startDragTime) < 200){
-      // only create when 200 ms has elapsed to enable clicking
-      return true;
+  drag: function( x, y, b ){
+    // console.log('dr');
+    var
+    _dragTime = this.pxToTime( y-this.pageY() ),
+    _startTime,
+    _endTime;
+    if( _dragTime < this.startDragTime ){
+      _startTime = _dragTime;
+      _endTime = this.startDragTime;
     }
-    if(this._startDragCoords[0]!==x && this._startDragCoords[1]!==y){
-      this.createItem(this._startDragCoords[1]-this.pageY());
-      EVENT.startDragging( this.dragItem );
-      return true;
+    else {
+      _endTime = _dragTime;
+      _startTime = this.startDragTime;
     }
+    this.refreshDragPreview( _startTime, _endTime );
+    return true;
   },
   
-  click: function(x,y){
-    // deactivate all items
-    EVENT.changeActiveControl(this);
-    return true;
+  endDrag: function( x, y, b ){
+    // console.log('ed');
+    var
+    _dragTime = this.pxToTime( y-this.pageY() ),
+    _minDistanceSatisfied = Math.abs( this._startDragY - y ) >= this.options.minDragSize;
+    // if( this.options.allowClickCreate ){
+    //   _minDistanceSatisfied = true;
+    // }
+    this.dragPreview.hide();
+    if( _dragTime !== this.startDragTime ){
+      if( _minDistanceSatisfied ){
+        if( this.activateEditor( this.dragPreview ) ){
+          // console.log('drag create');
+          this.dragCreated = true;
+          this.editor.createItem( HVM.clone( this.dragPreview.value ) );
+          return true;
+        }
+      }
+      this.dragCreated = false;
+    }
+    else {
+      this.dragCreated = false;
+      this.clickCreated = false;
+      this.startDragTime = false;
+      this.click( x, y, b );
+      return true;
+    }
+    return false;
   },
   
-  listItemViews: false,
+  // a resize triggers refresh, of which the important part is refreshValue, which triggers redraw of the time sheet items
+  resize: function(){
+    this.base();
+    this.refresh();
+  },
+
+  // snaps the time to grid
+  snapTime: function( _timeSecs ){
+    var
+    _options = this.options,
+    _pxDate = new Date( Math.round(_timeSecs) * 1000 ),
+    _snapSecs = Math.round( 3600 / _options.notchesPerHour ),
+    _halfSnapSecs = _snapSecs * 0.5,
+    _hourSecs = (_pxDate.getUTCMinutes()*60) + _pxDate.getUTCSeconds(),
+    _remSecs  = _hourSecs % _snapSecs;
+    if( _remSecs > _halfSnapSecs ){
+      _timeSecs += _snapSecs-_remSecs;
+    }
+    else {
+      _timeSecs -= _remSecs;
+    }
+    return _timeSecs;
+  },
+
+  // snaps the pixel to grid
+  snapPx: function( _px ){
+    var
+    _timeSecs = this.pxToTime( _px );
+    _timeSecs = this.snapTime( _timeSecs );
+    return this.timeToPx( _timeSecs );
+  },
+
+  // activates the editor; _item is the timesheet item to edit
+  activateEditor: function( _item ){
+    if( this['editor'] ){
+      var _editor = this.editor;
+      _editor.setTimeSheetItem( _item );
+      _item.bringToFront();
+      _editor.bringToFront();
+      _editor.show();
+      return true;
+    }
+    return false;
+  },
   
 /** = Description
   * Sets the editor given as parameter as the editor of instance.
@@ -160,133 +453,430 @@ HTimeSheet = HControl.extend({
   setEditor: function( _editor ){
     this.editor = _editor;
   },
-  
-/** = Description
-  * Returns HRect the size of given parameters and suitable for timesheet.
-  *
-  * = Parameters
-  * +_origY+::      Y coordinate.
-  * +_lineHeight+:: The height of item on time sheet.
-  *
-  **/
-  createItemRect: function(_origY, _lineHeight){
-    var _left = this.itemOffsetLeft+1,
-        _top = _origY+1,
-        _right = this.rect.width - this.itemOffsetRight - 1,
-        _bottom = _origY + _lineHeight - 2;
-    if( (_top - _bottom) < this.options.itemMinHeight ){
-      _bottom = _top + this.options.itemMinHeight;
-    }
-    return HRect.nu( _left, _top, _right, _bottom );
-  },
 
 /** = Description
   * Destructor; destroys the editor first and commences inherited die.
   *
   **/
   die: function(){
-    this.editor.die();
+    this.editor && this.editor.die();
+    this.editor = null;
     this.base();
   },
   
-/** = Description
-  * Returns a new time sheet item control. By default returns an instance
-  * of HTimeSheetItem. Extend to use custom time sheet controls customized
-  * for application specific purposes.
-  *
-  * = Parameters
-  * *_value*::      A value object for the item.
-  * *_top*::        Top position, 0 by default.
-  * *_height*::     Height, same as half of +#pxPerHour+ by default.
-  * *_drogMode*::   Dragging mode. 'normal' or 'create'. Is 'normal' by default.
-  *
-  **/
-  createTimeSheetItem: function( _value, _top, _height, _dragMode ) {
-    if(_dragMode===undefined){
-      _dragMode = 'normal';
+  // converts pixels to time
+  pxToTime: function( _px, _noSnap ){
+    var
+    _options = this.options,
+    _timeStart = _options.timeStart,
+    _timeEnd   = _options.timeEnd,
+    _timeRange = _timeEnd - _timeStart,
+    _itemOptions = this.itemOptions,
+    _top       = _itemOptions.offsetTop+1,
+    _height    = _itemOptions.height,
+    _pxPerSec  = _height / _timeRange,
+    _timeSecs;
+    _px -= _top;
+    _timeSecs  = _timeStart + ( _px / _pxPerSec );
+    if( !_noSnap ){
+      _timeSecs = this.snapTime( _timeSecs );
+    }
+    if( _timeSecs > _options.timeEnd ){
+      _timeSecs = _options.timeEnd;
+    }
+    else if ( _timeSecs < _options.timeStart ) {
+      _timeSecs = _options.timeStart;
+    }
+    return Math.round( _timeSecs );
+  },
+
+  // converts time to pixels
+  timeToPx: function( _time, _snap ){
+    
+    if( _snap ){
+      _time = this.snapTime( _time );
+    }
+    
+    var
+    _options = this.options,
+    _timeStart = _options.timeStart,
+    _timeEnd   = _options.timeEnd;
+    
+    if( _time < _timeStart ){
+      _time = _timeStart;
+    }
+    if( _time > _timeEnd ){
+      _time = _timeEnd;
+    }
+    
+    var
+    _timeRange = _timeEnd - _timeStart,
+    _itemOptions = this.itemOptions,
+    _top       = _itemOptions.offsetTop,
+    _height    = _itemOptions.height,
+    _pxPerSec  = _height / _timeRange,
+    _timeSecs  = _time - _timeStart,
+    _px        = _top + ( _timeSecs * _pxPerSec );
+    return Math.round( _px );
+  },
+
+  // converts time to pixels for the rect
+  rectFromValue: function( _value ){
+    var
+    _topPx = this.timeToPx( _value.start ),
+    _bottomPx = this.timeToPx( _value.start + _value.duration ),
+    _leftPx = this.options.itemOffsetLeft,
+    _rightPx = this.rect.width - this.options.itemOffsetRight - 2,
+    _rect;
+    if( _topPx === 'underflow' ){
+      _topPx = _itemOptions.offsetTop;
+    }
+    else if( _topPx === 'overflow' ){
+      return false;
+    }
+    if( _bottomPx === 'underflow' ){
+      return false;
     }
-    if(_top===undefined){
-      _top = 0;
+    else if( _bottomPx === 'overflow' ){
+      _bottomPx = _itemOptions.offsetTop + _itemOptions.height;
     }
-    if(_height===undefined){
-      _height = Math.round(this.pxPerHour/2);
+    _rect = HRect.nu( _leftPx, _topPx, _rightPx, _bottomPx );
+    if( _rect.height < this.options.itemMinHeight ){
+      _rect.setHeight( this.options.itemMinHeight );
     }
+    return _rect;
+  },
+
+  // creates a single time sheet item component
+  createTimeSheetItem: function( _value ){
     var
-    _label = _value['label'],
+    _rect = this.rectFromValue( _value ),
+    _item;
+    if( _rect === false ){
+      return false;
+    }
     _item = HTimeSheetItem.nu(
-      this.createItemRect( _top, _height ),
+      _rect,
       this, {
-        label: _label,
         value: _value,
+        displayTime: this.options.itemDisplayTime,
         events: {
-          draggable: true
+          draggable: true,
+          // click: true,
+          doubleClick: true
         }
       }
     );
-    _item.dragMode = _dragMode;    
     return _item;
   },
-  
-/** = Description
-  * Redraws and refreshes the values on timesheet.
-  *
-  **/
-  refreshValue: function(){
+
+  // calls createTimeSheetItem with each value of the timesheet value array
+  drawTimeSheetItems: function(){
+    
     var
     _data = this.value,
-    i;
-    if(this.listItemViews === false){
-      this.listItemViews = [];
+    i = 0,
+    _value,
+    _item,
+    _items = this.timeSheetItems;
+
+    if((_data instanceof Array) && (_data.length > 0)){
+      for( ; i < _data.length; i++){
+        _value = _data[i];
+        _item = this.createTimeSheetItem( _value );
+        if(_item){
+          _items.push( _item );
+        }
+      }
+    }
+  },
+
+
+/** =Description
+  * Create a new timeSheetItems if it hasn't been done already,
+  * otherwise destroy the items of the old one before proceeding.
+  **/
+  _initTimeSheetItems: function(){
+    if(this.timeSheetItems === undefined){
+      this.timeSheetItems = [];
     }
-    else if(this.listItemViews.length > 0){
-      for( i=0; i<this.listItemViews.length; i++){
-        this.listItemViews[i].die();
+    else if(this.timeSheetItems.length > 0){
+      for( var i=0; i<this.timeSheetItems.length; i++){
+        this.timeSheetItems[i].die();
       }
-      this.listItemViews = [];
+      this.timeSheetItems = [];
     }
-    if(_data instanceof Array && _data.length > 0){
-      var
-      _value,
-      _item;
-      for( i=0; i<_data.length; i++){
-        _value = _data[i];
-        _item = this.createTimeSheetItem( _value );
-        this.listItemViews.push( _item );
+  },
+
+  // checks if i overlaps j
+  // todo: refactor, it's a bit messy
+  _doesOverlap: function( i, j, _overlaps, _rectSelf, _items ){
+    if( _rectSelf === undefined ) {
+      _rectSelf = this.timeSheetItems[i].rect;
+    }
+    if( _items === undefined ){
+      _items = this.timeSheetItems;
+    }
+    var
+    _isntSame = (i !== j),
+    _isntListedSelf = (_overlaps.indexOf(i)===-1),
+    _isntListedOther = (_overlaps.indexOf(j)===-1),
+    _rectOther = _items[j].rect;
+    if( !_isntSame ){ return false; }
+    if( !_isntListedSelf ){ return false; }
+    if( _isntListedOther ){
+      if( _rectOther.intersects( _rectSelf, 1, 1 ) || _rectSelf.intersects( _rectOther, 1, 1 ) ){
+        return true;
       }
     }
+    return false;
+  },
+
+
+  // finds the index in the array which contains most sequential items
+  _findLargestSequence: function( _arr ){
     var
+    i = 1,
+    _index = 0,
+    _length = 1,
+    _maxLength = 1,
+    _bestIndex = 0;
+    for( ; i < _arr.length; i++ ){
+      // grow:
+      if( ( _arr[i] - _arr[i-1] === 1 ) && ( _index === i-_length ) ){
+        _length += 1;
+      }
+      // reset:
+      else {
+        _index = i;
+        _length = 1;
+      }
+      if( _length > _maxLength ){
+        _bestIndex = _index;
+        _maxLength = _length;
+      }
+    }
+    return [ _bestIndex, _maxLength ];
+  },
+
+  // find the amount of overlapping time sheet items
+  _findOverlapCount: function(){
+    var
+    _overlapCount,
+    _items = this._sortedTimeSheetItems(),
     _overlaps = [],
+    _maxOverlapCount = 0,
+    i = 0,
     j;
-    for(i=0;i<this.listItemViews.length;i++){
-      for(j=0;j<this.listItemViews.length;j++){
-        if((i !== j) && (_overlaps.indexOf(i)===-1) && (_overlaps.indexOf(j)===-1)){
-          if(this.listItemViews[i].rect.intersects(this.listItemViews[j].rect)){
-            _overlaps.push(i);
-          }
+    for( ; i < _items.length; i++ ){
+      _overlapCount = 0;
+      for( j = 0; j < _items.length; j++ ){
+        if( this._doesOverlap( i, j, _overlaps, _items[i].rect, _items ) ){
+          _overlapCount++;
+          _overlaps.push( j );
+        }
+      }
+      if( _overlapCount !== 0 ){
+        _overlaps.push( i );
+        if( _overlapCount > _maxOverlapCount ){
+          _maxOverlapCount = _overlapCount;
         }
       }
     }
+    return _maxOverlapCount;
+  },
+
+  // returns a sorted copy of the timeSheetItems array
+  _sortedTimeSheetItems: function( _sortFn ){
+    if( _sortFn === undefined ){
+      _sortFn = function(a,b){
+        return ( b.rect.height - a.rect.height);
+      };
+    }
     var
-    _overlapCount = _overlaps.length+1,
-    _overlapLefts = {},
-    _itemWidth = ( this.rect.width - this.itemOffsetRight - this.itemOffsetLeft ),
-    _width = Math.floor( _itemWidth / _overlapCount),
-    _left = this.itemOffsetLeft;
-    for(j=0;j<_overlapCount;j++){
-      _overlapLefts[_overlaps[j]] = _left + (j*_width) + _width;
-    }
-    for(i=0;i<this.listItemViews.length;i++){
-      if(_overlaps.indexOf(i)===-1){
-        this.listItemViews[i].rect.setLeft(_left);
+    i = 0,
+    _arr = [],
+    _items = this.timeSheetItems;
+    for( ; i < _items.length; i++ ){
+      _arr.push( _items[i] );
+    }
+    _arr = _arr.sort(_sortFn);
+    return _arr;
+  },
+
+
+  // Optimizes the left and right position of each timesheet item to fit
+  _updateTimelineRects: function(){
+    var
+    // loop indexes:
+    i, j, k, l,
+    // amount of items ovelapping (max, actual number might be smaller after optimization)
+    _options = this.options,
+    _rect = this.rect,
+    _overlapCount = this._findOverlapCount(),
+    _availWidth = ( _rect.width - _options.itemOffsetRight - _options.itemOffsetLeft ),
+    _left = _options.itemOffsetLeft,
+    _width = Math.floor( _availWidth / (_overlapCount+1) ),
+    // get a list of timesheet items sorted by height (larger to smaller order)
+    _items = this._sortedTimeSheetItems(),
+    _itemCount = _items.length,
+    _itemRect,
+    _testRect,
+    _leftPos,
+    _rightPos,
+    _maxCol = 0,
+    _origCol,
+    _origColById = [],
+    _overlapCols,
+    _vacantCols,
+    _optimalColAndLength,
+    _col,
+    _colWidth,
+    _overlaps;
+    
+    // No overlapping; nothing to do
+    if(_overlapCount === 0 ){
+      return false;
+    }
+
+    // move all items initially to one column right of the max overlaps
+    _leftPos = _left+(_width*(_overlapCount+1));
+    for( i = 0; i < _itemCount; i++ ){
+      _itemRect = _items[i].rect;
+      _itemRect.setLeft( _leftPos );
+      _itemRect.setRight( _leftPos+_width );
+    }
+
+    // optimize gaps by traversing each combination
+    // and finding the first column with no gaps
+    // the top-level loops three times in the following modes:
+    // 0: place items into the first vacant column and find the actual max columns
+    // 1: stretch columns to final column width
+    // 2: stretch columns to fit multiple columns, if space is vacant
+    for( l = 0; l < 3; l++ ){
+      for( i = 0; i < _itemCount; i++){
+        _itemRect = _items[i].rect;
+        // in mode 1, just the column widths are changed
+        if( l === 1 ){
+          _leftPos = _left + (_origColById[i]*_width);
+          _itemRect.setLeft( _leftPos );
+          _itemRect.setRight( _leftPos + _width );
+          continue;
+        }
+        _testRect = HRect.nu( _itemRect );
+        
+        _overlapCols = [];
+        _vacantCols = [];
+
+        // test each column position (modes 0 and 2)
+        for( k = 0; k < _overlapCount+1; k++ ){
+          _leftPos = _left + (k*_width);
+          _testRect.setLeft( _leftPos );
+          _testRect.setRight( _leftPos + _width );
+          _overlaps = [];
+          for( j = 0; j < _itemCount; j++){
+            if( this._doesOverlap( i, j, _overlaps, _testRect, _items ) ){
+              if( _overlapCols.indexOf( k ) === -1 ){
+                _overlapCols.push( k );
+              }
+            }
+          }
+          if( _vacantCols.indexOf( k ) === -1 && _overlapCols.indexOf( k ) === -1 ){
+            _vacantCols.push( k );
+          }
+        }
+
+        // on the first run (mode 0) place items into the first column:
+        if( l === 0 ){
+          _origCol = _vacantCols[0];
+          _origColById.push( _origCol );
+          _leftPos = _left+(_origCol*_width);
+          _rightPos = _leftPos + _width;
+          if( _maxCol < _origCol ){
+            _maxCol = _origCol;
+          }
+        }
+        else {
+          // on mode 2: stretch to fill multiple column widths,
+          // because no item moving is done anymore at this stage, so we know what's free and what's not
+          if( _vacantCols.length > 0 ){
+            _optimalColAndLength = this._findLargestSequence( _vacantCols );
+            _col = _vacantCols[ _optimalColAndLength[0] ];
+            _colWidth = _optimalColAndLength[1];
+          }
+          else {
+            _origCol = _origColById[i];
+            _col = _origCol;
+            _colWidth = 1;
+          }
+          _leftPos = _left+(_col*_width);
+          _rightPos = _leftPos+(_colWidth*_width);
+        }
+        _itemRect.setLeft( _leftPos );
+        _itemRect.setRight( _rightPos );
       }
-      else {
-        this.listItemViews[i].rect.setLeft(_overlapLefts[i]);
+      // afther the first run (mode 0) we know the actual amount of columns, so adjust column width accordingly
+      if( l === 0 ){
+        _overlapCount = _maxCol;
+        _width = Math.floor( _availWidth / (_maxCol+1) );
       }
-      this.listItemViews[i].rect.setWidth(_width);
     }
-    for(i=0;i<this.listItemViews.length;i++){
-      this.listItemViews[i].drawRect();
+    return true;
+  },
+
+  // draws the timeline (sub-routine of refreshValue)
+  drawTimeline: function(){
+    this._initTimeSheetItems();
+    this.drawTimeSheetItems();
+    this._updateTimelineRects();
+    // use the dimensions of the views
+    for( var i = 0; i < this.timeSheetItems.length; i++){
+      this.timeSheetItems[i].drawRect();
+    }
+  },
+
+  _sha: SHA.nu(8),
+
+/*
+
+Each item looks like this, any extra attributes are allowed,
+but not used and not guaranteed to be preserved:
+
+{
+  id: 'abcdef1234567890', // identifier, used in server to map id's
+  label: 'Event title',   // label of event title
+  start: 1299248619,      // epoch timestamp of event start
+  duration: 3600,           // duration of event in seconds
+  locked: true,           // when false, prevents editing the item
+  icons: [ 1, 3, 6 ],     // icon id's to display
+  color: '#ffffff'        // defaults to '#ffffff' if undefined
+}
+
+
+*/
+/** = Description
+  * Redraws and refreshes the values on timesheet.
+  *
+  **/
+  refreshValue: function(){
+    
+    if(!this.itemOptions){
+      return;
+    }
+
+    // optimization that ensures the rect and previous value are different before redrawing
+    var
+    _valueStr = COMM.Values.encode( this.value ),
+    _rectStr = this.rect.toString(),
+    _timeRangeStr = this.options.timeStart+':'+this.options.timeEnd,
+    _shaSum = this._sha.strSHA1( _valueStr+_rectStr+_timeRangeStr );
+    if( this._prevSum !== _shaSum ){
+      // the preview timesheet item is hidden when new data arrives (including what it created)
+      this.dragPreview.hide();
+      this._prevSum = _shaSum;
+      this.drawTimeline();
     }
   }
+  
 });