function addattributes(currency){
    document.getElementById('firsttblclone').style.display = 'block';
    document.getElementById('firsttbl').style.display = 'none';
    document.getElementById('sectbl').style.display = 'block';
    addparentbox(currency);
}
function countboxrow(){
    var tbl = document.getElementById('sectbl');
    var tblrows = tbl.rows.length;
    return tblrows;
}
function countinnerboxrow(table){
    var tbl = document.getElementById(table);
    var tblrows = tbl.rows.length;
    return tblrows;
}
function addparentbox(currency){
    var tbl = document.getElementById('sectbl');   
    var   tblrows = countboxrow();    
    var row = tbl.insertRow(tblrows);
    row.id = tblrows;    
    var  cellText = row.insertCell(0);
     var tblstring = '<table id="parenttbl'+tblrows+'"><tr>'+
                        '<td width="156" align="right" valign="middle" class="add-new-user-text"> Attribute Name : </td>'+
                        '<td width="724" align="left" valign="top">'+
                                            '<input name="attri_options[]" type="text" class="add-new-user-textarea fl" style="width: 20%;"  id="opid'+tblrows+'" value=""  maxlength="200" />'+
                                            '<a class="mgt10 mgl5 db fl">'+
                                                '<img onmouseover="this.src=\'html/images/remove-attribute-name-hover.png\';" onmouseout="this.src=\'html/images/remove-attribute-name.png\';" src="html/images/remove-attribute-name.png" title="Remove Attribute Name" onclick="removethisbox(this);" id="'+tblrows+'" alt="Remove Attribute Name">'+
                                            '</a>'+
                                        '</td>'+
                                    '</tr><tr><td colspan=2>'+
                                    '<table id="innertbl'+tblrows+'">'+
                                    '</table></td></tr>'+
                                    '<tr>'+
                                        '<td width="156" align="right" valign="middle" class="add-new-user-text"> &nbsp; </td>'+
                                        '<td width="724" align="left" valign="top">'+
                                            '<a>'+
                                                '<img onmouseover="this.src=\'html/images/add-attribute-value-hover.png\';" onmouseout="this.src=\'html/images/add-attribute-value.png\';" src="html/images/add-attribute-value.png" title="Add Attribute Value" onclick="addnewbox('+tblrows+',\''+currency+'\');" alt="Add Attribute Value">'+
                                            '</a>'+
                                            
                                        '</td>'+
                                    '</tr>'+
                                '</table>';                            
        cellText.innerHTML = tblstring;        
        addnewbox(tblrows,currency);        
}
function addnewbox(id,currency){    
  var tbl = document.getElementById('innertbl'+id);
  var tblrows = countinnerboxrow('innertbl'+id);  
  var    row = tbl.insertRow(tblrows);
        row.id = tblrows;
        tblrows = (tblrows+1);
  var    cellText = row.insertCell(0);
  var    tblstring =  '<table><tr>'+
                        '<td width="156" align="right" valign="middle" class="add-new-user-text"> Value: </td>'+
                        '<td width="724" align="left" valign="top">'+
                            '<input name="attri_vals['+id+'][]" type="text" class="add-new-user-textarea fl" style="width: 20%;" id="val'+tblrows+'" value=""  maxlength="200" />'+
                            '<div class="mgl10 fl mgt10"> Price : </div>'+
                            '<span class="fl mgt10">'+currency+'</span>'+
                            '<input name="attri_price['+id+'][]" type="text" class="add-new-user-textarea fl" style="width: 13%;"  onkeypress="return KeycheckWithDecimal(event);" id="price'+tblrows+'" value="0" maxlength="200" />'+
                            '<a class="fl mgt10 mgl5">'+
                                '<img onmouseover="this.src=\'html/images/remove-attribute-value-hover.png\';" onmouseout="this.src=\'html/images/remove-attribute-value.png\';" src="html/images/remove-attribute-value.png" title="Remove Attribute Value" onclick="removechildbox(\''+'innertbl'+id+'\',this);" id="'+tblrows+'" alt="Remove Attribute Value">'+
                            '</a>'+
                        '</td>'+
                    '</tr>'+
                    '</table>';
        cellText.innerHTML = tblstring;  
  
}
function removechildbox(table,obj){
    var curentrow = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
    var cuurentid = curentrow.id;    
    var tbl = document.getElementById(table);
    var tblrows = countinnerboxrow(table);
    for(var i=0; i<= tblrows; i++) {
        var row = tbl.rows[i];       
        var rowid = row.id;        
        if(cuurentid == rowid) {
                tbl.deleteRow(i);
                break;
        }
    }
    var norows = countboxrow();
        if(norows == 0){
            document.getElementById('firsttbl').style.display = 'block';
            document.getElementById('sectbl').style.display = 'none';
        }
}
function removethisbox(obj){
var curentrow = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
var cuurentid = curentrow.id;
var tbl = document.getElementById('sectbl');
var tblrows = countboxrow();
for(var i=0; i<= tblrows; i++) {
    var row = tbl.rows[i];    
    var rowid = row.id;
    if(cuurentid == rowid) {       
            tbl.deleteRow(i);
            break;        
    }
}
var norows = countboxrow();
    if(norows == 0){
        document.getElementById('firsttbl').style.display = 'block';
        document.getElementById('firsttblclone').style.display = 'none';
        document.getElementById('sectbl').style.display = 'none';
    }
}