var dropEls = new Array();
var elements = document.getElementsByTagName("div");
var openingTog;
var openingEl;
var animating = false;

/*
 *Finds all of the divs that will toggle open and closed
 *
 *It then sets the height of these divs to 0;
 */
window.onload = function(){
    for(var i = 0; i < elements.length; i++){
        if(elements[i].className == "wide" || elements[i].className == "slider"){
            var height = elements[i].offsetHeight;
            var step = parseInt(height/20);
            dropEls.push(new dropElement(elements[i], height, 0, step, true));
            elements[i].style.height = 0+"px";
        }
    }
}


function dropElement(el, height, currentHeight, step, closed){
    this.el = el;
    this.height = height;
    this.step = step;
    this.currentHeight = currentHeight;
    this.closed = closed;

    /*
     * Returns a reference to the Element
     */
    this.getEl = function(){
        return this.el;
    }

    /*
     * Returns the height of the Element
     */
    this.getHeight = function(){
        return this.height;
    }

    /*
     * Returns the current Height of the Element
     */
    this.getCurrentHeight = function(){
        return this.currentHeight;
    }

    /*
     * Returns the the value of Step
     */
    this.getStep = function(){
        return this.step;
    }

    /*
     * Returns the the value of closed (true or false)
     */
    this.getClosed = function(){
        return this.closed;
    }

    /*
     * Returns the current Height of the Element
     */
    this.setCurrentHeight = function(height){
        this.currentHeight = height;
    }

    /*
     * Returns the the value of closed (true or false)
     */
    this.setClosed = function(bool){
        this.closed = bool;
    }
}

function openEl(el){
    if(!animating){
        /*
         * Matches to relevent element to open to the toggler clicked
         * and sets global variable openingEl to that reference.
         *
         * Also keeps a record of the index in dropEls of the element to
         * be opened.
         */
        var index = -1;
        openingTog = el;
        var openingTogID = el.getAttribute("id").substr(7,2);
        for(var i = 0; i < dropEls.length; i++){
            var openingElID = dropEls[i].getEl().getAttribute("id").substr(7,2);
            if(openingTogID == openingElID){
                openingEl = dropEls[i].getEl();
                index = i;
            }
        }

        /*
         * Closes open Elements and opens correct one only if correct
         * Element is not already open.
         */
        setTimeout(animate, 15);
    }
}

function animate(){
    var correctElID = openingEl.getAttribute("id");
    var height;
    var currentHeight;
    var step;

    /*
     * Finds out if all other Elements are closed
     */
    var index;
    var allClosed = true;
    for(var i = 0; i < dropEls.length; i++){
        var anElID = dropEls[i].getEl().getAttribute("id");
        if(correctElID != anElID){
            var elClosed = dropEls[i].getClosed();
            if(!elClosed){
                allClosed = false;
            }
        }else{
            index = i;
        }
    }


    if(!allClosed){
        for(var j = 0; j < dropEls.length; j++){
            var openElID = dropEls[j].getEl().getAttribute("id");
            if(correctElID != openElID){
                if(!dropEls[j].getClosed()){
                    height = dropEls[j].getHeight();
                    currentHeight = dropEls[j].getCurrentHeight();
                    step = dropEls[j].getStep();

                    currentHeight = currentHeight - step;
                    if(currentHeight <= 0){
                        currentHeight = 0;
                        dropEls[j].setClosed(true);
                    }
                    dropEls[j].setCurrentHeight(currentHeight);
                    dropEls[j].getEl().style.height = currentHeight + "px";
                    animating =  true;
                    setTimeout(animate, 15);
                }
            }
        }
    }else{
        if(dropEls[index].getClosed()){
            height = dropEls[index].getHeight();
            currentHeight = dropEls[index].getCurrentHeight();
            step = dropEls[index].getStep();

            currentHeight = currentHeight + step;
            if(currentHeight >= height){
                currentHeight = height;
                dropEls[index].setClosed(false);
            }
            dropEls[index].setCurrentHeight(currentHeight);
            openingEl.style.height = currentHeight + "px";
            animating =  true;
            setTimeout(animate, 15);
        }else{
            //Object is already open.
            animating =  false;
        }
    }
}