var LogoFlipper = Class.create();
LogoFlipper.prototype = {

  current: 0,
  data: [],
  element: null,
  next_button: null,
  prev_button: null,
  question: null,
  name: null,

  initialize: function( element, json_data ) {
    this.element = $(element);
    this.data = json_data;

    this.next_button = $$('#' + this.element.id + ' ul.controls li.next a')[0];
    Event.observe( this.next_button, 'click', this.next.bindAsEventListener(this) );

    this.prev_button = $$('#' + this.element.id + ' ul.controls li.previous a')[0];
    Event.observe( this.prev_button, 'click', this.previous.bindAsEventListener(this) );

    this.logo = $$('#' + this.element.id + ' div.flipper p.logo')[0];
    this.name = $$('#' + this.element.id + ' div.flipper p.link a .name')[0];
    this.anchor = $$('#' + this.element.id + ' p.link a')[0];

    this.render();
  },

  render: function() {
    this.logo.update( "<img src='"+this.data[this.current].logo+"' alt='"+this.data[this.current].name+"' />" );
    this.name.update( this.data[this.current].name );
    this.anchor.href = this.data[this.current].url;
  },

  next: function(e) {
    Event.stop(e);

    this.current++;
    if (this.current==this.data.length) this.current=0;

    this.render();
  },

  previous: function(e) {
    Event.stop(e);

    this.current--;
    if (this.current<0) this.current=this.data.length-1;

    this.render();
  }

};