<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Kingdom Test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.1/themes/prism.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>

    <div id="kingdom"></div>

    <div class="button-wrapper">
        <div class="button king-btn">
            <p>Will initialize the kingdom and set the following subject as king</p>
            <pre>
            <code class="language-js">
const KING = {
    element: 'div',
    textAsHTML: '<span> I am the KING! </span>',
    setAttributes:{
        'class': 'king lord item'
    }
}
kingdom = new Kingdom({...KING});
            </code>
        </pre>
            <button id="king">Create King</button>
        </div>

        <div id="menus">
            <div class="button">
                <p>Adds a subject to the current lord</p>
                <pre>
                <code class="language-js">
const SUBJECT = {
    element: 'div',
    textAsHTML: '<span> I am your loyal subject! </span>',
    setAttributes:{
        'class': 'subject item'
    }
}
kingdom = kingdom.addSubject({...SUBJECT});
                </code>
            </pre>
                <button id="subject">Create Subject</button>
            </div>

            <div class="button">
                <p>Creates new subject. Sets them as current lord</p>
                <pre>
                <code class="language-js">
const SUBJECT_LORD = {
    element: 'div',
    textAsHTML: '<span> I am your loyal subject, but I too rule! </span>',
    setAttributes:{
        'class': 'subject lord item'
    }
}
kingdom = kingdom.addSubject({...SUBJECT_LORD}, true);
                </code>
            </pre>
                <button id="subject-lord">Create Subject and Make Lord</button>
            </div>

            <button id="render">Render</button>
            <button id="clear">Start Over</button>
        </div>
    </div>

    <pre>
        <code class="object-map language-js"></code>
    </pre>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.1/components/prism-core.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="dist/kingdom.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

    </body>
</html>
