// Copyright (c) 2006 Kazuki Ohta (ohta _at_ uei.co.jp)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// 
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//

var Resizable = Class.create();
Resizable.prototype = {
  /*
   * Initializer
   */
  initialize: function(id, options) {
    this.element = $(id);
    this.options = options;
    this.is_vertical   = options['is_vertical']   && true;
    this.is_horizontal = options['is_horizontal'] && true;
    this.onResizeStart = options['onResizeStart'];
    this.onResizeEnd   = options['onResizeEnd'];
	
	if (!this.is_vertical && !this.is_horizontal)
      return;

    this.handler = this.createHandler();
    this.wrapper = this.createWrapper();

    this.handler.onmousedown = this.onmousedown.bindAsEventListener(this);
    this.eventMouseUp        = this.onmouseup.bindAsEventListener(this);
    this.eventMouseMove      = this.onmousemove.bindAsEventListener(this);

    this.setStyleNormal(this.element, this.wrapper);
  },
  createHandler: function() {
    var handler = document.createElement('div');
    if (!handler)
      return null;

    this.setStyleHandler(handler);
    this.setWidth(handler, this.element.offsetWidth);

    return handler;
  },
  createWrapper: function() {
    var container = this.element;
    var parent    = container.parentNode;
    var wrapper   = document.createElement('div');
    var handler   = this.handler;
    if (!parent || !wrapper || !handler)
      return;

    this.setWidth(wrapper, container.offsetWidth);

    parent.insertBefore(wrapper, container);
    wrapper.appendChild(container);
    wrapper.appendChild(handler);

    return wrapper;
  },

  /*
   * Event Handling
   */
  onmousedown: function(e) {
    this.setStyleDragging(this.element, this.wrapper);

    this.startX = e.clientX;
    this.startY = e.clientY;
    this.startW = this.element.offsetWidth;
    this.startH = this.element.offsetHeight;

    Event.observe(document, "mouseup", this.eventMouseUp);
    Event.observe(document, "mousemove", this.eventMouseMove);

    if (this.onResizeStart)
      this.onResizeStart();

    Event.stop(e);
  },
  onmouseup: function(e) {
    this.setStyleNormal(this.element, this.wrapper);
    Event.stopObserving(document, "mouseup", this.eventMouseUp);
    Event.stopObserving(document, "mousemove", this.eventMouseMove);

    if (this.onResizeEnd)
      this.onResizeEnd();
	  var superHeight = Math.max(50, this.startH + e.clientY - this.startY)
	  var superWidth = Math.max(100, this.startW + e.clientX - this.startX);

	  if (this.is_horizontal){
	  	$('layout_width_'+this.element.id).value = superWidth;	
	  }	
	  if (this.is_vertical){
	  $('layout_height_'+this.element.id).value = superHeight;	
			
	  }
	  

	//new Ajax.Request('/settings/layout/save', { method:'post', parameters: 'element='+this.element.id+'&height='+(superHeight)+'&width='+(superWidth)+'&authenticity_token=' + this.authenticityToken, onComplete:function(request){return false;}})
	
    Event.stop(e);
  },
  onmousemove: function(e) {
    var x = this.startX;
    var y = this.startY;
    var w = this.startW;
    var h = this.startH;

    if (this.is_vertical) {
      this.setHeight(this.element, Math.max(50, h + e.clientY - y));
    }
    if (this.is_horizontal) {
      var width = Math.max(100, w + e.clientX - x);
      this.setWidth(this.element, width);
      this.setWidth(this.handler, width);
      this.setWidth(this.wrapper, width);
    }

    Event.stop(e);
  },

  /*
   * Style
   */
  setWidth: function(element, width) {
    Element.setStyle(element, {width: width + 'px'});
  },
  setHeight: function(element, height) {
    Element.setStyle(element, {height: height + 'px'});
  },
  setStyleHandler: function(handler) {
    var hstyles = {};

    hstyles['height']      = '10px';
    hstyles['font-size']   = '10px';
    hstyles['line-height'] = '10px';
    hstyles['background-color'] = '#E0E0E0';
    hstyles['border'] = '1px solid #B0B0B0';
    if (this.is_vertical && this.is_horizontal)
      hstyles['cursor'] = 'se-resize';
    else if (this.is_vertical)
      hstyles['cursor'] = 's-resize';
    else if (this.is_horizontal)
      hstyles['cursor'] = 'e-resize';

    Element.setStyle(handler, hstyles);
  },
  setStyleNormal: function(element, wrapper) {
    var estyles = {};
    var wstyles = {};

    estyles['background-color'] = '';
    wstyles['border'] = '0px';

    Element.setStyle(element, estyles);
    Element.setStyle(wrapper, wstyles);
  },
  setStyleDragging: function(element, wrapper) {
    var estyles = {};
    var wstyles = {};

    estyles['background-color'] = '#eeeeee';
    wstyles['border'] = '1px dashed #808080';

    Element.setStyle(element, estyles);
    Element.setStyle(wrapper, wstyles);
  }
};