function showMaxDetail(el) {
    $('#lowerArea').hide();
    $popuphtml = $(el).parents('.panel').find('.detailContent').html();
    $('#maxDetailAreaContent').html($popuphtml);
    $('#maxDetailArea').show();
}

function hideMaxDetail() {
    $('#maxDetailArea').hide();
    $('#lowerArea').show();
}

$maxDetailArea = '';
$maxDetailArea += '		<div style="clear:both;"></div>';
$maxDetailArea += '		<div id="maxDetailArea" onclick="hideMaxDetail(); return false;" style="display: none;">';
$maxDetailArea += '			<div id="maxDetailAreaIn"><img src="'+template_directory+'/images/layout/max_detail_bar_top.jpg" alt="" /></div>';
$maxDetailArea += '			<div id="maxDetailAreaContent"> <!-- the content is inserted here --> </div>';
$maxDetailArea += '			<div id="maxDetailAreaOut"><img src="'+template_directory+'/images/layout/max_detail_bar_bottom.jpg" alt="" /></div>';
$maxDetailArea += '		</div>';

$(document).ready(function () {    
    $('.popuplink').click( function() { showMaxDetail(this); } ).css( { 'cursor': 'pointer', 'color': '#9c9a9b' });
    $('#lowerArea').after($maxDetailArea);
});