var RealtimeBar = {
  'reloads' : 0,
  'updater': null,
  'reloadInterval': 5000,
  'playLength': 60*1000, // Defaults to 15 seconds
  'playUntil': null,

  'init': function(millis) {
    this.playLength = millis;

    this.play_button=$E(".realtime_bar .play_button");
    this.play_button.addEvent("click",this.play_button_click.bind(this));
    this.contents=[$E('.realtime_bar .contents_a'),$E('.realtime_bar .contents_b')]
    this.contents_fx = [
      new Fx.Styles(this.contents[0], {duration:500, wait:false}),
      new Fx.Styles(this.contents[1], {duration:500, wait:false})
      ];
    this.play_button_fx = new Fx.Styles(this.play_button, {duration:200, wait:false});

    if (window.ie)
      {
      this.contents[1].setStyle("display","none");
      }
    else
      {
      this.contents[1].setStyle("opacity","0");
      }

    this.play_button.setStyle("opacity","0");
    this.play();
    this.contents_front_buffer=0;
    this.contents_back_buffer=1;
  },

  play_button_click: function() {
    this.play();
    this.fetchBar();
  },

  'play': function() {
    // Hide the play button
    //this.play_button.setStyle('display','none');
    this.play_button_fx.start({'opacity': '0'});

    // Set the playUntil (in the form of milliseconds from epoch)
    this.playUntil = new Date().getTime() + this.playLength;

    // Start the timer
    this.updater = this.reload.periodical(this.reloadInterval, RealtimeBar);
//    this.fetchBar();
  },

  pause: function() {
    // Clear the updater
    $clear(this.updater);

    // Show the play button
    //this.play_button.setStyle('display','block');
    this.play_button_fx.start({'opacity': '1'});
  },

  reload: function() {
    if (new Date().getTime() < this.playUntil) {
      this.fetchBar();
    }
    else {
      this.pause();
    }
  },

  fetchBar: function() {
    new Ajax('/protected/realtime_bar', {
      data: {
        reload_count: (++this.reloads),
        online_now_page: online_now_page,
        view_kimi: view_kimi_msid,
        page_owner: page_owner_user_id
      },
      onComplete: this.fetchBarComplete.bind(this)
    }).request();
  },

  swapBar: function() {
    var front=this.contents_front_buffer;
    var back=this.contents_back_buffer;
    if (window.ie)
      {
      this.contents[back].setStyle('display', 'block');
      this.contents[front].setStyle('display', 'none');
      }
    else
      {
      this.contents_fx[back].start({'opacity': '1'});
      this.contents_fx[front].start({'opacity': '0'});
      }
    this.contents_front_buffer=back;
    this.contents_back_buffer=front;
  },

  fetchBarComplete: function(response) {
    this.contents[this.contents_back_buffer].setHTML(response);
    images_to_load=0;
    imageLoaded=this.imageLoaded.bind(this);
    this.contents[this.contents_back_buffer].getElements("img").each(function(tag){
      images_to_load++;
      tag.addEvent("load",imageLoaded);
      });
    this.images_to_load=images_to_load;
  },

  imageLoaded: function() {
    this.images_to_load--;
    if (this.images_to_load==0)
      {
      this.swapBar();
      }
  }

};