var CharitiesList = Class.create({
    options: {
        container_class: '.ohw_charities.select.wrapper',
        maxHeight: 400
    },
    container: null,
    selectObj: null,
    handlerObj: null,
    labelItem: null,
    openButton: null,
    list: null,
    listItems: new Array(),
    selectedItemIdx: -1,
    shouldClose: true,
    itemsHeight: 0,

    initialize: function(element) {
        this.container = element;

        if(this.container){
            this.prepare();
            this.setHandles();
        }
    },

    prepare: function(){
        this.selectObj = this.container.select('select')[0];
        this.labelItem = this.container.select('div.listcontainer div.control div.selected')[0];
        this.openButton = this.container.select('div.listcontainer div.control a.button')[0];
        this.list = this.container.select('div.listcontainer ul.list')[0];
        this.listItems = this.container.select('div.listcontainer ul.list li.item');
        this.handlerObj = this.container.select('div.listcontainer div.handler-charity')[0];

        this.selectObj.setStyle({position: 'absolute', visibility: 'hidden'});
        this.container.select('div.listcontainer')[0].show();

        this.open();
        var i = 0;
        for(i = 0; i < this.listItems.length; i++){
            this.itemsHeight += this.listItems[i].getHeight();
            //console.debug(this.listItems[i].getHeight());
        }
        //console.debug(this.itemsHeight);
        this.close();

        if(this.itemsHeight > this.options.maxHeight)
            this.list.setStyle({height:this.options.maxHeight + 'px'});

        this.handlerObj.setStyle({height:this.list.getHeight() + 'px'});
    },

    setHandles: function(){
        var _this = this;

        this.openButton.observe('click', function(evt){
            _this.open();
        });

        /*this.list.observe('mouseout', function(evt){
            _this.shouldClose = true;
            setTimeout(_this.close.bind(_this), 10);
        });*/

        this.handlerObj.observe('mouseout', function(evt){
            _this.shouldClose = true;
            setTimeout(_this.close.bind(_this), 10);
        });

        this.list.observe('blur', function(evt){
            _this.shouldClose = true;
            setTimeout(_this.close.bind(_this), 100);
        });

        var i = 0;
        for(i=0; i<this.listItems.length;i++){
            this.listItems[i].observe('mouseover', function(evt){
                console.log('hovering..');
                $(Event.element(evt)).addClassName('hover');
                _this.shouldClose = false;
                this.addClassName('hover');
            });
            this.listItems[i].observe('mouseout', function(evt){
                _this.shouldClose = true;
                this.removeClassName('hover');
            });
            this.listItems[i].observe('click', function(evt){
                var key = parseInt(this.id.match(/[0-9]+/));
                _this.select(key);
                Event.stop(evt);
            });
        }
    },

    open: function(){
        this.list.show();
        //this.handlerObj.show();
        //this.list.focus();
    },

    close: function(){
        if(this.shouldClose){
            this.list.hide();
            this.handlerObj.hide();
        }
    },

    select: function(idx){
        this.selectObj.options[idx+1].selected = true;
        this.selectedItemIdx = idx;
        this.setLabel(this.listItems[idx].select('span.title')[0].innerHTML);
        this.shouldClose = true;
        this.close();
    },

    setLabel: function(str){
        this.labelItem.update(str);
    }
});

document.observe("dom:loaded", function() {
    var options = {
        container_class: 'div.ohw_charities.select.wrapper'
    }
    $$(options.container_class).each(function (n) {
        new CharitiesList(n);
    });

});