var Zhuyin = {};

Zhuyin.step1 = function () {
  var divBodyStep1 =document.getElementById("step2");
   while (divBodyStep1.firstChild) { divBodyStep1.removeChild(divBodyStep1.firstChild); }
   divBodyStep1.appendChild(document.createTextNode("Step 1. Map Wade-Giles to Zhuyin and Pinyin. Click on a symbol fom the above."));
};

Zhuyin.req = function (zhuyin_unicode,source) {

    var oHttp = zXmlHttp.createRequest();
                                   
    //cancel any active requests                          
    if (oHttp.readyState != 0) {
        oHttp.abort();
    }                 

    var oData = { 
        agent: "cozywebsite",
        datatype: source,
        code: zhuyin_unicode
    };
    oHttp.open("post", "suggestzhuyin.php", true);
    oHttp.onreadystatechange = function () {
        if (oHttp.readyState == 4) {
            var aResult = JSON.parse(oHttp.responseText);
            Zhuyin.format(aResult['zhuyin'],aResult['pinyin'],aResult['wade']);
        }    
    };
    oHttp.send(JSON.stringify(oData));

};

Zhuyin.format = function (zhuyin,pinyin,wade) {

 var FragMenu1 = document.createDocumentFragment();
 oMenuTitle = document.createElement("div");
 oMenuTitle.className = "menuheader";
 tZhuyin=document.createElement("div");
 tPinyin = document.createElement("div");
 tWade = document.createElement("div");

 tZhuyin.className = "menutitle";
 tPinyin.className = "menutitle";
 tWade.className = "menutitle";
 tZhuyin.appendChild(document.createTextNode("ZhuYin"));
 tPinyin.appendChild(document.createTextNode("PinYin"));
 tWade.appendChild(document.createTextNode("Wade"));
oMenuTitle.appendChild(tWade);
oMenuTitle.appendChild(tZhuyin);
oMenuTitle.appendChild(tPinyin);
 FragMenu1.appendChild(oMenuTitle);

    
 for (var i=0; i < zhuyin.length; i++) {
    oDiv = document.createElement("div");
     oDiv.className = "menurow";
    sZhuyin = document.createElement("span");
    sPinyin = document.createElement("span");
    sWade = document.createElement("span");
    sZhuyin.className = "menu_middle";
    sPinyin.className = "menu_right";
    sWade.className = "menu_left";
   
    sZhuyin.innerHTML=zhuyin[i];
    sPinyin.innerHTML=pinyin[i];
    sWade.innerHTML=wade[i];
    oDiv.appendChild(sWade);
    oDiv.appendChild(sZhuyin);
    oDiv.appendChild(sPinyin);

    oDiv.onmouseover=this.showbackcolor;
    oDiv.onmouseout=this.hidebackcolor;
    oDiv.onclick=this.findwords;
    FragMenu1.appendChild(oDiv);
  }
  var divBodyPane =document.getElementById("menu1");
  while (divBodyPane.firstChild) { divBodyPane.removeChild(divBodyPane.firstChild); }
  divBodyPane.appendChild(FragMenu1);
  
  var divBodyList =document.getElementById("list1");
  while (divBodyList.firstChild) { divBodyList.removeChild(divBodyList.firstChild); }
  
   var divBodyStep2 =document.getElementById("step2");
   while (divBodyStep2.firstChild) { divBodyStep2.removeChild(divBodyStep2.firstChild); }
   divBodyStep2.style.backgroundColor="A3A3FF";
   divBodyStep2.style.color="FFE60D";
   divBodyStep2.appendChild(document.createTextNode("Step 2. Select a row from the left panel below to find associated words and phrases."));
 
};



Zhuyin.showbackcolor=function(){
   this.className = "menurow_over";

};
Zhuyin.hidebackcolor=function(){
  this.className = "menurow";
};



Zhuyin.findwords = function () {

var sound=this.childNodes[0].innerHTML;
 var divBodyPane =document.getElementById("list1");
 while (divBodyPane.firstChild) { divBodyPane.removeChild(divBodyPane.firstChild); }
 divBodyPane.appendChild(document.createTextNode("Loading data associated with "+sound+"..."));
 
    
    var oHttp = zXmlHttp.createRequest();
    

    //cancel any active requests
    if (oHttp.readyState != 0) {
        oHttp.abort();
    }

    var oData = {
        agent: "cozywebsite",
        code: this.childNodes[1].innerHTML
    };

    oHttp.open("post", "findpinyinwords.php", true);
    oHttp.onreadystatechange = function () {
        if (oHttp.readyState == 4) {
            var aResult = JSON.parse(oHttp.responseText);
            Zhuyin.showresult(sound,aResult['pinyin'],aResult['traditional'],aResult['simplified'],aResult['english']);
        }
    };
    oHttp.send(JSON.stringify(oData));

  };

Zhuyin.showresult = function (bopomo,pinyin,traditional,simplified,english) {

 var FragMenu1 = document.createDocumentFragment();
 oDivHeader = document.createElement("div");
 oDivHeader.className = "resultheader";
 sZhuyin_h = document.createElement("span");
 sZhuyin_h.appendChild(document.createTextNode("Result for "+bopomo));
 oDivHeader.appendChild(sZhuyin_h);
 FragMenu1.appendChild(oDivHeader);
 //Row Title
 oDivTitle = document.createElement("div");
 oDivTitle.className = "resulttitle";
 tPinyin=document.createElement("div");
 tTrad = document.createElement("div");
 tSimp = document.createElement("div");

 tPinyin.className = "titlepinyin";
 tTrad.className = "titletrad";
 tSimp.className = "titlesimplified";
 tPinyin.appendChild(document.createTextNode("Pinyin"));
 tTrad.appendChild(document.createTextNode("FanTi"));
 tSimp.appendChild(document.createTextNode("JianTi"));
 oDivTitle.appendChild(tPinyin);
 oDivTitle.appendChild(tTrad);
 oDivTitle.appendChild(tSimp);
 FragMenu1.appendChild(oDivTitle);
 
 if(pinyin.length==0){
 oDivBody = document.createElement("div");
 oDivBody.className = "resultrow2";
 oDivBody.appendChild(document.createTextNode("No Result"));
 FragMenu1.appendChild( oDivBody);
 }
 
for (var i=0; i < pinyin.length; i++) {
    oDiv = document.createElement("div");
    if(i%2){
        oDiv.className = "resultrow";
    }else{
      oDiv.className = "resultrow2";
    }
    
    sPinyin=document.createElement("div");
    sTrad = document.createElement("div");
    sSimp = document.createElement("div");
    sPinyin.className = "resultpinyin";
    sTrad.className = "resulttrad";
    sSimp.className = "resultsimplified";
    sPinyin.innerHTML=pinyin[i];
    sTrad.innerHTML=traditional[i];
    sSimp.innerHTML=simplified[i];
    oDiv.appendChild(sPinyin);
    oDiv.appendChild(sTrad);
    oDiv.appendChild(sSimp);
    oDiv.title=english[i];
    FragMenu1.appendChild(oDiv);
  }
  
  var divBodyPane =document.getElementById("list1");
  while (divBodyPane.firstChild) { divBodyPane.removeChild(divBodyPane.firstChild); }
 divBodyPane.appendChild(FragMenu1);
 
   var divBodyStep3 =document.getElementById("step2");
   while (divBodyStep3.firstChild) { divBodyStep3.removeChild(divBodyStep3.firstChild); }

   divBodyStep3.innerHTML="Step 3. Place mouse over a result row for English annotation.<br><a href='http://www.cozychinese.com/cozywebsite/#comments'>Click here</a> to write an online review.";
};