<!DOCTYPE html>
<!-- <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
</copyright> -->
<html lang="en">
<head>
    <script type="text/montage-serialization">
    {
        "owner": {
            "prototype": "js/panels/properties.reel/sections/three-d-view.reel[ThreeD]",
            "properties": {
                "element": {"#": "section"},
                "x3DControl": {"@": "threeDPosX"},
                "y3DControl": {"@": "threeDPosY"},
                "z3DControl": {"@": "threeDPosZ"},
                "x3DLabel": {"#": "lblthreeDX"},
                "y3DLabel": {"#": "lblthreeDY"},
                "z3DLabel": {"#": "lblthreeDZ"},
                "xAngleControl": {"@": "threeDRotX"},
                "yAngleControl": {"@": "threeDRotY"},
                "zAngleControl": {"@": "threeDRotZ"},
                "axisModeGroupControl": {"@": "axisModeGroup"},
                "flattenControl": {"@": "flattenCheckbox"}
            }
        },

        "threeDPosX": {
            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
            "properties": {
                "element": {"#": "threeDPosX"},
                "identifier": "x3D",
                "maxValue": 10000,
                "minValue": -10000
            },
            "bindings": {
                "value": {
                    "boundObject": {"@": "owner"},
                    "boundObjectPropertyPath": "x3D",
                    "oneway": false
                }
            },
            "listeners": [
                {
                    "type": "change",
                    "listener": {"@": "owner"},
                    "capture": false
                },
                {
                    "type": "changing",
                    "listener": {"@": "owner"},
                    "capture": false
                }
            ]
        },
        "threeDPosY": {
            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
            "properties": {
                "element": {"#": "threeDPosY"},
                "identifier": "y3D",
                "maxValue": 10000,
                "minValue": -10000
            },
            "bindings": {
                "value": {
                    "boundObject": {"@": "owner"},
                    "boundObjectPropertyPath": "y3D",
                    "oneway": false
                }
            },
            "listeners": [
                {
                    "type": "change",
                    "listener": {"@": "owner"},
                    "capture": false
                },
                {
                    "type": "changing",
                    "listener": {"@": "owner"},
                    "capture": false
                }
            ]
        },
        "threeDPosZ": {
            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
            "properties": {
                "element": {"#": "threeDPosZ"},
                "identifier": "z3D",
                "maxValue": 10000,
                "minValue": -10000
            },
            "bindings": {
                "value": {
                    "boundObject": {"@": "owner"},
                    "boundObjectPropertyPath": "z3D",
                    "oneway": false
                }
            },
            "listeners": [
                {
                    "type": "change",
                    "listener": {"@": "owner"},
                    "capture": false
                },
                {
                    "type": "changing",
                    "listener": {"@": "owner"},
                    "capture": false
                }
            ]
        },
        "threeDRotX": {
            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
            "properties": {
                "element": {"#": "threeDRotX"},
                "identifier": "xAngle",
                "minValue": -360,
                "maxValue": 360,
                "acceptableUnits": ["\u00B0"],
                "units": "\u00B0"
            },
            "bindings": {
                "value": {
                    "boundObject": {"@": "owner"},
                    "boundObjectPropertyPath": "xAngle",
                    "oneway": false
                }
            },
            "listeners": [
                {
                    "type": "change",
                    "listener": {"@": "owner"},
                    "capture": false
                },
                {
                    "type": "changing",
                    "listener": {"@": "owner"},
                    "capture": false
                }
            ]
        },
        "threeDRotY": {
            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
            "properties": {
                "element": {"#": "threeDRotY"},
                "identifier": "yAngle",
                "minValue": -360,
                "maxValue": 360,
                "acceptableUnits": ["\u00B0"],
                "units": "\u00B0"
            },
            "bindings": {
                "value": {
                    "boundObject": {"@": "owner"},
                    "boundObjectPropertyPath": "yAngle",
                    "oneway": false
                }
            },
            "listeners": [
                {
                    "type": "change",
                    "listener": {"@": "owner"},
                    "capture": false
                },
                {
                    "type": "changing",
                    "listener": {"@": "owner"},
                    "capture": false
                }
            ]
        },
        "threeDRotZ": {
            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
            "properties": {
                "element": {"#": "threeDRotZ"},
                "identifier": "zAngle",
                "minValue": -360,
                "maxValue": 360,
                "acceptableUnits": ["\u00B0"],
                "units": "\u00B0"
            },
            "bindings": {
                "value": {
                    "boundObject": {"@": "owner"},
                    "boundObjectPropertyPath": "zAngle",
                    "oneway": false
                }
            },
            "listeners": [
                {
                    "type": "change",
                    "listener": {"@": "owner"},
                    "capture": false
                },
                {
                    "type": "changing",
                    "listener": {"@": "owner"},
                    "capture": false
                }
            ]
        },
        "threeDPerspectiveDistance": {
            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
            "properties": {
                "element": {"#": "threeDPerspectiveDistance"}
            }
        },
        "axisModeGroup": {
            "prototype": "js/components/radio.reel[RadioGroup]",
            "properties": {
                "name": "rotationLG",
                "selectedItem": {"@": "rdioLocal"},
                "selectedIndex": 0
            }
        },
        "rdioLocal": {
            "prototype": "js/components/radio.reel",
            "properties": {
                "element": {"#": "rdioLocal"},
                "label": "Local",
                "group": {"@": "axisModeGroup"},
                "checked": true
            }
        },
        "rdioGlobal": {
            "prototype": "js/components/radio.reel",
            "properties": {
                "element": {"#": "rdioGlobal"},
                "label": "Global",
                "group": {"@": "axisModeGroup"}
            }
        },
        "flattenCheckbox": {
            "prototype": "montage/ui/input-checkbox.reel",
            "properties": {
                "element": {"#": "flattenCh"},
                "identifier": "flatten",
                "checked": false
            },
            "bindings": {
                "checked": {
                    "boundObject": {"@": "owner"},
                    "boundObjectPropertyPath": "flatten",
                    "oneway": false
                }
            },
            "listeners": [
                {
                    "type": "action",
                    "listener": {"@": "owner"},
                    "capture": false
                }
            ]
        }
    }
    </script>
</head>
<body>
<section data-montage-id="section" class="sectional">
    <section data-montage-id="axisMode" class="fieldCol rotation">
        <label>Axis:</label>
        <article class="fieldRow">
            <div class="inputField">
                <div data-montage-id="rdioLocal"></div>
            </div>
        </article>
        <article class="fieldRow">
            <div class="inputField">
                <div data-montage-id="rdioGlobal"></div>
            </div>
        </article>
    </section>
    <hr />
    <section class="fieldCol">
        <label data-montage-id="lblthreeDX">X:</label>
        <article class="fieldRow threeCol">
            <div>
                <div class="inputField">
                    <div data-montage-id="threeDPosX"></div>
                </div>
            </div>
            <div>
                <div>
                    <label data-montage-id="lblthreeDY">Y: </label>
                </div>
                <div class="inputField">
                    <div data-montage-id="threeDPosY"></div>
                </div>
            </div>
            <div>
                <div>
                    <label data-montage-id="lblthreeDZ">Z: </label>
                </div>
                <div class="inputField">
                    <div data-montage-id="threeDPosZ"></div>
                </div>
            </div>
        </article>
    </section>
    <hr />
    <section class="fieldCol">
        <label>X:</label>
        <article class="fieldRow threeCol">
            <div>
                <div class="inputField">
                    <div data-montage-id="threeDRotX"></div>
                </div>
            </div>
            <div>
                <div>
                    <label>Y: </label>
                </div>
                <div class="inputField">
                    <div data-montage-id="threeDRotY"></div>
                </div>
            </div>
            <div>
                <div>
                    <label>Z: </label>
                </div>
                <div class="inputField">
                    <div data-montage-id="threeDRotZ"></div>
                </div>
            </div>
        </article>
    </section>
    <hr />
    <section class="fieldCol">
        <label></label>
        <article class="fieldRow oneCol">
            <div>
                <div>
                    <label style="padding-right:14px;">Perspective Distance: </label>
                </div>
                <div class="inputField" >
                    <div data-montage-id="threeDPerspectiveDistance"></div>
                </div>
            </div>
        </article>
    </section>
    <hr />
    <section class="fieldCol">
        <label></label>
        <article class="fieldRow oneCol checkbox">
            <div>
                <div class="inputField">
                    <input data-montage-id="flattenCh" class="nj-skinned" type="checkbox" />
                </div>
                <div>
                    <label> Flatten</label>
                </div>
            </div>
        </article>
    </section>
</section>
</body>
</html>