{% extends "layout.html" %}
{% block head %}
    {{ super() }}

    <style type="text/css">

        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
            }
        }
        
        label>span {
            color: deepskyblue;
        }

        .btn,
        .form-group>div>div,
        .form-control {
            border-radius: 0;
        }

        .table {
            font-size: 12px;
            border-width: 1px;
            line-height: 22px;
        }

        .table > tbody > tr > td {
            color: #424547;
        }

        .table-bordered > tbody > tr {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .table-bordered > thead > tr > th,
        .table-bordered > tbody > tr > th,
        .table-bordered > tfoot > tr > th,
        .table-bordered > thead > tr > td,
        .table-bordered > tbody > tr > td,
        .table-bordered > tfoot > tr > td {
            border-style: solid;
            border-width: 1px 0 0 0;
        }

        .guest-label {
            color: #999999;
        }

        .guest-desc {
            color: #333333;
        }

        .display_none {
            display: none;
        }

        .snapshot_original {
            top: 6em;
            background-color: white;
            border: 1px solid #346789;
            cursor: default;
            box-shadow: 2px 2px 19px #aaa;
            -o-box-shadow: 2px 2px 19px #aaa;
            -webkit-box-shadow: 2px 2px 19px #aaa;
            -moz-box-shadow: 2px 2px 19px #aaa;
            -moz-border-radius: 0.5em;
            border-radius: 2em;
            position: relative;
            width: 7em;
            height: 4em;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-transition: -webkit-box-shadow 0.15s ease-in;
            -moz-transition: -moz-box-shadow 0.15s ease-in;
            -o-transition: -o-box-shadow 0.15s ease-in;
            transition: box-shadow 0.15s ease-in;
        }

        .snapshot_checkpoint {
            top: 5em;
            background-color: white;
            border: 1px solid #346789;
            cursor: pointer;
            box-shadow: 2px 2px 19px #aaa;
            -o-box-shadow: 2px 2px 19px #aaa;
            -webkit-box-shadow: 2px 2px 19px #aaa;
            -moz-box-shadow: 2px 2px 19px #aaa;
            -moz-border-radius: 0.5em;
            border-radius: 3em;
            position: relative;
            width: 6em;
            height: 6em;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-transition: -webkit-box-shadow 0.15s ease-in;
            -moz-transition: -moz-box-shadow 0.15s ease-in;
            -o-transition: -o-box-shadow 0.15s ease-in;
            transition: box-shadow 0.15s ease-in;
        }

        .snapshot_current {
            top: 6em;
            background-color: white;
            border: 1px solid #346789;
            cursor: default;
            box-shadow: 2px 2px 19px #aaa;
            -o-box-shadow: 2px 2px 19px #aaa;
            -webkit-box-shadow: 2px 2px 19px #aaa;
            -moz-box-shadow: 2px 2px 19px #aaa;
            -moz-border-radius: 0.5em;
            border-radius: 0;
            position: relative;
            width: 7em;
            height: 4em;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-transition: -webkit-box-shadow 0.15s ease-in;
            -moz-transition: -moz-box-shadow 0.15s ease-in;
            -o-transition: -o-box-shadow 0.15s ease-in;
            transition: box-shadow 0.15s ease-in;
        }

        .snapshot_checkpoint:hover {
            border:1px solid #123456;
            box-shadow: 2px 2px 19px #444;
            -o-box-shadow: 2px 2px 19px #444;
            -webkit-box-shadow: 2px 2px 19px #444;
            -moz-box-shadow: 2px 2px 19px #fff;
            opacity:0.9;
        }

    </style>
{% endblock head %}
{% block body %}
<script>
    var resource_path = window.location.pathname;

    /* jsPlumb 初始化时可调配的参数
        Anchor : "BottomCenter",//端点的定位点的位置声明（锚点）：left，top，bottom等
        Anchors : [ null, null ],//多个锚点的位置声明
        ConnectionsDetachable   : true,//连接是否可以使用鼠标默认分离
        ConnectionOverlays  : [],//附加到每个连接的默认重叠
        Connector : "Bezier",//要使用的默认连接器的类型：折线，流程等
        Container : null,//设置父级的元素，一个容器
        DoNotThrowErrors  : false,//如果请求不存在的Anchor，Endpoint或Connector，是否会抛出
        DragOptions : { },//用于配置拖拽元素的参数
        DropOptions : { },//用于配置元素的drop行为的参数
        Endpoint : "Dot",//端点（锚点）的样式声明（Dot）
        Endpoints : [ null, null ],//多个端点的样式声明（Dot）
        EndpointOverlays : [ ],//端点的重叠
        EndpointStyle : { fill : "#456" },//端点的css样式声明
        EndpointStyles : [ null, null ],//同上
        EndpointHoverStyle : null,//鼠标经过样式
        EndpointHoverStyles : [ null, null ],//同上
        HoverPaintStyle : null,//鼠标经过线的样式
        LabelStyle : { color : "black" },／／标签的默认样式。
        LogEnabled : false,//是否打开jsPlumb的内部日志记录
        Overlays : [ ],//重叠
        MaxConnections : 1,//最大连接数
        PaintStyle : { lineWidth : 8, stroke : "#456" },//连线样式
        ReattachConnections : false,//是否重新连接使用鼠标分离的线
        RenderMode : "svg",//默认渲染模式
        Scope : "jsPlumb_DefaultScope"//范围，标识
     */

    $(document).ready(function() {
        $('body').addClass('add-transition');
        $('.add-page-transition').on('click', function(){
            var transAttr = $(this).attr('data-transition');
            $('.add-transition').attr('class', 'add-transition');
            $('.add-transition').addClass(transAttr);
        });

        var color = "gray";

        var firstInstance = jsPlumb.getInstance({
            Connector:[ "Flowchart"],
            DragOptions: { cursor: "pointer", zIndex: 2000 },
            PaintStyle: { stroke: color, strokeWidth: 2 },
            EndpointStyle: { radius: 9, fill: color}
        });

        firstInstance.setContainer("snapshot_panel");

        var arrowCommon = { foldback: 0.7, fill: color, width: 16 };
        var overlays = [
                [ "Arrow", { location: 1 }, arrowCommon ]
            ];

        firstInstance.addEndpoint("snapshot_origin", {
            uuid: "snapshot_origin_right",
            anchor: "Right",
            endpoint: "Blank",
            maxConnections: 100});

        firstInstance.addEndpoint("snapshot_01", {
            uuid: "snapshot_01_left",
            anchor: "Left",
            endpoint: "Blank",
            maxConnections: 100});

        firstInstance.connect({uuids: ["snapshot_origin_right", "snapshot_01_left"], overlays: overlays});
        // firstInstance.draggable(['snapshot_origin', 'snapshot_01']);
    });

</script>
<div class="container" style="padding-top: 100px; width: 90%; max-width: 100%;">
    <div class="panel">
        <div class="panel-body">
            <a href="javascript:history.go(-1)" class="btn btn-xs btn-default add-page-transition" data-transition="pt-page-moveFromLeft-init" style="margin-bottom: 4px; margin-left: 10px;">
                <span class="glyph-icon icon-separator" style="transform: rotateY(-180deg);">
                    <i class="glyph-icon icon-level-up"></i>
                </span>
                <span class="button-content">
                    返回
                </span>
            </a>
            <div id="snapshot_panel" class="row" style="margin-top: 10px; height: 500px; position: relative;">
                <div class="snapshot_original" id="snapshot_origin" style="left: 8em;">原</div>
                <div class="snapshot_checkpoint" id="snapshot_01" style="left: 16em;">快照1</div>
                <div class="snapshot_checkpoint" id="snapshot_02" style="left: 24em;">快照2</div>
                <div class="snapshot_checkpoint" id="snapshot_03" style="left: 32em;">快照3</div>
                <div class="snapshot_checkpoint" id="snapshot_last" style="left: 40em;">快照4</div>
                <div class="snapshot_current" id="snapshot_current" style="left: 48em;">当前</div>
            </div>
        </div>
    </div>
</div>
{% endblock body %}