/* 
 * A bit customized jQuery UI slider to build slider from Radios and Checkboxes
 * BEWARE, it's very customized to fit one need sliders on topic-page!
 * and open the template in the editor.
 */


(function($){
  /**
   * Radios
   */
  $.fn.selectFromRadios = function(){
    var radios = $(':radio',this);
    var slider_values_map = [];
    slider_values_map.push({
      'name': 'noop',
      'value': '0',
      'text': 'Now'
    });
    radios.each(function(){
      var name = $(this).attr('name');
      var value = $(this).val();
      var id = $(this).attr('id');
      var title = $.trim($('[for='+id+']').text()).replace(/(.*)?[-+].*/,'$1') || $(this).attr('title') || '';
      slider_values_map.push({
        'name': name,
        'value': value,
        'text': title
      });
    });
    var sliderTmpl = $.mustache([
      '<div class="slider-node">',
        '<div class="slider-label">{{value}}</div>',
        '<div class="slider-el"></div>',
//        '<div>',
//          '<div class="column">{{start}}</div>',     
//          '<div class="column push-1 last nopad">{{end}}</div>',
//          '<div class="clear"></div>',
//        '</div>',
      '</div>'].join(''), {
          value: slider_values_map[slider_values_map.length-1].text
//          end: slider_values_map[slider_values_map.length-1].text
       });
       
    var sliderNode = $(sliderTmpl);
    $(this).before(sliderNode).hide();
    $('.slider-el', sliderNode).slider({
      range: "min",
      min: 0,
      max: slider_values_map.length-1,
      value: slider_values_map.length-1,
      map: slider_values_map,
      slide: function(event, ui){
        if (slider_values_map[ui.value].name=='noop') return false;
        var valueText = slider_values_map[ui.value].text;
        $(this).closest('.slider-node').find('.slider-label').text(valueText);
        var name = slider_values_map[ui.value].name;
        var val = slider_values_map[ui.value].value;
        
       // alert('input[name="'+name+'"][value="'+val+'"]');
        $('input[name="'+name+'"][value="'+val+'"]').attr('checked','checked').trigger('click');
      }
    });
    return $(sliderNode);
  }
  
  /**
   * Checkboxes
   */
  $.fn.selectFromCheckboxes = function(){
    var checkboxes = $(':checkbox',this);
    var slider_values_map = [];
    checkboxes.each(function(){
      var name = $(this).attr('name');
      var id = $(this).attr('id');
      var title = $.trim($('[for='+id+']').text()).replace(/(.*)?[-+].*/,'$1') || $(this).attr('title') || '';
      slider_values_map.push({
        'name': name,
        'text': title
      });
    });
    slider_values_map.push({
      'name': false,
      'text': 'All'
    });    
    var sliderTmpl = $.mustache([
      '<div class="slider-node">',
        '{{#all}}',
        '<div class="slider-label">All Ages</div>',
        '{{/all}}',
        '{{#older}}',
        '<div class="slider-label">37 and Older</div>',
        '{{/older}}',
        '{{^all}}',
        '{{^older}}',
        '<div class="slider-label">{{start}} - {{end}}</div>',
        '{{/older}}',
        '{{/all}}',
        '<div class="slider-el"></div>',
        '<!--<div class="pad5 bolder filter-title">-->',
          '<!--<div class="column">{{start}}</div>-->',     
          '<!--<div class="column push-1 last nopad">{{end}}</div>-->',
          '<!--<div class="clear"></div>-->',
        '<!--</div>',
      '</div>'].join(''), {
          start: slider_values_map[0].text,
          end: slider_values_map[slider_values_map.length-1].text,
          all: slider_values_map[0].text=='13' && slider_values_map[slider_values_map.length-1].text=='All' ? true : false,
          older: slider_values_map[0].text=='37' && slider_values_map[slider_values_map.length-1].text=='All' ? true : false
       });
       
       
    var sliderNode = $(sliderTmpl);
    $(this).before(sliderNode).hide();
    $('.slider-el', sliderNode).slider({
      range: true,
      min: 0,
      max: slider_values_map.length-1,
      values: [ 0, slider_values_map.length-1 ],
      map: slider_values_map,
      slide: function(event, ui){
        App.log(ui);
        if (ui.values[0] == ui.values[1]) return false;
        var rangeStartText = slider_values_map[ui.values[0]].text;
        var rangeEndText = slider_values_map[ui.values[1]].text;
        var rangeText = '';
        if(rangeStartText=='13' && rangeEndText=='All'){
          rangeText = 'All Ages';
        }else if(rangeStartText=='37 ' && rangeEndText=='All'){
          rangeText = '37 and Older';
        }else{          
          rangeText = rangeStartText + ' - ' + rangeEndText;
        }
        $(this).closest('.slider-node').find('.slider-label').text(rangeText);
        
        var lastCheck = '';
        for (var i=0; i<slider_values_map.length;i++){
          if (slider_values_map[i]){
            var name = slider_values_map[i].name;
            $('input[name="'+name+'"]').removeAttr('checked');
          }
          if (i >= ui.values[0] && i < ui.values[1]){
            lastCheck = name;
            $('input[name="'+name+'"]').attr('checked','checked');
          }
        }
        $('input[name="'+lastCheck+'"]').trigger('click').attr('checked','checked')
      }
    });
    return $(sliderNode);
  }
})(jQuery);