@using NzbDrone.Web.Helpers
@model NzbDrone.Web.Models.EpisodeSortingModel
           
@section HeaderContent{
    <link rel="stylesheet" type="text/css" href="../../Content/Settings.css" />
    
    <style>
        #examples
        {
            margin-bottom: 15px;
        }
    </style>
}

@section TitleContent{
    Settings
}

@section ActionMenu{
    @{Html.RenderPartial("SubMenu");}
}
    
@section MainContent{       
<div id="stylized">
    @using (Html.BeginForm("SaveEpisodeSorting", "Settings", FormMethod.Post, new { id = "form", name = "form", @class = "settingsForm" }))
    {
        @Html.ValidationSummary(true, "Unable to save your settings. Please correct the errors and try again.")

        <h1>Episode Sorting</h1>
        <p></p>
    
        <label class="labelClass">@Html.LabelFor(m => m.SeriesName)
        <span class="small">@Html.DescriptionFor(m => m.SeriesName)</span>
        </label>
        @Html.CheckBoxFor(m => m.SeriesName, new { @class = "inputClass checkClass" })

        <label class="labelClass">@Html.LabelFor(m => m.EpisodeName)
        <span class="small">@Html.DescriptionFor(m => m.EpisodeName)</span>
        </label>
        @Html.CheckBoxFor(m => m.EpisodeName, new { @class = "inputClass checkClass" })

        <label class="labelClass">@Html.LabelFor(m => m.ReplaceSpaces)
        <span class="small">@Html.DescriptionFor(m => m.ReplaceSpaces)</span>
        </label>
        @Html.CheckBoxFor(m => m.ReplaceSpaces, new { @class = "inputClass checkClass" })

        <label class="labelClass">@Html.LabelFor(m => m.AppendQuality)
        <span class="small">@Html.DescriptionFor(m => m.AppendQuality)</span>
        </label>
        @Html.CheckBoxFor(m => m.AppendQuality, new { @class = "inputClass checkClass" })

        <label class="labelClass">@Html.LabelFor(m => m.SeasonFolders)
        <span class="small">@Html.DescriptionFor(m => m.SeasonFolders)</span>
        </label>
        @Html.CheckBoxFor(m => m.SeasonFolders, new { @class = "inputClass checkClass" })
        
        <label class="labelClass">@Html.LabelFor(m => m.SeasonFolderFormat)
        <span class="small">@Html.DescriptionFor(m => m.SeasonFolderFormat)</span>
        </label>
        @Html.TextBoxFor(m => m.SeasonFolderFormat, new { @class = "inputClass" })

        <label class="labelClass">@Html.LabelFor(m => m.SeparatorStyle)
        <span class="small">@Html.DescriptionFor(m => m.SeparatorStyle)</span>
        </label>
        @Html.DropDownListFor(m => m.SeparatorStyle, Model.SeparatorStyles, new { @class = "inputClass selectClass" })

        <label class="labelClass">@Html.LabelFor(m => m.NumberStyle)
        <span class="small">@Html.DescriptionFor(m => m.NumberStyle)</span>
        </label>
        @Html.DropDownListFor(m => m.NumberStyle, Model.NumberStyles, new { @class = "inputClass selectClass" })

        <label class="labelClass">@Html.LabelFor(m => m.MultiEpisodeStyle)
        <span class="small">@Html.DescriptionFor(m => m.MultiEpisodeStyle)</span>
        </label>
        @Html.DropDownListFor(m => m.MultiEpisodeStyle, Model.MultiEpisodeStyles, new { @class = "inputClass selectClass" })  
        
        <div id ="examples" class="clearfix">
            <div id="singleEpisodeExample">
            </div>
            <div id="multiEpisodeExample">
            </div>
        </div>
        
        <button type="submit" id="save_button" >Save</button><img src="../../Content/Images/ajax-loader.gif" alt="Loader" id="saveAjax"/>
    }
</div>
<div id="result" class="hiddenResult"></div>
}
@section Scripts{
    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
    <script src="../../Scripts/settingsForm.js" type="text/javascript"></script>

    <script type="text/javascript">
        $('#SeriesName').live('change', function () { createExamples(); });
        $('#EpisodeName').live('change', function () { createExamples(); });
        $('#ReplaceSpaces').live('change', function () { createExamples(); });
        $('#AppendQuality').live('change', function () { createExamples(); });
        $('#SeparatorStyle').live('change', function () { createExamples(); });
        $('#NumberStyle').live('change', function () { createExamples(); });
        $('#MultiEpisodeStyle').live('change', function () { createExamples(); });

        function createExamples() {
            createSingleEpisodeExample();
            createMultiEpisodeExample();
        }

        function createSingleEpisodeExample() {
            var result = '';

            var separator = ' - ';

            if ($("#SeparatorStyle option:selected").val() == 1)
                separator = ' ';

            if ($('#SeriesName').attr('checked')) {
                result += 'Series Name';
                result += separator;
            }

            result += $("#NumberStyle option:selected").text();

            if ($('#EpisodeName').attr('checked')) {
                result += separator;
                result += 'Episode Name';
            }

            if ($('#AppendQuality').attr('checked'))
                result += ' [TV]';

            if ($('#ReplaceSpaces').attr('checked'))
                result = result.replace(/\s/g, '.');

            result = '<b>Single Episode Example: </b>' + result;

            $('#singleEpisodeExample').html(result);
        }

        function createMultiEpisodeExample() {
            var result = '';

            var separator = ' - ';

            if ($("#SeparatorStyle option:selected").val() == 1)
                separator = ' ';

            if ($('#SeriesName').attr('checked')) {
                result += 'Series Name';
                result += separator;
            }

            var numberStyle = $("#NumberStyle option:selected").text();
            var numberId = $("#NumberStyle option:selected").val();
            var style = $("#MultiEpisodeStyle option:selected").val();

            result += numberStyle;

            if (style == 0)
                result += '-06';

            if (style == 1) {
                result += separator;
                result += numberStyle.replace('5', '6');
            }

            if (style == 2) {
                if (numberId <= 1)
                    result += 'x06';

                if (numberId == 2)
                    result += 'E06';

                if (numberId == 3)
                    result += 'e06';
            }

            if (style == 3) {
                if (numberId <= 1)
                    result += '-x06';

                if (numberId == 2)
                    result += '-E06';

                if (numberId == 3)
                    result += '-e06';
            }

            if ($('#EpisodeName').attr('checked')) {
                result += separator;
                result += 'Episode Name';
            }

            if ($('#AppendQuality').attr('checked'))
                result += ' [TV]';

            if ($('#ReplaceSpaces').attr('checked'))
                result = result.replace(/\s/g, '.');

            result = '<b>Multi-Episode Example: </b>' + result;

            $('#multiEpisodeExample').html(result);
        }
    </script>
}