/*

This sets up elements so they can have descriptions and edit boxes overlaid on them, with
an element underneath that can be made translucent with CSS. This implementation is
compatible with the script.aculo.us Sortables. For best results, set the handle option 
when creating Sortables to 'description'.

It assumes elements pretty much like what follows. Everything with a class attribute is
required, and the "content" element needs to appear before the "description" and "edit"
elements.

Widget.add inserts an element immediately after the content element, used to obscure the
edit and description elements. It has "obscure" as a class so it can be styled with CSS.

<div id="widget_2" class="widget">
  <div class="content">
    <p>a small widget</p>
  </div>
  <div class="description" style="display:none;">
    <p>A small widget, shorter than this description</p>
    <p><a href="#" class="edit_widget">Edit</a> <a href="#" class="remove_widget">Remove</a></p>
  </div>
  <div class="edit" style="display:none;">
    <p>The stuff for editing this widget.</p>
    <p>The stuff for editing this widget.</p>
    <p>The stuff for editing this widget.</p>
    <p>The stuff for editing this widget.</p>
    <p><a href="#" class="cancel_edit_widget">Cancel</a></p>
  </div>
</div>

-- Michael Daines

*/

var Widgets = {
  widgets: [],
  widget: function(element){
    element = $(element);
    return this.widgets.detect(function(w) { return w.element == element });
  },
  remove: function(element) {
    this.widgets = this.widgets.reject(function(w) { return w.element==element });
  },
  add: function(element) {
    var element = $(element);
    var widget = {};
    
    widget.element = element;
    
    // add all the necessary elements
    widget.titlebar = document.getElementsByClassName('titlebar', widget.element)[0];
    widget.content = document.getElementsByClassName('content', widget.element)[0];
    widget.edit = document.getElementsByClassName('edit', widget.element)[0];
    widget.obscure = Builder.node('div', {style:'display:none',className:'obscure'});
    widget.element.insertBefore(widget.obscure, widget.content.nextSibling);
    
    this.widgets.push(widget);
  },
  
  add_all: function() {
    this.widgets = [];
    document.getElementsByClassName('widget').each(function(element) {
      Widgets.add(element);
    });
  },
  
  // Not needed since we are doing button-based editing, not overlay
  do_overlay_positioning: function(widget, target) {
    widget.content.style.height = undefined;
    target.style.height = undefined;
    
    // get dimensions
    dimensions = Element.getDimensions(widget.content);
    target_dimensions = Element.getDimensions(target);
    
    // if target is bigger than content, use that height instead
    if (dimensions.height < target_dimensions.height)
      dimensions.height = target_dimensions.height;
    
    // set dimensions
    widget.content.style.height = dimensions.height+"px";
    
    target.style.width = dimensions.width+"px";
    target.style.height = dimensions.height+"px";
    
    widget.obscure.style.width = dimensions.width+"px";
    widget.obscure.style.height = dimensions.height+"px";
    
    // position the obscuring element above the content
    widget.obscure.style.position = 'relative';
    widget.obscure.style.top = (-dimensions.height)-1+"px";
    
    // position the target element above both
    target.style.position = 'relative';
    target.style.top = (-dimensions.height*2)-1+"px";
    
    // don't show the leftover space
    Element.makeClipping(widget.element);
    widget.element.style.height = dimensions.height+"px";
    
    return dimensions;
  },
  
  show_edit: function() {
    this.widgets.each(function(widget) {
      Element.show(widget.titlebar);
    });
  },
  
  hide_edit: function() {
    this.widgets.each(function(widget) {
      Element.hide(widget.titlebar);
    });    
  },
  
  show_content: function() {
    this.widgets.each(function(widget) {
      //Element.hide(widget.obscure);
      Element.hide(widget.edit);
      Element.hide(widget.titlebar);
      
      widget.content.style.height = undefined;
      widget.element.style.height = widget.content.offsetHeight+"px";
      
      Element.undoClipping(widget.element);
    });
  },
  
  save_changes: function() {
    serialized_values = document.getElementsByClassName('widget').map(function(element) {
      return Form.serialize(element);
    }).join('&');
    
    new Ajax.Request('/widgets/save_changes', {parameters:serialized_values, onComplete:function(request){ eval(request.responseText); Widgets.widgets = []; Widgets.add_all(); Widgets.show_content(); }});
  }
};