var running = false;
function showTestimonial(thediv)
{
  if(running == false)
  {
    running = true;
    hideTestimonials();
    /*hide the mini text for the chosen testee*/
    document.getElementById('minitext' + thediv).style.display = 'none';
    document.getElementById('minitext' + thediv).style.height = '0px';
    /*display the full version text of the testee*/
    document.getElementById('tsttext' + thediv).style.display = 'inline';
    document.getElementById('tsttext' + thediv).style.height = 'auto';
    /*make the black bar red*/
    document.getElementById('blackbar' + thediv).style.backgroundColor  = '#990000'; 
    /*make tje title red and bigger*/
    document.getElementById('title' + thediv).style.color  = '#990000'; 
     document.getElementById('title' + thediv).style.fontSize  = '14pt'; 
     document.getElementById('testimonials' + thediv).style.height = 'auto';
  
     //document.getElementById('tstbox' + thediv).style.height = '50px';
        if(document.getElementById('tsttext' + thediv).offsetHeight == 0)
        {
            document.getElementById('tstbox' + thediv).style.height = '500px';
            document.getElementById('blackbar' + thediv).style.height = '480px';
        }
        else
        {
         document.getElementById('tstbox' + thediv).style.height = document.getElementById('tsttext' + thediv).offsetHeight + 40 +'px';
         document.getElementById('blackbar' + thediv).style.height = (document.getElementById('testimonials' + thediv).offsetHeight - 20) + 'px';
        }
        running = false;
    }
}

function hideTestimonials()
{
    aryClassElements = new Array();
    aryClassElements.length = 0;
    //we need to hide any divs that are currently open
    getElementsByClassName( 'testimonials', document.body );
    for ( var i = 0; i < aryClassElements.length; i++ ) 
    {
        if(document.getElementById('testimonials' + (i + 1)).style.height > '0px') //only do this to the 'visible' ones
        {
            document.getElementById('minitext' + (i + 1)).style.display = 'inline';
            document.getElementById('minitext' + (i + 1)).style.height = '0px';
            document.getElementById('tsttext' + (i + 1)).style.display = 'none';
            document.getElementById('tstbox' + (i + 1)).style.height = '68px';
            document.getElementById('blackbar' + (i + 1)).style.backgroundColor  = '#333333'; 
            document.getElementById('testimonials' + (i + 1)).style.height = '75px';        
            document.getElementById('blackbar' + (i + 1)).style.height = '60px';
            document.getElementById('title' + (i + 1)).style.color  = '#000000';
            document.getElementById('title' + (i + 1)).style.fontSize  = '12pt';  
        }
    }
}


//we want to get all of the testimonial divs
function getElementsByClassName( strClassName, obj ) 
{
    if ( obj.className == strClassName ) 
    {
        aryClassElements[aryClassElements.length] = obj;
    }
    for ( var i = 0; i < obj.childNodes.length; i++ )
    {
        getElementsByClassName( strClassName, obj.childNodes[i] );
     }
}


//we need to change the page
function changepage(pagenum)
{
   if(running == false)
  {
    running = true;
    hideTestimonials(); //minimise all the divs
    //now set the top position 450 px is the initial top value...so we want to add the height that we are displaying of the testies
    for ( var i = 0; i < aryClassElements.length; i++ ) 
    {
        if((i+1 > ((pagenum-1)*15)) && (i+1 < pagenum*15))
        {
            document.getElementById('testimonials' + (i + 1)).style.height = '75px';    
        }
        else
        {
            document.getElementById('testimonials' + (i + 1)).style.height = '0px'; 
        }
    } 
    drawPagenums(pagenum); 
    running = false;
   }
}

function drawPagenums(pagenum)
{
    //get the current page number string
    var totalpages = Math.ceil(aryClassElements.length/15);
    var pagenumstring = '';
    
    if(totalpages > 1 && pagenum > 1) //we want left arrow
    {
      pagenumstring = pagenumstring + '<a href="#" onclick="changepage(' + (pagenum - 1) +')"> < </a>';
    }
   for(var i=0;i<totalpages;i++)
   {
      if(i+1 == pagenum)
      {
        pagenumstring = pagenumstring + '<a id="activepage" href="#" onclick="changepage(' + (i + 1) + ')">' + (i + 1) + '</a>';
      }
      else
      {
         pagenumstring = pagenumstring + '<a href="#" onclick="changepage(' + (i + 1) + ')">' + (i + 1) + '</a>';
      }   
   }
   
   if(totalpages > 1 && pagenum < totalpages) //we want left arrow
    {
      pagenumstring = pagenumstring + '<a href="#" onclick="changepage(' + (pagenum + 1) +')"> > </a>';
    }
   
    document.getElementById('pagenums').innerHTML = pagenumstring;
    document.getElementById('pagenums1').innerHTML = pagenumstring;
       
}