var permanentheight;

function showElement()
{
    var el = document.getElementById("servicesList");
    
    // Work out height of div
    var elHeight = el.offsetHeight;
    if (permanentheight == null)
        permanentheight = elHeight;
    else
        elHeight = permanentheight; 
    //alert(elHeight);
    // Set styles up ready
    el.style.height = "0px";
    el.style.position = "relative";
    el.style.left="0px";

    // Display div
    resizeElement('servicesList','height','+',15,0,elHeight)
    
    // Hide expand button
    document.getElementById("divExpand").style.display = "none";
    
    // Show shrink button
    document.getElementById("divShrink").style.display = "block";
}

function hideElement()
{
    var el = document.getElementById("servicesList");
    
    // Getting initial height
    var elHeight = el.offsetHeight;

    // Hide div
    resizeElement('servicesList','height','-',15,elHeight,0)
    
    // Show expand button
    document.getElementById("divExpand").style.display = "block";
    
    // Hide shrink button
    document.getElementById("divShrink").style.display = "none";
   
}


function resizeElement(elem,moveType,direction,moveBy,moveFrom,moveTo)
{
    var el = document.getElementById(elem);
    var posNow = 0;
    
    if (el.height == '')
        el.style.height = moveFrom+'px';
    
    if (el.width == '')
        el.style.width = moveFrom+'px';
    
    /*==== height ===*/
    if (moveType=='height')
    {
        if  (direction == '+')
        {           
          
            if (Number(moveFrom) < Number(moveTo))
            {
                moveFrom  = Number(moveFrom) + Number(moveBy);
                posNow = el.style.height;
                posNow = posNow.replace('px','');
                
                if ((Number(posNow)+Number(moveBy)) > Number(moveTo))
                    el.style.height = Number(moveTo)+'px'
                else    
                    el.style.height = Number(posNow)+Number(moveBy)+'px'
                    
                setTimeout("resizeElement('"+elem+"','"+moveType+"','"+direction+"','"+moveBy+"','"+moveFrom+"','"+moveTo+"')",1);
            }
        }
        else if  (direction == '-')
        {            
            if (Number(moveFrom) > Number(moveTo))
            {
                moveFrom  = Number(moveFrom) - Number(moveBy);
                posNow =  el.style.height;
                posNow = posNow.replace('px','');
                if ((Number(posNow)-Number(moveBy)) <= Number(moveTo))
                    el.style.height = Number(moveTo)+'px'
                else    
                    el.style.height = Number(posNow)-Number(moveBy)+'px'
                setTimeout("resizeElement('"+elem+"','"+moveType+"','"+direction+"','"+moveBy+"','"+moveFrom+"','"+moveTo+"')",1);
            }  
        }
    }
    /*==== width ===*/
    if (moveType=='width')
    {
        if  (direction == '+')
        {           
          
            if (Number(moveFrom) < Number(moveTo))
            {
                moveFrom  = Number(moveFrom) + Number(moveBy);
                posNow = el.style.width;
                posNow = posNow.replace('px','');
                
                if ((Number(posNow)+Number(moveBy)) > Number(moveTo))
                    el.style.width = Number(moveTo)+'px'
                else    
                    el.style.width = Number(posNow)+Number(moveBy)+'px'
                    
                setTimeout("resizeElement('"+elem+"','"+moveType+"','"+direction+"','"+moveBy+"','"+moveFrom+"','"+moveTo+"')",50);
            }
        }
        else if  (direction == '-')
        {            
            if (Number(moveFrom) > Number(moveTo))
            {
                moveFrom  = Number(moveFrom) - Number(moveBy);
                posNow =  el.style.width;
                posNow = posNow.replace('px','');
                if ((Number(posNow)-Number(moveBy)) <= Number(moveTo))
                    el.style.width = Number(moveTo)+'px'
                else    
                    el.style.width = Number(posNow)-Number(moveBy)+'px'
                setTimeout("resizeElement('"+elem+"','"+moveType+"','"+direction+"','"+moveBy+"','"+moveFrom+"','"+moveTo+"')",50);
            }  
        }
    }
}