

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': 60,

          'left' : (containerwidth-200)/2,

          'top' : -2,

          'opacity' : 0.6,

          'font-size' : 12,

        });

      }

    });

  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; 

    });

  });

};