<%# encoding: utf-8 %>
//= require_self

/**
This is a collection of javascript functions and whatnot
under the spree namespace that do stuff we find helpful.
Hopefully, this will evolve into a propper class.
**/

$(document).ajaxStart(function(){
  $("#progress").slideDown();
});

$(document).ajaxStop(function(){
  $("#progress").slideUp();
});

$.fn.visible = function(cond) { this[cond ? 'show' : 'hide' ]() };

show_flash_error = function(message) {
  error_div = $('.flash.error');
  if (error_div.length > 0) {
    error_div.html(message);
    error_div.show();
  } else {
    if ($("#content .toolbar").length > 0) {
      $("#content .toolbar").before('<div class="flash error">' + message + '</div>');
    } else {
      $("#content h1").before('<div class="flash error">' + message + '</div>');
    }
  }
}

// Apply to individual radio button that makes another element visible when checked
$.fn.radioControlsVisibilityOfElement = function(dependentElementSelector){
  if(!this.get(0)){ return  }
  showValue = this.get(0).value;
  radioGroup = $("input[name='" + this.get(0).name + "']");
  radioGroup.each(function(){
    $(this).click(function(){
      $(dependentElementSelector).visible(this.checked && this.value == showValue)
    });
    if(this.checked){ this.click() }
  });
}

// Product autocompletion
image_html = function(item){
  return "<img src='" + item['images'][0]["mini_url"] + "'/>";
}

format_product_autocomplete = function(item){
  var html = "";

  var product = item.data['product'];

  if(item.data['variant']==undefined){
    if(product['images'].length!=0){
      html = image_html(product);
    }

    html += "<div><h4>" + product['name'] + "</h4>";
    if (product['master']) {
      html += "<span><strong><%= ::I18n.t(:sku) %>: </strong>" + product['master']['sku'] + "</span>";
    }
    html += "<span><strong><%= ::I18n.t(:on_hand) %>: </strong>" + product['count_on_hand'] + "</span></div>";
  }else{
    // variant
    var variant = item.data['variant'];
    var name = item.data.product['name'];

    if(variant['images'].length!=0){
      html = image_html(variant);
    }else{
      if(product['images'].length!=0){
        html = image_html(product);
      }
    }

    name += " - " + $.map(variant['option_values'], function(option_value){
      return option_value["option_type"]["presentation"] + ": " + option_value['presentation'];
    }).join(", ")

    html += "<div><h4>" + name + "</h4>";
    html += "<span><strong><%= ::I18n.t(:sku) %>: </strong>" + variant['sku'] + "</span>";
    html += "<span><strong><%= ::I18n.t(:on_hand) %>: </strong>" + variant['count_on_hand'] + "</span></div>";
  }

  return html
}

prep_product_autocomplete_data = function(data){
  return $.map(eval(data), function(row) {

    var product = row['product'];

    if(product['variants'].length>0 && ['expand_variants']){
      //variants
      return $.map(product['variants'], function(variant){

        var name = product['name'];
        name += " - " + $.map(variant['option_values'], function(option_value){
          return option_value["option_type"]["presentation"] + ": " + option_value['presentation'];
        }).join(", ");

        return {
            data: {product: product, variant: variant},
            value: name,
            result: name
        }
      });
    }else{
      return {
          data: {product: product},
          value: product['name'],
          result: product['name']
      }
    }
  });
}

$.fn.product_autocomplete = function(){
  return this.each(function() {
    $(this).autocomplete({
      source: function(request, response) {
        $.get(Spree.routes.product_search + '?' + jQuery.param({ q: $('#add_product_name').val(), authenticity_token: encodeURIComponent($('meta[name=csrf-token]').attr("content"))}), function(data) {
          result = prep_product_autocomplete_data(data)
          response(result);
        });
      },
      minLength: 4,
      focus: function(event, ui) {
        $('#add_product_name').val(ui.item.label);
        return false;
      },
      select: function(event, ui) {
        $('#add_product_name').val(ui.item.label);
        product = ui.item.data;
        if (product['variant'] == undefined) {
          // product
          $('#add_variant_id').val(product['product']['master']['id']);
        } else {
          // variant
          $('#add_variant_id').val(product['variant']['id']);
        }
        return false;
      }
    }).data("autocomplete")._renderItem = function(ul, item) {
      $(ul).addClass('ac_results');
      html = format_product_autocomplete(item);
      return $("<li></li>")
              .data("item.autocomplete", item)
              .append("<a>" + html + "</a>")
              .appendTo(ul);
    }

    $(this).data("autocomplete")._resizeMenu = function() {
      var ul = this.menu.element;
      ul.outerWidth(this.element.outerWidth());
    }
  });
}

$.fn.objectPicker = function(url){
  $(this).tokenInput(url + "&authenticity_token=" + escape(AUTH_TOKEN), {
    searchDelay          : 600,
    hintText             : Spree.strings.type_to_search,
    noResultsText        : Spree.strings.no_results,
    searchingText        : Spree.strings.searching,
    prePopulateFromInput : true
  });
};

$.fn.productPicker = function(){
  $(this).objectPicker(Spree.routes.product_search_basic);
}

$.fn.userPicker = function(){
  $(this).objectPicker(Spree.routes.user_search);
}

handle_date_picker_fields = function(){
  $('.datepicker').datepicker({
    dateFormat: "<%= ::I18n.t(:format, :scope => 'spree.date_picker', :default => 'yy/mm/dd') %>",
    dayNames: <%= ::I18n.t(:day_names, :scope => :date).to_json %>,
    dayNamesMin: <%= ::I18n.t(:abbr_day_names, :scope => :date).to_json %>,
    monthNames: <%= (::I18n.t(:month_names, :scope => :date).delete_if(&:blank?)).to_json %>,
    prevText: '<%= ::I18n.t(:previous) %>',
    nextText: '<%= ::I18n.t(:next) %>',
    showOn: "button",
    buttonImage: "<%= asset_path 'datepicker/cal.gif' %>",
    buttonImageOnly: true
  });
}

$(document).ready(function(){
  $(".observe_field").on('change', function() {
    target = $(this).attr("data-update");
    ajax_indicator = $(this).attr("data-ajax-indicator") || '#busy_indicator';
    $(target).hide();
    $(ajax_indicator).show();
    $.ajax({ dataType: 'html',
             url: $(this).attr("data-base-url")+encodeURIComponent($(this).val()),
             type: 'get',
             success: function(data){
               $(target).html(data);
               $(ajax_indicator).hide();
               $(target).show();
             }
    });
  });

  $('.add_fields').click(function() {
    var target = $(this).data("target");
    var new_table_row = $(target + ' tr:visible:last').clone();
    var new_id = new Date().getTime();
    new_table_row.find("input").each(function () {
      var el = $(this);
      el.val("");
      el.attr("id", el.attr("id").replace(/\d+/, new_id))
      el.attr("name", el.attr("name").replace(/\d+/, new_id))
    })
    $(target).append(new_table_row);
  })

  $('body').on('click', '.delete-resource', function() {
    var el = $(this);
    if (confirm(el.data("confirm"))) {
      $.ajax({
        type: 'POST',
        url: $(this).attr("href"),
        data: {
          _method: 'delete',
          authenticity_token: AUTH_TOKEN
        },
        dataType: 'script',
        success: function(response) {
          el.parents("tr").fadeOut('hide');
        },
        error: function(response, textStatus, errorThrown) {
          show_flash_error(response.responseText);
        }
      });
    }
    return false;
  });

  $('body').on('click', 'a.remove_fields', function() {
    $(this).prev("input[type=hidden]").val("1");
    $(this).closest(".fields").hide();
    return false;
  });

  $('.tokeninput.products').productPicker();
  $('.tokeninput.users').userPicker();

  handle_date_picker_fields();

  $('body').on('click', '.select_properties_from_prototype', function(){
    $("#busy_indicator").show();
    var clicked_link = $(this);
    $.ajax({ dataType: 'script', url: clicked_link.attr("href"), type: 'get',
        success: function(data){
          clicked_link.parent("td").parent("tr").hide();
          $("#busy_indicator").hide();
        }
    });
    return false;
  });


  $('table.sortable').ready(function(){
    $('table.sortable tbody').sortable(
      {
        handle: '.handle',
        update: function(event, ui) {
          $("#progress").show();
          positions = {};
          $.each($('table.sortable tbody tr'), function(position, obj){
            reg = /spree_(\w+_?)+_(\d+)/;
            parts = reg.exec($(obj).attr('id'));
            if (parts) {
              positions['positions['+parts[2]+']'] = position;
            }
          });
          $.ajax({
            type: 'POST',
            dataType: 'script',
            url: $(ui.item).closest("table.sortable").data("sortable-link"),
            data: positions,
            success: function(data){ $("#progress").hide(); }
          });
        }
      });
  });

});

jQuery(document).ready(function() {
  $('a.dismiss').click(function() {
    $(this).parent().fadeOut();
  });
});