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

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

        this.dom_element.addEvent('click', function(event){
            event.preventDefault();
            event.stopPropagation();
            that.open();
        });

        if (this.isCurrentShow())
        {
            this.dom_element.addClass('current_show');
        }
    },

    open: function()
    {
        var that = this;

        $$('.day_for_hour > ul > li > div.epg_detail_overlay').addClass('hide');
        $$('.day_for_hour > ul > li').removeClass('current');

         if (!that.overlay_dom_element) {
             that.overlay_dom_element = new Element('div', {
                 'class': 'epg_detail_overlay loading'
             });


             var req = new Request.HTML({
                 'url':that.options.url,
                 'onSuccess': function(html) {
                    that.overlay_dom_element.adopt(html);

                    that.overlay_dom_element.getElement('.close').addEvent('click', function(event){
                        event.preventDefault();
                        event.stopPropagation();

                        that.hide();
                    });

                    var more_btn = that.overlay_dom_element.getElement('.button');
                    if(null !== more_btn)
                    {
                        more_btn.addEvent('click', function(event){
                           event.stopPropagation(); //stop the event from bubbling up so it can trigger the default of the "more" link.
                        });                        
                    }

                    that.updatePosition();
                 }
             }).get();


             that.dom_element.grab(that.overlay_dom_element);

            // close
             that.close_event = $(document.body).addEvent('click',function(e) {
               if(that.dom_element && !e.target || !$(e.target).getParents().contains(that.dom_element)) {
                 that.hide();
               }
             });
         }


         /*
          * Overlay Position + Pfeil
          */
         var offset = that.dom_element.getPosition();
         if(offset.x > 500)
         {
             that.overlay_dom_element.addClass('left_side');
             that.overlay_dom_element.removeClass('right_side');
         }
         else
         {
             that.overlay_dom_element.addClass('right_side');
             that.overlay_dom_element.removeClass('left_side');
         }

         /*
          * Current Highlight
          */
         var background_left = 1111 - offset.x;
         $$('.mod_programguide > .broadcasts > li').setStyle('backgroundPosition', '-' + background_left + 'px 0px');
         this.dom_element.addClass('current');

         if(offset.x == 111) {
             $$('.mod_programguide > .broadcasts').setStyle('backgroundPosition', 'top right');
         }
         else if(offset.x == 861)
         {
             $$('.mod_programguide > .broadcasts').setStyle('backgroundPosition', 'top left');
         }
         else
         {
             $$('.mod_programguide > .broadcasts').setStyle('backgroundPosition', 'top center');
         }

         this.overlay_dom_element.removeClass('hide');
    },

    hide: function()
    {
        if (this.overlay_dom_element) {
            this.overlay_dom_element.addClass('hide');
            this.dom_element.removeClass('current');
        }
    },

    updatePosition: function()
    {
        var that = this;

        var broadcasts = $$('ul.broadcasts')[0];
        var broadcasts_coords = broadcasts.getCoordinates();

        if(that.overlay_dom_element.getCoordinates().bottom > broadcasts_coords.bottom)
        {
            var overlay_top = (that.overlay_dom_element.getCoordinates().bottom - broadcasts_coords.bottom)*-1
            that.overlay_dom_element.setPosition({y: overlay_top});

            var arrow_top = Math.abs(overlay_top) + 25;
            that.overlay_dom_element.getElement('span.overlay_arrow').setPosition({y: arrow_top});
        }
    },

    isCurrentShow: function()
    {

        var start = Date.fromISOString(this.options.broadcasting_time);
        if (isNaN(start))
        {
            start = new Date(this.options.broadcasting_time.replace('-', '/'));
        }
        start = start.getTime();

        var duration = this.options.duration;

        try {
            duration = duration.replace(/^0*/, '').split(':');
            duration = (parseInt(duration[0]) * 60 + parseInt(duration[1]))*1000;
        } catch (e) {
            //something with the duration format seems to be wrong.
            //            console.log(duration);
            duration = 0;
        }

        var end = start+duration;
        var now = new Date().getTime();

        return (now >= start && now < end);
    }
});



JsBehaviourToolkit.registerHandler('epg_detail', EpgDetailBehaviour);