<!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">
        {
            "Resizer": {
                "module": "js/panels/resize-composer",
                "name": "ResizeComposer",
                "properties": {
                    "element": {"#": "resizeBar"},
                    "component": {"@": "owner"}
                },
                "listeners": [
                    {
                        "type": "resizeStart",
                        "listener": {"@": "owner"}
                    },
                    {
                        "type": "resizeMove",
                        "listener": {"@": "owner"}
                    },
                    {
                        "type": "resizeEnd",
                        "listener": {"@": "owner"}
                    }
                ]
            },

            "DragDrop": {
                "module": "js/panels/drag-drop-composer",
                "name": "DragDropComposer",
                "properties": {
                    "element": {"@": "panelTitle"},
                    "component": {"@": "owner"}
                },
                "listeners": [
                    {
                        "type": "dragStart",
                        "listener": {"@": "owner"}
                    },
                    {
                        "type": "dropHover",
                        "listener": {"@": "owner"}
                    },
                    {
                        "type": "dropped",
                        "listener": {"@": "owner"}
                    },
                    {
                        "type": "dropEnd",
                        "listener": {"@": "owner"}
                    }
                ]
            },

            "btnCollapse": {
                "module": "montage/ui/toggle-button.reel",
                "name": "ToggleButton",
                "properties": {
                    "element": {"#": "btnCollapse"},
                    "pressedClass": "hide",
                    "identifier": "btnCollapse"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },

            "btnClose": {
                "module": "montage/ui/button.reel",
                "name": "Button",
                "properties": {
                    "element": {"#": "btnClose"},
                    "pressedClass": "hide",
                    "identifier": "btnClose"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },

            "slot1": {
                "module": "montage/ui/slot.reel",
                "name": "Slot",
                "properties": {
                    "element": {"#": "panelObject"}
                }
            },

            "panelTitle": {
                "module": "montage/ui/dynamic-text.reel",
                "name": "DynamicText",
                "properties": {
                    "element": {"#": "panelTitle"}
                },
                "bindings": {
                    "value": {
                        "boundObject": {"@": "owner"},
                        "boundObjectPropertyPath": "name",
                        "oneway": true
                    }
                }
            },

            "owner": {
                "module": "js/panels/Panel.reel",
                "name": "Panel",
                "properties": {
                    "element": {"#": "panel"},
                    "resizer": {"@": "Resizer"},
                    "panelContent": {"@": "slot1"}
                }
            }
        }
        </script>

	</head>
<body>

<article id="panel" class="panel" draggable="draggable">
    <div id="head" class="head">
        <span id="btnCollapse" class="arrowIcon"></span>
        <span id="panelTitle" class="panelTitle">Panel</span>
        <span id="btnClose" class="closeBtn"></span>
    </div>
    <div class="panelBody">
        <div class="panelBodyContent">
            <div id="panelObject" class="panelObjects">

            </div>
        </div>
    </div>
    <div id="resizeBar" class="resizeBar"></div>
</article>

</body>
</html>