ECards = Class.create();
ECards.prototype = {
  initialize: function() {
    this.ecards_list = $('ecard_thumbnails').down('ul');
    this.large_card = $('big_ecard_container').down('img.big_ecard_image');
    this.data = cards_data;
    this.data_hash = $H(this.data);
    
    this.cycling = true;
    this.cycle_time = 4.5; // in seconds
    this.cycle_index = 0;
    this.cycle_timeout = null;
    this.card_ids = this.data_hash.keys().sort();
    
    this.current_card = 0;
    
    // generate thumbnails.
    this.data_hash.each(function(pair) {
      this.ecards_list.insert({
        bottom: this.generate_thumbnail(pair.key, pair.value)
      });
      Event.observe('card_'+pair.key, 'click', this.handle_thumbnail_click.bind(this, pair.key));
    }.bind(this));
    
    this.select_card(this.card_ids.first());
    this.cycle_timeout = this.cycle.bind(this).delay(this.cycle_time);
    
    Event.observe('submit_button', 'click', this.send_ecard.bind(this));
  },
  
  getData: function() {
    return {
      from_name: $F("from_name_field"),
      from_email: $F("from_email_field"),
      to_name: $F("to_name_field"),
      to_email: $F("to_email_field"),
      message: $F("message_field"),
      card_id: this.current_card
    };
  },
  
  validate: function(data) {
    if (data.from_name.length < 1 ||
        data.from_email.length < 1 ||
        data.to_name.length < 1 ||
        data.to_email.length < 1)
    {
      $('send_status').show().update('All fields except &quot;Message&quot; are required.').addClassName('failure').removeClassName('success');
      return false;
    }
    return true;
  },
  
  send_ecard: function() {
    var params = this.getData();
    if (!this.validate(params)) { return; }

    new Ajax.Request('/send_ecard.php', {
      method: 'post',
      parameters: params,
      onSuccess: this.handle_send_ecard_success.bind(this),
      onComplete: this.handle_send_ecard_complete.bind(this),
      evalJSON: 'force'
    });
    
    $('submit_button').disabled = true;
    $('submit_button').value = "Sending...";
    $('send_status').hide();
  },
  
  handle_send_ecard_complete: function(req) {
    $('submit_button').disabled = false;
    $('submit_button').value = "Send E-Card"
  },
  
  handle_send_ecard_success: function(req) {
    var success = req.responseJSON.success;
    if (success) {
      $('send_status').show().update('E-Card successfully sent.').addClassName('success').removeClassName('failure');
      $('to_name_field').value = '';
      $('to_email_field').value = '';
      $('message_field').value = '';
    }
    else {
      $('send_status').show().update('Unable to send E-Card.').addClassName('failure').removeClassName('success');
    }
  },
  
  handle_thumbnail_click: function(card_id) {
    if (this.cycle_timeout) {
      clearTimeout(this.cycle_timeout);
      this.cycling = false;
    }
    this.current_card = card_id;
    this.select_card(this.current_card);
    window.scrollTo(0,0);
  },
  
  cycle: function() {
    if (!this.cycling || $('send_form_container').visible()) { return; }
    if (this.cycle_index < this.card_ids.length - 1) {
      this.cycle_index = this.cycle_index + 1;
    }
    else {
      this.cycle_index = 0;
    }
    this.select_card(this.card_ids[this.cycle_index]);
    if (this.cycling) {
      this.cycle_timeout = this.cycle.bind(this).delay(this.cycle_time);
    }
  },
  
  stop_cycling: function() {
    if (this.cycle_timeout) {
      clearTimeout(this.cycle_timeout);
      this.cycling = false;
    }
  },
  
  select_card: function(card_id) {
    this.current_card = card_id;
    this.large_card.src = "/images/ecards/" + this.data[card_id]['name'] + ".jpg";
    this.large_card.alt = this.data[card_id]['caption'];
    this.ecards_list.select('li').each(function(li) {
      if (li.readAttribute('card') == card_id) {
        li.addClassName('selected');
      }
      else {
        li.removeClassName('selected');
      }
    });
  },
  
  generate_thumbnail: function(id, data) {
    return '<li id="card_' + id + '" card="' + id + '"><img src="/images/ecards/' + data['name'] + '-thumb.jpg" class="ecard_image_thumbnail" alt="" />' + data['caption'] + '</li>'
  }
};