(function(root, $, undefined){
    
    var Dropdown = function(options, activeIndex) {
        
        this.options = options;
        this.activeOption = this.options[activeIndex];
        this.isOpen = false;
        
        var self = this;
        
        var container = $("<div/>", {
            "class": "dropdownContainer"
        });
        
        var chooser = $("<div/>", {
            "class": "dropdownChooser",
            click: function() {

                if(self.isOpen) {

                    self.close();

                } else {

                    $("html").trigger("click");
                    self.open();

                }
                
                return false;

            }
        });
        
        var flyout = $("<div/>", {
            "class": "dropdownFlyout",
            css: {
                display: "none"
            },
            data: {"olddisplay": "block"}
        });
        
        var i = -1;
        var len = this.options.length;
        
        while(++i < len) {
            flyout.append($("<div/>", {
                "class": "dropdownOption",
                html: this.options[i]["name"],
                click: function() {
                    var index = $(this).index();
                    self.select(index);
                    self.ui.container.trigger("optionClick", [self, index]);
                    self.close();
                }
            }).append(this.options[i].subtitle ? $("<span/>", {
                text: this.options[i].subtitle
            }) : ""));
        }
        
        var html = container.append(chooser, flyout);

        this.ui = {
            
            container: container,
            chooser: chooser,
            flyout: flyout,
            html: html
            
        };

        $("html").click(function(){
            
            self.close();
            
        });

        this.isOpen = false;
        this.updateUI();
        
    };
    
    Dropdown.prototype = {
        
        open: function() {
            this.ui.container.addClass("open");
            this.ui.flyout.stop(true, true).fadeIn();
            this.isOpen = true;
            
        },
        
        close: function() {
            this.ui.container.removeClass("open");
            this.ui.flyout.stop(true, true).fadeOut();
            this.isOpen = false;
            
        },
        
        select: function(index) {
            
            this.activeOption = this.options[index];
            this.updateUI();
            
        },
        
        updateUI: function() {
            
            this.ui.flyout.children()
                .removeClass("first last")
                .first()
                    .addClass("first")
                .end().last()
                    .addClass("last");
            
            this.ui.chooser.empty().append(this.activeOption.name);
            
            if(this.activeOption.subtitle) {
                this.ui.chooser.append($("<span/>", {
                    text: this.activeOption.subtitle
                }));
            }
            
            if(this.isOpen) {
                this.open();
            } else {
                this.close();
            }
            
        }
        
    };
    
    root.B.Dropdown = Dropdown;
    
})(this, jQuery);