<!--
  ~ Copyright (c)  2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
  ~
  ~ WSO2 Inc. licenses this file to you under the Apache License,
  ~ Version 2.0 (the "License"); you may not use this file except
  ~ in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied. See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<html lang="en" class=" webkit chrome mac js gr__localhost">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="commons/lib/css-browser-selector_0.4.0/css_browser_selector.js"></script>
    <link href="commons/lib/bootstrap_v3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="commons/lib/font-wso2_1.1.0/css/font-wso2.min.css" rel="stylesheet" type="text/css"/>
    <link href="commons/lib/theme-wso2_1.0/css/theme-wso2.css" rel="stylesheet" type="text/css"/>
    <link href="commons/lib/jquery-ui_v1.12.1/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link href="commons/lib/js-tree-v3.3.2/themes/default/style.css" rel="stylesheet" type="text/css"/>
    <link href="commons/lib/nanoscroller_0.8.7/nanoscroller.css" rel="stylesheet" type="text/css"/>
    <link href="commons/css/layout.css" rel="stylesheet" type="text/css"/>
    <link href="commons/css/styles.css" rel="stylesheet" type="text/css"/>
    <link href="commons/css/menu-bar.css" rel="stylesheet" type="text/css"/>
    <link href="commons/css/tab-styles.css" rel="stylesheet" type="text/css"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="commons/lib/html5shiv_3.7.2/html5shiv.min.js"></script>
    <script src="commons/lib/respond_1.4.2/respond.min.js"></script>
    <![endif]-->

    <!--<link rel="stylesheet" type="text/css" href="commons/css/sequence_diagram/sequenced-styles.css"/>-->
    <link rel="stylesheet" type="text/css" href="commons/css/tool-palette.css"/>
    <!--<link rel="stylesheet" type="text/css" href="commons/css/diagram/preview-pane.css"/>-->
    <link rel="stylesheet" type="text/css" href="commons/css/styles.css"/>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <title>Integration Server Tooling</title>
</head>

<body>

<!-- Start: header -->
<header class="header header-default">
    <!-- Start: header - logo, title & menu-bar -->
    <div id="header-container" class="container-fluid">
        <div class="pull-left brand float-remove-xs text-center-xs">
            <a href="#">
                <img src="commons/lib/theme-wso2_1.0/images/logo-inverse.svg" alt="WSO2" title="WSO2" class="logo">
                <h1>Streaming Processor Tooling</h1>
            </a>
        </div>
        <div id="menu-bar-container" class="menu-bar">
        </div>
    </div>
    <!-- End: header - logo, title & menu-bar -->
</header>
<!-- End: header -->

<!-- Start: page-content-wrapper -->
<div id="page-content-wrapper" class="">
    <div id="welcome-container"></div>
    <div id="page-content" class="container">
        <div id="page-content-first-row" class="row">
            <div id="alerts-container" class="alert row">
            </div>
            <!-- End: alerts container row -->
            <!-- Start: breadcrumb row -->
            <div class="row" id="breadcrumb-container">
                <!--<ol class="breadcrumb" id="breadcrumbs">-->
                <!--</ol>-->
                <ol class="breadcrumb"></ol>
            </div>
            <!-- End: breadcrumb row -->
            <!-- Start: file explorer and editor area row -->
            <div class="row">
                <!-- Start: left container -->
                <div id="left-container">
                    <!-- Start: file explorer -->
                    <div id="workspace-explorer">
                    </div>
                    <!-- End: file explorer -->
                </div>
                <!-- End: left container -->
                <!-- Start: right container -->
                <div id="right-container" class="left-container-default">
                    <!-- Start: service tabs wrapper container-->
                    <div class="container-fluid" id="service-tabs-wrapper">
                        <!-- Start: service tabs wrapper row -->
                        <div class="row">
                            <!-- Start: service tabs -->
                            <div id="tabs-container" class="col-sm-12">
                                <div class="tab-headers">
                                </div>
                                <div id="tab-content-wrapper" style="height: 100%;">
                                    <!-- Start: tool-palette -->
                                    <div id="tool-palette-container"></div>
                                    <!-- End: tool-palette -->
                                    <div class="tab-content tab-content-default col-sm-12"></div>
                                    <!-- Start: Toggle Controls Container -->
                                    <div class="toggle-controls-container">
                                        <div class="toggle-to-source show-div"><img src="commons/images/source.svg"
                                                                                    id="icon-toggle-source"></div>
                                        <div class="toggle-to-design hide-div"><img src="commons/images/design.svg"
                                                                                    id="icon-toggle-design"></div>
                                    </div>
                                    <!-- End: Toggle Controls Container  -->
                                    <div class="notification-container" id="notification-container"></div>
                                </div>
                            </div>
                        </div>
                        <!-- End: service tabs -->
                    </div>
                    <!-- End: service tabs wrapper row -->
                </div>
                <!-- End: service tabs wrapper container-->
            </div>
            <!-- End: right container -->
        </div>
        <!-- End: file explorer and editor area row -->
    </div>
</div>
<!-- End: page-content-wrapper -->

<!-- Start: footer -->
<footer class="footer">
    <div id="footer-container" class="container-fluid">
        <p>WSO2 Streaming Analytics Server Tooling v0.0.1 | ©
            <script>document.write(new Date().getFullYear());</script>
            <a href="http://wso2.com/" target="_blank"><i class="icon fw fw-wso2"></i> Inc</a>.
        </p>
    </div>
</footer>
<!-- End: footer -->

<!-- Start: Template for a tab -->
<div style="display: none" id="tab-template">
    <!-- Start: Tab -->
    <div>
        <!-- Start: Canvas Container -->
        <div class="canvas-container">
        </div>
        <!-- End: Canvas Container -->
        <!-- Start: Source Container -->
        <div id="siddhi-editor" class="source-container">
        </div>
        <!-- End Preview Container -->
        <!-- Start: Preview Container -->
        <div class="preview-container">
        </div>
        <!-- End Preview Container -->
        <!-- Start: Toggle Controls Container -->
        <div class="toggle-controls-container">
        </div>
        <!-- End: Toggle Controls Container  -->
    </div>
    <!-- End: Tab -->
</div>
<!-- End: Template for service tab -->

<!-- Start: Modal for file-browser -->
<div class="modal fade" id="fileBrowserModel" tabindex="1000" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" onclick="onFileBrowserClose();" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Select root folder</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid  .file-browser-container">
                    <div id="fileTree"></div>
                    <div id="file-browser-error" class="alert alert-danger" style="display: none;">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="cancelBtn">Cancel</button>
                <button type="button" class="btn btn-primary" id="selectBtn">Select</button>
            </div>
        </div>
    </div>
</div>
<!-- End: Modal for file-browser -->

<!-- Start: Warning validation for number of endpoints on canvas-->
<div id="endpointModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="color:lightgoldenrodyellow">Warning!</h4>
            </div>
            <div class="modal-body">
                <p>Only one endpoint per resource is supported in this version.</p>
            </div>
        </div>
    </div>
</div>
<!-- End: Warning validation for number of endpoints on canvas-->

<!-- Start: Modal for file dialog for saving the configuration-->
<div class="modal fade" id="newConfigModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="newConfigModalLabel">Stream Processor Configuration Wizard</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="location" class="control-label col-sm-2">Location</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="location"
                                       placeholder="eg: /home/user/wso2-integration-server/siddhi-configs">
                            </div>
                            <div class="col-sm-2" style="float: right">
                                <button type="button" class="btn btn-primary" id="openFileBrowserBtn">Select Folder
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="configName" class="control-label col-sm-2">File Name</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="configName" placeholder="eg: hotel-check-in.xyz">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-primary" data-dismiss="modal">cancel</button>
                                <button type="button" class="btn btn-primary" id="createBtn">create
                                </button>
                            </div>
                        </div>
                    </form>
                    <div id="newWizardError" class="alert alert-danger">
                        <strong>Error!</strong> Something went wrong.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End: Modal for file dialog for saving the configuration-->

<!-- Start: Set Service Parameters Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="servicePropertiesModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Set Service Parameters</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" style="margin-top: 25px">
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="basePath">Base Path</label>
                        <div class="col-md-8">
                            <input id="basePath" name="basePath" type="text" placeholder="/basepath"
                                   class="form-control input-md">

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label" for="produces">Produces</label>
                        <div class="col-md-8">
                            <input id="produces" name="produces" type="text" placeholder="MediaType.APPLICATION_JSON"
                                   class="form-control input-md">
                        </div>
                    </div>

                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="packageName">Package Name</label>
                        <div class="col-md-8">
                            <input id="packageName" name="packageName" type="text" placeholder="com.sample"
                                   class="form-control input-md">
                        </div>
                    </div>

                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="description">Description</label>
                        <div class="col-md-8">
                            <input id="description" name="description" type="text" placeholder="Your Description Here"
                                   class="form-control input-md">
                        </div>
                    </div>

                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="tags">Tags</label>
                        <div class="col-md-8">
                            <input id="tags" name="tags" type="text" placeholder="tag1,tag2"
                                   class="form-control input-md">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="saveServiceProperties()">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- End: Set Service Parameters Modal -->


<script src="commons/lib/requirejs-2.3.2/require.js"></script>
<script type="text/javascript">
    requirejs.config({
        baseUrl: window.location.protocol + "//" + window.location.host + window.location.pathname.split("/").slice(0, -1).join("/"),
        paths: {
            lib: "commons/lib",
            app: "js",
            commons_app: "commons",
            /////////////////////////
            // third party modules //
            ////////////////////////
            jquery: "commons/lib/jquery_v1.9.1/jquery-1.9.1.min",
            jquery_ui: "commons/lib/jquery-ui_v1.12.1/jquery-ui",
            bootstrap: "commons/lib/bootstrap_v3.3.6/js/bootstrap",
            log4javascript: "commons/lib/log4javascript-1.4.13/log4javascript",
            lodash: "commons/lib/lodash_v4.13.1/lodash",
            backbone: "commons/lib/backbone_v1.3.3/backbone",
            jsplumb: "commons/lib/jsplumb_v2.2.6/jsPlumb-2.2.6-min",

            //svg_pan_zoom: "commons/lib/svg-panNZoom/jquery.svg.pan.zoom",
            //js_tree: "commons/lib/js-tree-v3.3.2/jstree",
            //nano_scroller: "commons/lib/nanoscroller_0.8.7/jquery.nanoscroller.min",
            theme_wso2: "commons/lib/theme-wso2_1.0/js/theme-wso2",
            ace: "commons/lib/ace-editor",
            //beautify: "commons/lib/beautify",
            ///////////////////////
            // custom modules ////
            //////////////////////
            log: "commons/js/log/log",
            menu_bar_provider: "commons/js/stream-processor-menu-bar/module",
            file_menu: "commons/js/stream-processor-menu-bar/file-menu",
            edit_menu: "commons/js/stream-processor-menu-bar/edit-menu",
            menu_bar: "commons/js/menu-bar/menu-bar",
            tool_palette: "js/tool-palette/module",
            tab: "js/tab/",
            toolEditor: "js/tool-editor/module",
            //d3utils: "commons/js/utils/d3-utils",
            //diagram_core: "commons/js/diagram-core/module",
            command: "commons/js/command/command",
            workspace: "commons/js/workspace/workspace"
            //event: "commons/js/event/event",
            //main_elements: "commons/js/main-elements/module",
            //processors: "commons/js/processors/module" ,
            //tool_palette: "commons/js/tool-palette/module",
            //file_browser: "commons/js/file-browser/file-browser",

            //tool_bar: "commons/js/tool-bar/tool-bar",
            //tab: "commons/js/tab/",
            //alerts: "commons/js/utils/alerts",
            //breadcrumbs: "commons/js/breadcrumbs/breadcrumbs",
            //tree_node: "commons/js/ast/node"
        },
        map: {
            "*": {
                // use lodash instead of underscore
                underscore: "lodash",
                jQuery: "jquery"
            }
        },
        packages: [
            {
                name: 'workspace',
                location: 'commons/js/workspace',
                main: 'module'
            }
        ]
    });

    require(['app/main'], function (Application) {
        var app, config;
        config = {
            container: "#page-content",
//            services:   {
//                workspace:  {
//                    endpoint: "http://localhost:8289/service/workspace"
//                }
//            },
//            alerts: {
//                container: "#alerts-container",
//                cssClass: {
//                }
//            },
//            tool_bar: {
//                container: ""
//            },
            menu_bar: {
                container: "#menu-bar-container",
                cssClass: {
                    active: "active",
                    menu: "dropdown-menu",
                    item: "dropdown-toggle",
                    menu_group: "menu-group"
                }
            },
            tab_controller: {
                container: "#tabs-container",

                headers: {
                    // relative selector within container for tab controller
                    container: ".tab-headers",
                    cssClass: {
                        list: 'nav nav-tabs',
                        item: 'nav-tab-header',
                        active: 'active'
                    }
                },
                tabs: {
                    // relative selector within container for tab controller
                    container: ".tab-content",
                    tab: {
                        template: "#tab-template",
                        cssClass: {
                            tab: 'tab-pane',
                            tab_active: 'active',
                            tab_close_btn: 'close closeTab pull-right'
                        },
                        service_editor: {
                            canvas: {
                                // relative selector within container for a tab
                                container: '.canvas-container'
                            },
                            preview: {
                                // relative selector within container for a tab
                                container: '.preview-container'
                            },
                            source: {
                                // relative selector within container for a tab
                                container: '.source-container'
                            },
                            toggle_controls: {
                                // relative selector within container for a tab
                                container: '.toggle-controls-container',
                                sourceIcon: '.toggle-to-source',
                                designIcon: '.toggle-to-design'
                            },
                            notifications: {
                                container: '#notification-container'
                            }
                        }
                    }
                },
                tool_palette: {
                    // relative selector within container for tab controller
                    container: "#tool-palette-container",
                    search_bar: {
                        cssClass: {
                            search_box: 'search-bar',
                            search_icon: 'fw fw-search searchIcon',
                            search_input: 'search-input'
                        }
                    }
                }
            }
//            breadcrumbs:{
//                container: "#breadcrumb-container",
//                cssClass:  {
//                    active: "active",
//                    list: "breadcrumb",
//                    item: "breadcrumb-item"
//                }
//            },
//            tab_controller: {
//                container: "#tabs-container",
//                headers:    {
//                    // relative selector within container for tab controller
//                    container: ".tab-headers",
//                    cssClass: {
//                        list: 'nav nav-tabs',
//                        item: 'nav-tab-header',
//                        active: 'active'
//                    }
//                },
//                tabs: {
//                    // relative selector within container for tab controller
//                    container: ".tab-content",
//                    tab: {
//                        template: "#tab-template",
//                        cssClass: {
//                            tab: 'tab-pane',
//                            tab_active: 'active'
//                        },
//                        canvas: {
//                            // relative selector within container for a tab
//                            container: '.canvas-container'
//                        },
//                        preview: {
//                            // relative selector within container for a tab
//                            container: '.preview-container'
//                        },
//                        source: {
//                            // relative selector within container for a tab
//                            container: '.source-container'
//                        },
//                        toggle_controls: {
//                            // relative selector within container for a tab
//                            container: '.toggle-controls-container'
//                        }
//                    }
//                },
//                tool_palette: {
//                    // relative selector within container for tab controller
//                    container: "#tool-palette-container",
//                    search_bar: {
//                        cssClass:{
//                            search_box: 'search-bar',
//                            search_icon: 'fw fw-search searchIcon',
//                            search_input: 'search-input'
//                        }
//                    }
//                }
//            },
//            file_browser: {
//                container: "#file-browser"
//            }
        };
        app = new Application(config);
        app.render();
    });

</script>
</body>

</html>
