2 files changed, 22 insertions, 11 deletions
diff --git a/js/components/radio.reel/radio.html b/js/components/radio.reel/radio.html
index 01b76b92..cee4c369 100755
--- a/js/components/radio.reel/radio.html
+++ b/js/components/radio.reel/radio.html
@@ -11,13 +11,18 @@
        "owner": {
            "prototype": "js/components/radio.reel",
            "properties": {
-                "element": {"#": "ch_comp"}
+                "element": {"#": "radio_comp"},
+                "labelField": {"#": "labelField"},
+                "radioField": {"#": "radioField"}
            }
        }
    }
    </script>
 </head>
 <body>
-    <input data-montage-id="ch_comp" class="nj-skinned" type="radio">
+    <div data-montage-id="radio_comp">
+        <input data-montage-id="radioField" class="nj-skinned" type="radio">
+        <label data-montage-id="labelField" class="nj-skinned"></label>
+    </div>
 </body>
 </html>
 \ No newline at end of file
diff --git a/js/components/radio.reel/radio.js b/js/components/radio.reel/radio.js
index c661ec11..cec4f52e 100755
--- a/js/components/radio.reel/radio.js
+++ b/js/components/radio.reel/radio.js
@@ -62,7 +62,7 @@ exports.RadioGroup = Montage.create(Component, {
    {
        value:function(radio)
        {
-            radio.element.setAttribute("name", this.name);
+            radio.radioField.setAttribute("name", this.name);
            radio.addEventListener("change", this, false);
            this.radios.push(radio);
        }
@@ -104,6 +104,14 @@ exports.Radio = Montage.create(Component, {
        value: null
    },
+    labelField: {
+        value: null
+    },
+    radioField: {
+        value: null
+    },
    _checked: {
        enumerable: false,
        value: false
@@ -140,13 +148,13 @@ exports.Radio = Montage.create(Component, {
                {
            this._valueSyncedWithInputField = true;
            this._wasSetByCode = false;
-            this.checked = this.element.checked;
+            this.checked = this.radioField.checked;
                }
    },
    handleClick: {
        value: function() {
            this._wasSetByCode = false;
-            this.checked = !this.element.checked;
+            this.checked = !this.radioField.checked;
        }
    },
    
@@ -154,7 +162,7 @@ exports.Radio = Montage.create(Component, {
        value: function() {
            if(!this._valueSyncedWithInputField)
            {
-                this.element.checked = this._checked;
+                this.radioField.checked = this._checked;
            }
            this._valueSyncedWithInputField = false;
        }
@@ -163,15 +171,13 @@ exports.Radio = Montage.create(Component, {
    prepareForDraw: {
        value: function() {
            if (this.label !== null) {
-                var b = document.createElement("label");
+                this.labelField.innerHTML = this.label;
-                b.innerHTML = this.label;
-                this.element.appendChild(b);
-                b.addEventListener("click", this, false);
            }
+            this.element.addEventListener("click", this, false);
            if (this.group !== null) {
                this.group.addRadio(this);
            }
-            this.element.addEventListener("change", this, false);
+            this.radioField.addEventListener("change", this, false);
        }
    }