Inline Edit - Recipient

by secretgspot

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/1195978/cdn/portal/jquery-ui-1.8.9.custom.css">
<link rel="stylesheet" href="http://dl.dropbox.com/u/1195978/cdn/portal/nyroModal.full.css">
<link rel="stylesheet" href="http://dl.dropbox.com/u/1195978/cdn/portal/cochlear.css">
<link rel="stylesheet" href="http://dl.dropbox.com/u/1195978/cdn/portal/mycochlear-portlet.css">
<script src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script>
<html lang="en_GB" xml:lang="en_GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body>
    <div id="page">
        <div id="page-inner" class="clearfix">
            <div id="main" class="clearfix">
                <table class="layoutRow" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td id="mainPage" valign="top">
                                <div class="wpsPortletBody">
                                    <div id="content" class="pid-3">
                                        <div id="content-inner" class="clearfix">
                                            <h2 id="overview-recipient-details-h2" style="display: block;">Recipient details</h2><!--  ********************************************* -->
                                            <!--  ############################################# -->
                                            <!--  ############################################# -->
                                            <!--  ############################################# -->

                                            <div id="person-list">
                                                <div class="gray-box">
                                                    <div id="person-list-wrapper">
                                                        <div class="person-info-wrapper ...

CSS

/* ignore nay code above  this line*/
#person-list-wrapper .inline-form {display:none;}
#person-list .gray-box{
    margin:0 0 50px 0;
}
.inline-form .inline-edit-btns{
    float:left;
    margin-bottom:5px;
}
#person-list{
    float:left;
}
#person-list-wrapper{
    position:relative;
}
#person-list-wrapper .profile-img{
    float:left;
    margin-right:5px;
    width: 64px;
}

#person-list-wrapper  .person-lbl{
    font-size:11px;
    font-weight:bold;
}

#person-list-wrapper .inline-editing {
    border: 17px solid #6E605E;
   /* height: 150px; */
    left: -11px;
    position: absolute;
    top: -11px;
    width: 852px;
        box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.60);
    -moz-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.60);
    -webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.60);
    
}

#person-list-wrapper .inline-editing span.hover-mode {
    
    color: #FFFFFF;
    padding: 5px 20px 5px 35px;
    position: absolute;
    right: -17px;
    top: -38px;
    box-shadow: 0 -8px 9px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 -8px 9px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 -8px 9px rgba(0, 0, 0, 0.2);
    background:url("http://dl.dropbox.com/u/1195978/cdn/portal/comment_alt1_stroke_12x12.png") no-repeat scroll 14px 7px #6E605E;
    display:visible;
}

#person-list-wrapper .edit-mode .inline-editing span {
   display:none; 
}

#person-list-wrapper .hover-mode .label-hover{
    background-color:#fff3c5;
}
#person-list-wrapper .hover-mode .value-hover{
    background-color:#fff3c5;
}

#person-list-wrapper .edit-mode th.field-edit {
    background-color:#FFCB05;
}
#person-list-wrapper .edit-mode td.field-edit{
    background-color:#fff3c5;
}
#person-list-wrapper .field-edit .current-value{
    display:none;
    
}
#person-list-wrapper td.gender-f .form-label label{
    font-weight:normal;
    font-size:10px;
    color:#8a8a8a;
}
#person-list-wrapper .hover-mode .form-item {
    border-bottom:none;
}

#person-list-wrapper .inline-edit-btns .button{
    ...

JavaScript

$('#person-list-wrapper .label').hover(

function() {
    $(this).addClass('label-hover');
    $(this).next().addClass('value-hover');
}, function() {
    $(this).removeClass('label-hover');
    $(this).next().removeClass('value-hover');
});

$('#person-list-wrapper .value').hover(

function() {
    $(this).addClass('value-hover');
    $(this).prev().addClass('label-hover');
}, function() {
    $(this).removeClass('value-hover');
    $(this).prev().removeClass('label-hover');
});


// addres list close link
$('#edit-address-form-wrapper .the-close-link').click(function(){
    $('.person-info-wrapper').trigger('cleanupInlineForm').prev().removeClass('in-edit-mode');
    $('.raddress-f').removeClass('field-edit');
});

//address edit link
$('.the-edit-link').click(function(){
    $(this).closest('.address-list-wrapper').hide();
    $('.edit-form-wrapper').show();
    
    
});

$('.inline-form .inline-edit-btns a.cancel-link').click(

function() {
    $('.person-info-wrapper').trigger('cleanupInlineForm').prev().removeClass('in-edit-mode');
    $(this).closest('tr').find('td, th').removeClass('field-edit');
});

/*

// update gender field (temporary solution, needs to be more general)
$('td.gender-f .current-value').click(
    function() {
        $(this).closest($('.person-info-wrapper')).addClass('edit-mode');
        $(this).hide();
        $(this).next('.inline-form').show();
        $(this).closest('tr').find('td, th').addClass('field-edit');
        updateProfileHeight();
    }
);
*/

// update date of birth field (temporary solution, needs to be more general)
$('td .current-value').click(

function(e) {
    if ($(this).closest($('.person-info-wrapper')).hasClass('edit-mode')) {
        e.preventDefault();
    } else {
        $(this).closest($('.person-info-wrapper')).addClass('edit-mode').prev().addClass('in-edit-mode');
        $(this).hide();
        $(this).next('.inline-form').show();
       ...