<style>
    .view-mode {
        display: block;
    }
    .edit-mode {
        display: none;
    }
    #map{
        border-style: solid;
        border-width: 3px;
        border-color: #fff;
    }
</style>

<div class="col-sm-9 col-sm-offset-1 col-md-10 col-md-offset-1">
    <svg id="map" width="100%" width="500" viewBox="0 0 1000 500"></svg>
</div>
<div class="col-sm-1 col-md-1">
    <a id="button-edit" class="view-mode" href="#">
        <span class="view-mode glyphicon glyphicon-wrench" aria-hidden="true"></span>
    </a>
    <div class="edit-mode btn-toolbar">
        <div class="btn-group-vertical">
            <button id="button-bg-edit" type="button" class="btn btn-sm btn-default" title="Change Background Image">
                <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
            </button>
            <br />
            <button id="button-save" type="button" class="btn btn-sm btn-success" title="Save">
                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            </button>
            <button id="button-cancel" type="button" class="btn btn-sm btn-danger" title="Cancel">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 text-center">
        Icons downloaded from <a href="http://icons8.com">icons8.com</a>
    </div>
</div>


<script src="js/svg.min.js"></script>
<script src="js/svg.title.js"></script>
<script src="js/svg.draggable.min.js"></script>
<script src="js/jquery.filer.min.js"></script>
<link href="css/jquery.filer.css" rel="stylesheet">
<script>
    var svg;
    var editModeEnabled = false;

    $(function(){
        if (!SVG.supported) {
            alert("SVG not supported");
            return;
        }

        svg = SVG("map");
        drawLoop();

        // set events
        $("#button-edit").click(function() {
            editMode(true);
        });
        $("#button-save").click(function() {
            saveMap();
            editMode(false);
            drawMap();
        });
        $("#button-cancel").click(function() {
            editMode(false);
            drawMap();
        });

        // BG Upload
        $("#button-bg-edit").click(function() {
            // Reset modal
            $('#bg-file-input').parent().show();
            if ($("#file_input").prop("jFiler") != null)
                $("#file_input").prop("jFiler").reset();
            $('#bg-file-progress').parent().hide();
            $('#bgUploadModal').modal('show');
        });
        $('#bg-file-input').filer({
            limit: 1,
            extensions: ['jpg','png','svg','gif'],
            maxSize: 3, // in MB
            uploadFile: {
                url: "",
                type: 'POST',
                enctype: 'multipart/form-data',
                beforeSend: function(){
                    $('#bg-file-input').parent().hide();
                    $('#bg-file-progress').parent().show();
                },
                success: function(data, el){
                    $('#bgUploadModal').modal('hide');
                    drawMap();
                },
                error: function(el){
                    $("#bg-file-progress").addClass("progress-bar-danger");
                },
                onProgress: function(t){
                    $("#bg-file-progress").css("width", t+"%");
                },
            }
        });
    });


    function editMode(enable){
        if (editModeEnabled == enable)
            return;
        editModeEnabled = enable;
        if (editModeEnabled){
            $(".edit-mode").show();
            $(".view-mode").hide();
            $("#map").css("border-color", "#6eb16e");
            svg.select(".draggable").draggable(true);
        }
        else {
            $(".edit-mode").hide();
            $(".view-mode").show();
            $("#map").css("border-color", "");
            svg.select(".draggable").draggable(false);
        }
    }

    function drawLoop(){
        if (editModeEnabled == false)
            drawMap();
        setTimeout("drawLoop()", 10000);
    }

    function drawMap(){
        // Get map data
        $.getJSON("/data/map?action=getdata", function(json){
            // reset map
            svg.clear();

            ////////////////  Draw
            // Background
            svg.image("?bgimage", "100%", "100%").x(0).y(0).addClass("bg-image");

            // Sensors
            $.each(json.sensors, function(i, sensor) {
                var group = svg.group();
                group.image("/img/temperature.svg");
                group.text(sensor.data).move(45,15).fill('#999');

                group.addClass("draggable").addClass("sensor")
                    .x(sensor.x).y(sensor.y)
                    .attr("device-id", sensor.id);
                group.title(sensor.name);
            });
            // Events
            $.each(json.events, function(i, event) {
                var group = svg.group();
                var img = "/img/lightbulb_off.svg";
                if (event.data == "ON")
                    img = "/img/lightbulb_on.svg";
                group.image(img);

                group.addClass("draggable").addClass("event")
                    .x(event.x).y(event.y)
                    .attr("device-id", event.id);
                group.title(event.name);
            });
        });
    }

    function saveMap(){
        svg.select(".sensor").each(function(){
            saveDevice(this, "sensor");
        });
        svg.select(".event").each(function(){
            saveDevice(this, "event");
        });
    }
    function saveDevice(element, type){
        $.ajax({
            async: false,
            dataType: "json",
            url: "/data/map?",
            data: {
                action: "save",
                id: element.attr("device-id"),
                type: type,
                x: element.x(),
                y: element.y()
            },
        });
    }
</script>


<!------------------ MODALS ---------------------->
<div class="modal fade" id="bgUploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Upload Background Image</h4>
            </div>
            <div class="modal-body">
                <center>
                    <div class="input-group">
                        <input type="file" name="bg-file" id="bg-file-input">
                    </div>
                    <div class="progress">
                        <div id="bg-file-progress" class="progress-bar progress-bar-striped active" style="width: 1%"></div>
                    </div>
                </center>
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>