
function createScroll(container, bandId, items, viewer, cont, showinfo){

  var bandlength = bandId.getStyle('width').toInt();
  var containerwidth = container.getStyle('width').toInt();
  var scrollerwidth = containerwidth/3;
  var scroll = new Scroller(cont, {area: scrollerwidth.toInt(), velocity: 0.2});
  var scrollarea = bandlength-containerwidth;
  var xpos=0;
  var beginpos= bandId.getLeft([container]); 
  
  var periodical;
  var increment;
  var fx = function() {
    if (xpos>=scrollarea) {xpos=scrollarea; increment=-2;}
    if(xpos<=0){xpos=0;beginpos= bandId.getLeft([container]); increment=2;}
    xpos+=increment;  
    container.scrollTo(xpos,0);
    beginpos= bandId.getLeft([container])+xpos;
  }
  
  fx();
  periodical = fx.periodical(50);
  
  var opened = new Fx.Styles(viewer, {duration:1000, wait:false, transition: Fx.Transitions.Elastic.easeOut});
  viewer.setStyle('opacity', 0);
  container.addEvent('mouseenter',
    function() {
      $clear(periodical);
      if (showinfo == '1'){
        opened.options.transition = Fx.Transitions.Elastic.easeOut;
        opened.start({
          'width': 200,
          'height': 40,
          'left' : (containerwidth-200)/2,
          'top' : -42,
          'opacity' : 0.9,
          'font-size' : 15
        });
      }
    });
  container.addEvent('mouseenter', scroll.start.bind(scroll));
  
  container.addEvent('mouseleave', scroll.stop.bind(scroll));
  container.addEvent('mouseleave', 
    function(){
      opened.options.transition = Fx.Transitions.Circ.easeOut;
      opened.start({
        'width': 0,
        'height': 0,
        'left' : containerwidth/2,
        'top' : 0,
        'opacity' : 0,
        'font-size' : 0
      });
      $clear(periodical);
      xpos=-(bandId.getLeft([container])-beginpos);
      fx();
      periodical = fx.periodical(50);
      viewer.innerHTML = '';
    });
  
  items.each( function(obj, i){
    var opacityChange = new Fx.Style(obj, 'opacity', {duration:400,transition: Fx.Transitions.linear});
    obj.addEvent('mouseenter', function(){
      opacityChange.start(0.4, 1);
      var productname = obj.getProperty('name');
      var p1 = productname.substr(0,16);
      var p2 = productname.substr(16);
      p2 = p2.replace(" ", '<br />');
      viewer.innerHTML = p1+p2; 
    });
  });
};
