<html>
	<head>
		<title>Test page for the egw action stuff</title>

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

		<!-- JQuery is just used in this example. The egw_action scripts do not
		     need JQuery! -->
		<script src="js/jquery.js"></script>
		<script src="js/jquery-ui.js"></script>

		<!-- Popup stuff -->
		<link rel="stylesheet" type="text/css" href="skins/dhtmlxmenu_egw.css">
		<script src="js/dhtmlxcommon.js"></script>
		<script src="js/dhtmlxmenu.js"></script>
		<script src="js/dhtmlxmenu_ext.js"></script>
		<script src="../egw_action_popup.js"></script>
		<script src="../egw_action_dragdrop.js"></script>
		<script src="../egw_menu.js"></script>
		<script src="../egw_menu_dhtmlx.js"></script>

		<style>
			body, table {
				font-family: Arial, sans-serif;
				font-size: 10pt;
			}
			.listbox {
				width: 250px;
				border: 2px groove gray;
				margin: 5px;
				border-collapse: collapse;
			}

			.listbox tr {
				-moz-user-select: none;
				-khtml-user-select: none;
				user-select: none;
				cursor: default;
				padding: 2px;
			}

			.listbox tr.odd {
				background-color: #eeeeee;
			}

			.listbox tr.selected {
				background-color: #2b5d9b;
				color: white;
			}

			.listbox tr.odd.selected {
				background-color: #234b7d !important;
			}

			.listbox .focused {
				border: 1px dotted black;
				padding: 1px;
			}

			.listbox tr.draggedOver {
				color: red !important;
			}

			.egw_action_ddHelper {
				padding: 5px 5px 5px 26px;
				background-image: url(imgs/page.png);
				background-position: 5px 5px;
				background-repeat: no-repeat;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				text-shadow: white 0px 0px 5px;
			}
		</style>
	</head>
	<body>
		<table class="listbox" id="lb1">
			<tr id="folder1"><td><img src="imgs/folder.png"/></td><td style="width: 200px">Folder 1</td><td><input type="checkbox"></td></tr>
			<tr id="file1"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 1</td><td><input type="checkbox"></td></tr>
			<tr id="file2"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 2</td><td><input type="checkbox"></td></tr>
			<tr id="file3"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 3</td><td><input type="checkbox"></td></tr>
			<tr id="file4"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 4</td><td><input type="checkbox"></td></tr>
			<tr id="file5"><td><img src="imgs/page.png"/></td><td style="width: 200px">File 5</td><td><input type="checkbox"></td></tr>
		</table>
		<button id="performAction">Perform action...</button><button id="selectAll">Select All</button>
		<script>
			var actionManager = null;
			var objectManager = null;

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

			// An action object interface for the listbox - "inherits" from 
			// egwActionObjectInterface
			function listboxItemAOI(_node)
			{
				var aoi = new egwActionObjectInterface();

				aoi.node = _node;
				aoi.checkBox = ($j(":checkbox", aoi.node))[0];
				aoi.checkBox.checked = false;

				aoi.doGetDOMNode = function() {
					return aoi.node;
				}

				function getShiftState(e)
				{
					var state = EGW_AO_SHIFT_STATE_NONE;
					state = egwSetBit(state, EGW_AO_SHIFT_STATE_MULTI, e.ctrkKey || e.metaKey);
					state = egwSetBit(state, EGW_AO_SHIFT_STATE_BLOCK, e.shiftKey);
					return state;
				}

				// Now append some action code to the node
				$j(_node).click(function(e) {
					if (e.target != aoi.checkBox)
					{
						var selected = egwBitIsSet(aoi.getState(), EGW_AO_STATE_SELECTED);
						var state = getShiftState(e);

//						"Normal" Listbox behaviour
						aoi.updateState(EGW_AO_STATE_SELECTED,
							!egwBitIsSet(state, EGW_AO_SHIFT_STATE_MULTI) || !selected,
							state);

//						"PHPMyAdmin" Listbox behaviour
//						aoi.doSetState(egwSetBit(aoi.getState(), EGW_AO_STATE_SELECTED,
//							!selected), false, EGW_AO_SHIFT_STATE_MULTI);
					}
				});

				$j(aoi.checkBox).change(function() {
					aoi.updateState(EGW_AO_STATE_SELECTED, this.checked, EGW_AO_SHIFT_STATE_MULTI);
				});

				aoi.doTriggerEvent = function(_event) {
					if (_event == EGW_AI_DRAG_OVER)
					{
						$j(this.node).addClass("draggedOver");
					}
					if (_event == EGW_AI_DRAG_OUT)
					{
						$j(this.node).removeClass("draggedOver");
					}
				}

				aoi.doSetState = function(_state) {
					var selected = egwBitIsSet(_state, EGW_AO_STATE_SELECTED);
					this.checkBox.checked = selected;
					$j(this.node).toggleClass('focused',
						egwBitIsSet(_state, EGW_AO_STATE_FOCUSED));
					$j(this.node).toggleClass('selected',
						selected);
				}

				return aoi;
			}

			function alertClicked(_action, _senders, _target)
			{
				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 + "', target '" + (_target ? _target.id : "null") + "'");
			}

			function returnDDHelper(_action, _senders)
			{
				var text = [];
				for (var i = 0; i < _senders.length; i++)
				{
					text.push(_senders[i].id);
				}

				return $j("<div class=\"ddhelper\">" + _senders.length + " (" + text.join(", ") + ") Elements selected </div>")
			}

			function init()
			{
				//Initialize the action manager and add some actions to it
				actionManager = new egwActionManager();
				objectManager = new egwActionObjectManager("", actionManager);

				actionManager.updateActions(
					[
						{
							"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",
							"default": true
						},
						{
							"id": "file_preview",
							"iconUrl": "imgs/preview.png",
							"caption": "Preview",
							"onExecute": alertClicked,
							"allowOnMultiple": false,
							"type": "popup"
						},
						{
							"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,
							"allowOnMultiple": "only",
							"hint": "Compresses multiple files and mails them"
						},
						{
							"id": "send_to",
							"caption": "Send to",
							"type": "popup",
							"group": 10,
							"children":
							[
								{
									"id": "send_to_1",
									"caption": "Folder 1",
									"onExecute": alertClicked,
									"type": "popup"
								},
								{
									"id": "send_to_2",
									"caption": "Folder 2",
									"onExecute": alertClicked,
									"type": "popup"
								},
								{
									"id": "send_to_3",
									"caption": "Folder 3",
									"onExecute": alertClicked,
									"type": "popup"
								},
								{
									"id": "send_to_add",
									"caption": "Add target",
									"onExecute": alertClicked,
									"type": "popup",
									"group": -1
								}
							]
						},

						{
							"id": "file_drag",
							"type": "drag",
							"dragType": "file"
						},
						{
							"id": "folder_drop",
							"type": "drop",
							"caption": "Move files here",
							"iconUrl": "imgs/move.png",
							"acceptedTypes": "file",
							"onExecute": alertClicked,
							"children":
							[
								{
									"id": "sub1",
									"type": "popup",
									"caption": "Use insecure but super fast move algorithm"
								},
								{
									"id": "sub2",
									"type": "popup",
									"caption": "Use standard move algorithm",
									"default": true
								},
								{
									"id": "sub3",
									"type": "popup",
									"caption": "Only simulate moving"
								}
							],
							"default": true
						},
						{
							"id": "folder_drop2",
							"type": "drop",
							"caption": "Copy files here",
							"iconUrl": "imgs/copy.png",
							"onExecute": alertClicked,
							"acceptedTypes": "file"
						},
						{
							"id": "chk1",
							"type": "popup",
							"checkbox": true,
							"checked": true,
							"caption": "Test1"
						},
						{
							"id": "chk2",
							"type": "popup",
							"checkbox": true,
							"checked": false,
							"caption": "Test2",
							"onExecute": function(_action) {
								_action.checked = true;
							}
						}
					]
				);

				//Links which will be assigned to each listbox item
				var listboxFileLinks = [
					{"actionId": "file_view", "enabled": true},
					{"actionId": "file_preview", "enabled": true},
					{"actionId": "file_edit", "enabled": true},
					{"actionId": "file_email", "enabled": true},
					{"actionId": "file_compress_email", "enabled": true},
					{"actionId": "file_compress", "enabled": true},
					{"actionId": "file_delete", "enabled": true},
					{"actionId": "send_to", "enabled": true},
					"file_drag",
					"chk1",
					"chk2"
				];

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

				$j('#lb1 tr:odd').addClass('odd');

				//Create an object representation for each listbox-row and append
				//each to its own listboxItemAOI
				$j('#lb1 tr').each(function(index, elem) {
					var obj = objectManager.addObject(elem.id, new listboxItemAOI(elem));
					//Apply the links to the actions
					if (elem.id.substr(0,4) == "file")
						obj.updateActionLinks(listboxFileLinks);
					else
						obj.updateActionLinks(listboxFolderLinks);
				});

				$j("#selectAll").click(function() {
					objectManager.toggleAllSelected();
				});

				$j("#performAction").click(function(e) {
					if (!objectManager.executeActionImplementation(this, "popup"))
						alert("Please select one or more objects.");
					return false;
				});
			}
		</script>
	</body>
</html>