(function(root, $, undefined) {
    
    root.Collection = function(name, subtitle, infoText, screens, isActive, activeScreenIndex) {
        
        this.infoText = infoText;
        this.name = name;
        this.screens = screens;
        this.isActive = !!isActive;
        this.subtitle = subtitle
		this.isUserManipulated = false;
        
        var i = -1;
        var len = this.screens.length;
        while(++i < len) {
            this.screens[i].hide();
        }
        if(activeScreenIndex >= this.screens.length) {
            activeScreenIndex = 0;
        }
        this.activeScreen = this.screens[activeScreenIndex];
        this._activeScreenIndex = activeScreenIndex;
        this.activeScreen.show();
        
        this._generateHTML();
        
    };
    
    root.Collection.prototype = {
        
        _generateHTML: function(){
            
            var self = this;
            
            var html = $("<div/>", {
                "class": "collection",
                css: {
                    display: self.isActive ? "block" : "none" 
                }
            });
            
            var i = -1;
            var len = this.screens.length;
            
            while(++i < len) {
                this.screens[i].updateHTML();
                html.append(this.screens[i].html);
            }
            
            this.html = html;
        
        },
        
        setActiveScreen: function(index){
                        
            if(!this.isActive) return;
                        
            if(this._activeScreenIndex === index) return;
                        
            this.activeScreen.hide();
            this.activeScreen = this.screens[index];
            this._activeScreenIndex = index;
            this.activeScreen.show();
            
        },
        
        changeScreen: function(indexChange) {
            
            var index = this._activeScreenIndex;
            
            index += indexChange;
            
            if(index < 0) {
                index = this.screens.length + index;
            } else if (index >= this.screens.length) {
                index = index - this.screens.length;
            }
            
            this.setActiveScreen(index);
            
        },
        
        hide: function() {
            
            this.isActive = false;
            this.activeScreen.hide();
            this.html.stop().fadeOut(300);
        
        },
        
        show: function() {
            
            this.isActive = true;
            this.activeScreen.show();
            this.html.stop().fadeIn(1000);
            
        }
        
    };
    
})(B, jQuery);