var Roll = new Class(
{
   initialize: function(id)
   {
      if (id == undefined) id = '';
      this.rid = id;
      this.lStop = false;
      this.rStop = false;
      this.rSpeed = 8;
      this.x = 0;
      this.y = 0;
      this.stripeWidth = 0;
      var tds = $('rollStripe' + id).getElementsByTagName('TD');
      for (var i = 0; i < tds.length; i++)
      {
         if (tds[i].className == 'item') this.stripeWidth += tds[i].offsetWidth;
      }
      this.maskWidth = parseInt($('rollMask' + id).offsetWidth);
      this.rollWidth = this.stripeWidth - this.maskWidth;
      if (this.stripeWidth <= this.maskWidth)
      {
         $('rollLeft' + id).style.visibility = 'hidden';
         $('rollRight' + id).style.visibility = 'hidden';
      }
      var inst = this;
      $('rollRight' + id).onmousedown = function()
      {
         var func = function moveLeft()
         {
           if (!inst.lStop)
           {
               inst.x += inst.rSpeed;
               $('rollStripe' + inst.rid).style.marginLeft = -inst.x + 'px';
               inst.y = parseInt((inst.x / inst.rollWidth) * inst.maskWidth) - 12;
               setTimeout(moveLeft, 0);
            }
            if (inst.x >= inst.rollWidth) inst.lStop = true;
         };
          if (inst.x <= inst.rollWidth) {inst.lStop = false; func();}
      };
     $('rollRight' + id).onmouseup = function(){inst.lStop = true;};
     $('rollRight' + id).onmouseout = function(){inst.lStop = true;};
     $('rollLeft' + id).onmousedown = function()
     {
        var func = function moveRight()
         {
            if (!inst.rStop)
            {
               inst.x -= inst.rSpeed;
               $('rollStripe' + inst.rid).style.margin = '0 0 0 -'+ inst.x + 'px';
               inst.y = parseInt((inst.x / inst.rollWidth) * inst.maskWidth) - 12;
               setTimeout(moveRight, 0);
            }
            if (inst.x <= 0) inst.rStop = true;
         };
       if (inst.x >= 0) {inst.rStop = false; func()};
     };
     $('rollLeft' + id).onmouseup = function(){inst.rStop = true;};
     $('rollLeft' + id).onmouseout = function(){inst.rStop = true;};
   }
});


var Roll1 = new Class(
{
   initialize: function(id)
   {
      if (id == undefined) id = '';
      this.rid = id;
      this.lStop = false;
      this.rStop = false;
      this.rSpeed = 10;
      this.x = 0;
      this.y = 0;
      this.stripeWidth = 0;
      var tds = $('rollStripe1' + id).getElementsByTagName('Div');
      for (var i = 0; i < tds.length; i++)
      {
         if (tds[i].className == 'item1') this.stripeWidth += tds[i].offsetWidth;
      }
      this.maskWidth = parseInt($('rollMask1' + id).offsetWidth);
      this.rollWidth = this.stripeWidth - this.maskWidth;
      if (this.stripeWidth <= this.maskWidth)
      {
         $('rollLeft1' + id).style.visibility = 'hidden';
         $('rollRight1' + id).style.visibility = 'hidden';
      }
      var inst = this;
      $('rollRight1' + id).onmousedown = function()
      {
         var func = function moveLeft()
         {
           if (!inst.lStop)
           {
               inst.x += inst.rSpeed;
               $('rollStripe1' + inst.rid).style.marginLeft = -inst.x + 'px';
               inst.y = parseInt((inst.x / inst.rollWidth) * inst.maskWidth) - 12;
               setTimeout(moveLeft, 0);
            }
            if (inst.x >= inst.rollWidth) inst.lStop = true;
         };
          if (inst.x <= inst.rollWidth) {inst.lStop = false; func();}
      };
     $('rollRight1' + id).onmouseup = function(){inst.lStop = true;};
     $('rollRight1' + id).onmouseout = function(){inst.lStop = true;};
     $('rollLeft1' + id).onmousedown = function()
     {
        var func = function moveRight()
         {
            if (!inst.rStop)
            {
               inst.x -= inst.rSpeed;
               $('rollStripe1' + inst.rid).style.margin = '0 0 0 -'+ inst.x + 'px';
               inst.y = parseInt((inst.x / inst.rollWidth) * inst.maskWidth) - 12;
               setTimeout(moveRight, 0);
            }
            if (inst.x <= 0) inst.rStop = true;
         };
       if (inst.x >= 0) {inst.rStop = false; func()};
     };
     $('rollLeft1' + id).onmouseup = function(){inst.rStop = true;};
     $('rollLeft1' + id).onmouseout = function(){inst.rStop = true;};
   }
});