var order = new Array();
var edit = -1;
var brands = new Array("Выберите производителя", "Claas", "Massey Ferguson", "Case", "New Holland", "Deutz Fahr", "другой");
var model;

function tableRedraw() {
    var counter = 0;
    var content = '<form onSubmit="enter();"><table width="100%">';
    content += '<tr id="header"><td>№</td><td>№ по каталогу </td><td>Название</td>';
    content += '<td>Кол-во</td><td colspan="4" width="156"></td></tr>';
    for (i=0; i < order.length; i++) {
        if (order[i][0]<0) {
            var model = 'модель: не указана';
            if (order[i][1]) model = 'модель: '+order[i][1];
            content += '<tr id="row'+i+'" style="background-color:#C3C4F9;"><td colspan="4"><b>'+brands[-order[i][0]]+'</b> '+model;
            content += '</td><td>';
            if (i > 0) {
                content += '<a href="javascript:void(0);" onClick="moveUp('+i+');">Вверх</a>';
            } else {
                content += '<span style="color:#999;font-size:7pt;">Вверх</span>';
            }
            content += '</td><td>';
            if (i < order.length-1) {
                content += '<a href="javascript:void(0);" onClick="moveDown('+i+');">Вниз</a>';
            } else {
                content += '<span style="color:#999;font-size:7pt;">Вниз</span>';
            }
            content += '</td><td><a href="javascript:void(0);" onClick="editSection('+i;
            content += ')">Изменить</a></td><td><a href="javascript:void(0);" onClick="removeItem('+i;
            content += ')">Удалить</a></td></tr>';
            counter++;
        } else {
            content += '<tr id="row'+i+'"><td>'+(i+1-counter)+'</td><td>'+order[i][0]+'</td><td>'+order[i][1];
            content += '</td><td align="right">'+order[i][2]+'</td><td>';
            if (i > 0) {
                content += '<a href="javascript:void(0);" onClick="moveUp('+i+');">Вверх</a>';
            } else {
                content += '<span style="color:#999;font-size:7pt;">Вверх</span>';
            }
            content += '</td><td>';
            if (i < order.length-1) {
                content += '<a href="javascript:void(0);" onClick="moveDown('+i+');">Вниз</a>';
            } else {
                content += '<span style="color:#999;font-size:7pt;">Вниз</span>';
            }
            content += '</td><td><a href="javascript:void(0);" onClick="editItem('+i;
            content += ')">Изменить</a></td><td><a href="javascript:void(0);" onClick="removeItem('+i;
            content += ')">Удалить</a></td></tr>';
        }
    }
    content += '<tr id="row_edit"><td><div class="triangle"></div></td><td><input type="text" name="cat_num" id="cat_num" size="10"/></td>';
    content += '<td><input type="text" name="cat_name" id="cat_name" size="22"/></td>';
    content += '<td><input type="text" name="quantity" id="quantity" size="3"/></td><td colspan="4" align="center">';
    content += '<a href="javascript:void(0);" onClick="addItem();"/>Сохранить</a></td></tr>';
    content += '</table><input type="submit" style="display:none"></form>';
    document.getElementById('table').innerHTML = content;
    edit = -1;
    var f = function() { if(document.getElementById('cat_num')) document.getElementById('cat_num').focus(); }
    setTimeout(f, 20);
}

function addItem() {
    if (edit < 0) {
        order.push([document.getElementById('cat_num').value, document.getElementById('cat_name').value,
            document.getElementById('quantity').value]);
    } else {
        order[edit][0] = document.getElementById('cat_num').value;
        order[edit][1] = document.getElementById('cat_name').value;
        order[edit][2] = document.getElementById('quantity').value;
    }
    document.getElementById('cat_num').value = '';
    document.getElementById('cat_name').value = '';
    document.getElementById('quantity').value = '';
    document.getElementById('add_section').style.display = 'block';
    tableRedraw();
}

function removeItem(i) {
    order.splice(i,1);
    tableRedraw();
}

function editItem(i) {
    document.getElementById('add_section').style.display = 'none';
    document.getElementById('row_edit').parentNode.removeChild(document.getElementById('row_edit'));
    document.getElementById('row'+i).childNodes[0].innerHTML = '<div class="triangle"></div>';
    document.getElementById('row'+i).childNodes[1].innerHTML = '<input type="text" name="cat_num" id="cat_num" size="10"/>';
    document.getElementById('row'+i).childNodes[2].innerHTML = '<input type="text" name="cat_name" id="cat_name" size="22"/>';
    document.getElementById('row'+i).childNodes[3].innerHTML = '<input type="text" name="quantity" id="quantity" size="3"/>';
    document.getElementById('row'+i).childNodes[4].innerHTML = '<a href="javascript:void(0);" onClick="addItem()"/>Сохранить</a>';
    document.getElementById('row'+i).removeChild(document.getElementById('row'+i).childNodes[5]);
    document.getElementById('row'+i).removeChild(document.getElementById('row'+i).childNodes[5]);
    document.getElementById('row'+i).removeChild(document.getElementById('row'+i).childNodes[5]);
    document.getElementById('row'+i).childNodes[4].colSpan = '4';
    document.getElementById('row'+i).childNodes[4].align = 'center';
    
    document.getElementById('row'+i).style.backgroundColor = '#FFCB91';
    document.getElementById('cat_num').value = order[i][0];
    document.getElementById('cat_name').value = order[i][1];
    document.getElementById('quantity').value = order[i][2];
    edit  = i;
    document.getElementById('cat_num').focus();
}

function addSection() {

    document.getElementById('add_section').style.display = 'none';
    
    var content = '<select name="brand" id="brand" style="width:220px;" onChange="model=prompt(\'Если Вы знаете модель, пожалуйста укажите её. Также здесь можно указать примечания, уточнения и т.п.\', \'\');saveSection()"';
    content += ' onFocus="if(this.firstChild.value == 0) this.firstChild.disabled = \'disabled\';">';
    for (i=0; i < brands.length; i++) {
        content += '<option value="'+(-i)+'">'+brands[i]+'</option>';
    }
    content += '</select>';

    document.getElementById('row_edit').removeChild(document.getElementById('row_edit').childNodes[2]);
    document.getElementById('row_edit').removeChild(document.getElementById('row_edit').childNodes[2]);
    document.getElementById('row_edit').removeChild(document.getElementById('row_edit').childNodes[2]);
    document.getElementById('row_edit').childNodes[1].innerHTML = content;
    document.getElementById('row_edit').childNodes[1].colSpan = '7';
    document.getElementById('row_edit').childNodes[1].align = 'left';
}

function saveSection() {
    if (edit < 0) {
        order.push([document.getElementById('brand').value, model, '']);
    } else {
        order[edit][0] = document.getElementById('brand').value;
        order[edit][1] = document.getElementById('model').value;
    }
    document.getElementById('add_section').style.display = 'block';
    tableRedraw();
}

function editSection(i) {
    document.getElementById('add_section').style.display = 'none';
    var content = '<select name="brand" id="brand" style="width:140px;">';
    for (j=1; j < brands.length; j++) {
        var selected = '';
        if (order[i][0] == -j) selected = 'selected="selected"';
        content += '<option value="'+(-j)+'"'+selected+'>'+brands[j]+'</option>';
    }
    content += '</select> модель: <input type="text" id="model" value="'+order[i][1]+'"/>';
    document.getElementById('row_edit').parentNode.removeChild(document.getElementById('row_edit'));
    document.getElementById('row'+i).childNodes[0].innerHTML = content;    
    document.getElementById('row'+i).childNodes[1].innerHTML = '<a href="javascript:void(0);" onClick="saveSection();"/>Сохранить</a>';
    document.getElementById('row'+i).removeChild(document.getElementById('row'+i).childNodes[2]);
    document.getElementById('row'+i).removeChild(document.getElementById('row'+i).childNodes[2]);
    document.getElementById('row'+i).removeChild(document.getElementById('row'+i).childNodes[2]);
    document.getElementById('row'+i).childNodes[1].colSpan = '4';
    document.getElementById('row'+i).childNodes[1].align = 'center';
    edit  = i;
    document.getElementById('cat_num').focus();
}

function moveUp(i) {
    var tmp = order[i];
    order[i] = order[i-1];
    order[i-1] = tmp;

    tableRedraw();
}

function moveDown(i) {
    var tmp = order[i];
    order[i] = order[i+1];
    order[i+1] = tmp;

    tableRedraw();
}

function init() {
    order = orderData;
    tableRedraw();
    addSection();
}

function enter() {
    if(document.getElementById('cat_num')) addItem();
    if(document.getElementById('brand')) saveSection();
}