//—Copyright (c) 2007 wollzelle GmbH, (http://www.wollzelle.com). All Rights Reserved.

var Carousel = Class.create();
Carousel.prototype = {  
  initialize: function(carousel) {
    this.carousel       = $(carousel);
        
    this.carouselLists  = this.carousel.select('ul');
    
    this.width          = 0;    
    this.options        = arguments[1] || {};
    
    this.caches = {
      'itemsBeauty': $('itemsBeauty').innerHTML,
      'itemsAdvertising': $('itemsAdvertising').innerHTML
    };
    
		this.buildCarousel();
  },

	buildCarousel: function () {
    // create list clones
    (2).times(function() {
      var listClone = this.carouselLists[0].cloneNode(true);      
      this.carousel.down('div.clip-region').appendChild(listClone);
      this.carouselLists.push(listClone);
    }.bind(this));

    // calculate width of one list
    this.carouselLists[0].select('li img').each(function(image) {
      this.width += image.width+5; // margin:0 5px 0 0;
    }.bind(this));

    var clipRegion = this.carousel.down('div.clip-region');
    if(!clipRegion.visible())
      clipRegion.show();

    this.carouselLists.invoke('setStyle', {width:this.width+'px'});
    
    // set all list clones on the same baseline
    this.carouselLists[0].setStyle({top:0+'px', left:-4500+'px'});
    this.carouselLists[1].setStyle({top:-this.carouselLists[1].getHeight()+'px', left:(-this.carouselLists[1].getWidth()-4500)+'px'});
    this.carouselLists[2].setStyle({top:-2*(this.carouselLists[2].getHeight())+'px', left:(this.carouselLists[2].getWidth()-4500)+'px'});
        
    this.registerEvents();
    this.scrollLeft, this.scrollRight = false;		
	},
	
  scrollToCenter: function(element) {
    var thumbTarget = (this.carousel.getWidth()/2 - element.getWidth()/2).round(); // the middle
    var thumbOffset = thumbTarget - (Prototype.Browser.IE ? element.offsetParent.offsetLeft : element.offsetLeft);
    var listCarouselOffset = element.up('ul').offsetLeft;
    this._scroll(thumbOffset - listCarouselOffset, element);
  },
  _scroll: function(position, element) {
    var mostLeft = this.getMostLeftListClone();
    var mostRight = this.getMostRightListClone();
    if(element.up('ul') == mostLeft)
      mostRight.setStyle({left:(mostLeft.offsetLeft - mostLeft.getWidth())+'px'});
    if(element.up('ul') == mostRight)
      mostLeft.setStyle({left:(mostRight.offsetLeft + mostRight.getWidth())+'px'});
      
    new Effect.MoveBy(this.carouselLists[0], 0, position, {
      afterFinish: this.options.afterScroll
    });
    new Effect.MoveBy(this.carouselLists[1], 0, position);
    new Effect.MoveBy(this.carouselLists[2], 0, position);  
  },
  getMostLeftListClone: function() {
		return this.listPositions().first();
  },
  getMostRightListClone: function() {
		return this.listPositions().last();
  },
  registerEvents: function() {
    this.carousel.select('ul li img').each(function(image) {
      image.observe('click', Lightbox.show.bindAsEventListener(Lightbox));
    });
  },
  flyOut: function() {
    var afterFinish = arguments[0] || (function(){});

    this.carouselLists.each(function(list, i) {
      // reInitialize only the first time, gets afterFinish as anonymous function
      var reInitialize = (i == 1) ? afterFinish : Prototype.emptyFunction;
      new Effect.MoveBy(list, 0, 4500, {duration:1.0, delay:0.3, afterFinish: reInitialize});
    });
  },
  flyIn: function() {
    Lightbox.thumbsCurtain.setStyle({opacity:0.001});
    this.carouselLists.each(function(list) {
      new Effect.MoveBy(list, 0, 4500, {duration:1.0, delay:0.3, afterFinish: function() {
        Lightbox.lowerThumbs();
      }});
    });
  },
  changeItems: function(itemsContainer, doFlyOut) {
    // updates the current carousel contents with any list, reinitializes the carousel
    itemsContainer = $(itemsContainer);
    Lightbox.riseThumbs();
		
		afterFlyOut = function() {
      this.carousel.down('div.clip-region').hide().update(this.caches[itemsContainer.id]);
      this.carousel.down('div.clip-region').select('ul li img').invoke('addClassName', 'resizeable');
      
      this.carouselLists = this.carousel.select('ul');
			this.buildCarousel();
					
			Lightbox.oldThumb = null;
			
			Site.resize();     

 			this.flyIn();
    }.bind(this);
		
		if(doFlyOut)
			this.flyOut(afterFlyOut);
		else
		  afterFlyOut();
  },
  resize: function() {
    var width = 0;
    this.carouselLists[0].select('li img').each(function(image) {
      width += image.width+5; // margin:0 5px 0 0;
    }.bind(this));
    var lists = this.listPositions();
    lists[0].setStyle({width:width+'px', left:(lists[1].offsetLeft-width)+'px'});
    lists[1].setStyle({width:width+'px'});
    lists[2].setStyle({width:width+'px', left:(lists[1].offsetLeft+width)+'px'});
    this.setTopOffsets();
  },
  setTopOffsets: function() {
    this.carouselLists[0].setStyle({top:0});
    this.carouselLists[1].setStyle({top:-this.carouselLists[1].getHeight()+'px'});
    this.carouselLists[2].setStyle({top:-(2*this.carouselLists[1].getHeight())+'px'});    
  },
  listPositions: function() {
    // returns an array of current list clones ordered by their position (left,middle,right)
		return this.carouselLists.clone().sort(function(list1, list2) {	
			return list1.offsetLeft - list2.offsetLeft;
		});
  }
}