function OfferChanger(offerElementIds) {
  this.offerElements = new Array();
  for (var i = 0;i < offerElementIds.length;i++) {
    this.offerElements[i] = document.getElementById(offerElementIds[i]);
  }
  
  this.currentIndex = 0;
  this.fromIndex = 0;
  
  this.direction = 0;
  this.shift = 10;
  this.delay = 20;
  this.endPos = 0;
  
  this.duration = 400;
  this.width = 977;
  
  this.prevStart = 0 - this.width;
  this.nextStart = this.width;
  this.startPos = null;
  
  var currentDate = new Date();
  this.startTime = currentDate.getTime();
  
  this.interval = null;
  
  this.autoChange = false;
  
  var selfRef = this;
  this.timeout = setTimeout(function() {selfRef.change(1, true);}, 5000);
}

OfferChanger.prototype.change = function(dir, auto) {
  if (this.interval) {
    return;
  }
  
  if (dir > 0) {
    dir = 1;
  } else if (dir < 0) {
    dir = -1;
  } else {
    return false;
  }
  
  clearTimeout(this.timeout);
  this.timeout = null;

  if (auto) {
    this.autoChange = true;
  } else {
    this.autoChange = false;
  }
  
  this.direction = dir;
  
  this.fromIndex = this.currentIndex;
  if (this.offerElements[this.currentIndex + this.direction]) {
    this.currentIndex = this.currentIndex + this.direction;
  } else {
    if (this.direction > 0) {
      this.currentIndex = 0;
    } else {
      this.currentIndex = this.offerElements.length - 1;
    }
  }
  
  this.offerElements[this.fromIndex].style.left = this.endPos + 'px';
  if (this.direction > 0) {
    this.startPos = this.nextStart;
  } else {
    this.startPos = this.prevStart;
  }
  this.offerElements[this.currentIndex].style.left = this.startPos + 'px';
  
  var currentDate = new Date();
  this.startTime = currentDate.getTime();

  var selfRef = this;
  this.interval = setInterval(function() {selfRef.slide();}, this.delay);

  return false;
}

OfferChanger.prototype.slide = function() {
  currentDate = new Date();
  var elapsedTime = currentDate.getTime() - this.startTime;
  
  if (elapsedTime < this.duration) {
    //var shift = this.direction * this.width * elapsedTime / this.duration;
    var shift = this.direction * this.width * Math.sin(0.5 * Math.PI * elapsedTime / this.duration);
    
    var pos = this.startPos - shift;
    var outPos = this.endPos - shift;  

    this.offerElements[this.fromIndex].style.left = outPos + 'px';
    this.offerElements[this.currentIndex].style.left = pos + 'px';
  } else {
    var pos = this.endPos;
    var outPos = this.width;  

    this.offerElements[this.fromIndex].style.left = outPos + 'px';
    this.offerElements[this.currentIndex].style.left = pos + 'px';

    clearInterval(this.interval);
    this.interval = null;
    this.direction = 0;
    
    var prevMarker = document.getElementById('om' + this.fromIndex);
    if (prevMarker) {
      prevMarker.className = 'marker';
    }
    var currentMarker = document.getElementById('om' + this.currentIndex);
    if (currentMarker) {
      currentMarker.className = 'marker selected';
    }
    
    clearTimeout(this.timeout);
    var selfRef = this;
    if (this.autoChange) {
      this.timeout = setTimeout(function() {selfRef.change(1, true);}, 5000);
    } else {
      this.timeout = setTimeout(function() {selfRef.change(1, true);}, 30000);
    }
  }
}