<?php
if (!defined('ABSPATH')) {
    exit;
}

class SchematicSchemaBuilderView {

    public function __construct() {
        add_action('post_submitbox_misc_actions', array($this, 'meta'));
        add_action('admin_enqueue_scripts', array($this, 'admin_scripts'));
        add_action('admin_footer', array($this, 'view'));
        add_action('admin_notices', array($this, 'noticeFiles'));
    }

    public function noticeFiles() {
        global $schematic_dir;

        $options = getSchematicOptions();

        if ($options['compatability_mode'] !== 'true' && !file_exists($schematic_dir . 'js/wp-schema.js')) {

            $options['compatability_mode'] = 'true';
            setSchematicOptions($options);
            ?>


            <div class="notice notice-success is-dismissible">
                <p> An important javascript file is missing from wpschema folder (wpschema/js/wp-schema.js).  <br />
                    Some hosts may recognize the code obfuscation we use as a virus and delete this file, don't panic they are not using proven tools but merely attempt to 
                    find obfuscation which we use. <br />
                    In this case you can load the file directly from our server, we have enabled this option for you now since this file is missing (see Compatability in Options). <br />
                    Please reload this page now.
                </p>
            </div> <?php
        }
    }

    public function meta() {
        if (!shouldSchemaPluginLoad()) {
            return false;
        }

        global $post;
        ?> <div class="misc-pub-section">
        <?php getSchematicEditButtonHtml($post); ?>  
        </div> 

        <?php
    }

    public function admin_scripts() {
        global $schematic_file;

        if (!shouldSchemaPluginLoad()) {
            return false;
        }


        wp_enqueue_script('ace', plugins_url('/js/ace/ace.js', $schematic_file), array('jquery'), WPSCHEMA_VERSION);
        wp_enqueue_script('d3', plugins_url('/js/d3.v3.min.js', $schematic_file), array(), WPSCHEMA_VERSION);
        wp_enqueue_script('d3-tip', plugins_url('/js/d3-tip.js', $schematic_file), array('d3'), WPSCHEMA_VERSION);
        wp_enqueue_script('jspagination', plugins_url('/js/pagination.min.js', $schematic_file), array('jquery'), WPSCHEMA_VERSION);

        wp_enqueue_style('schematic-schematic-ui-css', plugins_url('/css/ui/jquery-ui.min.css', $schematic_file), array(), WPSCHEMA_VERSION);
        wp_enqueue_style('schematic-schematic-font', plugins_url('/font/schemaplugin.css', $schematic_file), array(), WPSCHEMA_VERSION);
        wp_enqueue_style('schematic-schematic-pagination', plugins_url('/css/schematic-pagination.css', $schematic_file), array(), WPSCHEMA_VERSION);
        wp_enqueue_style('schematic-schematic-style', plugins_url('/css/schematic-admin.css', $schematic_file), array(), WPSCHEMA_VERSION);

        wp_enqueue_script('dialogextend', plugins_url('/js/dialogextend.js', $schematic_file), array('jquery-ui-dialog'), WPSCHEMA_VERSION);
        wp_enqueue_script('jsrender', plugins_url('/js/jsrender.min.js', $schematic_file), array(), WPSCHEMA_VERSION);
        wp_enqueue_script('jquery.fileupload', plugins_url('/js/jquery.fileupload.js', $schematic_file), array('jquery', 'jquery-ui-widget'), WPSCHEMA_VERSION);

        wp_enqueue_script('confirm-js', plugins_url('/js/jquery-confirm.js', $schematic_file), array(), WPSCHEMA_VERSION);
        wp_enqueue_style('confirm-css', plugins_url('/css/jquery-confirm.min.css', $schematic_file), array(), WPSCHEMA_VERSION);

        $options = getSchematicOptions();

        if ($options['compatability_mode'] == 'true') {
            global $schematic_cdn_url;

            define('WPSCHEMA_SCHEMA_BUILDER', $schematic_cdn_url . WPSCHEMA_VERSION . '/js/wp-schema.js');
        } else {
            if (!defined('WPSCHEMA_SCHEMA_BUILDER')) {
                define('WPSCHEMA_SCHEMA_BUILDER', plugins_url('/js/wp-schema.js', $schematic_file));
            }
        }


        wp_enqueue_style('wp-jquery-ui-dialog');

        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
        wp_enqueue_script('jquery-ui-tabs');
        wp_enqueue_script('jquery-ui-dialog');

        wp_enqueue_script('schematic', WPSCHEMA_SCHEMA_BUILDER, array(
            'dialogextend',
            'ace',
            'jquery',
            'jquery-ui-tabs',
            'd3-tip',
            'jspagination',
            'jquery.fileupload',
            'jsrender',
            'confirm-js',
                ), WPSCHEMA_VERSION);
    }

    public function view() {
        if (!shouldSchemaPluginLoad()) {
            return false;
        }
        ?>

        <script id="schema-catalog-list" type="text/x-jsrender">

            {{if agreement != 1 }} 
            <div id="notice-schema-agreement">
            The schema catalog includes schemas submitted by 3rd party plugin users. <br />
            Every schema in the catalog is validated / approved by us but use with caution and at your own risk!  

            <b style="cursor: pointer;" id="schema-agreement-ok">[x]</b></div>
            {{/if}}


            <div id="schema-catalog-list">
            {{:catalog}}
            </div>	

        </script> 
        <script id="save-schema-form-catalog" type="text/x-jsrender">

            <div {{if nickname && email && password}}  {{else}}  style="display:none"  {{/if}}  id="save-schema-form-catalog-template">


            <span {{if nickname }}  {{else}}  style="display:none"  {{/if}} id="api-catalog-logged-in-bar"> 
            <b id="api-catalog-nickname-b">{{:nickname}}</b> you are logged in
            </span>
            <br />

            <b> Schema Information </b><br />

            <div class="field-row"> <input autocomplete="off" id="new-schema-title" type="text" placeholder="Schema Title" />  </div>
            <div class="field-row"> <input autocomplete="off" id="new-schema-description" type="text" placeholder="Schema Description" />  </div>
            <div class="field-row"> <input autocomplete="off" id="new-schema-tags" type="text" placeholder="Schema Tags, ex: tag1, tag2" /> </div>
            <button id="save-schema-catalog" class="ui-button ui-corner-all ui-widget">Submit</button>
            <button id="cancel-save-schema" class="ui-button ui-corner-all ui-widget">Cancel</button>
            </div>


            <div id="tabs-schema-profile">
            <ul>
            <li id="tab-login"><a href="#tabs-schema-profile-1">Login</a></li>
            <li id="tab-profile"><a href="#tabs-schema-profile-2">Profile</a></li>
            <li id="tab-register"><a href="#tabs-schema-profile-3">Register</a></li>
            </ul>

            <div id="tabs-schema-profile-1">
            Login if you already have an account with our Schema Catalog API <br /><br />
            <input value="{{:email}}" class="account-information regular-text" id="api-login-email" type="text" placeholder="Your Email" /><br />
            <input value="{{:password}}" class="account-information regular-text" id="api-login-password" type="password" placeholder="Your Password" />
            <br /> <br />

            <button id="login-schematic-api" class="button button-primary button-large">Login</button>
            </div> 

            <div id="tabs-schema-profile-2">
            <div class="field-row">
            <input type="text" placeholder="Nickname" class="input" id="api-account-nickname" />
            </div>
            <div class="field-row">
            <input type="text" placeholder="Name" class="input" id="api-account-name" />
            </div>

            <div class="field-row">
            <input type="text" placeholder="Email" class="input" id="api-account-email" />
            </div>       
            <div class="field-row">
            <input type="password" placeholder="Password" class="input" id="api-account-password" />
            </div>   
            <div class="field-row">
            <input type="text" placeholder="About" id="api-account-content" />
            </div>         

            <button id="save-api-profile" class="ui-button ui-corner-all ui-widget">Save</button>
            <button id="cancel-save-api-profile" class="ui-button ui-corner-all ui-widget">Close</button>

            <span id="api-catalog-logout">Logout</span>
            </div>

            <div id="tabs-schema-profile-3">
            Create new account <br />
            <div class="field-row">

            <input class="account-information" id="api-account-nickname" type="text" placeholder="Your Nickname" />
            <input class="account-information" id="api-account-name" type="text" placeholder="Your Name" /> 

            <br />   <br />  
            <input class="account-information" id="api-account-email" type="text" placeholder="Your Email" />
            <input style="margin-right:0" class="account-information" id="api-account-password" type="password" placeholder="Your Password" />
            <br /> <br />  
            <i><small>Your email will remain private</small></i><br /><br />
            <button class="button button-primary button-large" id="register-api-account">Register</button>
            <br /> 
            </div>

            </div>
            </div>
            </div>            


        </script>

        <script id="save-schema-form-own" type="text/x-jsrender">

            <b> Schema Information </b><br />
            <div class="field-row"> <input id="new-schema-title" type="text" placeholder="Schema Title" />  </div>
            <div class="field-row"> <input id="new-schema-description" type="text" placeholder="Schema Description" />  </div>
            <div class="field-row"> <input id="new-schema-tags" type="text" placeholder="Schema Tags, ex: tag1, tag2" /> </div>

            <button id="save-schema-own" class="ui-button ui-corner-all ui-widget">Submit</button>
            <button id="cancel-save-schema" class="ui-button ui-corner-all ui-widget">Cancel</button>
        </script>

        <script id="schema-parser-output" type="text/x-jsrender">
            <div class="schema-parser-output">
            {{if grouptitle}}<div class="grouptitle">{{:grouptitle}}</div>{{/if}}
            {{if url}}<div title="{{:url}}" class="via-em">via {{:url}} </div>{{/if}}

            <div data-mode="3" class="parsed-schema-item">
            <div class="parsed-schema-title">
            <span title="Import Schema" class="json-builder-button">
            <i class="icon-plus"></i>
            </span>
            <span class="schema-type">{{if title}} {{:title}} {{else}}no @type provided{{/if}}</span> 
            </div>

            <div class="schema-option-group">
            <span data-type="{{:type}}" data-id="{{:id}}" title="Schema Visualizer" class="json-builder-button visualize">
            <i class="icon-visualizer"></i> Visualizer
            </span>

            <span data-type="{{:type}}" data-id="{{:id}}" title="Schema Preview" class="json-builder-button preview">
            <i class="icon-view"></i> Preview
            </span>
            </div>

            <div style="display:none" class="schema-exists-options">
            <b> {{:title}} </b> Schema already exists.
            We will <span class="fully-replace-existing-schema" style="display:none">FULLY OVERWRITE EXISTING SCHEMA</span>
            <span class="schema-join">
            <span class="schema-join-mode">JOIN </span>
            the 2 schemas - prefer <span class="schema-keep-existing">KEEPING YOURS</span>
            </span>
            </div>

            </div>
            </div>
        </script>


        <script id="schema-row-template" type="text/x-jsrender">

            <div class="schema-row-template {{if schema.pending==true}}schema-pending{{/if}}" data-id="{{:schema.id}}" data-schema-index="{{:schemaIndex}}">
            <div class="title">
            {{if schema.pending==true}} <span title="Pending Approval" class="pending"><i class="icon-pending"></i> </span>{{/if}} {{:schema.title}}
            </div>
            <div class="description">
            {{:schema.description}}
            </div>
            <div class="tags">
            {{:~tagssplit(schema.tags) }}
            </div>

            <div class="actions">
            <span class="visualize-schema" title="Visualize Schema"><i class="icon-visualizer"></i> Visualizer</span>
            <span class="preview-schema" title="Preview Schema"><i class="icon-view"></i> Preview</span>
            <span class="use-schema" title="Import Schema"><i class="icon-save"></i> Import</span>
            <span class="date"><i class="icon-date"></i> {{:schema.date}} </span>


            {{if schema.author_nickname}}
            <span title="{{:schema.author_nickname}} - {{:schema.author_name}} " class="filter-by-author" data-author-id="{{:schema.author_id}}"><i class="icon-user"></i> by {{:schema.author_nickname}} </span>
            {{else}}
            <span class="delete" title="Delete Schema"> <i class="icon-delete"> </i> Delete</span>
            {{/if}}
            </div>
            </div>
        </script>

        <script id="table-view-td-template" type="text/x-jsrender">
            <tr class="table-tr level-{{:schemaLevel}} {{if css }}{{:css}}{{/if}}"><td class="json-value-td ">{{:id}}</td><td>{{:tddata}}</td></tr>
        </script>
        <script id="table-view-td2-template" type="text/x-jsrender">
            <tr class="table-tr level-{{:schemaLevel}}"><td class="json-value-td" colspan="2">{{:id}}</td></tr>
        </script>

        <script id="table-view-td-int-template" type="text/x-jsrender">
            <tr class="table-tr level-{{:schemaLevel}}"><td colspan="2">  {{:tddata}}</td></tr>
        </script>


        <script id="rule-template" type="text/x-jsrender">
            <div id="builder-basic_rule_{{:id}}" class="rule-container">
            <div class="rule-header">
            <div class="btn-group pull-right rule-actions">
            <span data-delete="rule" title="Delete Node" class="json-builder-button delete-button">
            <i class="icon-delete"></i> Delete
            </span>
            </div>
            </div>

            <div class="rule-filter-container id">
            <input type="text" class="form-control id" placeholder="id" />
            </div>

            <div class="rule-filter-container value">
            <input type="text" class="form-control value" placeholder="value" />
            </div>
            </div>

            </div>
        </script>
        <script id="rule-group" type="text/x-jsrender">
            <div id="builder-basic_group_{{:id}}" class="rules-group-container {{if collapse =="true" }}collapsed{{/if}}">
            <div class="rules-group-header">
            <div class="rule-filter-container">
            <input type="text" placeholder="Key" class="form-control id" />
            <span class="json-builder-button">
            <i title="Collapse Group" class="icon-collapse"></i>
            <i title="Expand Group" class="icon-expand"></i>
            </span>
            </div>
            <div class="btn-group pull-right group-actions">

            <span data-add="rule" title="Add Node" class="json-builder-button btn-add-property">
            <i class="icon-plus"></i> Add Node
            </span>

            <span data-add="group" title="Add Group Node" class="json-builder-button btn-add-property">
            <i class="icon-plus"></i> Add Group Node
            </span>

            <span title="Duplicate Group Node" class="json-builder-button duplicate-button">
            <i class="icon-clone"></i> Duplicate
            </span>

            <span data-delete="group" title="Delete Group Node" class="json-builder-button delete-button">
            <i class="icon-delete"></i> Delete
            </span>

            </div>
            </div>
            <div class="rules-group-body">
            <div class="collapsed-block"></div>
            <div class="rules-list">

            </div>

            </div>
            </div>
        </script>

        <script id="render-filter-display" type="text/x-jsrender">
            {{if settings.search || settings.filterAuthorNickname || settings.filterAuthorContent}}

            {{if settings.search}}
            <span data-search="true" class="filter-item">
            search: <span class="filter-value">{{:settings.search}}</span>  <span class="remove-filter">[x]</span>
            </span>
            {{/if}}

            {{if settings.filterAuthorNickname}}
            <span data-author="true" class="filter-item">
            by author: <span class="filter-value">{{:settings.filterAuthorNickname}} ({{:settings.filterAuthorName}}) </span> <span class="remove-filter">[x]</span>
            </span>
            {{/if}}

            {{if settings.filterAuthorContent}}
            <div id="schema-author-about">
            <img class="authorAvatar" src="{{:settings.filterAuthorAvatar}}" />

            About <b>{{:settings.filterAuthorNickname}} {{:settings.filterAuthorName}} </b>: <br /> {{:settings.filterAuthorContent}} 

            </div>
            {{/if}}


            {{/if}} 
        </script>


        <div style="display: none" id="schema-templates-dialog" title="Schema Templates">
            <div class="row-actions-templates">
                <span data-mode="catalog" title="Browse the Schema Catalog" class="schema-browser-button">Schema Catalog </span>
                <span data-mode="own" title="Browse your Private Schemas" class="schema-browser-button">Your Schemas </span>

                <div style="float:right;">
                    <input autocomplete="off" placeholder="Search..." id="search-schema-templates" type="search" /> <i id="do-search-schema-templates" class="icon-search"></i>
                </div>

                <div style="float:right">
                    <span id="import-export-private-schemas" title="Import / Export your schemas" data-type="save" class="private-schema-button schema-button"><i class="icon-save"></i> Import/Export </span>
                    <span id="show-private-schemas" title="Save current Schema as a Template" data-type="save" class="private-schema-button schema-button"><i class="icon-save"></i> Save Current Schema </span>
                    <span title="Share current Schema in the Catalog" data-type="share" class="share-current-schema schema-button"><i class="icon-upload"></i> Share Schema </span>
                </div>
            </div>

            <div id="schema-used-filters"></div>

            <div id="schema-list"></div>
            <div id="schema-catalog-pagination"></div>
            <div id="save-schema-form"></div>
            <div id="import-schema-step"></div>

            <span style="display: none" id="do-import-schema3" title="Import the Schemas in the Schema Builder" class="ui-button ui-corner-all ui-widget">
                <i class="icon-save"></i> Import the Schemas
            </span>

            <span style="display: none" id="cancel-import-schema3" title="Cancel" class="ui-button ui-corner-all ui-widget">
                <i class="icon-cancel"></i> Cancel
            </span>

        </div>


        <div style="display: none" id="visualizer-schema-dialog" title="Schema Visualizer">
            <div id="schema-graph"></div>
        </div>

        <div style="display: none" id="import-export-private-schemas-dialog" title="Import / Export Schemas">
            <b>Important Note</b>:  Importing Schema file will delete your currently saved schemas.
            <br /><br />
            Pick an action: <br /><br />

            <span class="btn btn-success fileinput-button button button-secondary">
                <span>Import Schema File</span>
                <input id="schematic-fileupload-schemas" type="file" name="files[]" multiple="">
            </span>

            &nbsp;



            <a href="?schematic-export-private-schemas&nonce=<?php echo(wp_create_nonce("schematic-nonce")); ?>" class="button button-secondary" target="_blank">  Export Schema File </a>   

            <br /><br />
        </div>

        <div style="display: none" id="schema-options-dialog" title="Schema Builder Options">
            <?php
            $view = new SchematicOptionsView();
            $view->renderView();
            ?>
        </div> 

        <div style="display: none" id="import-schema-dialog" title="Import Schema Into the Schema Builder">

            <?php
            if (!isSchematicOptionChecked('json_format') && !isSchematicOptionChecked('microdata_format')) {
                ?> <br />Notice: There are no scraper modes chosen. You need to enable Scraper Options: JSON-LD, MICRODATA or both<?php
            } else {
                ?>

                <?php
                if (!isSchematicOptionChecked('json_format') && isSchematicOptionChecked('microdata_format')) {
                    ?>      <div class=" notice-success is-dismissible">
                        <p>Notice: Only MICRODATA Format parser is enabled. Normally JSON-LD format should be enabled. </p>
                    </div><?php
            }
                ?>


                <div id="schema-import-tabs">
                    <ul>
                        <li id="webpage-scrape-tab"><a href="#schema-import-tabs-1">SCRAPE FROM A WEBPAGE</a></li>
                        <li id="webpage-scrape-tab"><a href="#schema-import-tabs-2">HTML CODE</a></li>
                        <li id="paste-json-ld-code-tab"><a href="#schema-import-tabs-3">JSON-LD CODE</a></li>
                    </ul>
                    <div id="schema-import-tabs-1">
                        <div class="row5">Paste URL(s) to scrape Schema <div style="display:none" id="loading-scrape-schema"></div></div>
                        <div id="webpage-scrape-wrap">
                            <i class="icon-internet"></i>
                            <textarea id="webpageScrapeInput" placeholder="Enter URL(s) to scrape"></textarea>
                            <span id="scrapeWebpage" title="Scrape schemas from this web page" class="ui-button ui-corner-all ui-widget"> <i class="icon-download"></i> Scrape</span>
                        </div>

                        <div id="schema-parser-results">

                        </div>

                        <br />
                        <div style="display: none" id="importSchemaErrors">

                        </div>
                        <br />
                        <span style="display: none" id="importTheSchemas" title="Import the Schemas in the Schema Builder" class="ui-button ui-corner-all ui-widget">
                            <i class="icon-save"></i> Import the Schemas
                        </span>
                        <br />


                    </div>

                    <div id="schema-import-tabs-2">
                        <div style="max-height: 350px" id="temp1-html">  
                            <div class="row5">Paste HTML code <span data-content="You can view page source on the page you want to extract schema by clicking on CTRL+U on your browser and paste the HTML code for parsing. Asynchronous schemas will not be processed you need to manually extract those and paste it in the JSON-LD CODE tab." class="helpNotification">[?]</span> </div>
                            <div id="htmlCodeAce"></div>
                            <br />
                            <span id="processHtmlSchema" title="Process HTML" class="ui-button ui-corner-all ui-widget">
                                <i class="icon-save"></i> Process HTML </span> <br /> <br />
                        </div>
                        <div id="temp2-html"></div>

                        <br /><br />

                        <span style="display: none" id="do-import-schema5-html" title="Import the Schemas in the Schema Builder" class="ui-button ui-corner-all ui-widget">
                            <i class="icon-save"></i> Import the Schema
                        </span>

                    </div>
                    <div id="schema-import-tabs-3">
                        <div style="max-height: 350px" id="temp1"> <div class="row5">Paste JSON format Schema <span data-content="Paste valid JSON+LD format code. You can use <a target='_blank' href='https://jsonformatter.curiousconcept.com/'>jsonformatter</a> to test and verify your code." class="helpNotification">[?]</span> </div>
                            <div id="jsonSchemaAce"></div>
                            <br />
                            <span id="processJsonSchema" title="Process JSON Schema" class="ui-button ui-corner-all ui-widget">
                                <i class="icon-save"></i> Process JSON Schema</span> <br /> <br />
                        </div>
                        <div id="temp2"></div>

                        <br /><br />

                        <span style="display: none" id="do-import-schema5" title="Import the Schemas in the Schema Builder" class="ui-button ui-corner-all ui-widget">
                            <i class="icon-save"></i> Import the Schema
                        </span>

                    </div>

                </div>

            <?php } ?>    

        </div>

        <div style="display: none" id="help-schema-dialog" title="Help">
            <br />
            <div class="row5"> 


                <div id="schema-help-tabs">
                    <ul>
                        <li><a href="#schema-help-tabs-1">Shortcodes</a></li>
                        <li><a href="#schema-help-tabs-2">PHP Support</a></li>
                    </ul>
                    <div id="schema-help-tabs-1">
                        <h3> Available Shortcodes</h3>

                        <table width="100%" cellspacing="0" cellpadding="0" class="wp-list-table striped">
                            <tr>
                                <th>Shortcode</th>
                                <th>Shortcode Information</th>

                            </tr>

                            <?php
                            global $schematicShortcodes;

                            foreach ($schematicShortcodes->getShortcodes() as $shortcode) {

                                if ($shortcode[0] == 'special') {
                                    ?><tr><td colspan="2">  <?php echo($shortcode[1]); ?> </td></tr>  <?php
                                } else {
                                    ?><tr><td><?php echo($shortcode[0]); ?></td><td> <?php echo($shortcode[1]); ?> </td></tr>  <?php
                                }
                            }
                            ?>

                        </table>  
                    </div>

                    <div id="schema-help-tabs-2">
                        <h3> PHP Support</h4>

                            You can call PHP functions inside the Schema Builder (<b>Enable PHP functions</b> from Options must be checked.), 
                            Use this feature with extreme caution! 
                            Don't execute functions which you're not sure what they do or your site might be affected. 
                            Be careful always when you import schema from the catalog or scrape from a webpage. Recommended for the advanced users 
                            in order to extend the functionality of the plugin beyond the regular scope of usage.


                            <br /> <br /> Example 1: Returns your site URL <pre> &lt;?php echo(get_site_url()); ?&gt;  </pre> 
                            <br /> Example 2: Returns your site URL with suffix <pre> &lt;?php echo(get_site_url()).'#suffix'; ?&gt;  </pre> 
                            <br /> Example 3: Returns admin email <pre> &lt;?php echo(get_option('admin_email')); ?&gt;  </pre> <br />




                    </div>
                </div>





            </div>   
        </div>

        <div style="display: none" id="preview-schema-dialog" title="Preview Schema">
            <div id="preview-schema-dialog-parent">
                <div id="leftCol">
                    <h3>Code</h3>
                    <div id="json-code-preview"></div>
                </div>
                <div id="rightCol">
                    <h3 style="padding-left:10px">Overview</h3>
                    <table id="table-schema-preview"></table>
                </div>
            </div>
        </div>

        <div data-options='<?php echo(json_encode(getSchematicCatalogOptions())) ?>' id="schematic-catalog-options" class="query-builder hidden">
            <div style="padding:0px 15px;">
                <a id="closeSchemaBuilder" style="float: right; margin-right:10px" href="#"><i class="icon-cancel"></i> Close</a>
                <h3><span id="schematic-page-label"></span>  Schema Builder <span id="group-name"></span></h3>

                <div id="topMenuOptions" style="margin-bottom:10px; width: 100%;">
                    <span title="Import Schema" id="import-schema" class="json-builder-button">
                        <i class="icon-upload"></i> Import
                    </span>

                    <span title="Schema Templates" id="schema-templates" class="json-builder-button">
                        <i class="icon-templates"></i> Templates
                    </span>

                    <!--
                    <span title="Schema Options" id="schema-options" class="json-builder-button">
                        <i class="icon-options"></i> Options
                    </span> -->

                    <span title="Create New Schema" id="create-new-schema" class="json-builder-button">
                        <i class="icon-plus"></i> New Schema
                    </span>

                    <span title="Help" id="help-schema" class="json-builder-button">
                        <i class="icon-help"></i> Help
                    </span>

                    <span title="Save Schema" id="save-current-schema" class="json-builder-button">
                        <i class="icon-save"></i> Save Schema
                    </span>

                    <span title="Combine Schemas" id="combine-schemas" class="json-builder-button hidden">
                        <i class="icon-clone"></i> Combine Schemas
                    </span>

                    <div style="display:none" id="loading-save-schema-label">Saving...</div>
                </div>

                <div id="schematic-container">
                    <div id="rules-group-container-1" class="rules-group-container">
                        <div class="rules-group-header">
                            <div class="btn-group pull-left group-actions">


                                <span title="Minimize Schema" class="json-builder-button minimize-schema">
                                    <i class="icon-resize-small"> </i> Minimize
                                </span>


                                <span title="Maximize Schema" class="json-builder-button maximize-schema">
                                    <i class="icon-resize-small"> </i> Maximize
                                </span>


                                <span title="Schema Visualizer" class="json-builder-button visualize-schema">
                                    <i class="icon-visualizer"></i> Visualizer
                                </span>

                                <span title="Schema Preview" class="json-builder-button preview-schema">
                                    <i class="icon-view"></i> Preview
                                </span>

                                <span title="Delete Schema" class="json-builder-button delete-schema">
                                    <i class="icon-delete"> </i> Delete
                                </span>

                                <span title="Combine Schema" class="json-builder-button combine-schema">
                                    <i class="icon-clone"> </i> Combine
                                </span>           

                            </div>

                            <span class="schema-label"></span>

                        </div>
                        <div class="rules-group-body">
                            <div class="rules-list">

                            </div>

                            <div>
                                <span data-add="rule" title="Add Node" class="json-builder-button btn-add-property">
                                    <i class="icon-plus"></i> Add Node
                                </span>
                                <span data-add="group" title="Add Group Node" class="json-builder-button btn-add-property">
                                    <i class="icon-plus"></i> Add Group Node
                                </span>
                            </div>

                        </div>
                    </div></div>
            </div></div>
        <?php
    }

    public function getPageType() {
        global $typenow;
        if (empty($typenow) && !empty($_GET['post'])) {
            $post = get_post($_GET['post']);
            $typenow = $post->post_type;
        }

        return $typenow;
    }

}

new SchematicSchemaBuilderView();

