<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
	<head>
		<title>Grid Test</title>

		<!-- Basic action stuff -->
		<script src="js/jquery.js"></script>

		<script src="../egw_action.js"></script>
		<script src="../egw_action_common.js"></script>

		<!-- Popup stuff -->
		<script src="../egw_action_popup.js"></script>
		<script src="../egw_menu.js"></script>
		<script src="../egw_menu_dhtmlx.js"></script>
		<script src="js/dhtmlxcommon.js"></script>
		<script src="js/dhtmlxmenu.js"></script>
		<script src="js/dhtmlxmenu_ext.js"></script>

		<!-- Grid stuff -->
		<script src="../egw_grid_view.js"></script>
		<script src="../egw_grid_columns.js"></script>
		<script src="../egw_grid_data.js"></script>
		<script src="../egw_grid.js"></script>
		<script src="../egw_stylesheet.js"></script>

		<link rel="stylesheet" href="grid.css"/>
		<link rel="stylesheet" href="skins/dhtmlxmenu_egw.css"/>
	</head>
	<body>
		<h1>Test for dynamically displaying and loading grid lines</h1>
		<b>Simulates network trafic by using window.setTimeout(), 100ms network latency</b>
		<button onclick="buildGrid();">Leak</button>
		<button onclick="clean();">Clean</button>
		<div id="container"></div>
		<script>
			var grid = null;
			var actionManager = null;
			var objectManager = null;

			var columns = 
				[
					{
						"id": "check",
						"type": EGW_COL_TYPE_CHECKBOX
					},
					{
						"id": "name",
						"caption": "Name",
						"type": EGW_COL_TYPE_NAME_ICON_FIXED,
						"sortable": EGW_COL_SORTABLE_EXTERNAL,
						"sortmode": EGW_COL_SORTMODE_ASC
					},
					{
						"id": "size",
						"maxWidth": 100,
						"caption": "Size"
					},
					{
						"id": "rights",
						"caption": "UNIX Filerights",
						"maxWidth": 150,
						"visibility": EGW_COL_VISIBILITY_INVISIBLE
					},
					{
						"id": "mime",
						"caption": "File-Type/MIME",
						"maxWidth": 150,
						"visibility": EGW_COL_VISIBILITY_INVISIBLE
					},
					{
						"id": "atime",
						"caption": "atime",
						"width": "15%",
						"visibility": EGW_COL_VISIBILITY_INVISIBLE
					},
					{
						"id": "ctime",
						"caption": "ctime",
						"width": "15%",
						"visibility": EGW_COL_VISIBILITY_INVISIBLE
					},
					{
						"id": "mtime",
						"caption": "mtime",
						"width": "15%",
						"visibility": EGW_COL_VISIBILITY_INVISIBLE
					},
					{
						"id": "owner",
						"caption": "owner",
						"width": "10%",
						"visibility": EGW_COL_VISIBILITY_INVISIBLE
					},
					{
						"id": "group",
						"caption": "group",
						"width": "10%",
						"visibility": EGW_COL_VISIBILITY_INVISIBLE
					}
				];

			var actions =
				[
					{
						"id": "folder_open",
						"iconUrl": "imgs/folder.png",
						"caption": "Open folder",
						"onExecute": alertClicked,
						"allowOnMultiple": false,
						"type": "popup",
						"default": true
					},
					{
						"id": "file_view",
						"iconUrl": "imgs/view.png",
						"caption": "View",
						"onExecute": alertClicked,
						"allowOnMultiple": false,
						"type": "popup",
					},
					{
						"id": "file_preview",
						"iconUrl": "imgs/preview.png",
						"caption": "Preview",
						"onExecute": alertClicked,
						"allowOnMultiple": false,
						"type": "popup",
						"default": true
					},
					{
						"id": "file_delete",
						"iconUrl": "imgs/delete.png",
						"caption": "Delete",
						"onExecute": alertClicked,
						"type": "popup",
						"group": 2
					},
					{
						"id": "file_edit",
						"iconUrl": "imgs/edit.png",
						"caption": "Edit file",
						"onExecute": alertClicked,
						"allowOnMultiple": false,
						"type": "popup"
					},
					{
						"id": "file_compress",
						"iconUrl": "imgs/compress.png",
						"caption": "Create ZIP archive",
						"onExecute": alertClicked,
						"type": "popup",
						"group": 1,
						"order": 1
					},
					{
						"id": "file_email",
						"iconUrl": "imgs/email.png",
						"caption": "E-Mail",
						"onExecute": alertClicked,
						"allowOnMultiple": false,
						"type": "popup",
						"group": 1,
						"order": 0
					},
					{
						"id": "file_compress_email",
						"caption": "Create ZIP and E-Mail",
						"onExecute": alertClicked,
						"type": "popup",
						"group": 1,
						"order": 2
					}
				];

			var listboxFolderLinks = [
				{"actionId": "folder_open", "enabled": true},
				{"actionId": "file_compress_email", "enabled": true},
				{"actionId": "file_compress", "enabled": true},
				{"actionId": "file_delete", "enabled": true}
			];

			function fetchDataProc(_elems, _columns, _callback, _context)
			{
				// Delay the result a bit to simulate real network traffic
				window.setTimeout(function() {
					var result = [];
					for (var i = 0; i < _elems.length; i++)
					{
//						console.log(_elems[i]);
						if (_elems[i].substr(0, "[CHILDREN]".length) == "[CHILDREN]")
						{
							var id = _elems[i].substr("[CHILDREN]".length);
							var children = [
								{
									"entryType": EGW_DATA_TYPE_RANGE,
									"prefix": id + "_child_",
									"canHaveChildren": true,
									"count": 20
								}
							];

							result.push({
								"id": id,
								"children": children,
								"opened": true
							});
						}
						else
						{
							var data = {};

							data["size"] = Math.floor(Math.random() * 1024) + "KiB";
							data["rights"] = "rwxr-xr--";
							data["mime"] = "image/png";
							data["atime"] = (new Date).toUTCString();
							data["mtime"] = (new Date).toUTCString();
							data["ctime"] = (new Date).toUTCString();
							data["owner"] = "as";
							data["group"] = "stylitedevs";

							result.push({
								"id": _elems[i],
								"data": data,
								"caption": _elems[i],
								"iconUrl": "imgs/folder.png",
								"group": "folder"
							});
						}
					}

					_callback.call(_context, result);
				}, 100);
			}

			function clean() {
				$j("#container").children().remove();
				actionManager = null;
				objectManager = null;
				grid = null;
			}

			function buildGrid() {
				clean();

				var cnt = $j(document.createElement("div"));
				$j("#container").append(cnt);

				actionManager = new egwActionManager();
				actionManager.updateActions(actions);

				objectManager = new egwActionObjectManager("", actionManager);

				grid = new egwGrid(cnt, columns, objectManager, fetchDataProc,
					null, window);
				grid.setActionLinkGroup("folder", listboxFolderLinks);
				grid.dataRoot.loadData(
					[
						{
							"entryType": EGW_DATA_TYPE_RANGE,
							"prefix": "root_elem_",
							"canHaveChildren": true,
							"count": 1000
						}
					]
				);
				grid.resize(1000, 500);
				grid.reload();
			}

			$j(document).ready(function() {
				buildGrid();
			});

			function check_positions(_grid, _delta)
			{
				var outer = grid.gridOuter.grid;

				if (typeof _grid == "undefined")
				{
					_grid = outer;
				}

				if (typeof _delta == "undefined")
				{
					_delta = 0;
				}


				var g = _grid;
				var delta = outer.scrollarea.scrollTop() - outer.scrollarea.offset().top;
				for (var i = 0; i < g.children.length; i++)
				{
					var rtop = g.children[i].parentNode.offset().top + delta;
					var itop = g.children[i].position + _delta;

					var rheight = g.children[i].parentNode.outerHeight();
					var iheight = g.children[i].getHeight();

					console.log(Math.round(itop - rtop), Math.round(iheight - rheight), g.children[i].visible);

					if (g.children[i].containerClass == "grid" && g.children[i].visible)
					{
						console.log("-->");
						check_positions(g.children[i], itop);
						console.log("<--");
					}
				}
			}

			function alertClicked(_action, _senders)
			{
				var ids = "";
				for (var i = 0; i < _senders.length; i++)
					ids += _senders[i].id + ((i < _senders.length - 1) ? ", " : "");

				alert("Action '" + _action.caption + "' executed on elements '"
					+ ids + "'");
			}
		</script>
	</body>
</html>