//////function To control tab views and css
// TABS - SHOW ACTIVE TAB and change content 
function changeTabClass(id) {

if (id == 'tab1') {
document.getElementById(id).className='mainTab activeMainTab'
document.getElementById('tab2').className='mainTab'
document.getElementById('tab3').className='mainTab'
document.getElementById('tab4').className='mainTab'
document.getElementById('tab5').className='mainTab'
document.getElementById('tab1Content').style.display="block"
document.getElementById('tab2Content').style.display="none"
document.getElementById('tab3Content').style.display="none"
document.getElementById('tab4Content').style.display="none"
document.getElementById('tab5Content').style.display="none"
}
if (id == 'tab2') {
document.getElementById('tab1').className='mainTab'
document.getElementById(id).className='mainTab activeMainTab'
document.getElementById('tab3').className='mainTab'
document.getElementById('tab4').className='mainTab'
document.getElementById('tab5').className='mainTab'
document.getElementById('tab1Content').style.display="none"
document.getElementById('tab2Content').style.display="block"
document.getElementById('tab3Content').style.display="none"
document.getElementById('tab4Content').style.display="none"
document.getElementById('tab5Content').style.display="none"
}
if (id == 'tab3') {
document.getElementById('tab1').className='mainTab'
document.getElementById('tab2').className='mainTab'
document.getElementById(id).className='mainTab activeMainTab'
document.getElementById('tab4').className='mainTab'
document.getElementById('tab5').className='mainTab'
document.getElementById('tab1Content').style.display="none"
document.getElementById('tab2Content').style.display="none"
document.getElementById('tab3Content').style.display="block"
document.getElementById('tab4Content').style.display="none"
document.getElementById('tab5Content').style.display="none"
}
if (id == 'tab4') {
document.getElementById('tab1').className='mainTab'
document.getElementById('tab2').className='mainTab'
document.getElementById('tab3').className='mainTab'
document.getElementById(id).className='mainTab activeMainTab'
document.getElementById('tab5').className='mainTab'
document.getElementById('tab1Content').style.display="none"
document.getElementById('tab2Content').style.display="none"
document.getElementById('tab3Content').style.display="none"
document.getElementById('tab4Content').style.display="block"
document.getElementById('tab5Content').style.display="none"
}
if (id == 'tab5') {
document.getElementById('tab1').className='mainTab'
document.getElementById('tab2').className='mainTab'
document.getElementById('tab3').className='mainTab'
document.getElementById('tab4').className='mainTab'
document.getElementById(id).className='mainTab activeMainTab'
document.getElementById('tab1Content').style.display="none"
document.getElementById('tab2Content').style.display="none"
document.getElementById('tab3Content').style.display="none"
document.getElementById('tab4Content').style.display="none"
document.getElementById('tab5Content').style.display="block"
}

}