Cubes.js

define(["dojo", "put-selector/put", "dojo/date", "dojo/date/locale"], 
function(dojo, put, DD, DF) {

   var genId = 1;
   function nextId() {
     return "lineup_cubes_" + genId++;
   }

  var timeIncrements = function(startTime, endTime) {
    var t = dojo.isString(startTime) ? (new Date(startTime)) : startTime;
    var e = dojo.isString(endTime) ? (new Date(endTime)) : endTime;

    var incs = [];
    while(t <= e) {
      incs.push( DF.format(t, {selector: 'time'}) ); 
      t = dojo.date.add(t, 'minute', 15);
    }
    return incs;
  };
  
  
  return dojo.declare([], {
    showDay: null,
    
    // constructor: function(opts, srcNodeRef) {
    //   console.debug("CTOR");
    // },
    
    postscript: function(opts, srcNodeRef) {
      //console.debug("POSTSCRIPT");
      if (srcNodeRef) {
				// normalize srcNodeRef and store on instance during create process.
				this.srcNodeRef = srcNodeRef = srcNodeRef.nodeType ? srcNodeRef : dojo.byId(srcNodeRef);
			} 
      this.create(opts, srcNodeRef)
      this.inherited(arguments);
    },
    
    // preamble: function() {
    //   this.inherited(arguments);
    //   console.debug("PREAMBLE");
    // },

    // =====
    
    create: function(opts, srcNodeRef) {

      if ('showDay' in opts) {
        this.showDay = opts.showDay;
        this._delayRender = false;
      } else {
        this._delayRender = true;
      }

      var domNode = srcNodeRef || put("div");
      this.domNode = domNode;
      
      // apply id to widget and domNode. From incoming node, widget params, or autogenerated.
    	this.id = domNode.id = domNode.id || this.id || nextId();
      
      put(domNode, '.lineup-cubes');
      if (!this._delayRender) {
        this.render();
      }
    },
    
    render: function() {
      this.domNode.innerHTML = '<br/>';
      this.headerNode = put(this.domNode, 'div.cubes-header');
      this.bodyNode = put(this.domNode, 'div.cubes-body');
      
      var table = put(this.domNode, 'table tbody');
      this.headerNode = put(table, 'tr.cubes-header');
      this.bodyNode = put(table, 'tr.cubes-body');
      this.footerNode = put(table, 'tr.cubes-footer');

      this.renderHeader();
      
      this.renderBody();
    },
    
    renderHeader: function() {
      console.debug("renderHeader; this=%o", this);
      put(this.headerNode, 'th.time'); // no header content for times column

      dojo.forEach(this.showDay.venues, function(showsInfo) {
        //console.debug("showsInfo = %o", showsInfo);
        put(this.headerNode, 'th $', showsInfo.venue.name);
      }, this);

    },
    
    renderBody: function() {
      var ul = put(this.bodyNode, 'th.times ul.schedule-times');
      
      console.debug("renderBody; this = %o", this);
      dojo.forEach( timeIncrements(this.showDay.schedule_start, this.showDay.schedule_end), function(time) {
        put(ul, 'li $', time);
      });

      var PX_PER_MIN = 2;
      var startOfDay = new Date(this.showDay.schedule_start);
      
      var venueLineupNodes = [];
      
      dojo.forEach(this.showDay.venues, function(venueLineup) {
        
        // create a single column for all the shows
        var venueLineupNode = put(this.bodyNode, 'td.venue div.artist-lineup');
        
        dojo.forEach(venueLineup.shows, function(setInfo ) {

          var showBox = put(venueLineupNode, 'div.show-box');
          // the show box is sized and placed based on the time information
          //console.debug("calculating info from setInfo=%o", setInfo)
          var startTime =  new Date(setInfo.start);
          var startOffset = (DD.difference(startOfDay, startTime, 'minute') * PX_PER_MIN);
          var height = (parseInt(setInfo.length || this.showDay.default_show_length || 15) * PX_PER_MIN) - 1; // shave a pixel off
          //console.debug("math... startOffset = %o; height = %o", startOffset, height);
          
          dojo.style(showBox, {
            height: height+'px', // calculate from show length or end time
            top: startOffset+'px'
          });

          put(showBox, 'div.show-container strong.show-title $ +span.show-time $', setInfo.name, DF.format(startTime, {selector: 'time'}))

        }, this);

        venueLineupNodes.push(venueLineupNode);
        
      }, this);
      
    },

    // =====
    
    setShowDayData: function(data) {
      this.showDay = data;
    }
    
    
  });
  
});