var counterIdCells = 80000;
var counterIdRows = 80000;


function createSpanCell()
{
    var text = "        ";
    return "<span style='min-width:100%;width:100%;heigth:100%;background-color: #ffdead;cursor:text;' onclick='renameItem(this);'>" +  text + "</span>";
}

function createSpanCellDelete()
{
    return "<span onclick='deleteRow(\"row" + counterIdRows +  "\");'><img src='/cake/img/left-del.gif'/></span>";
}


function createSpanCellDeleteColumn()
{
    return "<span onclick='deleteColumn(\"tableOne\",this.parentNode)'><img src='/cake/img/down-del.gif'/></span>";
}



function createErasableDroppable(id)
{
    Droppables.add(id, {accept: 'draggable',
			hoverclass: 'hover',
			onDrop: function(drag,drop,ev)
			{
			    var clone = drag.cloneNode(true);
			    clone.style.removeProperty('cursor');
			    clone.style.removeProperty('position');
			    clone.style.removeProperty('top');
			    clone.style.removeProperty('left');
			    clone.style.removeProperty('opacity');
			    // check if cell already have images - then simply
			    // add new image to that list
			    var imgList = drop.getElementsByTagName('img');
			    // if we already have images - then don't clear
			    // inner HTML - we can accumulate images in the cell
			    if(imgList.length==0)
			    {
				drop.innerHTML='';
			    }
			    clone.ondblclick = function()
			    {
				// if this image is last in the cell - then create new <span>
				var imgListIn = this.parentNode.getElementsByTagName('img');
				if(imgListIn.length==1)
				    this.parentNode.innerHTML=createSpanCell();
				else
				    // else - delete only this element
				    this.parentNode.removeChild(this);
			    };
			    drop.appendChild(clone);
			}});

    // make all images in this cell deletable
    var cell = document.getElementById(id);
    var images = cell.getElementsByTagName('img');

    for(var i=0;i<images.length;i++)
    {
	images[i].ondblclick = function()
			    {
				// if this image is last in the cell - then create new <span>
				var imgListIn = this.parentNode.parentNode.getElementsByTagName('img');
				if(imgListIn.length==1)
				    this.parentNode.parentNode.innerHTML=createSpanCell();
				else
				    // else - delete only this element
				    this.parentNode.removeChild(this);
			    };
    }
}

function createNewRow(id) {
    // take table
    this.table = document.getElementById(id);

    // find rows in the table
    var tableBody = table.getElementsByTagName('tbody');

    // find header of table
    var header = table.getElementsByTagName('thead');
    var headerRow = header[0].getElementsByTagName('th');
    var tableRowLen = headerRow.length;

    var newRow = document.createElement('tr');
    newRow.id = 'row' + counterIdRows;

    // append row to the body
    tableBody[0].appendChild(newRow);

    // next we need to loop throught all table rows and append cell to the end
    for(var no=0;no<tableRowLen;no++) {
	if(headerRow[no].id=='action')
	{
	    // create new element 'cell' and insert it to the end of row
	    var cell = document.createElement('td');
	    cell.className = 'action';
	    cell.innerHTML = createSpanCellDelete();
	    newRow.appendChild(cell);
	    counterIdRows++;
	}
	else
	{
	    // create new element 'cell' and insert it to the end of row
	    var cell = document.createElement('td');
	    cell.id = "cellTable" + counterIdCells;
	    cell.className = 'fancy';
	    cell.style.align = 'center';
	    cell.innerHTML=createSpanCell();
	    newRow.appendChild(cell);
	    createErasableDroppable("cellTable" + counterIdCells);
	    counterIdCells++;
	}
    }


    // create new draggable table
    t1 = new dragTable('tableOne');


}

function insertBeforeLast(row,cell,head)
{
    var cells = row.getElementsByTagName(head);
    if(cells.length>0)
	row.insertBefore(cell,cells[cells.length-1]);
    else
	row.appendChild(cell);
}

function createNewColumn(id) {
    // take table
    var table = document.getElementById(id);
    // create new element 'column header' and insert it to the end of 'thead'
    var columnHead = document.createElement('th');
    columnHead.className = 'fancy';
    deleteEl = createSpanCellDeleteColumn();
    wholeEl =  createSpanCell();
    columnHead.innerHTML= wholeEl + deleteEl;
    // find header of table
    var header = table.getElementsByTagName('thead');
    var headerRow = header[0].getElementsByTagName('tr');
    // append column header to the header of table
    insertBeforeLast(headerRow[0],columnHead,'th');

    // find rows in the table
    var tableBody = table.getElementsByTagName('tbody');
    var tableRows = tableBody[0].getElementsByTagName('tr');

    // next we need to loop throught all table rows and append cell to the end
    for(var no=0;no<tableRows.length;no++) {
	// create new element 'cell' and insert it to the end of row
	var cell = document.createElement('td');
	cell.className = 'fancy';
	cell.id = "cellTable" + counterIdCells;
	cell.style.align = 'center';
	cell.innerHTML=createSpanCell();
	insertBeforeLast(tableRows[no],cell,'td');

	createErasableDroppable("cellTable" + counterIdCells);
	counterIdCells++;
    }


    // create new draggable table
    t1 = new dragTable('tableOne');
}

function deleteRow(rowId) {
    // take table
    var row = document.getElementById(rowId);
    var table = row.parentNode;
    table.removeChild(row);

    // create new draggable table
    t1 = new dragTable('tableOne');
}

function deleteColumn(tableId,c){
    var root = document.getElementById(tableId);//tbody or table - correction if tbody is not present
    var allRows = root.getElementsByTagName('tr');// rows collection in the table
    var aCells = c.parentNode.getElementsByTagName('th');//cells collection in this row

    for(var j=0;j<aCells.length;j++){
	if(c==aCells[j]){var q=j;break}//gets the index of this cell in this row
    }

    // delete header
    c.parentNode.removeChild(aCells[q]);

    // delete row
    for(var i=0;i<allRows.length;i++) {
	childs = allRows[i].getElementsByTagName('td');
	if(q<childs.length)
	    allRows[i].removeChild(childs[q]);//removes the correspondent cells with the same index in their rows
    }

}