//sugges

var elementcount;
var elemcnt ;
var backgroundcolor="#DDF8FB";
var overcolor="orange";

function initRequest() {
  elementcount = -1;
  elemcnt = -1;
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    isIE = true;
    return new ActiveXObject('Microsoft.XMLHTTP');
  }
}

function suggListIndex(theText,page,destId,token,aditionalParameter,aditionalParameter2,destInput,destUL,destDIV){

  // alert('Llegó a suggListIndex');

  var text;
  if(token && !(token=='')){
    var auxArr1=theText.value.split(token);
    text=auxArr1[auxArr1.length-1];
  }else{
    text=theText.value;
  }
  var url = '/faces/technique-comparison?action='+page+'&text='+text+'&aditionalParameter='+aditionalParameter+'&aditionalParameter2='+aditionalParameter2;
  var req = initRequest();
  var arr;
  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
       
        var response = req.responseXML;
        var root = response.getElementsByTagName('root')[0];
        arr= new Array(root.childNodes.length);

        var cnt=0;
        elemcnt=root.childNodes.length;

        for (var iNode = 0; iNode < root.childNodes.length; iNode++) {
          var node = root.childNodes[iNode];

          var auxArr=new Array(2);
          auxArr[0]=node.attributes[0].value;
          auxArr[1]= node.attributes[1].value;
          arr[cnt] = auxArr;

          cnt++;
        }

        addRowSugg(destUL, arr,destId,token,destInput,destDIV);
        if(elemcnt>0){
          elementcount=0;
          highlight("sug"+destInput+"0");
        }
        showList(destDIV);

      } else if (req.status == 204){
        alert('Ingresa Primero');return false;
      }
    }
  };
  
  req.open('GET', url);
  //req.overrideMimeType("text/xml; charset='UTF-8'");
  //req.setRequestHeader('encoding','UTF-8');

  req.send(null);



}




function addRowSugg(idTable,arrVal,destId,token,destInput,destDIV){
  
  var laTable=document.getElementById(idTable);
  laTable.innerHTML="";
  
  for (x = 0; x < arrVal.length; x++) {
    //alert(arrVal[x]);
    var ul;
    var hi;
    try{
      hi=document.createElement("<input type=\"hidden\" value=\""+(arrVal[x][1])+"\" id=\"hid"+destInput+x+"\" />");
      ul=document.createElement("<li onclick=\"choseOption('"+destId+"',"+x+",'"+token+"','"+destDIV+"','"+destInput+"')\""+
        " onmouseover=\" unhighlightCurr('"+destInput+"');elementcount="+x+";this.style.backgroundColor='"+overcolor+"'; \""
        + " onmouseout=\"elementcount=-1;this.style.backgroundColor='"+backgroundcolor+"' \""
        +" style=\"background-color:"+backgroundcolor +"\" id=\"sug"+destInput+x+"\">"
        );
      ul.appendChild(document.createTextNode(arrVal[x][0]));
        
        
    }catch(e){
      ul=document.createElement("li");
      ul.setAttribute("onclick", "choseOption('"+destId+"',"+x+",'"+token+"','"+destDIV+"','"+destInput+"');");
      //"if(elementcount>=0){unhighlight('sug"+elementcount+"');}
      ul.setAttribute("onmouseover", "unhighlightCurr('"+destInput+"');elementcount="+x+";this.style.backgroundColor='"+overcolor+"';");
      ul.setAttribute("onmouseout", "elementcount=-1;this.style.backgroundColor='"+backgroundcolor+"'");
      ul.setAttribute("style", "background-color:"+backgroundcolor);
      ul.setAttribute("id", "sug"+destInput+x);

      ul.appendChild(document.createTextNode(arrVal[x][0]));

      hi=document.createElement("input");
      hi.setAttribute("type", "hidden");
      hi.setAttribute("value", arrVal[x][1]);
      hi.setAttribute("id", "hid"+destInput+x);
    }
        
    laTable.appendChild(hi);
    laTable.appendChild(ul);
  }
  

}

function keyPress(e,text,page,destId,token,aditionalParameter,aditionalParameter2,destDIV,destUL,destInput)
{

  //fco alert('Llegó a keyPress con e: ' + e.keyCode + ": " + destId +':'+destInput);

  var code; //variable to save keystroke
  
  if (e.keyCode) code = e.keyCode;

  if(code==13) //check for enter key pressed
  {
    var va=document.getElementById('hid'+destInput+elementcount);
    var v=null;
    if(va){
      v=va.value;
    }
    if(v){
      selectSugg(destId,v,token,destInput);
    }
    document.getElementById(destDIV).style.visibility="hidden";
    elementcount = -1;
    
    return false;
  }else if(code==38 )//arriba
  {

    if(elementcount <= 0) // why do i need counter to go below 0, as my created list is finite cant be -ve
    {
      elementcount = 0;

    // if user presses up arrow even after reaching 1st list place set counter
    }
    else
    {
      elementcount = elementcount - 1; //if counter is positive and user presses up arrow
      var w=elementcount+1;
      if (w <elemcnt && w>=0) //check elementid is within range
      {
        document.getElementById('sug'+destInput+w).style.backgroundColor=backgroundcolor; //change its background color
      }
      document.getElementById('sug'+destInput+elementcount).style.backgroundColor=overcolor;
    }

  }else if(code ==40 )//abajo
  {

    elementcount = elementcount + 1;
    if (elementcount >= elemcnt) //current elementid should not be more that available ids
    {
      elementcount = elementcount-1; // if it is reduce it
    }
    var z=elementcount-1;
    if (z<=elemcnt && z>=0) {
      document.getElementById('sug'+destInput+z).style.backgroundColor=backgroundcolor;
    //change its background color
    }
    document.getElementById('sug'+destInput+elementcount).style.backgroundColor=overcolor;
  }else if(code == 27 || document.getElementById(destId+':'+destInput).value=="")
  {
    document.getElementById(destDIV).style.visibility="hidden";
    elementcount = -1;

  } else if(code!=37 && code!=39){

    suggListIndex(text,page,destId,token,aditionalParameter,aditionalParameter2,destInput,destUL,destDIV);

  }
  return false;
}
function highlight(varid)
{

  document.getElementById(varid).style.backgroundColor=overcolor;

}

function unhighlight(varid)
{

  document.getElementById(varid).style.backgroundColor=backgroundcolor;
}

function unhighlightCurr(destId)
{

  if(elementcount>=0){
    var curr=document.getElementById('sug'+destId+elementcount);
    if(curr){
      curr.style.backgroundColor=backgroundcolor;

    }
  }

}

function selectSugg(page,theNewText,token,destInput){
  if(token && !(token=='')){
    var index=document.getElementById(page+':'+destInput).value.lastIndexOf(token);
    var auxVar;
    if(index==-1){
      document.getElementById(page+':'+destInput).value=theNewText+token+' ';
    }else{
      auxVar=document.getElementById(page+':'+destInput).value.substring(0,index);
      auxVar=auxVar+token+' '+theNewText+token+' ';
      document.getElementById(page+':'+destInput).value=auxVar;
    }

  }else{
    document.getElementById(page+':'+destInput).value=theNewText;
  }
}

function choseOption1(destId,token,destDIV,destInput){

  if(elementcount>=0){
    var v=document.getElementById('hid'+destInput+elementcount);
    if(v){
      selectSugg(destId,v.value,token,destInput);
    }
  }

  document.getElementById(destDIV).style.visibility="hidden";
  elementcount = -1;

}

function choseOption(destId,theEle,token,destDIV,destInput){

  var v=document.getElementById('hid'+destInput+theEle).value;
  selectSugg(destId,v,token,destInput);
  document.getElementById(destDIV).style.visibility="hidden";
  elementcount = -1;

  return false;
}

function resetlist(destDIV){

  var laTable=document.getElementById(destDIV);
  laTable.style.visibility="hidden";
  elemcnt=0;
  elementcount=-1;
}

function showList(destDIV){

  var laTable=document.getElementById(destDIV);
  laTable.style.visibility="visible";
}


//selectonemenu
function callRequestSelect(idComponent,theSelect,action,laFunc,params)
{
  var valueParameter=document.getElementById(idComponent).value;
  if(valueParameter==null || (valueParameter=='')){
    document.getElementById(theSelect).innerHTML="";
    document.getElementById(theSelect).value=null;
    if(laFunc){
      laFunc.apply(null,params);
    }
  }else{


    var url = "/faces/technique-comparison?action="+action+"&parameterId="+valueParameter;
    var req = initRequest();
    var arr;
    req.onreadystatechange = function() {
      if (req.readyState == 4) {
        if (req.status == 200) {

          var response = req.responseXML;
          var root = response.getElementsByTagName('root')[0];
          arr= new Array(root.childNodes.length);

          var cnt=0;
          for (var iNode = 0; iNode < root.childNodes.length; iNode++) {
            var node = root.childNodes[iNode];
            var auxArr=new Array(2);
            auxArr[0]=node.attributes[0].value;
            auxArr[1]= node.attributes[1].value;
            arr[cnt] = auxArr;

            cnt++;
          }

          addRow(theSelect, arr);
          if(laFunc){
            laFunc.apply(null,params);
          }

        } else if (req.status == 204){
          alert('Ingresa Primero');return false;
        }
      }
    };

    req.open('GET', url);
    //req.overrideMimeType("text/xml; charset='UTF-8'");
    //req.setRequestHeader('encoding','UTF-8');
    req.send(null);
  }

}



function addRow(idTable,arrVal){

  var laTable=document.getElementById(idTable);
  laTable.innerHTML="";
  for (x = 0; x < arrVal.length; x++) {
    //alert(arrVal[x]);


    var ul=document.createElement("option");
    if(x==0){

      laTable.value=arrVal[x][0];
    }
    ul.setAttribute("value", arrVal[x][0]);
    //"if(elementcount>=0){unhighlight('sug"+elementcount+"');}


    ul.appendChild(document.createTextNode(arrVal[x][1]));

    laTable.appendChild(ul);
  }
}

//changepreference


function changeIconPref(idR,imgTag,userNull){

  if(userNull){
    alert('Ingresa Primero');return false;
  }

  var url = "/faces/technique-comparison?action=preference&id="+idR;
  var req = initRequest();
  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {

        var response = req.responseText;

        imgTag.src= response;
      } else if (req.status == 204){
        alert('Ingresa Primero');return false;
      }
    }
  };
  req.open("GET", url);
  req.send(null);
}


//scroller image




function callImage(currIndexImage)
{
  var url = "/faces/technique-comparison?action=forwardImage&idRow="+currIndexImage;
  var req = initRequest();

  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
        var responsePro = req.responseText;

        var currImage=document.getElementById('imageAux');
        currImage.src="/ImageServlet?idR="+responsePro;
        var currImageTool=document.getElementById('imageAuxTool');
        currImageTool.src="/ImageServlet?idR="+responsePro;

      } else if (req.status == 204){
        alert('Ingresa Primero');return false;
      }
    }
  };

  req.open('GET', url);
  //req.overrideMimeType("text/xml; charset='UTF-8'");
  //req.setRequestHeader('encoding','UTF-8');
  req.send(null);


}

function callImage2(currIndexListImage)
{

  var currImage=document.getElementById('imageAux');
  currImage.src="/ImageServlet?idRow="+currIndexListImage+"&no="+ Math.random();
  var currImageTool=document.getElementById('imageAuxTool');
  currImageTool.src="/ImageServlet?idRow="+currIndexListImage+"&no="+ Math.random();

}

function deleteImage(currIndexImage)
{
  var url = "/faces/technique-comparison?action=deleteImage&idRow="+currIndexImage;
  var req = initRequest();

  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
        var responsePro = req.responseText;
        listSize=responsePro;
        idCurImage=-1;
        initImage();
      } else if (req.status == 204){
        alert('Ingresa Primero');return false;
      }
    }
  };

  req.open('GET', url);
  //req.overrideMimeType("text/xml; charset='UTF-8'");
  //req.setRequestHeader('encoding','UTF-8');
  req.send(null);


}


//progress
var idFunct;
function call()
{
  var currProgress=document.getElementById('progress');
  currProgress.innerHTML="0";

  idFunct=setInterval("callAgain()",100);

}

function callAgain()
{

  var url = "/faces/technique-comparison?action=progressBarListReoffer";
  var req = initRequest();

  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {

        var responsePro = req.responseText;

        var currProgress=document.getElementById('progress');
        currProgress.innerHTML=responsePro;

        if(parseInt(responsePro)<100){


        }else{
          clearInterval(idFunct);

          hideLightbox('overProgress','fadeProgress');
        }



      } else if (req.status == 204){
        alert('Ingresa Primero');return false;
      }
    }
  };

  req.open('GET', url);
  //req.overrideMimeType("text/xml; charset='UTF-8'");
  //req.setRequestHeader('encoding','UTF-8');

  req.send(null);


}

var initializedKey=false;

function validateIfIsInitialized(){
  if(true){
    
}
}