/**
  @module ember-svg-shapes
*/
import Ember from 'ember';
import SvgMixin from 'ember-svg-shapes/mixins/svg';
import RectMixin from 'ember-svg-shapes/mixins/rect';
import layout from '../templates/components/svg-rectangle';

/**
  @class SvgRectangleComponent
  @namespace SvgShapes.Components
  @uses SvgShapes.Mixins.SvgMixin
  @uses SvgShapes.Mixins.RectMixin
*/
export default Ember.Component.extend( SvgMixin, RectMixin, {

    layout: layout,

    /**
      This is an array of class names to be added to the svg element.

      @property className
      @type {Array}
      @default ['ember-svg-shapes', 'svg-rectangle']
      @private
    */
    classNames: ['ember-svg-shapes', 'svg-rectangle'],

    /**
      The height of the svg image.

      @property height
      @type {Number}
      @default 10
    */
    height: 10,

    /**
      The width of the svg image.

      @property width
      @type {Number}
      @default 10
    */
    width: 10,

    /**
      This is a computed property.  It sets the height and width of the svg element.

      @property style
      @type {String}
      @private
    */
    style: Ember.computed('height', 'width', function() {
        var height = this.get('height'),
            width = this.get('width');
        return Ember.String.htmlSafe('height:' + height + 'px; width:' + width + 'px;');
    })
});

@@ -925,33 +925,33 @@
 %0A      @default 
-1
+2
 0%0A    */%0A    wid
@@ -954,18 +954,567 @@
  width: 
+20,%0A%0A    /**%0A      This value is used to multiply the height and width of the svg element.  The%0A      value is pixels (%60px%60).  The default is 1.%0A%0A      The number can be less than 1, but not less than 0..  You can have a value%0A      of 0.5, which will multiply the height and with by 0.5 resulting in the%0A      rectangle being scaled down by half.%0A%0A      A value of 2, will double its size.  The default value of 1 means that the%0A      height and width values are not scaled.%0A%0A      @property size%0A      @type %7BNumber%7D%0A      @default 1%0A    */%0A%09size: 
 1
-0
 ,%0A%0A    /
@@ -1711,16 +1711,24 @@
 'width',
+ 'size',
  functio
@@ -1733,16 +1733,149 @@
 ion() %7B%0A
+%0A        var size = this.get('size');%0A%0A        Ember.assert('%60size%60 must be a number greater than zero', !isNaN(size) && size %3E 0);%0A%0A
         
@@ -1905,16 +1905,23 @@
 height')
+ * size
 ,%0A      
@@ -1951,17 +1951,221 @@
 'width')
-;
+ * size;%0A%0A        Ember.assert('%60height%60 must be a number greater than zero', !isNaN(height) && height %3E 0);%0A        Ember.assert('%60width%60 must be a number greater than zero', !isNaN(width) && width %3E 0);%0A
 %0A       
@@ -2198,30 +2198,25 @@
 afe(
-'
+%60
 height:
-' + 
+$%7B
 height
- + '
+%7D
 px; 
@@ -2225,25 +2225,20 @@
 dth:
-' + 
+$%7B
 width
- + 'px;'
+%7Dpx;%60
 );%0A 

update rectangle component