Lidarr/NzbDrone.Web/Views/Settings/Quality.cshtml

@using NzbDrone.Web.Helpers;
@model NzbDrone.Web.Models.QualityModel
@section HeaderContent{
    <link rel="stylesheet" type="text/css" href="../../Content/Settings.css" />
    <link href="../../Content/QualitySettings.css" rel="stylesheet" type="text/css" />
}
@section TitleContent{
Settings > Quality
}
@section ActionMenu{
    @{Html.RenderPartial("SubMenu");}
}
@section MainContent{
    <div id="stylized">
        @using (Html.BeginForm("SaveQuality", "Settings", FormMethod.Post, new { id = "form", name = "form" }))
        {
            <div id="top" class="settingsForm">
                <label class="labelClass">@Html.LabelFor(m => m.DefaultQualityProfileId)
                    <span class="small">@Html.DescriptionFor(m => m.DefaultQualityProfileId)</span>
                </label>
                @Html.DropDownListFor(m => m.DefaultQualityProfileId, Model.QualityProfileSelectList, new { @class = "inputClass" })

                <div class="sliders">
                    <div class="slider-container">
                        <b>SDTV</b>
                        <div id="sdtv-slider" class="slider"></div>
                        @Html.HiddenFor(m => m.SdtvMaxSize, new { @class="slider-value" })
                        30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
                    </div>

                    <div class="slider-container">
                        <b>DVD</b>
                        <div id="dvd-slider" class="slider"></div>
                        @Html.HiddenFor(m => m.DvdMaxSize, new { @class = "slider-value" })
                        30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
                    </div>

                    <div class="slider-container">
                        <b>HDTV</b>
                        <div id="hdtv-slider" class="slider"></div>
                        @Html.HiddenFor(m => m.HdtvMaxSize, new { @class = "slider-value" })
                        30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
                    </div>

                    <div class="slider-container">
                        <b>WEBDL</b>
                        <div id="webdl-slider" class="slider"></div>
                        @Html.HiddenFor(m => m.WebdlMaxSize, new { @class = "slider-value" })
                        30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
                    </div>

                    <div class="slider-container">
                        <b>Bluray 720p</b>
                        <div id="bluray720p-slider" class="slider"></div>
                        @Html.HiddenFor(m => m.Bluray720pMaxSize, new { @class = "slider-value" })
                        30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
                    </div>

                    <div class="slider-container">
                        <b>Bluray 1080p</b>
                        <div id="bluray1080p-slider" class="slider"></div>
                        @Html.HiddenFor(m => m.Bluray1080pMaxSize, new { @class = "slider-value" })
                        30 minute size: <span class="30-minute"></span> | 60 minute size: <span class="60-minute"></span>
                    </div>
                </div>
            </div>

            <div id="bottom">
                <div id="profileContainer">
                    <div id="profileHeader">
                        <a id="addItem" href="@Url.Action("AddProfile", "Settings")">
                            <img src="../../Content/Images/Plus.png" alt="Add New Profile" width="20px" height="20px" />
                            Add New Profile</a>
                    </div>
                    <div id="profiles">
                        @foreach (var item in Model.Profiles)
                        {
                            Html.RenderAction("GetQualityProfileView", item);
                        }
                    </div>
                </div>
                <br />
                <button type="submit" id="save_button" disabled="disabled">Save</button>
            </div>
        }
    </div>
}
@section Scripts{
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.unobtrusive.min.js"
        type="text/javascript"></script>
    <script src="../../Scripts/NzbDrone/settingsForm.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#addItem").live('click', function () {
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) {
                    $("#profiles").append(html);

                }
            });
            return false;
        });

        var deleteQualityProfileUrl = '@Url.Action("DeleteQualityProfile", "Settings")';

        function deleteProfile(id) {
            sendToServer(id);
        }

        function renameOption(text, value) {
            $("#DefaultQualityProfileId option[value='" + value + "']").html(text);
        }

        function addOption(text, value) {
            var myCombo = $('#DefaultQualityProfileId');

            var exists = $("#DefaultQualityProfileId option[value='" + value + "']");

            if (exists.length == 0)
                myCombo.append($('\<option\> \</option\>').val(value).html(text));
        }

        function removeOption(value) {
            $("#DefaultQualityProfileId option[value='" + value + "']").remove();
        }

        function sendToServer(id) {
            $.ajax({
                type: "POST",
                url: deleteQualityProfileUrl,
                data: jQuery.param({ profileId: id }),
                error: function (req, status, error) {
                    alert("Sorry! We could not delete your Profile at this time. " + error);
                },
                success: function (data, textStatus, jqXHR) {
                    if (data == "ok") {
                        $("#profile_" + id).remove();
                        removeOption(id);
                    }

                    else {
                        alert(data);
                    }
                }
            });
        }

        function getProfileId(obj) {
            var parentProfileSection = $(obj).parents('.profileSection');
            return parentProfileSection.children('.qualityProfileId').val();
        }

        function getCleanId(obj) {
            var parentProfileSection = $(obj).parents('.profileSection');
            return parentProfileSection.children('.cleanId').val();
        }

        $(".profileName_textbox").live('keyup', function () {
            var value = $(this).val();
            var profileId = getProfileId(this);
            $("#title_" + profileId).text(value);
            renameOption(value, profileId);
        }).keyup();

        $('.quality-selectee').live('click', function () {
            var profileId = getProfileId(this);
            var cleanId = getCleanId(this);
            var cutoff = '#' + cleanId + '_Cutoff';
            var allowedString = '#' + cleanId + '_AllowedString';

            $(cutoff + ' option').each(function () { if ($(this).text().indexOf('Unknown') > -1) $(cutoff + ' option').remove(':contains("' + $(this).text() + '")'); });

            if ($(this).hasClass('quality-selected')) {
                $(this).removeClass('quality-selected');
                var toRemove = this.firstChild.data;

                $(cutoff + ' option').each(function () {
                    if ($(this).text().indexOf(toRemove) > -1)
                        $(cutoff + ' option').remove(':contains("' + $(this).text() + '")');
                });
            }

            else {
                $(this).addClass('quality-selected');
                $('<option>' + this.firstChild.data + '</option>').appendTo(cutoff);
            }

            var result = "";
            $("#selectable_" + profileId + " .quality-selected").each(function () {
                result += this.firstChild.data + ",";
            });

            $(allowedString).empty().val(result);
        });
        
        var sliderOptions = {
            min: 0,
			max: 200,
            value: 0,
			step: 1,
            create: function( event, ui ) {
                var startingValue = $(this).siblings('.slider-value').val();
			    $(this).siblings('.30-minute').text(startingValue * 30);
			    $(this).siblings('.60-minute').text(startingValue * 60);
			},
            slide: function( event, ui ) {
				$(this).siblings('.slider-value').val(ui.value);
			    $(this).siblings('.30-minute').text(ui.value * 30);
			    $(this).siblings('.60-minute').text(ui.value * 60);
			}
        };

        $(document).ready(function () {
            setupSliders();
        });

        function setupSliders() {
            $(".slider").each(function() {
                var localOptions = sliderOptions;
                localOptions["value"] = $(this).siblings('.slider-value').val();
                
			    $(this).empty().slider(localOptions);
		    });
        }
    </script>
}