grHead = {
    photo: "фото",
    name: "название",
    geom: "размеры",
    m2cnt: "шт / м^2",

    price1: "цена 1",
    price2: "цена 2",
    price3: "цена 3"

};

function anime() {
    var gle = document.getElementsByTagName("img");
    // навешиваем клики
    for(var jj=gle.length - 1; jj > -1 ; --jj) {
	var el = gle[jj];
//	alert(el.className);
	if(el.className == "galery-image") {
	    el.onclick = function(e) {
		showPhoto(this);
	    }
	}

	if(el.className == "item-photo") {
	    el.onclick = function(e) {
		showPhoto(this);
	    }
	}
	
	
    }
    
    // навешиваем ротаторы
    gle = document.getElementsByTagName("td");
    for(var jj=gle.length - 1; jj > -1 ; --jj) {
	var el = gle[jj];
	if(el.className == "group-galery" ) {
	    var imgs = el.getElementsByTagName("img");
	    if(imgs.length > 4) {
		// тушим лишние картинки
		for(var n=4; n < imgs.length ; n++) imgs[n].style.display = 'none';
		// проставляем указатели
		// генерим кнопки
		var imgF = document.createElement("button");

		var imgP = document.createElement("button");
		
		imgF.innerHTML = '&rarr;';
		imgP.innerHTML = '&larr;';
		
		imgF.className = 'galery-button';

		imgP.className = 'galery-button';

		imgF.onclick = function(e) {
		    this.parentNode.firstChild.disabled = false;
		    var el = this.parentNode;
		    var pt = el.pointer;
		    el.imgs[(pt + 4)].style.display = '';
		    el.imgs[pt].style.display = 'none';
		    this.parentNode.pointer++;
		    if(this.parentNode.pointer == (el.imgs.length - 4)) this.disabled = true;
		}

		imgP.onclick = function(e) {
		    this.parentNode.lastChild.disabled = false;
		    var el = this.parentNode;
		    var pt = el.pointer;
		    el.imgs[(pt + 3)].style.display = 'none';
		    el.imgs[(pt - 1)].style.display = '';
		    this.parentNode.pointer--;
		    if(this.parentNode.pointer == 0) this.disabled=true;
		}
		imgP.disabled = true;
		
		el.appendChild(imgF);
		el.insertBefore(imgP,el.firstChild);
		el.pointer = 0;
		el.imgs = imgs;
	    }
	}
    }

    
}

function doSave() {

    doCleanup();

    f = document.getElementById("fTableInp");
    f.value = document.getElementById("groups").innerHTML;
//    alert(f.value);
    f.form.submit();
    return true;
}

function doCleanup() {

    btn = document.getElementById("editbutton");
    btn.parentNode.removeChild(btn);
    btn = document.getElementById("editor-panel");
    btn.parentNode.removeChild(btn);
    
    
    divgrps = document.getElementById("groups");
    allgrps = divgrps.getElementsByTagName("table");

    for(var i=0; i<allgrps.length; i++) {
	var tbl = allgrps[i];
	var allrows = tbl.getElementsByTagName("tr");
	for(var j=allrows.length - 1; j > -1 ; --j) {
	    var row = allrows[j];
//	    alert(row.firstChild.innerHTML);
	    //if(row.lastChild.className == "cpanel" ) 
	    row.removeChild(row.lastChild);
	    switch(row.className) {
		case "item":
		    break;
		case "galery":
		    var gle = row.firstChild.getElementsByTagName("*");
		    for(var jj=gle.length - 1; jj > -1 ; --jj) {
			var el = gle[jj];
			if(el.tagName != "IMG") el.parentNode.removeChild(el);
		    }
		    break;
		case "group-head-tr":
		    break;
		default:
	    }
	}
	
    	
    }

}



function addTable() {

    var cont = document.getElementById("groups");
    // создаем таблицу
    var tbl = document.createElement("table");
    cont.appendChild(tbl);
    tbl.className = "plgroup";

    
    // добавляем пустую строку
    var tbody = document.createElement("tbody");
    var empline = emptyRow();
    tbody.appendChild( empline );

    // добавляем галерею в футер таблицы
    var tfoot = document.createElement("tfoot");
    var galery = document.createElement("tr");
    galery.className = "galery";
    var imgCanvas = document.createElement("td");
    imgCanvas.className = "group-galery";
    galery.appendChild(imgCanvas);
    imgCanvas.setAttribute("colspan",(tbody.getElementsByTagName('td').length));
    tfoot.appendChild( galery );

    var thead = document.createElement("thead");
    var htr = document.createElement("tr");
    htr.className = 'group-name-tr';
    var htd = document.createElement("td");
    htd.className = 'group-name-td';
    htd.innerHTML = 'Новая группа';
    htd.setAttribute("colspan",(tbody.getElementsByTagName('td').length));
    htr.appendChild(htd);
    thead.appendChild(htr);

    var hdtr = document.createElement("tr");
    hdtr.className = 'group-desc-tr';
    var htdt = document.createElement("td");
    htdt.className = 'group-desc-td';
    htdt.innerHTML = 'описание новой группы';
    htdt.setAttribute("colspan",(tbody.getElementsByTagName('td').length));
    hdtr.appendChild(htdt);
    thead.appendChild(hdtr);


    
    thead.appendChild(rendhead());
    thead.className='item-header';
    tbl.appendChild(thead);

    tbl.appendChild(tfoot);
    tbl.appendChild(tbody);

    enTableEditor(tbl);

    return false;
}

function rendhead() {
	var hdr = document.createElement("tr");
	hdr.className = 'group-head-tr';
	for(prop in grHead) if (grHead.hasOwnProperty(prop)) {
	    clm = document.createElement("td");
	    clm.className = "group-head-td";
	    clm.innerHTML = grHead[prop];
	    hdr.appendChild(clm);
	}
	return hdr;
}



function edit(event) {
    var value = prompt("Значение, плз",this.innerHTML);
    if(typeof(value) != "undefined") {
	if(value=="") {
	    this.parentNode.parentNode.removeChild(this.parentNode);
	} else this.innerHTML = value;
    }
}

function droptable(btn) {
    me = btn.parentNode.parentNode.parentNode.parentNode;
    me.parentNode.removeChild(me);
}


function uptable(btn) {
    me = btn.parentNode.parentNode.parentNode.parentNode;
    prv = me.previousSibling;
    if(prv.className='plgroup') {
	prv.parentNode.insertBefore(me,prv);
    }
}

function downtable(btn) {
    me = btn.parentNode.parentNode.parentNode.parentNode;
    nxt = me.nextSibling;
    if(nxt.className='plgroup') {
	me.parentNode.insertBefore(nxt,me);
    }
}


function uprow(btn) {
    row = btn.parentNode.parentNode;
    prv = row.previousSibling;
    if(prv.className == "item") {
	prv.parentNode.insertBefore(row,prv);
    }
}

function downrow(btn) {
    row = btn.parentNode.parentNode;
    nxt = row.nextSibling;
    if(nxt.className == "item") {
	row.parentNode.insertBefore(nxt,row);
    }
}

function droprow(btn) {
    row = btn.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

function addrow(btn) {
    var tbl = btn.parentNode.parentNode.parentNode.parentNode;
    var tbody = tbl.getElementsByTagName("tbody")[0];
//    alert(tbody.tagName);
    var n = emptyRow();
    enRowEditor(n);
    tbody.insertBefore(n,tbody.firstChild);
}

function enTableEditor(tbl) {
    	// навешиваем обработчики на клик
    	var allrows = tbl.getElementsByTagName("tr")
	for(var j=0; j<allrows.length; j++) {
	    var tr = allrows[j];
	    enRowEditor(tr);
	}

}


function enRowEditor(tr) {
	// для каждого типа строки своя контрольная панелька
	var cpanel = document.createElement("td");

	switch(tr.className) { 

	    case "group-name-tr" :
		tr.firstChild.onclick = edit;
		break;
	    case "group-desc-tr" :
		tr.firstChild.onclick = edit;
		break;
	    case "item" :
		// первая - фото
		new DropTarget(tr.firstChild.firstChild);
		// обходим навешиваем изменялки
		var tds = tr.getElementsByTagName("td");
		for(var h=1; h<tds.length; h++) {
		    tds[h].onclick = edit;
		}

		// к итемам довешиваем контрольную панель итемофф
		cpanel.innerHTML = "<a class=strelka onclick='uprow(this);'>&uarr;</a> <a class=strelka onclick='downrow(this);'>&darr;</a> <a class=remove onclick='droprow(this);'>X</a>";
		break;
	    case "group-head-tr" :
		// изменялка шапки
		var tds = tr.getElementsByTagName("td");
		for(var h=0; h<tds.length; h++) {
		    tds[h].onclick = edit;
		}

		cpanel.innerHTML = "<a class=strelka onclick='addrow(this);'>+</a> <a class=strelka onclick='uptable(this);'>&uarr;</a> <a class=strelka onclick='downtable(this);'>&darr;</a> <a class=remove onclick='droptable(this);'>X</a>";
		break;
	    case "galery" :
		// вычищаем кнопки прокрутки 
		var gle = tr.firstChild.getElementsByTagName("button");
		for(var jj=gle.length - 1; jj > -1 ; --jj) {
			var el = gle[jj];
			el.parentNode.removeChild(el);
		}

		gle = tr.firstChild.getElementsByTagName("img");
		for(var jj=gle.length - 1; jj > -1 ; --jj) {
			var el = gle[jj];
			el.style.display = '';
		}
		
		//и врубаем видимость для всех изображений
		var uid = "uid" + Math.random() * 1000000 ;
		tr.firstChild.id = 'gal-' + uid;
		var div = document.createElement('div');
		var ifr = document.createElement('iframe');
		ifr.className = "galery-ifame";
		div.className = "galery-photo-div";
		ifr.setAttribute("name","iframe-"+uid);
		div.appendChild(ifr);
		document.body.appendChild(div);
		var addInp = document.createElement('div');
		addInp.innerHTML = "<form method=POST class='embed-form' target='iframe-" + uid + "' enctype='multipart/form-data'><input type=file name='" + uid + "' onchange='this.form.submit();'></form>";
		
		tr.firstChild.appendChild(addInp);
		
		pimg = tr.firstChild.getElementsByTagName("img");
		for(var hh = 0; hh < pimg.length ; hh++) {
		    pimg[hh].onclick = function(e) {}
		    new DragObject(pimg[hh]);
		}
		var img = document.createElement("img");
		img.src='/imgs/trash.gif';
		img.className='galery-trash';
		new DropTarget(img);
		cpanel.appendChild(img);
		
		
		break;
	    default: 
//		cpanel.innerHTML = "default";
	}
	cpanel.className = 'cpanel';
	cpanel.style.textAlign = 'right';
	cpanel.style.paddingRight = '5px';
	tr.appendChild(cpanel);
}



function editor() {
    btn = document.getElementById("editbutton");
    btn.parentNode.removeChild(btn);
    
    btn = document.getElementById("editor-panel").style.display = 'inline';
    
    
    divgrps = document.getElementById("groups");
    allgrps = divgrps.getElementsByTagName("table");

    for(var i=0; i<allgrps.length; i++) {
	tbl = allgrps[i];
	
	enTableEditor(tbl);	
    	
    }
    return false;
}

function emptyRow() {
    var tr = document.createElement("tr");
    tr.className = 'item';
    for(prop in grHead) if (grHead.hasOwnProperty(prop)) {
	var clm = document.createElement("td");
	clm.className = "item-" + prop;
	clm.innerHTML = "---";
	tr.appendChild(clm);
    }
    
    img = document.createElement("img");
    img.className = "item-photo";
    tr.firstChild.innerHTML = '';
    tr.firstChild.appendChild(img);
    return tr;
}

function hidePhoto(e) {
    div = document.getElementById("photo-bg");
    rdiv = document.getElementById("photo-real-bg");
    div.style.display = 'none';
    rdiv.style.display = 'none';
}


function showPhoto(img) {
    div = document.getElementById("photo-bg");
    rdiv = document.getElementById("photo-real-bg");
    img2 = document.getElementById("photo-img");
    img2.src = img.src;
    div.style.display = 'block';
    rdiv.style.display = 'block';
}