// Use these constants to control the behaviour of the portrait cycler
var FADE_AND_APPEAR_DURATION = 2;
var CYCLE_PERIOD = 3;

document.observe('dom:loaded', function() {
  new PortraitsAndImageCycler().start();
});

// Represents a portrait
var Portrait = Class.create({
  initialize: function(portraitElement) {
    this.element = portraitElement;
    this.overlay = portraitElement.firstDescendant();
  },

  show: function(delayed) {
    if (!delayed) {
      this.overlay.hide();
    } else {
      this.overlay.fade({ duration: FADE_AND_APPEAR_DURATION, from: 0.7, to: 0 });
    }
  },

  hide: function(delayed) {
    if (!delayed) {
      this.overlay.show();
    } else {
      this.overlay.appear({ duration: FADE_AND_APPEAR_DURATION, from: 0, to: 0.7 });
    }
  }
});

// Represents the image
var Image = Class.create({
  initialize: function(container, image, alt, link) {
    this.container = container;
    this.src = image;
    this.alt = alt;
    this.link = link;
  },

  show: function(delayed) {
    var linkElement = this.container.down('a');
    linkElement.writeAttribute('href', this.link)
    linkElement.down('img').writeAttribute('src', this.src)
    linkElement.down('img').writeAttribute('alt', this.src)

    if (!delayed) {
      this.container.show();
    } else {
      this.container.appear({ duration: FADE_AND_APPEAR_DURATION });
    }
  },

  hide: function(delayed) {
    if (!delayed) {
      this.container.hide();
    } else {
      this.container.fade({ duration: FADE_AND_APPEAR_DURATION });
    }
  }
});

// Convenient wrapper around a top portrait and its associated bottom portrait and text
var PortraitsAndImageWrapper = Class.create({
  initialize: function(cycler, index, topPortrait, bottomPortrait, image) {
    this.cycler = cycler;
    this.index = index;
    this.topPortrait = topPortrait;
    this.bottomPortrait = bottomPortrait;
    this.image = image;

    Event.observe(topPortrait.element, 'mouseover', this.handleMouseOver.bind(this));
  },

  handleMouseOver: function() {
    this.cycler.showWrapper(this);
  },

  show: function(delayed) {
    this.topPortrait.show(delayed);
    this.bottomPortrait.show(delayed);
    this.image.show(delayed);
  },

  hide: function(delayed) {
    this.topPortrait.hide(delayed);
    this.bottomPortrait.hide(delayed);
    this.image.hide(delayed);
  }
});

// Initializes the portraits, images and wrappers and starts the cycling
var PortraitsAndImageCycler = Class.create({
  initialize: function() {
    var content = $('content');

    var imageContainer = content.down('.image');
    var topPortraitsContainer = content.down('.top_portraits');
    var bottomPortraitsContainer = content.down('.bottom_portraits');

    var pregnantPortrait = new Portrait(topPortraitsContainer.down('.pregnant'));
    var babyPortrait = new Portrait(topPortraitsContainer.down('.baby'));
    var toddlerPortrait = new Portrait(topPortraitsContainer.down('.toddler'));
    var childPortrait = new Portrait(topPortraitsContainer.down('.child'));
    var teenagerPortrait = new Portrait(topPortraitsContainer.down('.teenager'));
    var adolescentPortrait = new Portrait(topPortraitsContainer.down('.adolescent'));

    var pregnantBabyConsultantPortrait = new Portrait(bottomPortraitsContainer.down('.pregnant_baby_consultant'));
    var toddlerConsultantPortrait = new Portrait(bottomPortraitsContainer.down('.toddler_consultant'));
    var childConsultantPortrait = new Portrait(bottomPortraitsContainer.down('.child_consultant'));
    var teenagerAdolescentConsultantPortrait = new Portrait(bottomPortraitsContainer.down('.teenager_adolescent_consultant'));

    var pregnantImage = new Image(imageContainer, "images/frontpage/zwanger_vraag_1.png", 'Kraamzorg? Hoe lang?', '/zwanger');
    var babyImage = new Image(imageContainer, "images/frontpage/baby.png", 'Borstvoeding? Hoe lang?', '/baby');
    var toddlerImage = new Image(imageContainer, "images/frontpage/peuter.png", 'Spelen? Hoe ver? Hoe laat?', '/peuter');
    var childImage = new Image(imageContainer, "images/frontpage/schoolkind.png", 'Op de computer? Hoe lang?', '/schoolgaand-kind');
    var teenagerImage = new Image(imageContainer, "images/frontpage/puber.png", 'Kleedgeld? Hoeveel?', '/puber');
    var adolescentImage = new Image(imageContainer, "images/frontpage/jong_volw_2.png", 'Foute vrienden. Wat nu?', '/jong-volwassene');

    this.portraitsAndImageWrappers = [
      new PortraitsAndImageWrapper(this, 0, pregnantPortrait, pregnantBabyConsultantPortrait, pregnantImage),
      new PortraitsAndImageWrapper(this, 1, babyPortrait, pregnantBabyConsultantPortrait, babyImage),
      new PortraitsAndImageWrapper(this, 2, toddlerPortrait, toddlerConsultantPortrait, toddlerImage),
      new PortraitsAndImageWrapper(this, 3, childPortrait, childConsultantPortrait, childImage),
      new PortraitsAndImageWrapper(this, 4, teenagerPortrait, teenagerAdolescentConsultantPortrait, teenagerImage),
      new PortraitsAndImageWrapper(this, 5, adolescentPortrait, teenagerAdolescentConsultantPortrait, adolescentImage)
    ];
  },

  start: function() {
    this.currentWrapper = this.portraitsAndImageWrappers.first();
    this.fadeInCurrentWrapper();
  },

  fadeInCurrentWrapper: function() {
    this.currentWrapper.show(true);
    this.cycleTimer = this.fadeOutCurrentWrapper.bind(this).delay(CYCLE_PERIOD);
  },

  fadeOutCurrentWrapper: function() {
    this.currentWrapper.hide(true);
    this.currentWrapper = this.portraitsAndImageWrappers[(this.currentWrapper.index + 1) % 6];
    this.cycleTimer = this.fadeInCurrentWrapper.bind(this).delay(CYCLE_PERIOD);
  },

  showWrapper: function(wrapper) {
    if (this.cycleTimer) {
      clearTimeout(this.cycleTimer);
    }

    if (this.currentWrapper != wrapper) {
      this.currentWrapper.hide(false);
      this.currentWrapper = wrapper;
    }

    this.currentWrapper.show(false);
  }
});