//for options//

function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId)) {
    // W3C DOM
    return document.getElementById(objectId);
    } else if (document.all && document.all(objectId)) {
    // MSIE 4 DOM
    return document.all(objectId);
    } else if (document.layers && document.layers[objectId]) {
    // NN 4 DOM.. note: this won't find nested layers
    return document.layers[objectId];
    } else {
    return false;
    }
}

function displayList(){    
          var h = getObject('pageoption').offsetHeight; 
          var max_h = 90; 
          
          var anim = function(){            
                    h += 50; 
                    if(h >= max_h){ 
                    getObject('pageoption').style.height = "90px"; 
                    getObject('themes').style.backgroundcolor="";            
                    if(tt){window.clearInterval(tt);} 
                    }
                    else{ 
                getObject('pageoption').style.display="block"; 
                getObject('pageoption').style.height = h + "px"; 
                    }
            }
               
              var tt = window.setInterval(anim,2);      
}

function hiddenList(){
       var h = getObject('pageoption').offsetHeight; 
           var anim = function(){
                 h -= 50; 
                 
                 if(h <= 5){
                 getObject('pageoption').style.display="none"; 
                   getObject('themes').style.backgroundcolor=""; 
                   if(tt){window.clearInterval(tt);}
               }
               else{
                   getObject('pageoption').style.height = h + "px"; 
               }
           }
             
           var tt = window.setInterval(anim,2); 
}

//=======================================================
function showClassList(){
   if(getObject('pageoption').style.display == "none"){ 
       displayList(); 
   }
   else{ 
         hiddenList(); 
     }
}