anchor.diff: -window.RecurringSelectDialog =
  -  class RecurringSelectDialog
  -    constructor: (@recurring_selector) ->
  -      @current_rule = @recurring_selector.recurring_select('current_rule')
  -      @initDialogBox()
  +window.RecurringSelectComponent =
  +  class RecurringSelectComponent
  +    constructor: (@opts) ->
  +      if @opts.value && @opts.value.val()
  +        @current_rule = { hash : JSON.parse(@opts.value.val()) }
  +      else
  +        @current_rule = { hash: {}, str: '' }
  +
  +      @render()
         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
  +
  +    render: ->
  +      $(".recurring-component-container").remove()
  +
  +      open_in = $(@opts.container)
         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)
  +      @outer_holder = $(".recurring-component-container")
  +      @content = @outer_holder.find ".recurring-component-content"
  +      @content.hide()
  +      @trigger = @outer_holder.find('.recurring-component-trigger-input')
  +      @end_date_selects = @outer_holder.find('.recurring-component-end-date select')
         @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"
  +      @initUntilSelects()
   
       cancel: =>
         @outer_holder.remove()
  -      @recurring_selector.recurring_select('cancel')
   
       outerCancel: (event) =>
  -      if $(event.target).hasClass("rs_dialog_holder")
  +      if $(event.target).hasClass("recurring-component-container")
           @cancel()
   
       save: =>
         return if !@current_rule.str?
  -      @outer_holder.remove()
  -      @recurring_selector.recurring_select('save', @current_rule)
  -
  +      @persistToForm()
  +
  +    persistToForm: =>
  +      new_rule_hash_json = JSON.stringify(@current_rule.hash)
  +      @opts.value.val(new_rule_hash_json)
  +
  +    initUntilSelects: =>
  +      defaultDate = new Date
  +      @outer_holder.find('.recurring-component-end-date-year').val(defaultDate.getFullYear())
  +      @outer_holder.find('.recurring-component-end-date-month').val(defaultDate.getMonth())
  +      @outer_holder.find('.recurring-component-end-date-day').val(defaultDate.getDate())
  +      @untilChanged()
   # ========================= 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
  +      @trigger.click( => @content.toggle() )
  +      @end_date_selects.on('change', @untilChanged)
  +      
   
       freqInit: ->
         @freq_select = @outer_holder.find ".rs_frequency"
  
positive.code:         instance = parseInt($(elm).attr("instance"))
          @current_rule.hash.validations.day_of_week[day] ||= []
          @current_rule.hash.validations.day_of_week[day].push instance
        @summaryUpdate()
        false
  
  # ========================= Change callbacks ===============================
  
      template: () ->
        str = "
        <div class='rs_dialog_holder'>
          <div class='rs_dialog'>
            <div class='rs_dialog_content'>
              <h1>#{$.fn.recurring_select.texts["repeat"]} <a href='#' title='#{$.fn.recurring_select.texts["cancel"]}' Alt='#{$.fn.recurring_select.texts["cancel"]}'></a> </h1>
              <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='Daily'>#{$.fn.recurring_select.texts["daily"]}</option>
                  <option value='Weekly'>#{$.fn.recurring_select.texts["weekly"]}</option>
                  <option value='Monthly'>#{$.fn.recurring_select.texts["monthly"]}</option>
                  <option value='Yearly'>#{$.fn.recurring_select.texts["yearly"]}</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='rs_summary'>
                <span></span>
              </p>
              <div class='controls'>
                <input type='button' data-wrapper-class='ui-recurring-select' class='rs_save' value='#{$.fn.recurring_select.texts["ok"]}' />
                <input type='button' data-wrapper-class='ui-recurring-select' class='rs_cancel' value='#{$.fn.recurring_select.texts["cancel"]}' />
              </div>
            </div>
          </div>
        </div>
        "
  
negative.code: 
  # ========================= render methods ===============================
  
      update: =>
        @summaryUpdate()
  
      summaryUpdate: (new_string) =>
        @summary.width @content.width()
        if @current_rule.hash? && @current_rule.str?
          @summary.removeClass "fetching"
          rule_str = @current_rule.str.replace("*", "")
          if rule_str.length < 20
            rule_str = "#{$.fn.recurring_select.texts["summary"]}: "+rule_str
          @summary.find("span").html rule_str
        else
          @summary.addClass "fetching"
          @summary.find("span").html ""
          @summaryFetch()
  
  