/* --------------------------------------------------------------------------------
   Name:

   textarea-resizer.v2.js -- TextAreaResizer class, revised, for Mootools 1.2

   Description:

   The TextAreaResizer class for Mootools 1.2 makes the given element resizable and 
   attaches a "handle" to the element to indicate resizability.

   This revision of TextAreaResizer aims to respect the given element's styling with 
   respect to border styles (which are applied to the handle) and the element's 
   original placement in the document as a whole. It is, however, a work in progress. 
   See work notes for important limimtations.

   Requirements:

   The given element must have an id. 

   Starting XHTML:

   <textarea id="example-id-req" name="example-id-req" class="optional-class">
   </textarea>

   Generated XHTML:

   <div id="example-id-req-wrapper">
     <textarea id="example-id-req" name="example-id-req" class="optional-class">
     </textarea>
     <div id="example-id-req-footer">
       <a id="example-id-req-handle"></a>
     </div>
   </div>

   Work Notes:

   1. TextAreaResizer does not pick up the given element's 'float' property due to 
      a MooTools bug. For now, the float can be set as an option. If unset, float 
      defaults to left.

   2. Need to check that the given element has an ID, and handle if it does not.

   3. Need to add options to resize horizontally, vertically, or both. For now, 
      only resizing vertically since this is what is needed in our primary context 
      (Posse sets).

   -------------------------------------------------------------------------------- */


var TextAreaResizer = new Class({
  Implements: Options,
  options: {
    element: null,
    float: 'left'
  },
  initialize: function(options){
    this.setOptions(options);
    this.make_wrappers(this.options.element);
  },
  make_wrappers: function(el){

    el = $(el);
    var el_id = el.getProperty('id');
    var el_size = el.getSize();

    //To create an appropriately-styled wrapper div, we transfer 
    //margin, width, position, float, clear, top, bottom, left, right from 
    //el to wrapper, and use no border and no padding
    var wrapper = new Element('div', {
      'id': el_id+'-wrapper',
      'styles': {
        'padding': '0',
        'border-style': 'none'
      }
    });
    wrapper.setStyle('font-size', el.getStyle('font-size'));
    wrapper.setStyle('margin', el.getStyle('margin'));
    wrapper.setStyle('width', el.getStyle('width'));
    wrapper.setStyle('float', this.options.float);
    wrapper.setStyle('clear', el.getStyle('clear'));
    wrapper.setStyle('position', el.getStyle('position'));
    wrapper.setStyle('top', el.getStyle('top'));
    wrapper.setStyle('bottom', el.getStyle('bottom'));
    wrapper.setStyle('left', el.getStyle('left'));
    wrapper.setStyle('right', el.getStyle('right'));
    wrapper.wraps(el);

    //Creating a footer div with set background color, margin, padding, and height
    //and picking up the given element's border styling for footer's left, right,
    //and bottom borders (no top border)
    var footer = new Element('div', {
      'id': el_id+'-footer',
      'styles': {
        'background-color': '#EFEFEF',
        'margin': '0',
        'padding': '0',
        'height': '20px',
        'float': this.options.float,
        'clear': 'left'
      }
    });
    footer.setStyle('border-style', el.getStyle('border-style'));
    footer.setStyle('border-width', el.getStyle('border-width'));
    footer.setStyle('border-color', el.getStyle('border-color'));
    footer.setStyle('border-top-style', 'none');
    footer.setStyle('width', el.getStyle('width'));
    footer.inject(wrapper, 'bottom');

    //Set the handle at right corner of footer 
    var handle = new Element('a', {
      'id':  el_id+'-handle',
      'styles': {
        'float': 'right',
        'height': '20px',
        'width': '20px',
        'display': 'block',
        'background': 'transparent url(/js/textarea-resizer/img/icons.gif) repeat scroll -800px 0',
        'cursor': 'se-resize'
      }
    });
    handle.inject(footer, 'bottom');

    //Reset styles that have been pushed up to wrapper
    el.setStyles({
      'resize': 'none',
      'margin': '0',
      'overflow': 'hidden'
    });

    //Actually make the element resizable
    el.makeResizable({
      'handle': handle,
      'modifiers': {x: false, y: 'height'},
      'limit': {
        'y': [50,1000]
      }
    });

  }
});