<!DOCTYPE html>

<!-- <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
</copyright> -->

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="../../css/ninja.css" rel="stylesheet" type="text/css" media="screen"/>

    <title>Main Ninja Component</title>

    <script type="text/montage-serialization">
        {
            "localStorage": {
                "module": "js/controllers/local-storage-controller",
                "name": "LocalStorage"
            },

            "toolsData1": {
                "module": "js/data/tools-data",
                "name": "ToolsData"
            },

            "appModel": {
                "module": "js/models/app-model",
                "name": "AppModel"
            },

            "materialsModel": {
                "module": "js/models/materials-model",
                "name": "MaterialsModel"
            },

            "menu": {
                "module": "js/components/menu/menu.reel",
                "name": "Menu",
                "properties": {
                    "element": {"#": "mainMenuBar"}
                }
            },

            "splitter1": {
                "module": "js/panels/Splitter",
                "name": "Splitter",
                "properties": {
                    "element": {"#": "topSplitter"},
                    "panel": {"#": "topPanelContainer"}
                }
            },

            "splitter2": {
                "module": "js/panels/Splitter",
                "name": "Splitter",
                "properties": {
                    "element": {"#": "leftSplitter"},
                    "panel": {"#": "leftPanelContainer"}
                }
            },

            "splitter3": {
                "module": "js/panels/Splitter",
                "name": "Splitter",
                "properties": {
                    "element": {"#": "rightSplitter"},
                    "panel": {"#": "rightPanelContainer"},
                    "resizeBar": {"#": "rightPanelResizer"}
                }
            },

            "splitter4": {
                "module": "js/panels/Splitter",
                "name": "Splitter",
                "properties": {
                    "element": {"#": "bottomSplitter"},
                    "panel": {"#": "bottomPanelContainer"},
                    "resizeBar": {"#": "timelineResizer"}
                }
            },

            "resizer1": {
                "module": "js/panels/Resizer",
                "name": "Resizer",
                "properties": {
                    "element": {"#": "rightPanelResizer"},
                    "id": "rightPanelResizer",
                    "panel": {"#": "rightPanelContainer"},
                    "isVertical": false,
                    "redrawStage": true
                }
            },

            "resizer2": {
                "module": "js/panels/Resizer",
                "name": "Resizer",
                "properties": {
                    "element": {"#": "timelineResizer"},
                    "id": "timelineResizer",
                    "panel": {"#": "bottomPanelContainer"},
                    "isVertical": true,
                    "isInversed": true,
                    "redrawStage": true
                }
            },

            "stageMode": {
                "module": "js/components/layout/stage-mode.reel",
                "name": "StageMode",
                "properties": {
                    "element": {"#": "stageMode"}
                },
                "bindings" : {
                    "livePreview": {
                        "boundObject": {"@": "appModel"},
                        "boundObjectPropertyPath": "livePreview",
                        "oneway": false
                    }
                }
            },

            "toolsList1": {
                "module": "js/components/layout/tools-list.reel",
                "name": "ToolsList",
                "properties": {
                    "element": {"#": "toolsList"},
                    "toolsData": {"@": "toolsData1"}
                }
            },

            "toolsProperties1": {
                "module": "js/components/layout/tools-properties.reel",
                "name": "ToolsProperties",
                "properties": {
                    "element": {"#": "toolsProperties"},
                    "toolsData": {"@": "toolsData1"}
                }
            },

            "documentsTab": {
                "module": "js/components/layout/documents-tab.reel",
                "name": "DocumentsTab",
                "properties": {
                    "element": {"#": "openDocumentsTabComponent"}
                }
            },

            "stage1": {
                "module": "js/stage/stage.reel",
                "name": "Stage",
                "properties": {
                    "element": {"#": "stageAndScenesContainer"},
                    "appModel":     {"@": "appModel"}
                }
            },

            "documentBar": {
                "module": "js/components/layout/document-bar.reel",
                "name": "DocumentBar",
                "properties": {
                    "element": {"#": "documentBar"}
                }
            },

            "panelContainer": {
                "module": "js/panels/PanelContainer.reel",
                "name": "PanelContainer",
                "properties": {
                    "element": {"#": "rightPanelContent"},
                    "panelSplitter": {"@": "splitter3"},
                    "appModel":     {"@": "appModel"}
                }
            },

            "breadCrumb":{
                "module": "js/components/layout/bread-crumb.reel",
                "name": "Breadcrumb",
                "properties":{
                    "element":{"#" : "breadCrumbComponent"}
                },
                "bindings" : {
                    "container": {
                        "boundObject": {"@": "owner"},
                        "boundObjectPropertyPath": "currentSelectedContainer",
                        "oneway": false
                    }
                }
             },

            "timeline": {
               "module": "js/panels/Timeline/TimelinePanel.reel",
               "name": "TimelinePanel",
               "properties": {
                   "element": {"#": "timelinePanelComponent"}
               }
            },

            "mouseMediator": {
                "module": "js/mediators/mouse-mediator",
                "name": "MouseMediator"
            },

            "keyboardMediator": {
                "module": "js/mediators/keyboard-mediator",
                "name": "KeyboardMediator",
                "properties":{
                    "appModel":     {"@": "appModel"}
                }
            },

            "dragDropMediator": {
                "module": "js/mediators/drag-drop-mediator",
                "name": "DragDropMediator"
            },

            "elementMediator": {
                "module": "js/mediators/element-mediator",
                "name": "ElementMediator"
            },

            "ioMediator": {
                "module": "js/mediators/io-mediator",
                "name": "IoMediator"
            },

            "undocontroller1": {
                "module": "js/controllers/undo-controller",
                "name": "UndoController"
            },

            "selectionController1": {
                "module": "js/controllers/selection-controller",
                "name": "SelectionController",
                "bindings" : {
                    "selectionContainer": {
                        "boundObject": {"@": "owner"},
                        "boundObjectPropertyPath": "currentSelectedContainer",
                        "oneway": true
                    }
                }

            },

            "documentController1": {
                "module": "js/controllers/document-controller",
                "name": "DocumentController"
            },

            "popupManager1": {
                "module": "js/components/popup-manager.reel",
                "name": "PopupMananger",
                "properties": {
                    "element": {"#": "popupWindows"}
                }
            },
            
            "colorController1": {
                "module": "js/controllers/color-controller",
                "name": "ColorController"
            },

            "stylesController": {
                "module": "js/controllers/styles-controller",
                "name": "StylesController"
            },

            "filePickerController": {
                "module": "js/io/ui/file-picker/file-picker-controller",
                "name": "FilePickerController"
            },

            "newFileController": {
                "module": "js/io/ui/new-file-dialog/new-file-workflow-controller",
                "name": "NewFileWorkflowController"
            },
            
            "coreIoApi1": {
                "module": "js/io/system/coreioapi",
                "name": "CoreIoApi"
            },

            "mainMenuController": {
                "module": "js/controllers/main-menu-controller",
                "name": "MainMenuController"
            },

            "focusManager": {
                "object": "js/components/focus-manager.reel",
                "properties": {
                    "element": {"#": "focus-container" }
                }
            },

            "owner": {
                "module": "js/ninja.reel",
                "name": "Ninja",
                "properties": {
                    "element":              {"#": "main"},
                    "rulerTop":        		{"#": "rulerTop"},
                    "rulerLeft":        	{"#": "rulerLeft"},
                    "appModel":             {"@": "appModel"},
                    "toolsData":            {"@": "toolsData1"},
                    "toolsList":            {"@": "toolsList1"},
                    "toolsProperties":      {"@": "toolsProperties1"},
                    "stage":                {"@": "stage1"},
                    "settings":             {"@": "settings1"},
                    "elementMediator":      {"@": "elementMediator"},
                    "dragDropMediator":     {"@": "dragDropMediator"},
                    "undocontroller":       {"@": "undocontroller1"},
                    "selectionController":  {"@": "selectionController1"},
                    "documentController":   {"@": "documentController1"},
                    "popupManager":         {"@": "popupManager1"},
					"colorController":      {"@": "colorController1"},
                    "stylesController":     {"@": "stylesController"},
                    "filePickerController": {"@": "filePickerController"},
                    "newFileController":    {"@": "newFileController"},
                    "coreIoApi":    		{"@": "coreIoApi1"},
                    "documentBar":          {"@": "documentBar"},
                    "ioMediator":           {"@": "ioMediator"},
                    "timeline":             {"@": "timeline"},
                    "mainMenuController":   {"@": "mainMenuController"}
                }
            }
        }
    </script>

</head>
<body>

    <div id="main" class="main">

        <section id="topMenu">
            <nav id="mainMenuBar"></nav>
        </section>

        <section data-montage-id="leftSplitter" class="leftSplitter splitter"></section>

        <section data-montage-id="rightSplitter" class="rightSplitter splitter"></section>

        <section id="appContainer">
            <section data-montage-id="topSplitter" class="topSplitter splitter"></section>

            <section id="topPanelContainer" class="panelContainer">
                <div id="topPanel" class="panel">
                    <div id="toolPropertiesPanel">
                        <div id="toolsProperties"></div>
                    </div>

                    <div id="stageMode" class="unselectable marginposition">
                        <!--<div id="stageModeImg" class="unselectable editMode"></div>-->
                    </div>
                </div>
            </section>

            <section id="appWorkspace">
                <section id="leftPanelContainer" class="panelContainer">
                    <section id="toolsPanelContent" class="panel">
                        <div id="toolsList"></div>
                    </section>
                </section>

                <section id="mainContainer">
                    <section class="mainContainerContent">

                        <section id="documentTabs">
                            <div id="openDocumentsTabComponent"></div>
                        </section>

                        <section id="rulerTop"></section>

                        <section id="mainContent">
                            <section id="rulerLeft"></section>
                            <section id="stageAndScenesContainer"></section>
                        </section>
                        <section id="stateBar">
                            <section id="documentBarContainer">
                                <div id="documentBar" class="documentBar"><a href="#">HTML</a></div>
                            </section>
                        </section>

                        <section id="breadCrumbComponent"></section>

                        <section id="timelineResizer" class="timelineResizer resizeBar"></section>

                        <section id="bottomPanelContainer" class="panelContainer">
                            <section id="timelinePanel" class="panel">
                                <div id="timelinePanelComponent"></div>
                            </section>
                        </section>
                    </section>
                </section>

                <section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section>

                <section id="rightPanelContainer" class="rightPanelContainer panelContainer">
                    <section id="rightPanelContent" class="rightPanelContent">
                    </section>
                </section>
            </section>

            <section data-montage-id="bottomSplitter" class="bottomSplitter splitter"></section>
        </section>

        <div data-montage-id="focus-container" class="hidden"></div>

        <section id="popupWindows"></section>

    </div>

</body>
</html>