@using EnVisage.Models
@model ScenarioDetailModel
<div id="erorMsgPlaceholder"></div>
<script type="text/javascript">


    $("#addteamdiv").hide();
    var teamallocations = {};
    if ($('#TeamAllocations').val()) teamallocations = JSON.parse($('#TeamAllocations').val());
    for (key in teamallocations) {
        $("#addTeams").find('option[value=' + key + ']').remove();
    }
    var sliders = $("#teamsContainer .ui-slider");
    $('div.row', $('#teamsContainer')).each(function (i, div) {
        $(this).find('.ui-slider').slider({
            'range': 'min',
            'min': 0,
            'max': 100,
            'value': teamallocations[div.id.split("_")[0]],
            change: onDependentChange,
            slide: onDependentSlide
        });
    });
    var fired = false;
    var othersliders = sliders;
    function onDependentSlide(event, ui) {
        if (fired) return;
        var value = parseInt(ui.value);
        // Get current total
        var total = 0;
        var totalofothers = 0;
        var availableTotal = 100;
        var nonmovablesum = 0;
        othersliders = $(sliders).not(this);//$(othersliders).not(this); //putting this slider off collection of autoadjustable sliders
        if (othersliders.length == 0) {
            fired = true;
            $(sliders).slider("disable");
            bootbox.confirm("By moving this slider, you will adjust previously set values for other teams on this scenario.",
            function (result) {
                if (!result) {
                    fired = false;
                    $(sliders).slider("enable");
                    return;
                }
                else {
                    othersliders = $(sliders).not(this);
                }
                fired = false;
                $(sliders).slider("enable");
            });

        }
        $(sliders).not(this).each(function () {
            totalofothers += teamallocations[$(this).attr('id').split("_")[0]]; //calculate precise total for all allocatios except for one that we moved
        });
        //$(othersliders).not(this).each(function () {
        //    nonmovablesum += teamallocations[$(this).attr('id').split("_")[0]]; //calculate precise total for all allocatios except for one that we moved
        //});
        //nonmovablesum = totalofothers - nonmovablesum;
        total = totalofothers + value;
        var change = availableTotal - total; //amount to ditribute betwee autoadjustable sliders
        //console.log("change: " + change);
        var sliderscount = othersliders.length;
        if (change != 0) {
            var tempsum = value; //+ Math.round(nonmovablesum);
            var tempprecisesum = value;// + nonmovablesum;
            for (i = othersliders.length - 1 ; i >= 0 ; i--) {
                var currvalue = teamallocations[$(othersliders[i]).attr('id').split("_")[0]]; //getting value of one of autoadjustable sliders
                var newprecisevalue = currvalue + change / sliderscount;
                if (newprecisevalue < 0)
                    newprecisevalue = 0;
                //console.log("currvalue: " + currvalue + "; set: " + newprecisevalue + "; tempsum " + tempsum);
                if (i == 0) { //for the last slider we set value as 100-other values
                    if (tempprecisesum <= 100) {
                        teamallocations[$(othersliders[i]).attr('id').split("_")[0]] = 100 - tempprecisesum;
                        $(othersliders[i]).slider("value", 100 - tempsum);
                    }
                    else {
                        teamallocations[$(othersliders[i]).attr('id').split("_")[0]] = 0;
                        var remainder = (tempprecisesum - 100) / ((sliderscount - 1 > 0 ? sliderscount - 1 : 1));
                        //console.log("REMI: " + remainder);
                        for (j = 1; j < othersliders.length; j++) {
                            teamallocations[$(othersliders[j]).attr('id').split("_")[0]] -= remainder;
                            $(othersliders[j]).slider("value", Math.round(teamallocations[$(othersliders[j]).attr('id').split("_")[0]]));
                        }
                    }
                    //console.log("set last to " + (100 - tempsum));
                }
                else {
                    teamallocations[$(othersliders[i]).attr('id').split("_")[0]] = newprecisevalue;
                    $(othersliders[i]).slider("value", Math.round(newprecisevalue));
                    tempsum += Math.round(newprecisevalue);
                    tempprecisesum += newprecisevalue;
                    //console.log("set to " + Math.round(newprecisevalue));
                }
            }
        }
        teamallocations[ui.handle.parentElement.id.split("_")[0]] = value;
        //console.log(teamallocations);
        $(this).children(".sliderValue").val(value);
        $(this).children(".sliderTitle").html(value + '%');
    }

    function onDependentChange(event, ui) {
        var value = parseInt(ui.value);
        $(this).children(".sliderValue").val(value);
        $(this).children(".sliderTitle").html(value + '%');
    }

    function showaddteams() {
        $("#addteambutton").hide();
        $("#addteamdiv").show();
    }
    function hideteams() {
        $("#addteambutton").show();
        $("#addteamdiv").hide();
    }

    function addteams() {
        $("#addteambutton").show();
        $("#addteamdiv").hide();
        var value_to_add = 0;
        if (sliders.length == 0 && $("#addTeams").val().length > 0) {
            value_to_add = 100 / $("#addTeams").val().length;
        }
        var data = $("#addTeams").select2('data');
        jQuery.each($("#addTeams").val(), function (i, val) {
            $('#teamsContainer div#addteambutton').last().before('<div class="row" id="' + val + '_div"><div class="col-sm-4" style="text-align:right;"><label id="' + val + '_label">' +
                data[i].text + '</label></div><div class="col-sm-4" style="padding-top: 6px;"><div id="' + val + '_container" class="ui-slider">' +
                '<input id="' + val + '_value" class="sliderValue" type="hidden" value="0" name="allocation" data-val="true"><span class="sliderTitle">0%</span>' +
                '</div></div><div class="col-sm-4"><a class="btn btn-xs btn-labeled btn-danger" onclick="removeteam(\'' + val + '\');">Remove</a></div></div>');
            $('#teamsContainer div.row').last().find('.ui-slider').first().slider({
                'range': 'min',
                'min': 0,
                'max': 100,
                'value': value_to_add,
                change: onDependentChange,
                slide: onDependentSlide
            });
            $("#teamsContainer .ui-slider").last().siblings().text(value_to_add + "%");///buggy!!!!!
            othersliders.push($("#teamsContainer .ui-slider").last()[0]);
            teamallocations[val] = value_to_add;
            $("#addTeams").find('option[value=' + val + ']').remove();

        });
        $("#addTeams").select2("val", "");
        sliders = $("#teamsContainer .ui-slider");
    }
    function removeteam(id) {
        $('#addTeams')
            .append($("<option></option>")
                .attr("value", id)
                .text($('#' + id + '_label').text()));
        othersliders = $(othersliders).not($('#' + id + '_container').first());
        var todistribute = teamallocations[id];
        if (othersliders.length > 0) {
            var sliderscount = othersliders.length;
            for (i = othersliders.length - 1 ; i >= 0 ; i--) {
                teamallocations[$(othersliders[i]).attr('id').split("_")[0]] += todistribute / sliderscount;
                $(othersliders[i]).slider("value", Math.round(teamallocations[$(othersliders[i]).attr('id').split("_")[0]]));
            }
        }
        else if (sliders.length > 0) {
            var sliderscount = sliders.length;
            for (i = othersliders.length - 1 ; i >= 0 ; i--) {
                teamallocations[$(sliders[i]).attr('id').split("_")[0]] += todistribute / sliderscount;
                $(sliders[i]).slider("value", Math.round(teamallocations[$(othersliders[i]).attr('id').split("_")[0]]));
            }
        }
        $('#' + id + '_div').remove();
        sliders = $("#teamsContainer .ui-slider");
        delete teamallocations[id];
    }

    $("#addTeams").select2({
        placeholder: "Select teams",
    });
</script>


@using (Ajax.BeginForm("SetTeamAllocation", "Scenarios", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onSuccess", OnFailure = "onFailure(xhr)", UpdateTargetId = "reloadForm" }, new { @id = "teamsAllocationForm", @class = "form-horizontal", onsubmit = "onCreateScenarioSubmit();" }))
{ 
        <div id="teamsAllocation" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title" >Teams Allocation</h4>
                    </div>
                    <div class="modal-body">
                        @Html.HiddenFor(m => m.TeamAllocations)
                        <div class="col-sm-12" id="teamsContainer">
                        @foreach (var teamalloc in Model.TeamAllocations)
                        {
                            <div class="row" id="@teamalloc.Team.Id.ToString()_div">
                                <div class="col-sm-4" style="text-align:right;">
					                <label id="@teamalloc.Team.Id.ToString()_label">
						                @teamalloc.Team.Name    
					                </label>
			                    </div>
                                <div class="col-sm-4" style="padding-top: 6px;">
                                    <div id="@teamalloc.Team.Id.ToString()_container" class="ui-slider">
                                        <input id="@teamalloc.Team.Id.ToString()_value" class="sliderValue" type="hidden" value="@teamalloc.Allocation" name="allocation" data-val="true">
                                        <span class="sliderTitle">@teamalloc.Allocation%</span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    @*<a class="btn btn-xs btn-labeled btn-danger" onclick="removeteam('@team2proj.Team.Id.ToString()');">Remove</a>*@
                                </div>
                            </div>
                        }
			                <div id="addteambutton">
				                <div>
					                <div class="col-sm-4" style="text-align:right;">
						                <a class="btn btn-success"  href="javascript:void(0)" onclick="showaddteams();">Add teams</a>
					                </div>
					                <div class="col-sm-4" style="padding-bottom: 17px;">
						                &nbsp;
					                </div>
					                <div class="col-sm-4" style="padding-bottom: 17px;"> 
					                </div>
				                </div>
			                </div>
			                <div id="addteamdiv" >
				                <div>
					                <div class="form-group no-margin-hr select2-primary col-sm-4" style="text-align:right;">
						                @Html.ListBox("addTeams", EnVisage.Code.Utils.GetTeams(false), new { @id = "addTeams", @class = "form-control" })
					                </div>
					                <div class="col-sm-4">
						                <a class="btn btn-success"  href="javascript:void(0)" onclick="addteams();"><i class="fa fa-plus"></i> Add</a>
                                        <a class="btn btn-default"  href="javascript:void(0)" onclick="hideteams();">Cancel</a>
					                </div>
					                <div class="col-sm-4" style="padding-bottom: 17px;"> 
					                </div>
				                </div>
			                </div>
		                </div> 
                    </div> <!-- / .modal-body -->
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" >Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div> <!-- / .modal-content -->
            </div> <!-- / .modal-dialog -->
        </div> <!-- /.modal -->
}   
</div>