//ElementstylessettersetStylesĿݷʽ
Element.Properties.styles = {set: function(styles){
 this.setStyles(styles);
}};

//Element͸ȿϴԵ
Element.Properties.opacity = {

 set: function(opacity, novisibility){

  //ûָvisibilityʽ(novisibilityΪtrueʱ)
  if (!novisibility){
   //Ҫʾthis.set('opacity', 1)this.set('opacity', 0)
   if (opacity == 0){
    //͸Ϊ0ʱֱ
    if (this.style.visibility != 'hidden') this.style.visibility = 'hidden';
   } else {
    //͸Ϊ1ʱֱʾ
    if (this.style.visibility != 'visible') this.style.visibility = 'visible';
   }
  }
  //ie hasLayoutbug
  if (!this.currentStyle || !this.currentStyle.hasLayout) this.style.zoom = 1;
  //ie͸ȿ˾עopacityֵ
  if (Browser.Engine.trident) this.style.filter = (opacity == 1) ? '' : 'alpha(opacity=' + opacity * 100 + ')';
  //ieֱopacityʽ
  this.style.opacity = opacity;

  //浽ʱԱȡʱٴνмжϺͲ
  this.store('opacity', opacity);
 },

 //ֱȡʱݣʡȴ
 get: function(){
  return this.retrieve('opacity', 1);
 }

};

Element.implement({
 
 //͸ȵĿݷʽ
 setOpacity: function(value){
  return this.set('opacity', value, true);
 },

 //ȡ͸
 getOpacity: function(){
  return this.get('opacity');
 },

 //ʽ
 setStyle: function(property, value){

  //
  switch (property){
   case 'opacity': return this.set('opacity', parseFloat(value));
   case 'float': property = (Browser.Engine.trident) ? 'styleFloat' : 'cssFloat';
  }
  /*
  תձʾʵʽͬʱ֧д
  setStyle('borderTopWith', 1)  setStyle('border-top-with', 1)
  */
  property = property.camelCase();

  if ($type(value) != 'string'){
   var map = (Element.Styles.get(property) || '@').split(' ');

   //Լдʱĸֵ
   value = $splat(value).map(function(val, i){
    if (!map[i]) return '';
    return ($type(val) == 'number') ? map[i].replace('@', Math.round(val)) : val;
   }).join(' ');
  } else if (value == String(Number(value))){
   value = Math.round(value);
  }
  this.style[property] = value;
  return this;
 },

 //ȡʽֵ
 getStyle: function(property){

  //
  switch (property){
   case 'opacity': return this.get('opacity');
   case 'float': property = (Browser.Engine.trident) ? 'styleFloat' : 'cssFloat';
  }
  //֧д
  property = property.camelCase();
  var result = this.style[property];

  //ȡֵ(ͨΪǼдԻcssָ)
  if (!$chk(result)){
   result = [];
   //дԻԭȡֵ
   for (var style in Element.ShortStyles){
    if (property != style) continue;
    for (var s in Element.ShortStyles[style]) result.push(this.getStyle(s));
    return result.join(' ');
   }
   //һֿܣʽ<style>ָⲿcssļָʱҪȡʱʽֵ
   result = this.getComputedStyle(property);
  }
  if (result){
   //ɫRGBʾתHEXʾ
   result = String(result);
   var color = result.match(/rgba?\([\d\s,]+\)/);
   if (color) result = result.replace(color[0], color[0].rgbToHex());
  }
  //OperaIE£ȡwidthheightĴ
  if (Browser.Engine.presto || (Browser.Engine.trident && !$chk(parseInt(result)))){
   //IEOperawidth߿ȣѭw3c׼Fx
   if (property.test(/^(height|width)$/)){
    var values = (property == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0;
    values.each(function(value){
     size += this.getStyle('border-' + value + '-width').toInt() + this.getStyle('padding-' + value).toInt();
    }, this);
    //offsetWidth/offsetHeightӦı߿ȼΪ
    return this['offset' + property.capitalize()] - size + 'px';
   }
   if (Browser.Engine.presto && String(result).test('px')) return result;
   if (property.test(/(border(.+)Width|margin|padding)/)) return '0px';
  }
  return result;
 },

 //ʽ
 setStyles: function(styles){
  for (var style in styles) this.setStyle(style, styles[style]);
  return this;
 },

 //ȡʽ
 getStyles: function(){
  var result = {};
  Array.each(arguments, function(key){
   result[key] = this.getStyle(key);
  }, this);
  return result;
 }

});

//һЩʽֻǴӹĲ
Element.Styles = new Hash({
 left: '@px', top: '@px', bottom: '@px', right: '@px',
 width: '@px', height: '@px', maxWidth: '@px', maxHeight: '@px', minWidth: '@px', minHeight: '@px',
 backgroundColor: 'rgb(@, @, @)', backgroundPosition: '@px @px', color: 'rgb(@, @, @)',
 fontSize: '@px', letterSpacing: '@px', lineHeight: '@px', clip: 'rect(@px @px @px @px)',
 margin: '@px @px @px @px', padding: '@px @px @px @px', border: '@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)',
 borderWidth: '@px @px @px @px', borderStyle: '@ @ @ @', borderColor: 'rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)',
 zIndex: '@', 'zoom': '@', fontWeight: '@', textIndent: '@px', opacity: '@'
});

//һЩдʽֻǴӹĲ
Element.ShortStyles = {margin: {}, padding: {}, border: {}, borderWidth: {}, borderStyle: {}, borderColor: {}};

//Element.StylesElement.ShortStylesټӹ
['Top', 'Right', 'Bottom', 'Left'].each(function(direction){
 var Short = Element.ShortStyles;
 var All = Element.Styles;
 //marginToppaddingTop֮
 ['margin', 'padding'].each(function(style){
  var sd = style + direction;
  Short[style][sd] = All[sd] = '@px';
 });
 //borderTopWith֮
 var bd = 'border' + direction;
 Short.border[bd] = All[bd] = '@px @ rgb(@, @, @)';
 var bdw = bd + 'Width', bds = bd + 'Style', bdc = bd + 'Color';
 Short[bd] = {};
 Short.borderWidth[bdw] = Short[bd][bdw] = All[bdw] = '@px';
 Short.borderStyle[bds] = Short[bd][bds] = All[bds] = '@';
 Short.borderColor[bdc] = Short[bd][bdc] = All[bdc] = 'rgb(@, @, @)';
});

