// http://xavisys.com/using-prototype-javascript-to-get-the-value-of-a-radio-group/
function $RF(el, radioGroup) 
{
    if($(el).type && $(el).type.toLowerCase() == 'radio') {
        var radioGroup = $(el).name;
        var el = $(el).form;
    } else if ($(el).tagName.toLowerCase() != 'form') {
        return false;
    }
 
    var checked = $(el).getInputs('radio', radioGroup).find(
        function(re) {return re.checked;}
    );
    return (checked) ? $F(checked) : null;
}



/*

  This component requires "Prototype" js framework

*/

function EARL(formContainer, partsGroupsContainer, partsContainer, prefix, url) 
{
  this.formContainerId        = formContainer;
  this.formContainer          = $(formContainer);
  this.partsGroupsContainerId = partsGroupsContainer;
  this.partsGroupsContainer   = $(partsGroupsContainer);
  this.partsContainerId       = partsContainer;
  this.partsContainer         = $(partsContainer);
  this.prefix                 = prefix;
  this.url                    = url; // /index.php?option=com_retaillist

  this.form        = this.formContainer.down('form');

  var oThis = this;

  this.formContainer.objEARL = oThis;

  this.form[this.prefix + 'firm'].onchange  = function() { oThis.firmChanged(); }
  this.form[this.prefix + 'model'].onchange = function() { oThis.modelChanged(); }

  usedRadio = this.form[this.prefix + 'used'];
  for (var i = 0; i < usedRadio.length; i++) {
    usedRadio[i].onclick = function () { oThis.typeChanged(); };
  }

  partGroups = this.partsGroupsContainer.down('ul');
  if (partGroups) {
    groups = partGroups.childElements();
    for (i = 0; i < groups.length; i++) {
      groups[i].down('a').onclick = function () { oThis.groupToggled(this); return false; }
      partLinks = groups[i].down('ul');
      if (partLinks) {
        parts = partLinks.childElements();
        for (k = 0; k < parts.length; k++) {
          parts[k].down('a').onclick = function () { oThis.partSelected(this); return false; }
//          console.log(parts[k].down('a'));
        }
      }
    }
  }

}

EARL.prototype.clearPartsGroups = function() 
{
  this.partsGroupsContainer.update();
}

EARL.prototype.clearParts = function()
{
  this.partsContainer.update();
}

EARL.prototype.firmChanged = function()
{
  this.clearPartsGroups();
  this.clearParts();
  modelSelect = this.form[this.prefix + 'model'];
  firmSelect  = this.form[this.prefix + 'firm'];
  Element.insert(modelSelect, { 'after': '<img id="' + this.prefix + 'model-ajax-loader" src="/images/ajax-loader.gif" />' });
  var oThis = this;
//  return;
  this.req = new Ajax.Request(
    this.url 
    + '&' + this.prefix + 'task=modelSelect&' 
    + this.prefix + 'firm=' + firmSelect.value, { 
    method:'get',
    onLoaded: function(){
      $(oThis.prefix + 'model-ajax-loader').replace();
    },
    onSuccess: function(transport){
      var response = transport.responseText || "";
      modelSelect.replace(response);
      oThis.form[oThis.prefix + 'model'].onchange = function() { oThis.modelChanged(); }
//      modelSelect.onchange = 
//      modelSelect.style.display = 'none';
    },
    onFailure: function(){
      oThis.partsGroupsContainer.innerHTML = "request failed";
    }
  });
}

EARL.prototype.updatePartsGroups = function()
{
  firm  = this.form[this.prefix + 'firm'].value;
  model = this.form[this.prefix + 'model'].value;
  if (null == model || -1 == model ) {
    return false;
  }
  used = $RF(this.form, this.prefix + 'used');
//  console.log(used, firm, model); return;
  this.partsGroupsContainer.innerHTML = '<img src="/images/ajax-loader.gif" />';
  var oThis = this;
  this.req = new Ajax.Request(
    this.url + '&' + this.prefix + 'task=partsGroupsAjax'
    + '&' + this.prefix + 'firm=' + firm
    + '&' + this.prefix + 'model=' + model
    + '&' + this.prefix + 'used=' + used,
    { 
      method:'get',
      onSuccess: function(transport){
        var response = transport.responseText || "";
        oThis.partsGroupsContainer.innerHTML = response;
        links = oThis.partsGroupsContainer.select('a');
        for (var i = 0; i < links.length; i++) {
//          link = links[i];
//          link.obj = oThis;
          links[i].onclick = function () { oThis.groupToggled(this); return false; }
        }
      },
      onFailure: function(){
        oThis.partsGroupsContainer.innerHTML = "request failed";
      }
    }
  );
}



EARL.prototype.modelChanged = function()
{
  this.clearPartsGroups();
  this.clearParts();
  this.updatePartsGroups();
}

EARL.prototype.typeChanged = function()
{
//  console.log('typechanged');
  this.clearPartsGroups();
  this.clearParts();
  this.updatePartsGroups();
  return true;
}

EARL.prototype.partsRedraw = function()
{
  if (!(selfLink = this.partsContainer.down('a.selfLink')))  { return; }
  this.partSelected(selfLink);
}


EARL.prototype.partSelected = function(el) // el is <a> inside <li>
{ 
//  listItem = Element.up(el);
//  partName = el.innerHTML;
  linkUrl = el.href.sub(this.prefix + 'task=parts&', this.prefix + 'task=partsAjax&');
  this.clearParts();
  this.partsContainer.innerHTML = '<img src="/images/ajax-loader.gif" />';

  if (!el.hasClassName('selfLink')) { // do not change group selection on redraw (<a class="selfLink">
    selectedParts = this.partsGroupsContainer.select('ul ul a.selected');
    if (selectedParts[0]) {
      selectedParts[0].removeClassName('selected');
    }
    el.addClassName('selected');
  }

  var oThis = this;
  this.req = new Ajax.Request(
    linkUrl,
    { 
      method:'get',
      onSuccess: function(transport){
        response = transport.responseText || "";
        oThis.partsContainer.innerHTML = response;
        location.href='#' + oThis.partsContainer.id;
      },
      onFailure: function(){
        oThis.partsContainer.innerHTML = "request failed";
      }
    }
  );
}

EARL.prototype.groupToggled = function (el) {
  if (el.hasClassName('selected')) {
    this.groupDeselected(el);
  } else {
    this.groupSelected(el);
  }
  return false;
}

EARL.prototype.groupSelected = function(el) // el is <a> inside <li>
{
  linkUrl = el.href.sub(this.prefix + 'task=partsGroups&', this.prefix + 'task=partsSubgroupAjax&');
  var listItem = Element.up(el);
  var oThis = this;
  this.req = new Ajax.Request(
    linkUrl,
    { 
      method:'get',
      onLoading: function(){
        Element.insert(el, { after: '<img src="/images/ajax-loader.gif" id="' + this.prefix + 'partsSubgroup-ajax-loader" />' })
      },
      onSuccess: function(transport){
        response = transport.responseText || "";
        listItem.update(response);

        groupLink = listItem.down('a');
        groupLink.addClassName('selected');
        groupLink.onclick = function () { oThis.groupToggled(this); return false; }

        partLinks = listItem.down('ul').select('a');
        for (var i = 0; i < partLinks.length; i++ ) {
          partLinks[i].onclick = function () { oThis.partSelected(this); return false; }
        }
      },
      onFailure: function(){
        $('debug').innerHTML = "request failed";
      }
    }
  );
}

EARL.prototype.groupDeselected = function(el)
{
  listItem = Element.up(el);
  groupName = el.innerHTML;
  linkUrl = el.href;
  listItem.update('<a href="' + linkUrl + '">' + groupName + '</a>');
  linkEl = listItem.down('a');
  var oThis = this;
  linkEl.onclick = function () { oThis.groupToggled(this); return false; }
}