var EpgRangeBehaviour = new Class({
    Implements:[Events, Options],

    initialize:function (dom_element, options)
    {
        var that = this;
        this.dom_element = $(dom_element);
        this.options = options;

        var currentTime = new Date();
        var hour = currentTime.getHours();
        var selector;

        if(hour >= 6 && hour <= 11) { selector ='starting_6'; }
        if(hour >= 12 && hour <= 17) { selector = 'starting_12'; }
        if(hour >= 18 && hour <= 22) { selector = 'starting_18'; }
        if(hour >= 23 || hour <= 5) { selector = 'starting_23'; }

        this.show(selector);

        this.dom_element.getChildren('li').addEvent('click', function(event)
        {
            event.preventDefault();
            event.stopPropagation();

            if(this.hasClass('starting_6'))
            {
                that.show('starting_6');
            }

            if(this.hasClass('starting_12'))
            {
                that.show('starting_12');
            }

            if(this.hasClass('starting_18'))
            {
                that.show('starting_18');
            }

            if(this.hasClass('starting_23'))
            {
                that.show('starting_23');
            }
        });
    },

    hideAllExcept: function(selector)
    {
        $$('.broadcasts').getLast().getChildren(':not(.headline) :not(.'+selector+')').hide();
        // $('.broadcasts > .hour').not('.headline').not('.' + selector).hide();
    },

    show: function(selector)
    {
        $$('.hour_range > li').removeClass('active');
        $$('.hour_range > .' + selector).addClass('active');

        var element_to_show = $$('.broadcasts > .' + selector);

        element_to_show.show();
        this.hideAllExcept(selector);
    }
});

JsBehaviourToolkit.registerHandler('epg_range_tabs', EpgRangeBehaviour);