// Starts JQUERY javascript
$(function() // same as $(document).ready(function()
{
//set cursor for the clickable heading to be hand, and effect of underline
//$('.expand-all, .collapse-all, .connection-clicker').css({color:'#617f9e'});
$('.expand-all, .collapse-all, .collapsed-title, .connection-clicker, .ajax-connection-clicker, .ajax-close, .details-click').css({cursor:'pointer'}).hover(
function(){$(this).css("text-decoration","underline");},
function(){$(this).css("text-decoration","none");}
);

////-----------Hiding content details wtih no plus image ------------------/////////////
$('.details-hide').hide();
$('.details-click').css({cursor:'pointer'}).hover(
function(){$(this).css("text-decoration","underline");},
function(){$(this).css("text-decoration","none");}
);

//clicking event on the group title
$('.details-click').click(function()
{
//sets a variable with a title attr value of the group heading we clicked on

var y =$(this).attr("title");
if ($('.details-hide[@title='+y+']').is(":visible")) //action for clickin on the item which is expanded
{
$('.details-hide[@title='+y+']').animate({height:'hide', opacity:'hide'}, 'slow');
if ($('.details-hide').is(":hidden")){$('.hide-content-tablehead').animate({height:'hide', opacity:'hide'}, 'slow');} // hides table columns headers
}
else //this is action for clicking on the item which is collapsed
{
$('.details-current-item').animate({height:'hide', opacity:'hide'}, 'slow'); //hides item which was opened before
$('.details-current-item-heading');
$('.details-hide[@title='+y+'], .hide-content-tablehead').addClass('details-current-item').animate({height:'show', opacity:'show'}, 'slow');
$(this).addClass('details-current-item-heading');
}
});
//////////////////////////////////////////////////////////////////////////////////////////////////
});