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

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

		<h1>Contact</h1>
		<a href="#mobile_edit_contact" id="edit-contact-button" data-transition="slide">Z</a>
	</div>

	<div data-role="content" data-inset="true">
        <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="contact-fav"></div>
            </div>

            <div class="contact-primary-right ui-block-b" data-role="content">
                <span class="user-primary-item user-name">Name</span>
                <!-- <span class="user-primary-item user-company">Company</span> -->
            </div>
             
          <div class="contact-phone-right ui-block-b" data-role="content">
           	<div id="contact-header-title">Phone:</div>
            <div class="contact-item-single">
            	<span class="contact-item-single-title">   Personal:</span> 
           		  <span class="user-primary-item personal-phone"></span>
           </div>
             <div class="contact-item-single">
               <span class="contact-item-single-title">   Work:</span>  
                 <span class="user-primary-item work-phone"></span>
             </div>
               <div class="contact-item-single">
             	  <span class="contact-item-single-title">Personal Mobile:</span>   
              	 <span class="user-primary-item personal-mobile"></span>
               </div>
                 <div class="contact-item-single">
              	 	<span class="contact-item-single-title">Work Mobile:</span>  
                 	<span class="user-primary-item work-mobile"></span>
                 </div>
                 
                 <div class="contact-item-single">
              	 	<span class="contact-item-single-title">Home Fax:</span>  
                 	<span class="user-primary-item home-fax"></span>
                 </div>
                 
                 <div class="contact-item-single">
              	 	<span class="contact-item-single-title">Work Fax:</span>  
                 	<span class="user-primary-item work-fax"></span>
                 </div>
            </div>
            
           <div class="contact-email-right ui-block-b" data-role="content">
           		<div id="contact-header-title">Email:</div>	
            <div class="contact-item-single">
            	<span class="contact-item-single-title">   Email 1:</span> 
           		  <span class="user-primary-item email1"></span>
           </div>
             <div class="contact-item-single">
               <span class="contact-item-single-title">    Email 2:</span>  
                 <span class="user-primary-item email2"></span>
             </div>
               <div class="contact-item-single">
             	  <span class="contact-item-single-title"> Email 3:</span>   
              	 <span class="user-primary-item email3"></span>
               </div>
                 <div class="contact-item-single">
              	 	<span class="contact-item-single-title">Email 4:</span>  
                 	<span class="user-primary-item email4"></span>
                 </div>
                 
                 <div class="contact-item-single">
              	 	<span class="contact-item-single-title">Email 5:</span>  
                 	<span class="user-primary-item email5"></span>
                 </div>
            </div>
            
           <div class="contact-address-right ui-block-b" data-role="content">
           	   		<div id="contact-header-title">Address:</div>	
            	<div class="contact-item-single">
            		<span class="contact-item-single-title">   Home:</span> 
           			  <span class="user-primary-item home-address"></span>
           			    <span class="user-primary-item home-city"></span>,<span class="user-primary-item home-state"></span>   <span class="user-primary-item home-state"></span>
           		</div>
         
            </div>
            
        </div>



		<ul id="list_contact_detail" data-role="listview">

		</ul>

	</div>

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

<script type="text/javascript">

	function renderContactItem(key, value, $parentNode) {
		name = $contact.getFieldDisplayName(key);

        if(key.indexOf('Email')>=0) {
            value = '<span class="blue-recipient">' + value + '</span>';
        }

		$parentNode.append(cloneContactDetailName(name));
		$parentNode.append(cloneContactDetailValue(value));
	}

	function renderContactDetail(contact) {
		if(!contact) return;

        var name = $contact.getDisplayName(contact["UserFirstName"], contact["UserLastName"]);
        $(".user-name", "#mobile_view_contact").html(name);

		// var company = contact["UserWorkCompany"] || contact["UserEmail"];
        // $(".user-company", "#mobile_view_contact").html(company);
        
        var personalPhone  = contact["UserHomePhone"];
        $(".personal-phone", "#mobile_view_contact").html(personalPhone);

        var workPhone  = contact["UserWorkPhone"];
        $(".work-phone", "#mobile_view_contact").html(workPhone);
        
        var personalMobile = contact["UserHomeMobile"];
        $(".personal-mobile", "#mobile_view_contact").html(personalMobile);
        
        var workMobile = contact["UserHomeFax"];
        $(".work-mobile", "#mobile_view_contact").html(workMobile);
        
         var homeFax = contact["UserWorkFax"];
        $(".home-fax", "#mobile_view_contact").html(homeFax);
        
       var workFax = contact["UserWorkMobile"];
        $(".work-fax", "#mobile_view_contact").html(workFax);
        
        
       var email1  = contact["UserEmail"];
        $(".email1", "#mobile_view_contact").html(email1);
        
        var email2 = contact["UserEmail2"];
        $(".email2", "#mobile_view_contact").html(email2);
        
        var email3 = contact["UserEmail3"];
        $(".email3", "#mobile_view_contact").html(email3);
        
         var email4 = contact["UserEmail4"];
        $(".email4", "#mobile_view_contact").html(email4);
        
       var email5 = contact["UserEmail5"];
        $(".email5", "#mobile_view_contact").html(email5);

        var homeAddy = contact["UserHomeAddress"];
        $(".home-address", "#mobile_view_contact").html(homeAddy);
        
        var homeCity = contact["UserHomeCity"];
        $(".home-city", "#mobile_view_contact").html(homeCity);
        
         var HomeState = contact["UserHomeState"];
        $(".home-state", "#mobile_view_contact").html(HomeState);
        
       var homeZip = contact["UserHomeZip"];
        $(".home-zip", "#mobile_view_contact").html(homeZip);

        setContactPhoto( $('.contact-photo', '#mobile_view_contact'), contact['UserPhoto'] );

        if( contact['Favourite'] == '1' ) {
            $('.contact-fav', '#mobile_view_contact').show();
        }
        else {
            $('.contact-fav', '#mobile_view_contact').hide();
        }

		var $parentNode = $("#list_contact_detail");
		$parentNode.empty();

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

        for(var i=0; i<renderFields.length; ++i) {
            var key = renderFields[i];
            var value = contact[renderFields[i]];

            if(value) {
                renderContactItem(key, value, $parentNode);
            }
        }

		$parentNode.listview('refresh');

        $('span.blue-recipient', $parentNode).bind('click', function() {
            $mail.mailFromContact = $(this).text();
            $mail.setNewFromContactMode();
            $('#id_input_subject').val('');                                                                                                                                                                                                  
            $('textarea#id_text_compose').val(''); 

            $.mobile.changePage("#mobile_compose", {transition: 'slideup'});
        });
	}

	function showContact($row) {

		$contact.setCurrentContact( $row.data('contactData') );
		$.mobile.changePage('#mobile_view_contact', {transition:'slide'});

	}

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

		renderContactDetail($contact.getCurrentContact());
	});

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

		$mobile.reload();
	});

</script>



