<!-- create overlay page -->
<div id="popup_create" class="overlay">
    <div class="popup">
        <h2> Choose mount point </h2>
        <a class="close" href="#">&times;</a>
        <form id="form_volume_create" data-parsley-validate class="form-horizontal form-label-left">
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="volume-name">Volume Name <span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" required="required" class="form-control col-md-7 col-xs-12">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">Volume Type <span class="required">*</span>
                </label>
                <div class="col-md-9 col-sm-9 col-xs-12">
                    <select class="form-control">
                        <% ['Distribute', 'Stripe', 'Replica', 'Disperse', 'Disperse-data', 'Redundancy'].each do |types|%>
                        <option><%= types %></option>
                        <% end %>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">Number of brick <span class="required">*</span>
                </label>
                <div class="col-md-9 col-sm-9 col-xs-12">
                    <select class="form-control">
                        <% for i in 1...11 do %>
                        <option><%= i %></option>
                        <% end %>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="row" style="margin:0 0 10px 0">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Bricks <span class="required">*</span>
                    </label>
                    <div class="col-md-3 col-sm-3 col-xs-4">
                        <select class="form-control">
                            <% Node.all.each do |t| %>
                            <option><%= t.host_name %></option>
                            <% end %>
                        </select>
                    </div>
                    <div class="col-md-1 col-sm-1 col-xs-1">
                        <label class="control-label col-md-12 col-sm-12 col-xs-12">/
                        </label>
                    </div>
                    <div class="col-md-5 col-sm-5 col-xs-7">
                        <input type="text" required="required" class="form-control col-md-7 col-xs-12">
                    </div>
                </div>
            </div>
            <div class="ln_solid"></div>
            <div class="form-group">
                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                    <a href="#" class="btn btn-primary">Cancel</a>
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- mount overlay page -->
<div id="popup_mount" class="overlay">
    <div class="popup">
        <h2> Choose mount point </h2>
        <a class="close" href="#">&times;</a>
        <div id="mount_table_div">
            <%= raw html_mount_table %>
        </div>
    </div>
</div>
<!-- page content -->
<div class="right_col" role="main">
    <div class="page-title">
        <div class="title_left">
            <h3>Volume</h3>
        </div>
        <div class="title_right">
            <div class="col-md-5 col-sm-5 col-xs-12 pull-right">
                <a class="btn btn-success btn-lg pull-right" href="#popup_create">Create Volume</a>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <% nodes = Node.all %>
    <% if nodes.length == 0 %>
    <div class="row animated flipInX col-md-6 col-sm-9 col-xs-12">
        <div class="alert alert-info" role="alert">
            <span class="glyphicon glyphicon-bell" area-hidden="true"></span>
            <span class="glyphicon-class">You don't have a node. Please add nodes to do something in this page.</span>
        </div>
    </div>
    <% else %>
    <div class="row">
        <% ssh_volume_info.each_with_index do |volume, index| %>
        <%= raw html_volume_info(volume, index) %>
        <% end %>
    </div>
    <% end %>
</div>
<!-- /page content -->

<!-- On document ready -->
<script>
$(document).ready(function(){
    //$(location).attr('href',"#");
    // Mount overlay functions
    $("#popup_mount #mount_table_body form").submit(function(){
        var mnt_point = $(this).find("input").val();
        var url = window.location + '';
        var vol_name = url.match(/volume_name=([^#]+)/)[1];
        $.ajax({
            type: 'post',
            url: '/volume/mount',
            beforeSend: function(){
                $(location).attr('href',"#loading");
            },
            data: {mount_point: mnt_point, volume_name: vol_name},
            success: function(result){
                $(location).attr('href',"/volume/index");
            }
        });
    });
    // Create overlay functions
    $("#popup_create #form_volume_create").submit(function(){
        var volume_name = $(this).find(".form-group:eq(0) input").val(),
        volume_type = $(this).find(".form-group:eq(1) option:selected").val(),
        num_of_brick = $(this).find(".form-group:eq(2) option:selected").val() * 1, // convert to Number type
        bricks = [];
        if(volume_name.indexOf(' ') >= 0){
            alert("Volume name can't contains white spaces");
            return;
        }
        <% ssh_volume_info.each do |t| %>
        if(volume_name == "<%=t["Volume Name"].delete(' ')%>"){
            alert("Already has a volume which name is same");
            return;
        }
        <% end %>
        for(var i = 0; i < num_of_brick; i++){
            var host_name = $(this).find(".form-group .row").eq(i).find("option:selected").val();
            var brick_name = $(this).find(".form-group .row").eq(i).find("input").val();
            if(brick_name.indexOf(' ') >= 0) {
                alert("Brick name can't contain white spaces");
                return;
            }
            if(brick_name.indexOf('/') == 0) {
                alert("Brick name can't start with slash");
                return;
            }
            var brick = host_name + ":/" + brick_name;
            bricks.push(brick);
            console.log(brick);
        }
        $.ajax({
            method: "POST",
            url: "/volume/create",
            beforeSend : function(){
                $(location).attr('href',"#loading");
            },
            data: { volume_name : volume_name, volume_type : volume_type, num_of_brick : num_of_brick, bricks : bricks },
            success : function(result){
                $(location).attr('href',"/volume/index");
            }
        });
    });
    // Volume type changed
    $("#popup_create #form_volume_create .form-group").eq(1).change(function (){
        var $type = $(this).find("option:selected").val();
        switch ($type) {
            case "Distribute":
            case "Stripe":
            case "Replica":
            case "Disperse":
            case "Disperse-data":
            case "Redundancy":
            console.log($type);
            break;
            default:
            console.log("something goes wrong");
            break;
        }
    });
    // Number of bricks changed
    $("#popup_create #form_volume_create .form-group").eq(2).change(function (){
        var $num_of_brick = $(this).find("option:selected").val();
        var $body = $("#form_volume_create .form-group").eq(3);
        $body.empty();
        var new_body = "";
        for(var i = 0; i < $num_of_brick; ++i) {
            new_body += "<div class='row' style='margin:0 0 10px 0'>";
            new_body += "<label class='control-label col-md-3 col-sm-3 col-xs-12'>";
            if(i == 0)
            new_body += "Bricks <span class='required'>*</span>";
            new_body += "</label>";
            new_body += "<div class='col-md-3 col-sm-3 col-xs-4'>";
            new_body += "<select class='form-control'>";
            <% Node.all.each do |t| %>
            new_body += "<option><%= t.host_name %></option>";
            <% end %>
            new_body += "</select>";
            new_body += "</div>";
            new_body += "<div class='col-md-1 col-sm-1 col-xs-1'>"
            new_body += "<label class='control-label col-md-12 col-sm-12 col-xs-12'>/"
            new_body += "</label>"
            new_body += "</div>"
            new_body += "<div class='col-md-5 col-sm-5 col-xs-7'>";
            new_body += "<input type='text' required='required' class='form-control col-md-7 col-xs-12'>";
            new_body += "</div>";
            new_body += "</div>";
        }
        $body.append(new_body);
    });
});
</script>

<!-- File manager functions -->
<script>
// change directory
$(document).on("click", "#mount_table_div .chdir", function(){
    var file_name = $(this).text().trim();
    var current_dir = $("#mount_table_div span").text().trim();
    if(current_dir == "/") current_dir = "";
    var next_dir = current_dir + "/" + file_name;

    $.ajax({
        method: "post",
        url: "/volume/chdir",
        data: { next_dir : next_dir },
        success  : function(result){
            $("#mount_table_div").empty();
            $("#mount_table_div").append(result.mount_table);
        }
    })
})
// change upper
$(document).on("click", "#mount_table_div .chupper", function(){
    var current_dir = $("#mount_table_div span").text().trim();
    if(current_dir == "/") return;
    var lastindex = current_dir.lastIndexOf("/");
    console.log("curdir : " + current_dir);
    console.log("last idx : " + lastindex);
    if(lastindex == 0) lastindex++;
    var next_dir = current_dir.substring(0, lastindex);

    $.ajax({
        method: "POST",
        url: "/volume/chdir",
        data: { next_dir : next_dir },
        success  : function(result){
            $("#mount_table_div").empty();
            $("#mount_table_div").append(result.mount_table);
        }
    })
})
</script>
<!-- /File manager functions -->

<!-- Volume info button functions -->
<script>
// volume unmount
$(document).on("click", ".btn-volume-unmount", function(){
    var $this = $(this);
    var volume_name = $this.data("name").trim();
    console.log("volume_name: " + volume_name);

    $.ajax({
        method: "POST",
        url: "/volume/unmount",
        data: { volume_name : volume_name },
        beforeSend: function(){
            $(location).attr('href',"#loading");
        },
        success: function(result){
            var volume_info = result.volume_info,
                lights = "";
            lights = "<li><a><i class='fa fa-circle'></i></a></li>";
            lights += "<li><a><i class='fa fa-circle blue'></i></a></li>";
            lights += "<li><a><i class='fa fa-circle'></i></a></li>";

            if(volume_info.indexOf("<div class='x_content'>") != -1){
                volume_info = volume_info.split("<div class='x_content'>")[1].split("</div></div></div>")[0];
            } else {
                volume_info = volume_info.split("<div class='x_content' style='display: none;'>")[1].split("</div></div></div>")[0];
            }
            // change lights
            $this.closest(".x_panel").find(".lights")
            .empty()
            .append(lights);
            // change content
            $this.closest(".x_content")
            .empty()
            .append(volume_info);
            $(location).attr('href',"#");
        }
    });
});
// volume start
$(document).on("click", ".btn-volume-start", function(){
    var $this = $(this);
    var volume_name = $this.data("name").trim();
    console.log("volume_name: " + volume_name);

    $.ajax({
        method: "POST",
        url: "/volume/start",
        data: { volume_name : volume_name },
        beforeSend: function(){
            $(location).attr('href',"#loading");
        },
        success: function(result){
            var volume_info = result.volume_info,
                lights = "";
            lights = "<li><a><i class='fa fa-circle'></i></a></li>";
            lights += "<li><a><i class='fa fa-circle blue'></i></a></li>";
            lights += "<li><a><i class='fa fa-circle'></i></a></li>";

            if(volume_info.indexOf("<div class='x_content'>") != -1){
                volume_info = volume_info.split("<div class='x_content'>")[1].split("</div></div></div>")[0];
            } else {
                volume_info = volume_info.split("<div class='x_content' style='display: none;'>")[1].split("</div></div></div>")[0];
            }
            // change lights
            $this.closest(".x_panel").find(".lights")
            .empty()
            .append(lights);
            // change content
            $this.closest(".x_content")
            .empty()
            .append(volume_info);
            $(location).attr('href',"#");
        }
    });
});
// volume stop
$(document).on("click", ".btn-volume-stop", function(){
    var $this = $(this);
    var volume_name = $this.data("name").trim();
    console.log("volume_name: " + volume_name);

    $.ajax({
        method: "POST",
        url: "/volume/stop",
        data: { volume_name : volume_name },
        beforeSend: function(){
        	$(location).attr('href',"#loading");
        },
        success: function(result){
            var volume_info = result.volume_info,
                lights = "";
            lights = "<li><a><i class='fa fa-circle'></i></a></li>";
            lights += "<li><a><i class='fa fa-circle'></i></a></li>";
            lights += "<li><a><i class='fa fa-circle red'></i></a></li>";

            if(volume_info.indexOf("<div class='x_content'>") != -1){
                volume_info = volume_info.split("<div class='x_content'>")[1].split("</div></div></div>")[0];
            } else {
                volume_info = volume_info.split("<div class='x_content' style='display: none;'>")[1].split("</div></div></div>")[0];
            }
            // change lights
            $this.closest(".x_panel").find(".lights")
            .empty()
            .append(lights);
            // change content
            $this.closest(".x_content")
            .empty()
            .append(volume_info);
            $(location).attr('href',"#");
        }
    });
});
// volume delete
$(document).on("click", ".btn-volume-delete", function(){
    var $this = $(this);
    var volume_name = $this.data("name").trim();
    console.log("volume_name: " + volume_name);

    $.ajax({
        method: "POST",
        url: "/volume/delete",
        data: { volume_name : volume_name },
        beforeSend: function(){
            $(location).attr('href',"#loading");
        },
        success: function(result){
            $(location).attr('href',"/volume/index");
        }
    });
});
</script>
<!-- /Volume info button functions -->
