// slideshow

// copyright  bpm consult ag, CH-Birsfelden
// license    restricted
// contact    webdev@bpm.ch

function slideIncrement(config){

  // width of an increment
  var increment = config['stageWidth'];
  var currentIncrement = config['currentIncrement'];

  // animation method
  config['slideArea'].set('tween', config['animationMethod']);

  // slide it forward
  if(config['direction'] == 'forward') {
    if(currentIncrement != 0) {
      // on second increment move the first after the end and jump back to the now newly first witch was before the second:
      currentIncrement = currentIncrement + increment;
      config['slideArea'].appendChild(config['slideArea'].getFirst());
      config['slideArea'].setStyle('marginLeft', 0);
    }
    currentIncrement = currentIncrement - increment;
    config['slideArea'].tween('margin-left', currentIncrement);

  // slide it backward
  } else {
    if(currentIncrement >= 0) {
      // on first increment move it after the end and jump to it:
      currentIncrement = currentIncrement - ((config['slideArea'].getChildren().length - 1) * increment);
      config['slideArea'].appendChild(config['slideArea'].getFirst());
      config['slideArea'].setStyle('margin-left', increment * (-(config['slideArea'].getChildren().length - 1)));
    }
    currentIncrement = currentIncrement + increment;
    config['slideArea'].tween('marginLeft', currentIncrement);
  }

  return(currentIncrement);

}

function slideShow(config){

  // define stage width
  config['show'].setStyle('font-size', 0);
  var stageWidth = config['show'].getStyle('width').toInt()
                 - config['prevButton'].getStyle('width').toInt()
                 - config['nextButton'].getStyle('width').toInt();
  config['stage'].setStyles({
    width: stageWidth,
    display: 'inline-block',
    overflow: 'hidden'
  });

  // resize images
  var imgMargin = config['stage'].getElements('img')[0].getStyle('margin-left').toFloat()
                + config['stage'].getElements('img')[0].getStyle('margin-right').toFloat()
                + (config['stage'].getElements('img')[0].getStyle('border-left').toFloat())
                + (config['stage'].getElements('img')[0].getStyle('border-right').toFloat());
  var childWidth = ((stageWidth / config['displayedElements']) - imgMargin).toInt();
  config['stage'].getElements('img').each(function(e){
    e.setStyle('width', childWidth);
    e.set('width', childWidth);
    if(e.getStyle('height').toInt() > config['stage'].getStyle('height').toInt()){
      e.setStyle('height', config['stage'].getStyle('height').toInt());
      e.set('height', config['stage'].getStyle('height').toInt());
    }else{
      e.setStyle('height', 'auto');
      e.set('height', 'auto');
    }
  });

  // fix stage width
  var stageWidthCalculated = (childWidth + imgMargin) * config['displayedElements'];
  if(stageWidthCalculated < stageWidth) {
    stageWidth = stageWidthCalculated;
    config['stage'].setStyle('width', stageWidth);
  }

  // define position of the first displayed increment
  var currentIncrement = 0;

  // add the first element at the end until the first two increments are full
  var countElements = config['stage'].getChildren().length;
  while(countElements < (config['displayedElements'] * 2)){
    config['stage'].getFirst().clone().inject(config['stage']);
    countElements++;
  }

  // drop odd elements
  var increments = (countElements / config['displayedElements']).toInt();
  if(countElements > (config['displayedElements'] * 2)){
    var drop = countElements - (increments * config['displayedElements']);
    drop.times(function(){
      config['stage'].getLast().destroy();
    });
  }

  // build element groups
  (increments).times(function(){
    var div = new Element('div', {style: 'display: inline-block'});
    div.inject(config['stage']);
    config['displayedElements'].times(function(){
      div.adopt(config['stage'].getFirst());
    });
  });

  // build slide area
  var div = new Element('div');
  div.inject(config['stage']);
  (increments).times(function(){
    div.adopt(config['stage'].getFirst());
  });
  var slideAreaWidth = (childWidth + imgMargin.toInt()) * increments * config['displayedElements'];
  config['stage'].getFirst().setStyle('width', slideAreaWidth);

  // click on back button
  config['prevButton'].addEvent('click', function(){
    currentIncrement = slideIncrement({
      direction: 'back',
      currentIncrement: currentIncrement,
      slideArea: config['stage'].getFirst(),
      stageWidth: stageWidthCalculated,
      animationMethod: config['animationMethod']
    });
  });

  // click on forward button
  config['nextButton'].addEvent('click', function(){
    currentIncrement = slideIncrement({
      direction: 'forward',
      currentIncrement: currentIncrement,
      slideArea: config['stage'].getFirst(),
      stageWidth: stageWidth,
      animationMethod: config['animationMethod']
    });
  });

}