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

    <div data-role="header" data-inset="true" data-position="fixed">
        <a href="#" data-rel="back">Done</a>

        <h1>Contact Details</h1>
        <a id="save_contact" href="#" data-rel="Back">Save</a>
    </div>

    <div id="contact_wrapper" data-role="content">
        <form id="form_contact" method="post">

	        <div class="contact-primary ui-grid-a">
		        <div class="contact-primary-left ui-block-a">
                    <img class="contact-photo" src="<?php echo $this->siteBaseUrl; ?>images/mobile/contact-photo.png"/>
                    <div class="fav-toggle">
                        <input type="hidden" name="Favourite" value="0">
                    </div>
                </div>

		        <div class="contact-primary-right ui-block-b" data-role="content">
                    <ul class="round-rect-list">
                        <li><input type="text" class="contact-input user-first" name="UserFirstName" value="" placeholder="First"/></li>
                        <li><input type="text" class="contact-input user-last" name="UserLastName" value="" placeholder="Last"/></li>
                        <li><input type="text" class="contact-input user-company" name="UserWorkCompany" value="" placeholder="Company"/></li>
                    </ul>
                </div>
            </div>


            <div class="contact-secondary">

            </div>

            <!--            <div class="contact-info-group">
    <div class="contact-item-title">
        <button class="contact-item-add" data-icon="add" data-iconpos="notext" data-mini="true" data-inline="true">xxx</button>
        <span>Phone</span>
    </div>

    <div class="contact-item-content" data-role="fieldcontain">
        <button class="contact-item-delete" data-icon="minus" data-iconpos="notext" data-mini="true" data-inline="true">xxx</button>
        <select name="select-choice-a" data-native-menu="false" data-inline="true">
            <option>Choose Phone Type</option>
            <option value="UserHomePhone">Home Phone</option>
            <option value="UserHomeMobile">Home Mobile</option>
            <option value="UserHomeFax">Home Fax</option>
            <option value="UserWorkPhone">Work Phone</option>
            <option value="UserWorkMobile">Work Mobile</option>
            <option value="UserWorkFax">Work Fax</option>
        </select>
        <input class="contact-input" class="contact-input" type="text" name="UserWorkPhone" value="" placeholder="Phone"/>
    </div>


</div>-->


        </form>

    </div>

</div><!-- end mobile_view_contact -->

<script type="text/javascript">
    var $editcontact = {

        createContactElementsDynStyle : function() {

            $('#form_contact').append(cloneContactEditItemWithOption('Phone', {
                'UserHomePhone'  : 'Home',
                'UserHomeMobile' : 'Mobile'
            }));

            $('#form_contact').append(cloneContactEditItemWithOption('Email', {
                'UserHomeEmail' : 'Home',
                'UserWorkEmail' : 'Work'
            }));

            var $node3 = cloneContactEditItemWithOption('IM', {'MSN' : 'MSN', 'ICQ' : 'ICQ'});
            $('#form_contact').append(cloneContactEditItemWithOption('IM', {
                'MSN'   : 'MSN',
                'ICQ'   : 'ICQ',
                'Skype' : 'Skype'
            }));

            $('#form_contact').trigger('create');

        },

        createContactField : function($context, fieldName) {
            var id = 'abook_field_'+fieldName.toLowerCase();
	        var $node = null;
	        var contact = $contact.getCurrentContact();

            if(fieldName == 'UserDOB')
            {
                $node = cloneContactEditItem("type4");
            }
            else if(fieldName.indexOf('Email')>=0)
            {
                $node = cloneContactEditItem("type3");
            }
            else
            {
                $node = cloneContactEditItem("type2");
            }

	        $('label', $node).attr('for', id).html($contact.getFieldDisplayName(fieldName));
	        $('input', $node).attr('id', id).attr('name', fieldName).val(contact? contact[fieldName] : "");

	        $node.appendTo($context).trigger('create');
        },

	    updatePrimaryFields : function() {

		    var contact = $contact.getCurrentContact();

		    var primaryFields = ["UserFirstName", "UserLastName", "UserWorkCompany"];

		    $.each(primaryFields, function(i,v){
			    var input = $('input[name='+v+']', '#form_contact');
			    var val = contact? contact[v] : '';
			    input.val( val );
		    });

            var contactPhoto = contact? contact['UserPhoto'] : null;
            setContactPhoto( $('.contact-photo', '#mobile_edit_contact'), contactPhoto );

        },

        createContactElements : function() {

	        this.updatePrimaryFields();

            var renderFields = [
                "UserWorkMobile",
                "UserWorkPhone",
                "UserHomeMobile",
                "UserHomePhone",
                "UserHomeFax",
                "UserWorkFax",
                "UserEmail",
                "UserEmail2",
                "UserEmail3",
                "UserEmail4",
                "UserEmail5",
                "UserMiddleName",
                "UserDOB",
                "UserHomeAddress",
                "UserHomeCity",
                "UserHomeState",
                "UserHomeZip",
                "UserHomeCountry",
                "UserURL",
                "UserWorkTitle",
                "UserWorkDept"
            ];

            var $context = $('.contact-secondary', '#form_contact');
	        $context.empty();

            for(var i=0; i<renderFields.length; ++i) {
                this.createContactField($context, renderFields[i]);
            }


        },

        saveContact : function() {
            var data = $('#form_contact').serializeObject();

	        if(!$contact.getDisplayName(data['UserFirstName'], data['UserLastName']) && !data['UserEmail'])
	        {
		        alert('Contact must contain at least name or email');
		        return;
	        }

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

            data['groupId'] = groupId;

	        if(contact) {
		        data['id'] = contact.id;
	        }

            $mobile.updateContact(data, function(response) {
	            if(response && response['id']) {
		            $contact.clearGroup(groupId);
		            $contact.setCurrentContact(response);
		            //$.mobile.changePage('#mobile_contactlist', {transition:'slide', reverse:true});
		            history.back();
	            }

            });

        },

        pageinit : function() {
            $mobile.disableHeaderTabToggle('#mobile_edit_contact');

            $('#save_contact', '#mobile_edit_contact').bind('click', function(e) {
                e.preventDefault();
                $editcontact.saveContact();
                return false;
            });


            $('.fav-toggle', '#mobile_edit_contact').bind('vclick', function() {
                $(this).toggleClass('fav-active');

                var fav = $(this).hasClass('fav-active')? 1 : 0;
                $('input[name=Favourite]', $(this)).val(fav);
            });

        },

        pagebeforeshow : function() {
            this.createContactElements();
        }

    }


    $(document).delegate("#mobile_edit_contact", "pagebeforeshow", function() {
        $editcontact.pagebeforeshow();
    });

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

        $editcontact.pageinit();

	    $mobile.reload();

    });

</script>
