var ListMask = new Class({
    
    options: {
        limit: 5,
        duration: 300,
        contentContainer: "div.visible",
        itemClass: ".items",
        toggleClass: "toggler",
        minText: "Show all",
        maxText: "Hide"
    },
    
    initialize: function(container_id, options) {
        
        this.setOptions(options);
        
        this.container = $(container_id); // Main container
        this.contentContainer = this.container.getElement(this.options.contentContainer); // List container
        this.contentContainer.setStyle("overflow", "hidden");
                
        var items = this.contentContainer.getElements(this.options.itemClass);
        
        this.maxHeight = this.contentContainer.getSize().size.y; // Total list height
        this.minHeight = 0;
        
        if (items.length > this.options.limit) {
            
            // Mask animator
            this.fx = new Fx.Style(this.contentContainer, "height", {duration: this.options.duration});
            
            var togglers = this.container.getElements("."+this.options.toggleClass);
            this.initTogglers(togglers);
            
            // Add list item heights to figure out mask height
            for (var i=0; i < this.options.limit; i++) {
                var dimensions = items[i].getSize();
                this.minHeight = this.minHeight + dimensions.size.y;
            }
            
            this.listTotal = (items.length - 1); // Total rows, minus title row

            this.minimize(); // Initial state
        }
        
    },
    
    initTogglers: function(togglers) {
        this.togglers = togglers;
        this.togglers.each(function(item) {
            item.addEvent('click', this.toggle.bind(this));
            if (item.hasClass('off')) {
                this.togglerOff = item;
                item.setStyle('display', 'none');
            } else if (item.hasClass('on')) {
                this.togglerOn = item;
            }
        }, this);
    },
    
    toggle: function(event) {
        
        new Event(event).stop();
        
        var height = this.contentContainer.getSize().size.y;
        var open = (height > this.minHeight) ? true : false;
        
        if (open) {
            this.minimize();
        } else {
            this.maximize();
        }
    },
    
    maximize: function() {
        this.fx.start(this.maxHeight);
        this.setTogglers("maximize");
    },
    
    minimize: function() {
        this.fx.start(this.minHeight);
        this.setTogglers("minimize");
    },
    
    setTogglers: function(which) {
        if (which == "maximize") {
            this.togglerOn.setStyle('display', 'none');
            this.togglerOff.setStyle('display', 'block');
        } else if (which == "minimize") {
            this.togglerOn.setStyle('display', 'block');
            this.togglerOff.setStyle('display', 'none');
        }
    }
    
});

ListMask.implement(new Options);