/***********************************************************
    Copyright © 2004, Yusuf Wiryonoputro. All rights reserved.
************************************************************/

function ListEditor(oName)
    {
    this.items
    this.oName = oName;
    
    this.listClick1 = listClick1;
    this.listClick2 = listClick2;
    
    this.RUN = RUN;
    this.add = add;
    this.remove = remove;

    this.row1
    this.row2
    
    this.onEdit = function(){return true;};
    
    this.getResultValues = getResultValues;
    this.getResultDisplayed = getResultDisplayed;
    }
    
function getResultValues()
    {
    oTable = document.getElementById("inpList2"+this.oName);
    sArr = ""
    for (var i=0;i<oTable.rows.length;i++)
        {
        if(oTable.rows[i].childNodes[0].innerHTML!="")
            {
            val = oTable.rows[i].childNodes[0].childNodes[0].innerHTML  
            sArr += "\"" + val + "\","
            }
        }
    sArr = sArr.substring(0,sArr.length-1)
    return eval("[" + sArr + "]")
    }
    
function getResultDisplayed()
    {
    oTable = document.getElementById("inpList2"+this.oName);
    sArr = ""
    for (var i=0;i<oTable.rows.length;i++)
        {
        
        if(oTable.rows[i].childNodes[0].innerText!="")
            {
            display = oTable.rows[i].childNodes[0].childNodes[1].innerHTML
            sArr += "\"" + display + "\","
            }
        }
    sArr = sArr.substring(0,sArr.length-1)
    return eval("[" + sArr + "]")       
    }
    
function RUN()
    {
    sHTML = "<input type=hidden name=inpObjName id=inpObjName value='"+this.oName+"'>" +
            "<table width=100% cellpadding=0 cellspacing=0><tr><td>"
    
    sHTML+= "<div style='border:1px #7F9DB9 solid;padding:1px'>" +
            "<div style='overflow:auto;width:120px;height:80px;border:1px #716F64 solid;border-bottom:1px #F1EFE2 solid;border-right:none;'>" +
            "<table id=inpList1"+this.oName+" style='border-collapse:collapse;width:100px;height:80px;background:#ffffff' cellpadding=1 cellspacing=0>"
    for(var i=0;i<this.items.length;i++)
        {
        var arrItem = this.items[i]
        if(arrItem[0]=="-" && arrItem[1]=="-")
            {
            sHTML+= "<tr><td style='height:2px;border-bottom:1px silver dotted;'>" +
                    "   <span style='display:none'>-</span><span style='display:none'>-</span>" +
                    "</td></tr>"
            }
        else
            {
            sHTML+= "<tr><td onclick=\""+this.oName+".listClick1(this,['"+arrItem[0]+"','"+arrItem[1]+"','"+arrItem[2]+"'])\" style='cursor:default'>" +
                    "   <span style='display:none'>"+arrItem[0]+"</span><span style='"+ arrItem[2] +"'>" + arrItem[1] + "</span>" +
                    "</td></tr>"
            }
        }
    sHTML+= "<tr><td height=100%>" +
            "   <span style='display:none'>-</span><span style='display:none'>-</span>" +
            "</td></tr>" +
            "</table></div></div>"
    
    sHTML+= "</td><td style='padding-left:3px;padding-right:3px;' width=100% align=center>" +
            "   <input type=button style='width:100%' class=inpBtn value=' >> ' onclick='"+this.oName+".add()'><div style='padding:2px'></div>" +
            "   <input type=button style='width:100%' class=inpBtn value=' << ' onclick='"+this.oName+".remove()'>" +
            "</td><td valign=top>" +
            "<div style='border:1px #7F9DB9 solid;padding:1px'>" +
            "<div style='overflow:auto;width:120px;height:80px;border:1px #716F64 solid;border-bottom:1px #F1EFE2 solid;border-right:none;'>" +
            "   <table id=inpList2"+this.oName+" style='border-collapse:collapse;width:100px;height:80px;background:#ffffff' cellpadding=1 cellspacing=0>" +
            "   <tr><td height=100%></td></tr></table></div></div>" +
            "</td></tr></table>"

    return(sHTML)
    }
    
function listClick1(e,arrItem)
    {
    e.style.background = "#316AC5"
    e.style.color = "white"
    oTable = document.getElementById("inpList1"+this.oName);
    for (var i=0;i<oTable.rows.length;i++)
        {
        if(e!=oTable.rows[i].childNodes[0]) 
            {
            oTable.rows[i].childNodes[0].style.backgroundColor = "";
            oTable.rows[i].childNodes[0].style.color = "";
            }
        }
    
    this.row1 = e.parentNode //store selected row
    }
    
function listClick2()
    {
    oName = document.getElementById("inpObjName").value //this.oName //=> fail
    oTD = this;
    if(oTD.tagName=="TR")
        {
        oTD = oTD.childNodes[0]
        }
    oTD.style.backgroundColor = "#316AC5"
    oTD.style.color = "white"
    oTable = document.getElementById("inpList2"+oName);
    for (var i=0;i<oTable.rows.length;i++)
        {
        if(oTD==oTable.rows[i].childNodes[0])   
            {
            eval(oName).row2 = oTable.rows[i]
            }
        else
            {
            oTable.rows[i].childNodes[0].style.backgroundColor = "";
            oTable.rows[i].childNodes[0].style.color = "";          
            }
        }
    }
    
function add()
    {
    if(this.row1.style.display=="none") return;
    var spans = this.row1.childNodes[0].getElementsByTagName("SPAN");
    val = spans[0].innerHTML;
    display = spans[1].innerHTML;
    style = spans[1].style.cssText

    var eRow = document.getElementById("inpList2"+this.oName).insertRow(document.getElementById("inpList2"+this.oName).rows.length-1);
    var eCell = eRow.insertCell(eRow.cells.length);
    eCell.innerHTML = "<span style='display:none'>"+val+"</span><span style='"+style+"'>"+display+"</span>";
    eCell.style.cursor = "default"
    eCell.onclick = this.listClick2;
    
    this.row1.childNodes[0].style.backgroundColor = "";
    this.row1.childNodes[0].style.color = "";
    this.row1.style.display = "none"
    
    this.onEdit()
    }
    
function remove()
    {
    if(this.row2==null) return;
    
    val2 = this.row2.childNodes[0].childNodes[0].innerHTML
    display2 = this.row2.childNodes[0].childNodes[1].innerHTML

    oTable = document.getElementById("inpList1"+this.oName);
    for (var i=0;i<oTable.rows.length;i++)
        {
        val = oTable.rows[i].childNodes[0].childNodes[0].innerHTML
        display = oTable.rows[i].childNodes[0].childNodes[1].innerHTML
        if(val == val2 && display == display2)
            {
            oTable.rows[i].style.display = "block"
            }           
        }

    oTable = document.getElementById("inpList2"+this.oName);
    for (var i=0;i<oTable.rows.length;i++)
        {
        if(oTable.rows[i]==this.row2)idx=i;
        }
    oTable.deleteRow(idx)
    
    this.row2=null
    
    this.onEdit()
    }