new Effect.Morph('error_message',{
  style:'background:#f00; color:#fff;'+
    'border: 20px solid #f88; font-size:2em',
  duration:0.8
});

0914:Effect.Morph = Class.create(Effect.Base, {
0915:  initialize: function(element) {
0916:    this.element = $(element);
0917:    if (!this.element) throw(Effect._elementDoesNotExistError);
0918:    var options = Object.extend({
0919:      style: { }
0920:    }, arguments[1] || { });
0921:    
0922:    if (!Object.isString(options.style)) this.style = $H(options.style);
0923:    else {
0924:      if (options.style.include(':'))
0925:        this.style = options.style.parseStyle();
0926:      else {
0927:        this.element.addClassName(options.style);
0928:        this.style = $H(this.element.getStyles());
0929:        this.element.removeClassName(options.style);
0930:        var css = this.element.getStyles();
0931:        this.style = this.style.reject(function(style) {
0932:          return style.value == css[style.key];
0933:        });
0934:        options.afterFinishInternal = function(effect) {
0935:          effect.element.addClassName(effect.options.style);
0936:          effect.transforms.each(function(transform) {
0937:            effect.element.style[transform.style] = '';
0938:          });
0939:        }
0940:      }
0941:    }
0942:    this.start(options);
0943:  },
0944:  

0945:  setup: function(){
0946:    function parseColor(color){
0947:      if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
0948:      color = color.parseColor();
0949:      return $R(0,2).map(function(i){
0950:        return parseInt( color.slice(i*2+1,i*2+3), 16 ) 
0951:      });
0952:    }
0953:    this.transforms = this.style.map(function(pair){
0954:      var property = pair[0], value = pair[1], unit = null;
0955:
0956:      if (value.parseColor('#zzzzzz') != '#zzzzzz') {
0957:        value = value.parseColor();
0958:        unit  = 'color';
0959:      } else if (property == 'opacity') {
0960:        value = parseFloat(value);
0961:        if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
0962:          this.element.setStyle({zoom: 1});
0963:      } else if (Element.CSS_LENGTH.test(value)) {
0964:          var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
0965:          value = parseFloat(components[1]);
0966:          unit = (components.length == 3) ? components[2] : null;
0967:      }
0968:
0969:      var originalValue = this.element.getStyle(property);
0970:      return { 
0971:        style: property.camelize(), 
0972:        originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0), 
0973:        targetValue: unit=='color' ? parseColor(value) : value,
0974:        unit: unit
0975:      };
0976:    }.bind(this)).reject(function(transform){
0977:      return (
0978:        (transform.originalValue == transform.targetValue) ||
0979:        (
0980:          transform.unit != 'color' &&
0981:          (isNaN(transform.originalValue) || isNaN(transform.targetValue))
0982:        )
0983:      )
0984:    });
0985:  },

0986:  update: function(position) {
0987:    var style = { }, transform, i = this.transforms.length;
0988:    while(i--)
0989:      style[(transform = this.transforms[i]).style] = 
0990:        transform.unit=='color' ? '#'+
0991:          (Math.round(transform.originalValue[0]+
0992:            (transform.targetValue[0]-transform.originalValue[0])*position)).toColorPart() +
0993:          (Math.round(transform.originalValue[1]+
0994:            (transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() +
0995:          (Math.round(transform.originalValue[2]+
0996:            (transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() :
0997:        (transform.originalValue +
0998:          (transform.targetValue - transform.originalValue) * position).toFixed(3) + 
0999:            (transform.unit === null ? '' : transform.unit);
1000:    this.element.setStyle(style, true);
1001:  }
1002:});
1003: