// match_heights.init() takes a list of CSS selectors as paramaters
// and makes their height equal to the tallest element in the list
//
// To use, add the following to {% block js_more %}
// <script type="text/javascript">
//     $(function() {
//         match_heights.init('a CSS selector',
//                            'another CSS selector',
//                            'another CSS selector');
//     });
// </script>

var match_heights = (function() {
    // Accept an array of arrays [a, b, c, ...], and return another array of
    // arrays [[a1, b1, c1, ...], [a2, b2, c2, ...], ...].
    var zip = function(outer) {
        var res = [];
        
        // Get the number of elements contained by the first collection
        var size = outer[0].length;
        
        for (var i=0; i < size; i++) {
            var inner = [];
            for (var j=0; j < outer.length; j++) {
                inner.push(outer[j][i]);
            }
            res.push(inner);
        }
        
        return res;
    };
    
    // Accept an array of DOM elements. Make sure the height of all elements is
    // equal to the height of the tallest element.
    var matchHeights = function(els) {
        var max = -1;
        
        for (var i=0; i < els.length; i++) {
            var height = $(els[i]).innerHeight();
            if (height > max) {
                max = height;
            }
        }
        
        for (var i=0; i < els.length; i++) {
            $(els[i]).height(max);
        }
    };

    // PUBLIC INTERFACE
    
    var self = {};

    self.init = function() {
        var wrapperObjs = $.map(arguments, function(selector) {
            return $(selector);
        });
        
        var rows = zip(wrapperObjs);
        $.each(rows, function(i, row) {
            matchHeights(row);
        });
    };
    
    return self; 
})();