if (!window.NU) {
  var NU = {};
}

NU.Grid = Class.create({
  initialize: function(columns, onChange) {
    var droppableOptions = { containment: columns, onHover: this.onHover.bind(this) }

    this.marker = $(document.createElement('div'));
    this.marker.addClassName('marker');
    var markerContent = $(document.createElement('div'));
    markerContent.addClassName('markerContent');
    this.marker.appendChild(markerContent);
    Droppables.add(this.marker, droppableOptions);
    
    this.currentDraggables = [];
    
    this.columns = columns;
    
    this.columns.each((function(column, index) {
      var column = $(column);
      this.columns[index] = column;
      var bottomMarker = $(document.createElement('div'));
      bottomMarker.addClassName('bottomMarker');
      column.appendChild(bottomMarker);
      column.bottomMarker = bottomMarker;
      Droppables.add(bottomMarker, droppableOptions);
    }).bind(this));  
    
    this.makeDraggable();  
    
    this.onChange = onChange;
  },
  
  makeDraggable: function() {
    this.currentDraggables.each(function(draggable) {
      draggable.destroy();
      Droppables.remove(draggable.element);
    });
    
    this.currentDraggables = [];
  
    var droppableOptions = { containment: this.columns, onHover: this.onHover.bind(this) }
  
    this.columns.each((function(column) {
      $(column).childElements().each((function(el) {
        if (!el.hasClassName('draggable')) return;
        var options = { onStart: this.onStart.bind(this), onEnd: this.onEnd.bind(this), ghosting: true, revert: false, handle: el.down('h3') };
        var draggable = new Draggable(el, options);
        Droppables.add(el, droppableOptions);
        this.currentDraggables.push(draggable);
      }).bind(this));
    }).bind(this));
    
    this.resizeBottomMarkers();
  },
  
  onStart: function(draggable) {
    var el = draggable._clone;
    draggable.element.setStyle({ height: el.getHeight() + 'px', width: el.getWidth() + 'px' }); // fix IE    
    this.marker.hide();
    this.marker.setStyle({ height: el.getHeight() + 'px', width: el.getWidth() + 'px' });
    el.insert({ before: this.marker });
    el.hide();
    this.marker.show();
  },

  onHover: function(draggable, droppable) {       
    droppable.insert({ before: this.marker });
    this.resizeBottomMarkers();
  },

  onEnd: function(draggable) {
    var el = draggable.element; 
    //el.setStyle({ height: 'auto', width: 'auto' }); // fix IE
    $(this.marker).replace(el);
    el.setStyle({ left: '0px', top: '0px' });
    
    this.resizeBottomMarkers();    
    
    // call change handler
    if (this.onChange) {
      this.onChange();
    }
  },
  
  resizeBottomMarkers: function() {
    this.columns.each(function(column) {
      column.bottomMarker.hide();
    });
    
    var maxHeight = 0;
    this.columns.each(function(column) {
      maxHeight = Math.max(maxHeight, column.getHeight());
    });
    
    this.columns.each(function(column) {
      var height = maxHeight - column.getHeight() + 20;
      column.bottomMarker.setStyle({ height: height + 'px' });
      column.bottomMarker.show();
    });
  }         
});