// CategoryPanelHandler  class
var CategoryPanelHandler = Class.create();
CategoryPanelHandler.prototype = {
    initialize: function(id_list, prefix){
        this.id_list          = id_list;
        this.prefix           = prefix;
        this.btn_bg_color     = (prefix == 'spend') ? 'orange' : 'blue';
        this.btn_text_color   = (prefix == 'spend') ? '#fb8024' : '#2e94e2';
    },
    set:function(){
        var id_list     = this.id_list;
        var id_list_len = this.id_list.length;
        var el_array    = {};

        //category_panel style
        var category_on_style  = {'color':'#ffffff', 'background':'transparent url(/images/top/button_category-bg_'+this.btn_bg_color+'.gif) repeat-x', 'height':'25px', 'padding':'13px 0 0 0 ', 'margin':'0'};
        var category_off_style = {'color':this.btn_text_color, 'background':'none', 'height':'25px'};

        //default selected category
        Element.setStyle($(this.prefix+'_new'), category_on_style );
        this.keep_id = this.prefix+'_new';
        
        //element of category list  ex: spend_cash_category , pool_point_category 
        for(var i=0; i < id_list_len; i++){
           el_array[id_list[i]] = $(this.prefix+'_'+id_list[i]+'_category');
        }

        for(var i=0; i < id_list_len; i++){
           var id = id_list[i];
           var target_el = $(this.prefix+'_'+id);
            
           //add event click
           Event.observe(target_el, 'click', function(e){ 
                for(var i=0; i < id_list_len; i++){
                   var target_id = this.prefix+'_'+id_list[i];
                   Element.setStyle($(target_id+'_text'), {'display':'none'});
                   if(Event.element(e).id != target_id){
                       Element.setStyle($(target_id), category_off_style);
                   }
                   if(el_array[id_list[i]].visible()){
                       Element.setStyle(el_array[id_list[i]], {'display':'none'});
                   }
                }
                this.keep_id   = Event.element(e).id;
                var click_id   = this.keep_id;
                Element.setStyle(Event.element(e), category_on_style );
                new Effect.SlideDown(this.keep_id+'_category', {duration:1, fps:70, 
                   afterFinish:function(){
                       $(click_id+'_category').visualEffect('Highlight');
                       Element.setStyle($(click_id+'_text'), {'display':'block'});
                   },
                   queue :{position:'end',scope:'scopename',limit:2}
                });
           }.bind(this));

           //add event mouse over
           Event.observe(target_el, 'mouseover', function(e){ 
                Element.setStyle(Event.element(e), category_on_style );
           }.bind(this));

           //add event mouse out
           Event.observe(target_el, 'mouseout', function(e){ 
                if(Event.element(e).id != this.keep_id){
                    Element.setStyle(Event.element(e), category_off_style );
                }
           }.bind(this));
        }
    }
};