(1-nitrooxypentane)"},
{ChemClass:"Nitrile", Group:"Nitrile", Formula:"RCN", Prefix:"cyano-", Suffix:"alkanenitrile, alkyl cyanide", Example:"Benzonitrile
(Phenyl cyanide)"},
{ChemClass:"Nitrite", Group:"Nitrosooxy", Formula:"RONO", Prefix:"nitrosooxy-", Suffix:"alkyl nitrite", Example:"Isoamyl nitrite
(3-methyl-1-nitrosooxybutane)"},
{ChemClass:"Nitro compound", Group:"Nitro", Formula:"RNO2", Prefix:"nitro-", Suffix:"", Example:"Nitromethane"},
{ChemClass:"Nitroso compound", Group:"Nitroso", Formula:"RNO", Prefix:"nitroso-", Suffix:"", Example:"Nitrosobenzene"},
{ChemClass:"Pyridine derivative", Group:"Pyridyl", Formula:"RC5H4N", Prefix:"4-pyridyl (pyridin-4-yl)|3-pyridyl (pyridin-3-yl)|2-pyridyl (pyridin-2-yl)", Suffix:"-pyridine", Example:"Nicotine"}
];
var data5=[
{ChemClass:"Phosphine", Group:"Phosphino", Formula:"R3P", Prefix:"phosphino-", Suffix:"-phosphane", Example:"Methylpropylphosphane"},
{ChemClass:"Phosphodiester", Group:"Phosphate", Formula:"HOPO(OR)2", Prefix:"phosphoric acid di(substituent) ester", Suffix:"di(substituent) hydrogenphosphate", Example:"DNA"},
{ChemClass:"Phosphonic acid", Group:"Phosphono", Formula:"RP(=O)(OH)2", Prefix:"phosphono-", Suffix:"substituent phosphonic acid", Example:"Benzylphosphonic acid"},
{ChemClass:"Phosphate", Group:"Phosphate", Formula:"ROP(=O)(OH)2", Prefix:"phospho-", Suffix:"", Example:"Glyceraldehyde 3-phosphate"},
{ChemClass:"Sulfide or thioether", Group:"Sulfide or thioether", Formula:"RSR'", Prefix:"", Suffix:"di(substituent) sulfide", Example:"Dimethyl sulfide"},
{ChemClass:"Sulfone", Group:"Sulfonyl", Formula:"RSO2R'", Prefix:"sulfonyl-", Suffix:"di(substituent) sulfone", Example:"Dimethyl sulfone
(Methylsulfonylmethane)"},
{ChemClass:"Sulfonic acid", Group:"Sulfo", Formula:"RSO3H", Prefix:"sulfo-", Suffix:"substituent sulfonic acid", Example:"Benzenesulfonic acid"},
{ChemClass:"Sulfoxide", Group:"Sulfinyl", Formula:"RSOR'", Prefix:"sulfinyl-", Suffix:"di(substituent) sulfoxide", Example:"Diphenyl sulfoxide"},
{ChemClass:"Thiol", Group:"Sulfhydryl", Formula:"RSH", Prefix:"mercapto-, sulfanyl-", Suffix:"-thiol", Example:"Ethanethiol
(Ethyl mercaptan)"},
{ChemClass:"Thiocyanate", Group:"Thiocyanate", Formula:"RSCN", Prefix:"thiocyanato-", Suffix:"alkyl thiocyanate", Example:""},
{ChemClass:"Disulfide", Group:"Disulfide", Formula:"RSSR'", Prefix:"", Suffix:"alkyl alkyl disulfide", Example:"Diphenyl disulfide
1,2-diphenyldisulfane"}
];
var fg=[
{gp:"Hydrocarbons", cnt:"Functional groups that vary based upon the number and order of π bonds impart different chemistry. Each listing below contains C-H bonds, but each one differs in type (and scope) of reactivity."},
{gp:"Groups containing halogens", cnt:"Haloalkanes are a class of molecule that is defined by a carbon-halogen bond. This bond can be relatively weak (in the case of an iodoalkane) or quite stable (as in the case of a fluoroalkane)."},
{gp:"Groups containing oxygen", cnt:"Compounds that contain C-O bonds each possess differing reactivity based upon the location and hybridization of the C-O bond, owing to the electron-withdrawing effect of sp2 hybridized oxygen and the donating effects of sp3 hybridized oxygen."},
{gp:"Groups containing nitrogen", cnt:"Compounds that contain Nitrogen in this category may contain C-O bonds, such as in the case of amides."},
{gp:"Groups containing phosphorus & sulfur", cnt:"Compounds that contain sulfur and phosphorus exhibit unique chemistry due to their ability to form more bonds than nitrogen and oxygen, their lighter analogues on the periodic table."}
];
//declare HTML objects
var btn_back = document.getElementById('btn_back');
var dot1 = document.getElementById('dot1');
var dot2 = document.getElementById('dot2');
var dot3 = document.getElementById('dot3');
var cnt1 = document.getElementById('cnt1');
var cnt2 = document.getElementById('cnt2');
var list = document.getElementById('list');
var descr = document.getElementById('descr');
var title = document.getElementById('title');
var details = document.getElementById('details');
var ads = document.getElementById('ads');
//declare public variables
var cate ="";
//initiate the interface
function ini(){
btn_back.style.visibility = 'hidden';
btn_back.setAttribute("onclick", "");
dot1.style.backgroundColor = '#ffffff';
dot2.style.backgroundColor = '#336699';
dot3.style.backgroundColor = '#336699';
cnt1.style.visibility = 'visible';
cnt2.style.visibility = 'hidden';
cate = "";
createDescr(descr, 0);
createList(fg, list, "getSub");
}
//create a new list
function createList(dataSrc, lsObj, func){
//remove all items from the list
lsObj.innerHTML = "";
//add new items
var itemNum = dataSrc.length;
for (i = 0; i < itemNum; i++){
var lsitem = document.createElement("div");
if (i == 0){
lsitem.setAttribute("class", "listtop");
}else if (i == itemNum-1){
lsitem.setAttribute("class", "listbottom");
}else{
lsitem.setAttribute("class", "list");
}
lsitem.setAttribute("onclick", func+"('"+String(i+1)+"')");
switch (dataSrc){
case fg:
lsitem.innerHTML = fg[i].gp;
break;
default:
lsitem.innerHTML = dataSrc[i].Group;
break;
}
lsObj.appendChild(lsitem);
}
}
//create category description
function createDescr(obj, id){
//remove all child nodes from the obj
obj.innerHTML = "";
//add new description
var cnt1title = document.createElement("div");
cnt1title.setAttribute("class", "title");
var cnt1descr = document.createElement("div");
cnt1descr.setAttribute("class", "descr");
if (id != 0){
cnt1title.innerHTML = fg[id-1].gp;
cnt1descr.innerHTML = fg[id-1].cnt;
}else{
cnt1title.innerHTML = "Functional group";
cnt1descr.innerHTML = "In organic chemistry, functional groups are specific groups of atoms within molecules that are responsible for the characteristic chemical reactions of those molecules.";
}
obj.appendChild(cnt1title);
obj.appendChild(cnt1descr);
}
//get sub-category list
function getSub(id){
btn_back.style.visibility = "visible";
btn_back.setAttribute("onclick", "goBack()");
dot1.style.backgroundColor = '#336699';
dot2.style.backgroundColor = '#ffffff';
dot3.style.backgroundColor = '#336699';
cate = id;
createDescr(descr, Number(id));
switch (id){
case "1":
createList(data1, list, "getDetails");
break;
case "2":
createList(data2, list, "getDetails");
break;
case "3":
createList(data3, list, "getDetails");
break;
case "4":
createList(data4, list, "getDetails");
break;
case "5":
createList(data5, list, "getDetails");
break;
}
}
//get details of final result
function getDetails(id){
switch (cate){
case "1":
dataSrc = data1;
break;
case "2":
dataSrc = data2;
break;
case "3":
dataSrc = data3;
break;
case "4":
dataSrc = data4;
break;
case "5":
dataSrc = data5;
break;
}
title.innerHTML = dataSrc[id-1].Group;
var tmp = "";
tmp = "Chemical Class: "+dataSrc[id-1].ChemClass+"
";
tmp += "Formula: "+dataSrc[id-1].Formula+"
";
tmp += "Structural Formula:
";
var tmparr = dataSrc[id-1].Prefix.split("|");
if (tmparr.length == 3){
tmp += "![](img/src/"+cate+String(id-1)+"0.png)
"+tmparr[0]+"
";
tmp += "
![](img/src/"+cate+String(id-1)+"1.png)
"+tmparr[1]+"
";
tmp += "
![](img/src/"+cate+String(id-1)+"2.png)
"+tmparr[2]+"
";
tmp += "Prefix: "+tmparr.join(", ")+"
";
}else{
tmp += "![](img/src/"+cate+String(id-1)+".png)
";
if (dataSrc[id-1].Prefix != ""){
tmp += "Prefix: "+dataSrc[id-1].Prefix+"
";
}
}
if (dataSrc[id-1].Suffix != ""){
tmp += "Suffix: "+dataSrc[id-1].Suffix+"
";
}
if (dataSrc[id-1].Example != ""){
tmp += "Example:
";
tmp += "![](img/src/"+cate+String(id-1)+"-0.png)
";
tmp += dataSrc[id-1].Example+"
";
}
details.innerHTML = tmp;
if (dataSrc[id-1].Example != ""){
tmparr = dataSrc[id-1].Example.split("
");
ads.innerHTML = "See more on web ...";
}else{
ads.innerHTML = "See more on web ...";
}
cnt1.style.visibility = 'hidden';
cnt2.style.visibility = 'visible';
dot1.style.backgroundColor = '#336699';
dot2.style.backgroundColor = '#336699';
dot3.style.backgroundColor = '#ffffff';
list.innerHTML = "";
window.location.href = "#1";
}
//go back button action
function goBack(){
if (cate != ""){
if (cnt2.style.visibility == "hidden"){
ini();
hideAddress();
}else if (cnt2.style.visibility == "visible"){
title.innerHTML = "";
details.innerHTML = "";
cnt1.style.visibility = 'visible';
cnt2.style.visibility = 'hidden';
dot1.style.backgroundColor = '#336699';
dot2.style.backgroundColor = '#ffffff';
dot3.style.backgroundColor = '#336699';
getSub(cate);
window.location.href = "#1";
}
}
}