<div id="mobile_groups" data-role="page">

    <div data-role="header" data-inset="true" data-position="fixed">
        <a href="#mobile_maillist"  data-transition="slide" data-direction="reverse">Back</a>
        <h1>Contact Groups</h1>
        <a href="#" class ="header-button-edit" onclick="grouplist.toggleEdit();return false;">Z</a>    </div>

    <div data-role="content" data-inset="true">

        <ul id="list_groups" data-role="listview" data-split-theme="b" data-split-icon="delete">
            <!-- inside content will be rendered at runtime by clone template   -->
        </ul>

    </div>

    <div data-role="footer" data-inset="true" data-position="fixed" style="display: none;" >
	    <div data-role="navbar">
		    <ul>
			    <li>
				    <a href="#" data-icon="add-contact" data-iconpos="left" onclick="createGroup($(this));"></a>
			    </li>
			</ul>
		</div>
    </div>

</div>

<div id="mobile_groupselection_list" data-role="page">
	<div data-role="header" data-inset="true" data-position="fixed" >
		<a href="#"  data-rel="back">Cancel</a>
		<h1>Select Group</h1>
	</div>

	<div data-role="content">
		<ul id="selection_contact_folder" data-role="listview">

		</ul>
	</div>

</div>


<script type="text/javascript">

	var grouplist = {
		toggleEdit : function(mode) {
			$context = $('.header-button-edit', '#mobile_groups');

			if(mode===1 && $context.hasClass('in-edit') || mode===-1 && !$context.hasClass('in-edit')) {
				return;
			}

			$context.toggleClass("in-edit");

			var inEditMode =  $context.hasClass("in-edit");
			var caption = inEditMode ? "6" : "Z";

			$('.ui-btn-text', $context).html(caption);
			toggleDeleteButton(inEditMode, '#mobile_groups');
			toggleFooter(inEditMode, '#mobile_groups');

			//$('.ui-icon-arrow-r').toggle();

		},

		needSkip : function(id) {

			var current = $contact.getCurrentGroup();
			var curGID = current? current.id : 0;

			return curGID == id || !$group.isDroppable(id);

		},

		buildFolderSelection : function (folderList) {
			var $ul = $('#selection_contact_folder');
			$ul.empty();

			for(var i = 0; i < folderList.length; ++i) {
				if( this.needSkip( folderList[i].id ) ) {
					continue;
				}

				var $node = $('<li><a  class="folder-contact"></a></li>').clone();
				$('a', $node).html((folderList[i].GroupName)).data('folderData', folderList[i]);

				$('a', $node).click(function() {
					var groupId = $(this).data('folderData').id;
					var ids = contactlist.getSelectedIds();

					$contact.move(ids, groupId, function(res) {
						if(res['result'] != 'success') {
							res['error'] && alert(res.error);
						}
						else {
							history.back();
						}

					});

				});

				$ul.append($node).listview('refresh');
			}
		},

		pageinit : function() {

		}
	};


	function createGroup($context) {
		mobilePrompt('Group Name', function(name) {

			grouplist.toggleEdit(-1);

			$contact.createGroup(name, function(json) {

				if(json.result === 'success') {
					renderGroup(json.data, $("#list_groups"))
				}
				else {
					alert(json.error);
				}
			})


		});
	}

	function deleteGroupContact($context) {
		var data = $context.data('groupData');

		if(data.id<=0) {
			alert('You cannot delete system group!');
			return;
		}

		if(!confirm("Are you sure to delete the group '" + data.GroupName + "' and along with all contacts inside?" )) {
			return;
		}

		$contact.setCurrentGroup(null);

		$contact.deleteGroup(data.id, function() {
			$context.parent().fadeOut('slow', function() {
				$context.parent().parent().parent().remove();
			})
		})
	}

	function renderGroup(row, $placeDom) {

		var $node = cloneGroupRow();

		var caption = row.GroupName;
		if(caption === 'All') {
			caption = 'Personal';
		}

		$('a', $node).data('groupData', row).html(caption);

		$placeDom.append($node).listview('refresh');
	}

	function renderGroups(json) {
		//TODO: check result when failure

		var $placeDom = $("#list_groups");

		if(json instanceof Array) {
			for(var i=0; i<json.length; ++i) {
				renderGroup(json[i], $placeDom);
			}
		}
	}

	$( document ).delegate( "#mobile_groups", "pageinit", function() {

		$mobile.reload(true);

		$contact.getGroups(function(json) {
			renderGroups(json);
		});
	});

	$( document ).delegate( "#mobile_groups", "pagebeforeshow", function() {
		grouplist.toggleEdit(-1);
	});

	$( document ).delegate( "#mobile_groupselection_list", "pagebeforeshow", function() {

		$contact.getGroups(function(groups) {
			grouplist.buildFolderSelection(groups)
		})

	});

</script>
