var array = new Array();
var speed = 5;
var timer = 5;

// Loop through all the divs in the slider parent div //
// Calculate seach content divs height and set it to a variable //
function slider(target,showfirst){
    sliderId = target;
    
    var slider = document.getElementById(target);
    var divs = slider.getElementsByTagName('div');
    var j = 0;
      
    for(i = 0; i < divs.length; i++) {
        var div   = divs[i];

        if (div.className.indexOf("header") != -1) {
            j++;
            
            div.id = target+'-header'+j;
            div.onclick = new Function("processClick(this)");
        } 
        else if(div.className.indexOf("content") != -1) {
            div.id   = target+'-content'+j;
            div.maxh = div.offsetHeight;
            
            array.push(div.id);
            
            if ( showfirst == i ) {
                div.style.display = 'block';
            } 
            else {
                div.style.height  = '0px'; 
                div.style.display = 'none';
                div.style.visibility = 'visible';
            }
        } 
    }
}

// Process the click - expand the selected content and collapse the others //
function processClick(div) {
    var curIndex  = div.id.replace(sliderId+'-header','');
    var curContentId = sliderId+'-content'+curIndex;
    var curContent = document.getElementById(curContentId);
    if(curContent == undefined) return;
    clearInterval(curContent.timer);
    
    if (curContent.style.display == 'block'){
        initSlide(curContentId,-1);
    }
    else{
        var catlength = array.length;
        
        for (i = 0; i < catlength; i++){
            var section = array[i];
            var contDiv = document.getElementById(section);
        
            if (section != curContentId && contDiv.style.display == 'block'){
                clearInterval(contDiv.timer);
                initSlide(section,-1);
            }
        }
        curContent.style.display = 'block';
        initSlide(curContentId,1);
    }
}

// Setup the variables and call the slide function //
function initSlide(id,dir) {
    var cont = document.getElementById(id);
    cont.direction = dir;
    cont.timer = setInterval("slide('" + id + "')", timer);
}

// Collapse or expand the div by incrementally changing the divs height and opacity //
function slide(id) {
    var cont = document.getElementById(id);
    var currHeight = cont.offsetHeight;
    var dist;

    if (cont.direction == 1) {
        dist = (Math.round((cont.maxh - currHeight) / speed));
    }
    else{
        dist = (Math.round(currHeight / speed));
    }
    if(dist < 1) dist = 1;

    cont.style.height  = currHeight + (dist * cont.direction) + 'px';
    
    if (cont.direction != 1 && currHeight < 2 ){
        cont.style.display = 'none';
        cont.style.height = '0px';
        clearInterval(cont.timer);
    }
    else if(cont.direction == 1 && currHeight > (cont.maxh - dist) ) {
        clearInterval(cont.timer);
    }
    
//    console.log(id+',  maxh = '+cont.maxh+', currheight = '+currheight+', dist='+dist+' , cont.direction =  '+cont.direction);
//    alert(id+',  maxh = '+cont.maxh+', currheight = '+currheight+', dist='+dist+' , cont.direction =  '+cont.direction);
}