if (window.Utopia == undefined)
{
  Utopia = {};
}

Utopia.Stage = Class.create(
{
  initialize: function(element, data)
  {
    this.element = $(element);

    this.data = data;

    this.options =
    {
      fadeDuration: 1.0,
      showDuration: 5000,
      containerClass: 'slider-container',
      elementContainerClass: 'slider-element-container',
      elementsContainerClass: 'slider-elements-container',
      imageClass: 'slider-image',
      teaserClass: 'slider-teaser',
      navigationClass: 'slider-navigation',
      navigationLinksWrapperClass: 'slider-navigation-links-wrapper',
      navigationLinksPreWrapperClass: 'slider-navigation-links-pre-wrapper',
      navigationLinkClass: 'slider-navigation-link',
      navigationLinkActiveClass: 'slider-navigation-link-active',
      navigationBtnPrevClass: 'slider-navigation-prev',
      navigationBtnNextClass: 'slider-navigation-next',
      navigationLinkWidth: 130, // This value has also to be set in the css-file
      navigationBtnWidth: 21 // This value has also to be set in the css-file
    };

    this.initNavigation();
    this.setupImages();
  },

  setupImages: function()
  {

    this.data[0].image_object = new Image();
    this.data[0].image_object.src = this.data[0].image;

    this.active_image = 0;

    this.element.addClassName(this.options.containerClass);

    this.elements_container = new Element('div', { className: this.options.elementsContainerClass });

    this.element.insert({ 'top': this.elements_container });

    this.createNextImage(0);
    this.next_image.show();
    this.current_image = this.next_image;
    this.current_count = 0;

    this.activateImageBtn(this.current_count);

    var show_next_image = this.showNextImage.bind(this);
    if($('homestage'))
      this.interval = window.setInterval(show_next_image, this.options.showDuration);

  },

  loadImage: function(num)
  {
    this.data[num].image_object = new Image();
    this.data[num].image_object.src = this.data[num].image;
  },

  createNextImage: function(num)
  {

    if (typeof(this.data[num].image_object) != 'object')
    {
      this.loadImage(num);
    }

    var img_data = this.data[num];
    var cont = new Element('div', { className: this.options.elementContainerClass });
    var img = new Element('img', {src: img_data.image_object.src, className: this.options.imageClass, alt: img_data.image_alt, width: '638', height: '419'});
    cont.appendChild(img);
    if(img_data.teaser != '')
    {
      var teaser = new Element('div', { className: this.options.teaserClass }).update(img_data.teaser);
      cont.appendChild(teaser);
    }
    cont.hide().observe('click', function() { location.href=img_data.url });
    this.elements_container.appendChild(cont);
    this.next_image = cont;
  },

  activateImageBtn: function(num)
  {
    this.data[num].navigation_link_object.addClassName(this.options.navigationLinkActiveClass);
  },

  deactivateImageBtn: function(num)
  {
    this.data[num].navigation_link_object.removeClassName(this.options.navigationLinkActiveClass);
  },

  fadeToNextImage: function()
  {
    var delete_old_image = this.removeOldImage.bind(this);
    if(typeof this.next_image.appear != "undefined")
      this.next_image.appear({ duration: this.options.fadeDuration, afterFinish: delete_old_image });
    else
      this.next_image.show();
  },

  showNextImage: function()
  {
    var num = ( this.current_count + 1 ) % this.data.length;
    this.showImage(num);
  },

  showPrevImage: function()
  {
    var num = ( this.data.length + this.current_count - 1 ) % this.data.length;
    this.showImage(num);
  },

  showImage: function(num)
  {
    var prev_count = this.current_count;
    this.current_count = num;

    this.deactivateImageBtn(prev_count);
    this.activateImageBtn(this.current_count);
    if(this.data.length > 3)
    {
      if( ( prev_count + 1 ) % this.data.length == this.current_count ) // weiter
      {
        var hide_el_num = ( this.data.length + this.current_count - 2 ) % this.data.length;
        var show_el_num = ( this.current_count + 1 ) % this.data.length;
        this.links_wrapper.insert({ 'bottom': this.data[show_el_num].navigation_link_object.show() });
        var hide_el_after_morph = this.hideElementAfterMorphLeft.bind(this, this.data[hide_el_num].navigation_link_object);
        new Effect.Morph(this.data[hide_el_num].navigation_link_object, {style: 'margin-left:-200px', afterFinish:hide_el_after_morph});//morph('marginLeft: -'+this.options.navigationLinkWidth+';', {afterFinish:hide_el_after_morph});
      }
      else if(prev_count != this.current_count) // zurueck
      {
        var hide_el_num = ( this.current_count + 2 ) % this.data.length;
        var show_el_num = ( this.data.length +  this.current_count - 1 ) % this.data.length;
        showObj = this.data[show_el_num].navigation_link_object;
        showObj.setStyle('margin-left: -200px;');
        this.links_wrapper.insert({ 'top': showObj.show() });
        var hide_el_after_morph = this.hideElementAfterMorphRight.bind(this, this.data[hide_el_num].navigation_link_object);
        new Effect.Morph(showObj, {style: 'margin-left:0px', afterFinish:hide_el_after_morph});
      }
    }
    this.createNextImage(this.current_count);
    this.fadeToNextImage();
  },

  hideElementAfterMorphLeft: function(obj)
  {
    obj.hide();
    obj.setStyle('margin-left: 0px;');
  },

  hideElementAfterMorphRight: function(obj)
  {
    obj.hide();
  },

  initNavigation: function()
{
  this.navigation_container = new Element('div', {className: this.options.navigationClass});


  var navi_elements = [];

  var prev_button_event = this.clickBtnPrev.bind(this);
  var prev_button = new Element('div', {className: this.options.navigationBtnPrevClass}).observe('click', prev_button_event);
  prev_button.className = this.options.navigationBtnPrevClass; //ie8 rendering bugfix
  this.navigation_container.appendChild(prev_button);

  var links_wrapper = new Element('div', {className: this.options.navigationLinksWrapperClass, style: 'width:' + ( this.options.navigationLinkWidth * 4 ) + 'px;'});
  links_wrapper.className = this.options.navigationLinksWrapperClass;  //ie8 rendering bugfix
  for(var i = 0; i < this.data.length; i++)
  {
    var btn_link = this.clickLink.bind(this, i);
    navi_elements[i] = new Element('div', {className: this.options.navigationLinkClass, style: 'width:'+this.options.navigationLinkWidth+'px;'}).update(this.data[i].title).observe('click', btn_link);
    navi_elements[i].className = this.options.navigationLinkClass; //ie8 rendering bugfix
    this.data[i].navigation_link_object = navi_elements[i];
    if(i < 2)
    {
      links_wrapper.appendChild(navi_elements[i]);
    }
    else if(i < this.data.length - 1 )
    {
      navi_elements[i].hide();
      links_wrapper.appendChild(navi_elements[i]);
    }
    else
    {
      links_wrapper.insert({'top': navi_elements[i]});
    }
  }
  var pre_wrapper = new Element('div', {className: this.options.navigationLinksPreWrapperClass, style: 'width:' + ( this.options.navigationLinkWidth * 3 ) + 'px;'});
  pre_wrapper.className = this.options.navigationLinksPreWrapperClass; //ie8 rendering bugfix
  pre_wrapper.appendChild(links_wrapper);
  this.navigation_container.appendChild(pre_wrapper);
  this.links_wrapper = links_wrapper;
  var next_button_event = this.clickBtnNext.bind(this);
  var next_button = new Element('div', {className: this.options.navigationBtnNextClass}).observe('click', next_button_event);
  next_button.className = this.options.navigationBtnNextClass;
  this.navigation_container.className = this.options.navigationClass; //ie8 rendering bugfix
  this.navigation_container.appendChild(next_button);
  this.element.appendChild(this.navigation_container);
},

  clickBtnNext: function()
  {
    this.pauseSlider();
    this.showNextImage();
  },

  clickBtnPrev: function()
  {
    this.pauseSlider();
    this.showPrevImage();
  },

  clickLink: function(num)
  {
    this.pauseSlider();
    this.showImage(num);
  },

  removeOldImage: function()
  {
    if(this.current_image.parentNode)
    this.current_image.remove();
    this.current_image = this.next_image;
  },

  pauseSlider: function()
  {
    window.clearInterval(this.interval);
  },

  restartSlider: function()
  {
    this.pauseSlider();
    this.interval = window.setInterval(show_next_image, this.options.showDuration);
  }
});