﻿var element;
var title;
var h ;

// Get the expanded height of the element to be expanded, on the onload event.
// This will work only if the elemnt to be expanded is initially set to its full height in the CSS file.
// Set the element to the un-expanded height afterwards (change its CSS class).
// elementId - the id of element to be expanded.
// titleId - the id of the changing title upon expanding and un-expanding.
function body_onLoad()
{
    element = document.getElementById("spanCredits");
    title = document.getElementById("expandTitle");
    h = element.offsetHeight;
    
    // no need to expand this element, hide the expand button.      
    if( h < 202 )
    {
        title.style.visibility="hidden";
    }
    
    // set the element to its un-expanded height
    element.setAttribute("class", "initial");
}

// Expand or un-expand the element.
function expandClick()
{     

    if( element.offsetHeight > 202 )
    {    
        element.setAttribute("class", "initial");
        $('#'+ element.id).animate(
        { height:190},{ duration: 500} );
                title.innerHTML="[+]Expand to see full details..."
      
    }
    else
    {  
        $('#' + element.id).animate(
       { height:h},{ duration: 500} );

        element.setAttribute("class", "autosize");
     
        title.innerHTML="[-]Collapse... "
    }
}

