anchor.diff:        @current_rule.hash.interval = parseInt($(event.currentTarget).val())
         if @current_rule.hash.interval < 1 || isNaN(@current_rule.hash.interval)
           @current_rule.hash.interval = 1
  -      @summaryUpdate()
  +      @update()
  +
  +    untilChanged: () =>
  +      year = +@outer_holder.find('.recurring-component-end-date-year').val()
  +      month = +@outer_holder.find('.recurring-component-end-date-month').val()
  +      day = +@outer_holder.find('.recurring-component-end-date-day').val()
  +
  +      @current_rule.str = null
  +      @current_rule.hash ||= {}
  +      @current_rule.hash.until = (new Date(year, month - 1, day + 1)).toISOString();
  +      @update()
   
       daysChanged: (event) =>
         $(event.currentTarget).toggleClass("selected")
  
positive.code: window.RecurringSelectDialog =
    class RecurringSelectDialog
      constructor: (@recurring_selector) ->
        @current_rule = @recurring_selector.recurring_select('current_rule')
        @initDialogBox()
        if not @current_rule.hash? or not @current_rule.hash.rule_type?
          @freqChanged()
        else
          setTimeout @positionDialogVert, 10 # allow initial render
  
      initDialogBox: ->
        $(".rs_dialog_holder").remove()
  
        open_in = $("body")
        open_in = $(".ui-page-active") if $(".ui-page-active").length
        open_in = $(".modal-with-recurring") if $(".modal:visible").length
        open_in.append @template()
        @outer_holder = $(".rs_dialog_holder")
        @inner_holder = @outer_holder.find ".rs_dialog"
        @content = @outer_holder.find ".rs_dialog_content"
        @positionDialogVert(true)
        @mainEventInit()
        @freqInit()
        @summaryInit()
        @outer_holder.trigger "recurring_select:dialog_opened"
        @freq_select.focus()
  
      positionDialogVert: (initial_positioning) =>
        window_height = $(window).height()
        window_width  = $(window).width()
        dialog_height = @content.outerHeight()
        if dialog_height < 80
          dialog_height = 80
        margin_top = (window_height - dialog_height)/2 - 30
        margin_top = 10 if margin_top < 10
        # if dialog_height > window_height - 20
        #   dialog_height = window_height - 20
  
        new_style_hash =
          "margin-top" : margin_top+"px"
          "min-height" : dialog_height+"px"
  
        if initial_positioning?
          @inner_holder.css new_style_hash
          @inner_holder.trigger "recurring_select:dialog_positioned"
        else
          @inner_holder.addClass "animated"
          @inner_holder.animate new_style_hash, 200, =>
            @inner_holder.removeClass "animated"
            @content.css {"width": "auto"}
            @inner_holder.trigger "recurring_select:dialog_positioned"
  
      cancel: =>
        @outer_holder.remove()
        @recurring_selector.recurring_select('cancel')
  
      outerCancel: (event) =>
        if $(event.target).hasClass("rs_dialog_holder")
          @cancel()
  
      save: =>
        return if !@current_rule.str?
        @outer_holder.remove()
        @recurring_selector.recurring_select('save', @current_rule)
  
  # ========================= Init Methods ===============================
  
      mainEventInit: ->
        # Tap hooks are for jQueryMobile
        @outer_holder.on 'click tap', @outerCancel
        @content.on 'click tap', 'h1 a', @cancel
        @save_button = @content.find('input.rs_save').on "click tap", @save
        @content.find('input.rs_cancel').on "click tap", @cancel
  
      freqInit: ->
        @freq_select = @outer_holder.find ".rs_frequency"
  
negative.code:         instance = parseInt($(elm).attr("instance"))
          @current_rule.hash.validations.day_of_week[day] ||= []
          @current_rule.hash.validations.day_of_week[day].push instance
        @update()
        false
  
  # ========================= Change callbacks ===============================
  
      template: () ->
        str = "
        <div class='recurring-component-container'>
          <div class='recurring-component-trigger'>
            <p>
              <label for='recurring-component-trigger-input'>Recurrence...</label>
              <input class='recurring-component-trigger-input' id='recurring-component-trigger-input' type='checkbox' value='0'>
            </p>
          </div>
          <div class='recurring-component-content'>
            <p class='frequency-select-wrapper'>
              <label for='rs_frequency'>#{$.fn.recurring_select.texts["frequency"]}:</label>
              <select data-wrapper-class='ui-recurring-select' id='rs_frequency' class='rs_frequency' name='rs_frequency'>
                <option value='Weekly'>#{$.fn.recurring_select.texts["weekly"]}</option>
                <option value='Monthly'>#{$.fn.recurring_select.texts["monthly"]}</option>
              </select>
            </p>
  
            <div class='daily_options freq_option_section'>
              <p>
                #{$.fn.recurring_select.texts["every"]}
                <input type='text' data-wrapper-class='ui-recurring-select' name='rs_daily_interval' class='rs_daily_interval rs_interval' value='1' size='2' />
                #{$.fn.recurring_select.texts["days"]}
              </p>
            </div>
            <div class='weekly_options freq_option_section'>
              <p>
                #{$.fn.recurring_select.texts["every"]}
                <input type='text' data-wrapper-class='ui-recurring-select' name='rs_weekly_interval' class='rs_weekly_interval rs_interval' value='1' size='2' />
                #{$.fn.recurring_select.texts["weeks_on"]}:
              </p>
              <div class='day_holder'>
        "
        for day_of_week in [$.fn.recurring_select.texts["first_day_of_week"]...(7 + $.fn.recurring_select.texts["first_day_of_week"])]
          day_of_week = day_of_week % 7
          str += "<a href='#' data-value='#{day_of_week}'>#{$.fn.recurring_select.texts["days_first_letter"][day_of_week]}</a>"
  
        str += "
              </div>
              <span style='clear:both; visibility:hidden; height:1px;'>.</span>
            </div>
            <div class='monthly_options freq_option_section'>
              <p>
                #{$.fn.recurring_select.texts["every"]}
                <input type='text' data-wrapper-class='ui-recurring-select' name='rs_monthly_interval' class='rs_monthly_interval rs_interval' value='1' size='2' />
                #{$.fn.recurring_select.texts["months"]}:
              </p>
              <p class='monthly_rule_type'>
                <span><label for='monthly_rule_type_day'>#{$.fn.recurring_select.texts["day_of_month"]}</label><input type='radio' class='monthly_rule_type_day' name='monthly_rule_type' id='monthly_rule_type_day' value='true' /></span>
                <span><label for='monthly_rule_type_week'>#{$.fn.recurring_select.texts["day_of_week"]}</label><input type='radio' class='monthly_rule_type_week' name='monthly_rule_type' id='monthly_rule_type_week' value='true' /></span>
              </p>
              <p class='rs_calendar_day'></p>
              <p class='rs_calendar_week'></p>
            </div>
            <div class='yearly_options freq_option_section'>
              <p>
                #{$.fn.recurring_select.texts["every"]}
                <input type='text' data-wrapper-class='ui-recurring-select' name='rs_yearly_interval' class='rs_yearly_interval rs_interval' value='1' size='2' />
                #{$.fn.recurring_select.texts["years"]}
              </p>
            </div>
            <p class='recurring-component-end-date'>
                <label>Repeat end time</label>
                <select class='recurring-component-end-date-year'>
                  <option value='2016'>2016</option>
                  <option value='2017'>2017</option>
                  <option value='2018'>2018</option>
                  <option value='2019'>2019</option>
                  <option value='2020'>2020</option>
                  <option value='2021'>2021</option>
                  <option value='2021'>2022</option>
                  <option value='2021'>2023</option>
                  <option value='2021'>2024</option>
                  <option value='2021'>2025</option>
                </select>
                <select class='recurring-component-end-date-month'>
                  <option value='1'>January</option>
                  <option value='2'>February</option>
                  <option value='3'>March</option>
                  <option value='4'>April</option>
                  <option value='5'>May</option>
                  <option value='6'>June</option>
                  <option value='7'>July</option>
                  <option value='8'>August</option>
                  <option value='9'>September</option>
                  <option value='10'>October</option>
                  <option value='11'>November</option>
                  <option value='12'>December</option>
                </select>
                <select  class='recurring-component-end-date-day'>
                  <option value='1'>1</option>
                  <option value='2'>2</option>
                  <option value='3'>3</option>
                  <option value='4'>4</option>
                  <option value='5'>5</option>
                  <option value='6'>6</option>
                  <option value='7'>7</option>
                  <option value='8'>8</option>
                  <option value='9'>9</option>
                  <option value='10'>10</option>
                  <option value='11'>11</option>
                  <option value='12'>12</option>
                  <option value='13'>13</option>
                  <option value='14'>14</option>
                  <option value='15'>15</option>
                  <option value='16'>16</option>
                  <option value='17'>17</option>
                  <option value='18'>18</option>
                  <option value='19'>19</option>
                  <option value='20'>20</option>
                  <option value='21'>21</option>
                  <option value='22'>22</option>
                  <option value='23'>23</option>
                  <option value='24'>24</option>
                  <option value='25'>25</option>
                  <option value='26'>26</option>
                  <option value='27'>27</option>
                  <option value='28'>28</option>
                  <option value='29'>29</option>
                  <option value='30'>30</option>
                  <option value='31'>31</option>
                </select>
  
            </p>
            <p class='rs_summary'>
              <span></span>
            </p>
          </div>
        </div>
        "
  