Value Chain Section Element

by Erik Bartlow

HTML

<link rel="stylesheet" href="http://www.thebartlows.com/scripts/vcv/css/vc-theme-main.css">
<link rel="stylesheet" href="http://www.thebartlows.com/scripts/vcv/css/vc-viewer.css">
<script src="http://www.thebartlows.com/scripts/vcv/scripts/vc-viewer.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic%27&amp;type=.css">
<div id="content">
    <div id="vc-content" class="vc-model-container">
        <div class="vc-section vc-section-bk-grey" style="width:200px" id="section_1" whennew="">
            <div class="vc-resize dl"></div>
            <div class="vc-resize dr"></div>
        </div>
        <div class="vc-section vc-section-bk-tan" style="width: 400px; top: auto; left: 254px;" id="section_2" whennew="">
            <div class="vc-resize dl"></div>
            <div class="vc-resize dr"></div>
        </div>
        <div id="vcRowContainer" class="vc-rows vc-row-group">
            <div class="vc-row vc-row-time vc-color-base-border" id="row_1">
                <div class="vc-header vc-color-time-header">
                    <div class="vc-title vc-rotate" data-key="1">Value Chain Relationship</div>
                </div>
                <div class="vc-add-row vc-color-base-border" style="display: none;">
                     <h2>+</h2>

                </div>
                <div class="vc-flex vc-flex-left vc-row-container">
                    <div id="vcRowContainer" class="vc-rows vc-row-group">
                        <div class="vc-row vc-row vc-color-base-border" id="row_1.1">
                            <div class="vc-header vc-color-topic-header">
                                <div class="vc-title vc-rotate" data-key="1.1">New Row</div>
                            </div>
                            <div class="vc-add-row vc-color-base-border" style="display: none;">
                                 <h2>+</h2>

                            </div>
                            <div...

CSS

html, body {
    font-family: HPSimplified, sans-serif;
    position: relative;
    margin: 0px;
    height: 100%;
    overflow: hidden;
}
h3 {
    margin-top: 1em;
    margin-bottom: 2em;
}
.vc-app-container {
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    overflow-y: hidden;
    position: relative;
    background-color: #E3E3E3;
    padding-top: 110px;
    padding-right: 10em;
}
.vc-app-header {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 60px;
    min-width: 100%;
    background-color: #0096D6;
    padding-left: 10px;
    border-width: 3px;
    z-index: 550;
    align-items: stretch !important;
    white-space: nowrap;
}
.vc-app-logo {
    background-image: url(/img/hp-logo.gif);
    background-position: left;
    background-repeat: no-repeat;
    height: 60px;
    width: 60px;
    padding-left: .5em;
}
.vc-app-title {
    color: #FFFFFF;
    font-weight: bold;
    height: 60px;
    font-size: 1.2em;
    position: relative;
    top: 20px;
}
.vc-app-user {
    color: #FFFFFF;
    font-weight: bold;
    height: 60px;
    font-size: 1.2em;
    position: relative;
    top: 20px;
    width: 100%;
    text-align: right;
    padding-right: 2em;
}
.vc-app-toolbar {
    position: fixed;
    top: 60px;
    left: 0px;
    height: 32px;
    min-width: 100%;
    background-color: #CCCCCC;
    padding-left: 10px;
    padding-top: 5px;
    -webkit-box-shadow: 1px 6px 6px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 6px 6px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 6px 6px 0px rgba(0, 0, 0, 0.2);
    z-index: 550;
}
.vc-app-toolbar ul {
    position: relative;
    list-style-type: none;
    text-align: left;
    min-height: 32px;
    line-height: 100%;
    padding-top: 5px;
}
.vc-app-toolbar ul li {
    position: relative;
    list-style: none;
    float: left;
    display: inline;
    min-height: 100%;
    cursor: pointer;
}
.vc-app-toolbar ul li div {
    min-width: 36px;
}
.vc-model-container {
    margin-left: 1em;
    position:...

JavaScript

var model = {
                "Id": "1",
                    "Name": "Model 1",
                    "Published": "false",
                    "DateUpdated": Date(),
                    "Owner": {
                    "Name": "Erik Bartlow",
                        "Email": "[email protected]"
                },
                    "rows": [],
                    "sections": []
            };
            model.rows = [{
                "Id": "1",
                    "Name": "Value Chain Relationship",
                    "Type": "time",
                    "Parent": "1",
                    "Siblings": {
                    "before": "0",
                        "after": "2"
                },
                    "rows": [],
                    "elements": []
            }, {
                "Id": "2",
                    "Name": "Business Process Area",
                    "Type": "area",
                    "Parent": "1",
                    "Siblings": {
                    "before": "1",
                        "after": "3"
                },
                    "rows": [],
                    "elements": [{
                    "Id": "1",
                        "Name": "Vision / Strategy",
                        "Type": "base",
                        "Parent": "2",
                        "Siblings": {
                        "before": "0",
                            "after": "2"
                    },
                        "StartGroup": "true",
                        "EndGroup": "false"
                }, {
                    "Id": "2",
                        "Name": "Risk Management",
                        "Type": "base",
                        "Parent": "2",
                        "Siblings": {
                        "before": "1",
                            "after": "0"
                    },
                        "StartGroup": "false",
                        "EndGroup": "true"
                }]
            }, {
                "Id":...