/*
 * All the contact-form UI related java-script functions are refactored to this file.
 */

function updateField(field , value)
{
  field.value = value;
}
/**
 * Disables the new vehicle select box for year/make/model 
 * @param disable (true/false) the select box to disable
 * 
 */
function disableNewVehicleSelect(disable)
{
  document.getElementById('select-year').disabled = disable;
  document.getElementById('select-make').disabled = disable;
  document.getElementById('select-model').disabled = disable;
}
/**
 * Disables the pre-owned vehicle select box for year/make/model
 * @param disable (true/false) the select box to disable
 * 
 */
function disablePreOwnedSelect(disable)
{
  document.getElementById('txt-year').disabled = disable;
  document.getElementById('txt-make').disabled = disable;
  document.getElementById('txt-model').disabled = disable;
}

/**
 * Update select boxes corresponding to new vehicle select.
 * @param className the css class name
 * @param disable (true/false) the select box to disable
 * @param namePrefix the name prefix
 */ 

function updateNewVehicleSelectUI(className, disable, namePrefix)
{
  document.getElementById('newvehicle-select').className = className;
  disableNewVehicleSelect(disable);

  if (country == 'ca')
  {
    //Foc post has 'Year' 'Make' 'Model' as the field names. Respecting the case sensitivity.
    document.getElementById('select-year').name = namePrefix + 'year';
    document.getElementById('select-make').name = namePrefix + 'make';
    document.getElementById('select-model').name = namePrefix + 'model';
  }
  else
  {
    document.getElementById('select-year').name = namePrefix + 'year';
    document.getElementById('select-make').name = namePrefix + 'make';
    document.getElementById('select-model').name = namePrefix + 'model';
  }
}

//
/**
 * Update select boxes corresponding to preowned select.
 * @param className the css class name
 * @param disable (true/false) the select box to disable
 * @param namePrefix the name prefix
 */
function updatePreOwnedSelectUI(className, disable, namePrefix)
{
  document.getElementById('preowned-select').className = className;
  disablePreOwnedSelect(disable);
  if (country == 'ca')
  {
    document.getElementById('txt-year').name = namePrefix + 'year';
    document.getElementById('txt-make').name = namePrefix+ 'make';
    document.getElementById('txt-model').name = namePrefix + 'model';
  }
  else
  {
    document.getElementById('txt-year').name = namePrefix + 'year';
    document.getElementById('txt-make').name = namePrefix+ 'make';
    document.getElementById('txt-model').name = namePrefix + 'model';
  }
}

/**
 * For the ui updations once a requesttype changes.
 * @param reqType the request type
 * @param vehicleModels the vehicle models
 */
function requestTypeChanged(reqType, vehicleModels)
{
  if (reqType == 'newvehicle' )
  {
    updateNewVehicleSelectUI('visible-block', false, '');
    updatePreOwnedSelectUI('collapse-block', true, 'p');
    document.getElementById('newvehicleType').checked = true;
    //Reset the dropdowns.
    document.getElementById('select-make').selectedIndex = 0;
    document.getElementById('select-year').selectedIndex = 0;
    document.getElementById('select-model').selectedIndex = 0;
    filterMakeDropDown(vehicleModels);
  }
  else if (reqType == 'preowned')
  {
    updateNewVehicleSelectUI('collapse-block', true, 'p');
    updatePreOwnedSelectUI('visible-block', false, '');
    document.getElementById('preOwnedType').checked = true;
    document.getElementById('txt-year').value = '';
    document.getElementById('txt-make').value = '';
    document.getElementById('txt-model').value = '';
  }
  else
  {
    updateNewVehicleSelectUI('collapse-block', true, 'p');
    updatePreOwnedSelectUI('collapse-block', true, 't');
    document.getElementById('generalType').checked = true;
  }
}
/**
 * Toggle panel
 * @param postid
 * @param baseresourcepath
 */
function togglepanel (postid, baseresourcepath)
{
  var panel = document.getElementById(postid);
  var img   = document.getElementById(postid + '-img');
  var contents = document.getElementById(postid + '-content');

  if (panel.className=="box-on")
  {
    panel.className= "box-off";
    img.src = baseresourcepath + "/apps/img/contactform/arrow_down.gif";
    contents.className= "collapse-block";
  }
  else
  {
    panel.className= "box-on";
    img.src = baseresourcepath + "/apps/img/contactform/arrow_up.gif";
    contents.className= "expand-block";
  }
}


/**
 * Process the year, set to default value if blank.
 * @param year 
 * @param defaultValue
 */
function processPreOwnedYear(year, defaultValue)
{
  var yearPattern = /^(1|2)\d{3}$/;

  if (year.value.length == 0)
  {
    //Modify the style if we intend not to show the default value assigned.
    updateField(year, defaultValue);
  }
  else
  {
    var validYear = yearPattern.test(year.value);
    if (!validYear)
    {
      errorHandler.handleError('InvalidYear');
      return false;
    }
  }
  return true;
}

/**
 * Validate comment.
 * @param comment the comment to be processed
 */
function processComment(comment)
{
  var commentLessThan250 = (comment.value.length <= 250);
  if (commentLessThan250 == false)
  {
    errorHandler.handleError('InvalidComment');
  }
  return commentLessThan250;
}


/**
 * Process the make string entered. Includes validation.
 * @param make
 * @param defaultVal
 */
function processPreOwnedMake(make, defaultVal)
{
   if (make.value.length == 0)
   {
     //Modify the style if we intend not to show the default value assigned.
     updateField(make, defaultVal);
   }
}


/**
 * Process the model string entered by user.
 * @param model
 * @param 
 */
function processPreOwnedModel(model, defaultVal)
{
   if (model.value.length == 0)
   {
     //Modify the style if we intend not to show the default value assigned.
     updateField(model, defaultVal);
   }
}

/**
 * To update the 250 char warning note color, as the user inputs comment. 
 * Goes to red when > 250, else revert back to theme color.
 * @param strFormName the form name
 */
function updateWarningNoteForComment(strFormName)
{
  var comment = document.forms[strFormName].elements['comments'];
  var noteDiv = document.getElementById('twofiftylimitmsg');
  if (comment.value.length > 250)
  {
    noteDiv.className = 'contactus-warnnote';
  }
  else
  {
    noteDiv.className = 'note';
  }
}

/**
 * Expects errorHandler defined previously.
 * @param strFormName the form name
 */
function processUIParametersAndSubmit(strFormName)
{
  var isNewSelected = document.forms[strFormName].elements.requestType[0].checked;
  var isPreOwnedSelected = document.forms[strFormName].elements.requestType[1].checked;
  var comment = document.forms[strFormName].elements.comments;

  comment.value = comment.value.trim();
  if (!processComment(comment))
  {
    return;
  }

  var year;
  var make;
  var model;
  var prevYearVal = '';
  var prevMakeVal = '';
  var prevModelVal = '';
  if (isNewSelected)
  {
    year = document.getElementById('select-year');
    make = document.getElementById('select-make');
    model = document.getElementById('select-model');
  }
  else if (isPreOwnedSelected)
  {
    year = document.getElementById('txt-year');
    make = document.getElementById('txt-make');
    model = document.getElementById('txt-model');
    //For preowned types since the values are user entered, we need some extra processing.
    prevYearVal = year.value;
    prevMakeVal = make.value;
    prevModelVal = model.value;
    year.value = year.value.trim();
    make.value = make.value.trim();
    model.value = model.value.trim();

    if (!processPreOwnedYear(year, '0'))
    {
      return;
    }

    var defaultValue = (country == 'ca')?'':'n/a';
    processPreOwnedMake(make, defaultValue);
    processPreOwnedModel(model, defaultValue);
  }
  //All ui validations pass. Update fields appropriately.
  if (country == 'ca')
  {
    focFormSubmit(strFormName);
  }
  else
  {
    cfFormSubmit(strFormName);
  }
  //We do this after the submit action. It is important to reset the default values in case submit did not happen successfully.
  if (isPreOwnedSelected) {
    updateField(year, prevYearVal);
    updateField(make, prevMakeVal);
    updateField(model,prevModelVal);
  }
}

/**
 * To filter the contents of the model drop down on make & year.
 * @param vehicleModels the vehicle models
 */
function filterModelDropDown(vehicleModels)
{

  var selectMake = document.getElementById('select-make');
  var selectModel = document.getElementById('select-model');
  if (selectMake.selectedIndex > 0)
  {
    vehicleModels = filterVehiclesByPropertyValue(vehicleModels, 'make', selectMake.value);
  }
  var prevSelect = selectModel.value;
  populateSelectProperty('select-model', 1, vehicleModels, 'name', null);
  selectValue(selectModel, prevSelect);
}

/**
 * To filter the make drop down based on year.
 * @param vehicleModels the vehicle models
 */
function filterMakeDropDown(vehicleModels)
{
  var selectYear = document.getElementById('select-year');
  var selectMake = document.getElementById('select-make');
  if (selectYear.selectedIndex > 0)
  {
    vehicleModels = filterVehiclesByPropertyValue(vehicleModels, 'year', selectYear.value);
  }
  var prevSelect = selectMake.value;
  populateSelectProperty('select-make', 1, vehicleModels, 'make', null);
  //We will retain the previous selection if valid.
  selectValue(selectMake, prevSelect);
  filterModelDropDown(vehicleModels);
}

/**
 * The Right to Left selection for model. 
 * @param vehicleModels the vehicle models
 */
function selectMakeBasedOnModel(vehicleModels)
{
  var selectMake = document.getElementById('select-make');
  var selectModel = document.getElementById('select-model');
  if (selectModel.selectedIndex > 0)
  {
    var filteredVehicleModels = filterVehiclesByPropertyValue(vehicleModels, 'name', selectModel.value);
    selectValue(selectMake, filteredVehicleModels[0].make);
    filterModelDropDown(vehicleModels);
  }
}