/**********************************************************************
* Drag & Drop
***********************************************************************/

var HomeColumns = {

	addNewField: function(id) {
		orgid = id;
		id += '1';
		/*
		** Wrzucanie nowego boxa domyslnie do pierwszego kontenera
		*/
		if (!$(id)) {
			if ($("droponme3c1")) {
				htmlElement = $("droponme3c1");
			}
			if ($("droponme2c1")) {
				htmlElement = $("droponme2c1");
			}

			/*
			** Utworzenie boxa o danym id, do ktorego
			** za pomocja funkcji sru zaladowana bedzie tresc
			*/
			var box = document.createElement('div');
			box.setAttribute('id', id);
			box.className = 'window-box';
			box.innerHTML = HomeColumns.createBox(id);

			$(orgid + 'add').className = 'checked';
			$(htmlElement).appendChild(box);
			new Effect.Highlight($(id));
			sru(id);
		}
		else {
			HomeColumns.close(id);
			$(orgid + 'add').className = '';
		}

		HomeColumns.save();
		HomeColumns.setsortable();
		Lightbox.hideAll();
	},

	createBox: function(id) {
		return '<div class="window-header">' +
		'<a href="javascript:void(0)" class="window-close" title="zamknij" onclick="HomeColumns.close(\'' + id + '\');"><img src="'+ ImgRoot +'spacer.gif"/></a>' +
		'<a href="javascript:void(0)" class="window-refresh" title="odśwież" onclick="sru(\'' + id + '\');"><img src="'+ ImgRoot +'spacer.gif"/></a>' +
		'<p id="' + id + '/title"> &lt;title&gt; </p>' +
		'</div>' +
		'<div class="window-content" id="' + id + '/content">Loading ...</div>' +
		'<div class="window-bottom">' +
		'</div>';

	},

	changeto2col: function() {
			var resultsdrop = new Array(); 	// id div drop
			var indexdrop 	= 0; 			// ile paneli w postaci kolumn
			var alldrag 	= new Array(); 	// id div drag
			var children 	= $A($("draganddropcontent").childNodes);

			children.each(function(child) {
				if (child.className == 'panel') {
					resultsdrop[indexdrop++] = child.id;
				}
			});

			if (resultsdrop) { //id div drop
				for (var j = 0; j < resultsdrop.length; j++) { //wyliczamy ile w danym panelu jest elementow drag
					var childrendrop = $A($(resultsdrop[j]).childNodes);
					var indexdrag = 0;
					var resultsdrag = new Array(); //id div drag

					childrendrop.each(function(childdrop) {
						if (childdrop.className == 'window-box') {
							resultsdrag[indexdrag++] = childdrop;
						}
					});
					alldrag[j] = resultsdrag;
				}
			}
			if (alldrag[2]) {
				if (alldrag[2].length != 0) {
					/*
					** Jezeli jest cos w 3 kolumnie pyta o potwierdzenie
					*/
					var answer = confirm("Ostatnia kolumna nie jest pusta.\nCzy mam przenieść jej zawartość do pozostałych kolumn?");
					if (!answer) {
						return false;
					}
				}
			}

			for (var j = 0; j < resultsdrop.length; j++) {
				/*
				** Wyliczamy ile w danym panelu jest elementow drag
				*/
				$("draganddropcontent").removeChild($(resultsdrop[j]));
			}
			$("draganddropcontent").innerHTML = '<div id="draganddropcontent" style="margin-right: 20px;"><div id="droponme2c1" class="panel"></div><div id="droponme2c2" class="panel"></div></div>';

			for (var j = 0; j < alldrag.length; j++) {
				resultsdrag = alldrag[j];

				for (var i = 0; i < resultsdrag.length; i++) {
					if (j == 2) {
						targetdrop = "droponme2c1";

						var wynik = Math.round(resultsdrag.length / 2) - 1;

						if (i > wynik) {
							targetdrop="droponme2c2";
						}
						$(targetdrop).innerHTML += '<div id="' + resultsdrag[i].id + '" class="' + 'window-box' + '"></div>';
						var dropname = resultsdrag[i].id;
						$(dropname).innerHTML = resultsdrag[i].innerHTML;
					}
					else {
						(j == 0) ? targetdrop = "droponme2c1" : targetdrop = "droponme2c2";
						$(targetdrop).innerHTML += '<div id="' + resultsdrag[i].id + '" class="' + 'window-box' + '"></div>';
						var dropname = resultsdrag[i].id;
						$(dropname).innerHTML = resultsdrag[i].innerHTML;
					}
				}
			}
		 	$("draganddropcontent").innerHTML += '<div style="clear: both;"/>';
			setPageHeight();
			this.setsortable();
			this.save();
	},

	changeto3col: function () {
		var resultsdrop = new Array(); 	// id paneli
		var indexdrop 	= 0; 			// ile paneli w postaci kolumn
		var alldrag 	= new Array(); 	// id div drag
		var children 	= $A($("draganddropcontent").childNodes);

		children.each(function(child) {
			if (child.className == 'panel') {
				resultsdrop[indexdrop++] = child;
			}
		});

		if (resultsdrop.length == 2) {
			for (var j = 0; j < resultsdrop.length; j++) {
				// wyliczamy ile w danym panelu jest elementow drag
				var childrendrop = $A($(resultsdrop[j]).childNodes);
				var indexdrag = 0;
				var resultsdrag = new Array(); //id div drag

				childrendrop.each(function(childdrop) {
					if (childdrop.className == 'window-box') {
						resultsdrag[indexdrag++] = childdrop;
					}
				});
				alldrag[j] = resultsdrag;
			}

			for (var j = 0; j < resultsdrop.length; j++) {
				$("draganddropcontent").removeChild($(resultsdrop[j]));
			}
			$("draganddropcontent").innerHTML = '<div id="draganddropcontent" style="margin-right: 20px;"><div id="droponme3c1" class="panel"></div>' + '<div id="droponme3c2" class="panel"></div>' + '<div id="droponme3c3" class="panel"></div></div>';
			$('droponme3c1').style.witdh = "33.3%";
			$('droponme3c2').style.witdh = "33.3%";
			$('droponme3c3').style.witdh = "33.3%";

			$("droponme3c1").innerHTML = resultsdrop[0].innerHTML;
			$("droponme3c2").innerHTML = resultsdrop[1].innerHTML;

		 	$("draganddropcontent").innerHTML += '<div style="clear: both;"/></div>';
		}
		setPageHeight();
		this.setsortable();
		this.save();
	},

	close: function(htmlElement) {
		/*
		** Funkcja zamykająca danego boxa
		*/
		var elem  = $(htmlElement + '/title');
		var title = elem.innerHTML;
		/*
		** TO DO: Testy - wesje językowe zwracane przez js
		*/
		var answer = confirm("Do you want to close this \"" + title + "\"?");
		if (answer) {
			droponme = $(htmlElement).parentNode;
			$(droponme).removeChild($(htmlElement));
			addid = htmlElement.slice(0, -1) + 'add';
			$(addid).className = '';
		}
		this.save();
	},

	save: function() {
		/*
		** Funkcja zapisująca stan boxow na stronie glownej do zmiennej sesji
		*/
		var postBody = new Array();

		$$('.panel').each(function(child) {
			postBody.push(child.id + ':' + $$('#' + child.id + ' .window-box').pluck('id').join(',') + ';');
		});
		console.log('HomeColumns.save: "' + postBody + '"');
		sru("1/main/save", postBody);
	},

	setsortable: function() {
		/*
		** Pobranie elementow droponme
		*/
		console.log('HomeColumns.setsortable:elements: ' + $$('#draganddropcontent .window-box').pluck('id').join(','));
		var lists = $$('#draganddropcontent .panel');
		console.log('HomeColumns.setsortable:lists: ' + lists.pluck('id').join(','));
		lists.each(function (id) {
			Sortable.create(id, {
				containment: lists,
				contraint: false, 
				elements: $$('#draganddropcontent .window-box'),
				handles: $$('#draganddropcontent .window-header'),
				dropOnEmpty: true,
				hoverclass: 'panelhover',
				tag: 'div',
				onUpdate: function() {
					console.log('Sortable.onUpdate -> HomeColumns.save');
					HomeColumns.save();
				}
			});
		});
	},

	slide: function(id) {
		/*
		** Funkcja odpowiedzialna za zawijanie boxa
		*/
		parents = $(id).childNodes;
		for (var i=0; i < parents.length; i++) {
			if (parents[i].className == 'window-content') {
				toslide = parents[i].id; //id contenta
				if (Element.hasClassName(id, 'hide')) {
					new Effect.toggle($(toslide), 'slide');
					Element.removeClassName(id, 'hide');
					//Podmiana zdjecia header->span->img
					parents = $(id).childNodes;
					for (var i=0; i < parents.length; i++) {
						if (parents[i].className == 'window-header') {
							//podmiana zdjecia
							parents[i].childNodes[0].className = "slide-on";
						}
					}
				}
				else {
					new Effect.toggle($(toslide), 'slide');
					Element.addClassName(id,'hide');
					for (var i=0; i < parents.length; i++) {
						if (parents[i].className == 'window-header') {
							//podmiana zdjecia
							parents[i].childNodes[0].className = "slide-off";
						}
					}
				}
			}
		}
	},

	modules: function() {
		if (!Element.visible('modules_list')) {
			$('draganddrop').style.width = '74%';
		}
		new Effect.toggle($('modules_list'), 'appear', {
			duration: 0.4,
			afterFinish: function() {
				if (Element.visible('modules_list')) {
					sru('1/main/modules');
				}
				else {
					$('draganddrop').style.width = '100%';
				}
			}
		});
	},

	load: function(newcont) {
		/*
		** Funkcja odtwarzajaca wyglada strony glownej
		*/
		var boxs = newcont.split(',');
		/*
		** Parsowanie danych zwroconych przez php
		*/
		var droponme3c1 = new Array();
		var droponme3c2 = new Array();
		var droponme3c3 = new Array();
		var droponme2c1 = new Array();
		var droponme2c2 = new Array();

		var conteners_names = new Array('droponme3c1', 'droponme3c2', 'droponme3c3', 'droponme2c1','droponme2c2');
		var conteners = new Array(droponme3c1, droponme3c2, droponme3c3, droponme2c1, droponme2c2);

		var len = boxs.length;
		var actual = null;

		for (var i = 0; i < len; i++) {
			if (boxs[i] != '') {
				switch(boxs[i]) {
					case 'droponme3c1': actual = droponme3c1; break;
					case 'droponme3c2': actual = droponme3c2; break;
					case 'droponme3c3': actual = droponme3c3; break;
					case 'droponme2c1': actual = droponme2c1; break;
					case 'droponme2c2': actual = droponme2c2; break;
					default:
						if (actual != null) {
							actual.push(boxs[i]);
						}
					break;
				}
			}
		}

		var nr = 0;
		/*
		** Zapisanie na nowo boxow i ich odswiezenie
		*/
		conteners.each(function(element) {
			element.each(function(boxid) {
				var box = document.createElement('div');
				box.setAttribute('id', boxid);
				box.className = 'window-box';
				box.innerHTML = HomeColumns.createBox(boxid);

				$(conteners_names[nr]).appendChild(box);
				new Effect.Highlight($(box.id));
				sru(boxid);
			});
			nr++;
		});

		this.setsortable();
	}
};


function collapseElement(elem) {
	if ($(elem).visible()) {
		new Effect.SlideUp($(elem), { duration: 0.2 });
	}
	else {
		new Effect.SlideDown($(elem), { duration: 0.2 });
	}
}

function collapseExpandAll() {
	var collapses = document.getElementsByClassName('collapse', 'page-expand-scroll');
	collapses.each(function(child) {
		tocollapse 	= $A($(child).childNodes);
		if (!(tocollapse[1].visible())) {
			id_body_collapse = tocollapse[1].id;
			pos = id_body_collapse.split('-')[2];
			collapseExpand(pos);
		}
	});
}

function rollenExpandAll() {
	var collapses = document.getElementsByClassName('collapse', 'page-expand-scroll');
	collapses.each(function(child) {
		tocollapse 	= $A($(child).childNodes);
		if ((tocollapse[1].visible())) {
			id_body_collapse = tocollapse[1].id;
			pos = id_body_collapse.split('-')[2];
			collapseExpand(pos);
		}
	});
}

function collapseExpand(pos) {
	if (Element.hasClassName('collapse-' + pos, 'collapse-down')) {
		Element.removeClassName('collapse-' + pos, 'collapse-down');
		Element.addClassName('collapse-' + pos, 'collapse-up');
	}
	else if (Element.hasClassName('collapse-' + pos, 'collapse-up')) {
		Element.removeClassName('collapse-' + pos, 'collapse-up');
		Element.addClassName('collapse-' + pos, 'collapse-down');
	}
	collapseElement('collapse-body-' + pos);
}