//script for equalizing box heights on the home page and activating mouseover opacity

boxes = new function() {
    this.border=2;  //border width on all boxes

    //initializes functionality at page load
    this.initialize = function() {
        var self=boxes;
        
        //get the outer container and all divs in it
        var container=document.getElementById('home_right');
        var all_divs=container.getElementsByTagName('div');
        
        var max_height=0;
        
        var home_boxes=new Array();
        var divs_length=all_divs.length;
        var this_div=null;
        var this_div_height=null;
        for (x=0; x<divs_length; x++) {
            //loop through all divs 
            this_div=all_divs[x];
            if (checkClass(this_div, 'home_box')) {
                //if div matches 'home_box' class, add to home_boxes array
                home_boxes[home_boxes.length]=this_div;
                
                //get div's height and record if largest
                this_div_height=this_div.offsetHeight;
                if (this_div_height>max_height) {
                    max_height=this_div_height;
                }
            }
        }
        
        //height of all boxes is max height minus border width
        var final_height=max_height-(self.border*2);
        
        var boxes_length=home_boxes.length;
        this_div=null;
        for (x=0; x<boxes_length; x++) {
            //loop through all boxes
            this_div=home_boxes[x];
            
            this_div.timer=null;
            
            //set height, give 'transparent' class, and set up event handlers
            this_div.style.height=final_height+'px';
            this_div.className=this_div.className.replace(/^(.+)$/, "$1 transparent");
            addEvent(home_boxes[x], 'mouseover', self.turnOpaque, false);
            addEvent(home_boxes[x], 'mouseover', stopBubble, false);
            addEvent(home_boxes[x], 'mouseout', self.startTransparent, false);
        }
        
        //do the same, except for the height, for the testimonials box
        var quote_box=document.getElementById('quotes');
        quote_box.className=quote_box.className.replace(/^(.+)$/, "$1 transparent");
        addEvent(quote_box, 'mouseover', self.turnOpaque, false);
        addEvent(quote_box, 'mouseover', stopBubble, false);
        addEvent(quote_box, 'mouseout', self.startTransparent, false);
    }
    
    //turn the box opaque
    this.turnOpaque = function(e) {
        var self=boxes;
        
        //get the element that triggered the event and make sure it is the correct container
        var el=findTarget(e);
        while ((el.tagName.toLowerCase()!='div' || (!checkClass(el, 'home_box') && el.id!='quotes')) && el.tagName.toLowerCase()!='body') {
            el=el.parentNode;
        }
        
        //cancel any timeout to turn box transparent, in case of mousing between elements in the box
        clearTimeout(el.timer);
        
        //remove 'transparent' class
        el.className=el.className.replace(/\btransparent\b/, '');
    };
    
    //start turnTransparent function after short delay - in case of mousing between elements in the box
    this.startTransparent = function(e) {
        var self=boxes;
        
        //get the element that triggered the event and make sure it is the correct container
        var el=findTarget(e);
        while ((el.tagName.toLowerCase()!='div' || (!checkClass(el, 'home_box') && el.id!='quotes')) && el.tagName.toLowerCase()!='body') {
            el=el.parentNode;
        }
        
        //schedule the function to turn transparent after short delay
        el.timer=setTimeout(function() {self.turnTransparent(el)}, 10);
    };
    
    //turn box transparent
    this.turnTransparent = function(el) {
        var self=boxes;
        
        //give 'transparent' class
        el.className=el.className.replace(/^(.+)$/, "$1 transparent");
    };
}