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

    <div data-role="header" data-inset="true" data-position="fixed">
        <a href="#" title="folders" data-rel="back">Back</a>
        <h1>Contacts</h1>
	    <a class="header-button-edit" href="#" >Y</a>
    </div>

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

        <ul id="list_group_contact" data-role="listview" data-split-theme="b" data-split-icon="delete" data-filter="true" data-filter-placeholder="Search Contact...">
            <!-- inside content will be rendered at runtime by clone template   -->
        </ul>

    </div>

	<div data-role="footer" data-inset="true" data-position="fixed">
		<div data-role="navbar" class="footer-normal">
			<ul>
				<li>
					<a title="Refresh" href="#" data-icon="refresh" data-iconpos="top" onclick="showContacts(true);return false;"></a>
				</li>

				<li>
					<a title="New Contact" href="#mobile_edit_contact" data-icon="new-contact" data-iconpos="top" data-transition="slide"
						onclick="$contact.setCurrentContact(null);"></a>
				</li>
            </ul>
        </div>

        <div data-role="navbar" class="footer-edit-mode" style="display: none;">
            <ul>
                <li>
					<a title="Delete" href="#" data-icon="delete" data-iconpos="top" onclick="deleteContacts();"></a>
				</li>

				<li>
					<a title="move" href="#mobile_groupselection_list" data-icon="move" data-iconpos="top" data-transition="slide"></a>
				</li>
			</ul>
		</div>

	</div>

</div>

<script type="text/javascript">

	var contactlist = {
		getSelectedIds : function() {
			var ids = [];
			$('.contact-row.selected', '#list_group_contact').each( function() {
				ids[ids.length] = $(this).data('contactData').id;
			})

			return ids;
		}
	}

	function showGroupContact(context) {
		var data = $(context).data('groupData');
		$contact.setCurrentGroup(data);
	}

	function renderContactRow(row, $domPlace) {
		var $node = $("#template_contact_item>ul>li").clone(true);

		$(".contact-row",$node).data('contactData', row);

		$(".contact-name", $node).html($contact.getDisplayName(row.UserFirstName, row.UserLastName));
		$(".contact-email", $node).html(row.UserEmail);

        setContactPhoto($(".contact-photo-icon", $node), row['UserPhoto']);

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

	function renderContacts(contacts, groupId) {

		var $domPlace = $("#list_group_contact");
		$domPlace.empty();

		$.each(contacts, function(i, row) {
			row.groupId = groupId;
			renderContactRow(row, $domPlace);
		});

	}

	function showContacts(forceRefresh) {

		$("#list_group_contact").empty();
		cancelContactlistEditMode();

		var groupData = $contact.getCurrentGroup();
		var groupId = groupData ? groupData.id : 0;

		if(forceRefresh) {
			$contact.clearGroup(groupId);
		}

		var contacts = $contact.getContacts(groupId, function(response) {
			if (!response) {
				// TODO: render empty folder
				return;
			}

			if (response && response["result"] == "fail") {
				alert(response.error);
				return;
			}

			$contact.setContacts(groupId, response);
			renderContacts(response, groupId);

            $('a[title=Refresh]','#mobile_contactlist').removeClass('ui-btn-active');
			$('.contact-item').removeClass('deleteList');

		});

    }

	function cancelContactlistEditMode() {
		$context = $('.header-button-edit', '#mobile_contactlist');

		if($context.hasClass('in-edit')) {
			toggleContactlistEditMode($context);
		}
	}

	function toggleContactlistEditMode($context) {
		if(!$context) {
			$context = $('.header-button-edit', '#mobile_contactlist');
		}

		$context.toggleClass("in-edit");
		$('.contact-item').toggleClass('EditList');

		if( $context.hasClass("in-edit") ) {
			// in edit mode
			$('.ui-btn-text', $context).html('6');

			maillistShowCheckbox();
			//$(".footer-normal", "#mobile_maillist").hide();
			//$(".footer-edit-mode", "#mobile_maillist").show();

			$("[title=folders]", $.mobile.activePage).hide();
			//showSearchBar(false);

			//showLoadNext(false);
            $(".footer-normal", "#mobile_contactlist").hide();
            $(".footer-edit-mode", "#mobile_contactlist").show();

		}
		else {
			// cancel edit mode
			$('.ui-btn-text', $context).html('Z');
			$('.contact-row.selected', $.mobile.activePage).removeClass('selected');

			maillistShowContactPhoto();
			//$(".footer-edit-mode", "#mobile_maillist").hide();

			//updateSearchBar();
			$("[title=folders]", $.mobile.activePage).show();

            $(".footer-edit-mode", "#mobile_contactlist").hide();
            $(".footer-normal", "#mobile_contactlist").show();
            //updateShowNext();

			$('.contact-item').addClass('deleteList');

        }

	}

	function deleteContacts() {
		var $rows = $('.contact-row.selected', '#mobile_contactlist');
		if(!$rows.length) {
			return false;
		}

		var ids = [];
		var groupId = null;
		$rows.each(function() {
			var data = $(this).data('contactData');
			if(data['id']) {
				ids.push(data.id);
				groupId = data.groupId;
			}
		})

		$contact.deleteContact(ids, groupId, function(response) {

			if(response && response['result'] === 'success') {
				$rows.each(function() {
					var self = $(this);

                    // skip delete myself
                    if( self.data('contactData')['isMyProfile'] == '1' ) {
                        return;
                    }

					self.parent().fadeOut('slow', function(){
						self.parent().remove();
					});
				})

                $('a[title=Delete]','#mobile_contactlist').removeClass('ui-btn-active')

				toggleContactlistEditMode()
			}
		})
	}

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

		showContacts();
		$contact.setCurrentContact(null);
	});

	$(document).delegate("#mobile_contactlist", "pageinit", function() {
		$("[data-role=header]", "#mobile_contactlist").fixedtoolbar({ tapToggle: false });
		$("[data-role=footer]", "#mobile_contactlist").fixedtoolbar({ tapToggle: false });

		$('.header-button-edit', '#mobile_contactlist').click( function(e) {
			e.preventDefault();
			e.stopPropagation();
			toggleContactlistEditMode($(this));

			return false;
		});

		$('[title=move]', '#mobile_contactlist').bind('click', function(e) {
			if(! $('.contact-row.selected', '#mobile_contactlist').length ) {
				e.preventDefault();
				e.stopPropagation();

				alert('No contact is selected');
				return false;
			}
		})

		$mobile.reload();

	});

</script>



