var Roll = new Class (
{
  initialize : function(id)
  {
    if (id == undefined) id = '';
    this.rid = id;
    this.lStop = false;
    this.rStop = false;
    this.rSpeed = 20;
    this.x = 5;
    this.y = 5;
    this.stripeWidth = 0;
    // this.interval = 300;

    var images_count = 0;
    var tds = $('rollStripe' + id).getElementsByTagName('DIV');
    for ( var i = 0; i < tds.length; i++)
    {
      if (tds[i].className == 'GalImage')
      {
        this.stripeWidth += tds[i].offsetWidth;
        images_count++;
      }
    }
    $('rollStripe' + id).setStyle('width',this.stripeWidth+'px');
    this.maskWidth = parseInt($('rollMask' + id).offsetWidth);
    this.rollWidth = this.stripeWidth - this.maskWidth;
    // this.rollWidth = this.interval;
    if (this.stripeWidth <= this.maskWidth)
    {
      $('rollLeft' + id).style.visibility = 'hidden';
      $('rollRight' + id).style.visibility = 'hidden';
    }
    var inst = this;

    // var countStep = (stripeWidth/360).toInt();
    var stepsLeft = stepsRight = 1;
    var stepVal = 0;
    var maxSteps = Math.round(this.stripeWidth.toInt() / 360);

    $('rollRight' + id).onclick = function()
    {
      inst.rStop = true;
      //$('text_test').set('text', stepsLeft+' right');
      stepVal = stepsLeft * 360;

      var func1 = 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;
          checkActive();
          setTimeout(moveLeft, 0);
        }
        if ((stepVal <= inst.rollWidth && inst.x >= stepVal) || (stepVal > inst.rollWidth && inst.x >= inst.rollWidth + 60))
          inst.lStop = true;
      };
      if ((stepVal <= inst.rollWidth && inst.x <= stepVal) || (stepVal > inst.rollWidth && inst.x <= inst.rollWidth + 60))
      {
        inst.lStop = false;
        func1();
        if (stepsLeft < maxSteps) stepsLeft++;
      }

    };
    $('rollLeft' + id).onclick = function() {
    inst.lStop = true;
      //alert(stepsLeft);
      //$('text_test').set('text', stepsLeft+' left');
      if (stepVal >= 1) {
        stepVal = (stepsLeft - 1) * 360 + 5;
        if (stepVal >= inst.x) {
          // stepsLeft--;
          stepVal = (stepsLeft - 2) * 360 + 5;
        }
        // alert(inst.x+' '+stepVal);

        var func = function moveRight() {
          if (inst.x != 15 && inst.x != 5 && inst.x != 0)
            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;
              checkActive();
              setTimeout(moveRight, 0);
            }
          if ((stepVal > 5 && inst.x == stepVal) || (stepVal < 5 && inst.x == 5))
            inst.rStop = true;
          // if (inst.x == 5 || inst.x == stepVal ) inst.rStop = true;
        };

        if (inst.x >= stepVal) {
          inst.rStop = false;
          func();
          if (stepsLeft>1)
            stepsLeft--;
        };

      }
    };

    /* points 1-2-3 */
    var scroll_var = 0;
    var funcPointRollRight = function pointRollRight() {
    inst.lStop = true;
      if (inst.x != 15 && inst.x != 5 && inst.x != 0)
        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(pointRollRight, 0);
        }
      if (inst.x <= scroll_var) {
        inst.rStop = true;
      }
    };
    var funcPointRollLeft = function pointRollLeft() {
    inst.rStop = true;
      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(pointRollLeft, 0);
      }
      if (inst.x >= scroll_var) {
        inst.lStop = true;
      }
    };

  //------размножаем точки-----
  $$('div.GalNav').set('html', '');

  var points_count = (images_count/3).round();
  for (i=0; i < points_count; i++) {
    var act_class = '';
    if (i==0) {
      act_class = ' active';
    }

    var point_t =  new Element('a', {'href': 'javascript:;',
                  'id' : 'circle_'+(i+1),
                    'class': 'GalNav'+act_class,
                    'html': '&nbsp;<span>'+i+'</span>',
                    'styles': {
                       'height' :'5px',
                     'padding-left' : '5px',
                     'padding-right' : '5px',
                     'display' : 'inline',
                     'font-size' : '8px'
                    }
            });
    $$('div.GalNav').adopt(point_t);
    //point_t.inject($$('div.GalNav'), 'after');
  }

  //-----/-------------------------------
    var countPoints = 0;

    $$('a').each(function(item) {
      var className = item.className.split(' ');
      if (className[0] == 'GalNav') {
        countPoints++;
      }
    });

    // $each($$('a.GalNav'), function(){
    // countPoints++;
    // });
    // alert(countPoints);
    var ii = 0;
    var arrayPoints = [];
    $$('a').each(function(item) {
      var className = item.className.split(' ');
      if (className[0] == 'GalNav') {
        if (ii == 0) {
          item.addEvent('click', function() {
            removeActiveClass();
            this.addClass('active');
            if (inst.x >= 5) {
              inst.rStop = false;
              scroll_var = 5;
              funcPointRollRight();
        if (stepsLeft>1)
              stepsLeft--;

            }
          });
          arrayPoints[ii] = 0;

        } else if (ii == (countPoints - 1)) {
          item.addEvent('click', function() {
            removeActiveClass();
            this.addClass('active');
            if (inst.x < (inst.stripeWidth - 445)) {
              inst.lStop = false;
              scroll_var = inst.rollWidth + 60;
              funcPointRollLeft();
        if (stepsLeft<maxSteps)
        stepsLeft++;
            }
          });
          arrayPoints[ii] = inst.rollWidth + 60;

        } else {
          // var xlim = 305*ii+60*(ii-1);
        var xlim = 360 * ii + 5;
        arrayPoints[ii] = xlim;
        item.addEvent('click', function() {
          removeActiveClass();
          this.addClass('active');
          if (5 <= inst.x && inst.x <= (inst.stripeWidth)
              && inst.x != xlim) {
            if (inst.x > xlim) {
              inst.rStop = false;
              scroll_var = xlim;
              funcPointRollRight();
         if (stepsLeft>1)
              stepsLeft--;
            } else {
              inst.lStop = false;
              scroll_var = xlim;
              funcPointRollLeft();
        if (stepsLeft<maxSteps)
        stepsLeft++;
            }
          }
        });

      }

      ii++;
    }
  } );

    function checkActive() {
      removeActiveClass();
      var smallPoint = arrayPoints[0];
      for ( var i = 1; i < countPoints; i++) {
        var bigPoint = arrayPoints[i];
        if (smallPoint <= inst.x && inst.x < bigPoint) {
          $('circle_' + i).addClass('active');
        }
        smallPoint = bigPoint;
      }
      if (smallPoint <= inst.x) {
        $('circle_' + countPoints).addClass('active');
      }
    }
    function removeActiveClass() {
      // $$('div.GalNav a').removeClass('active');
      $$('a').each(function(item) {
        var className = item.className.split(' ');
        if (className[0] == 'GalNav') {
          item.removeClass('active');
        }
      });
    }
    /*
     * function activeClass(id) { $('circle_1').removeClass('active');
     * $('circle_2').removeClass('active');
     * $('circle_3').removeClass('active');
     * $('circle_'+id).addClass('active'); }
     *
     *
     * $('circle_1' + id).onclick = function() { activeClass(1); if
     * (inst.x>=5) {inst.rStop = false; scroll_var = 5;
     * funcPointRollRight(); } };
     *
     *
     * $('circle_2' + id).onclick = function() { activeClass(2); if (5<=inst.x &&
     * inst.x<=465 && inst.x!=365 && inst.x!=345) { if (inst.x>=300) {
     * inst.rStop = false; scroll_var = 360; funcPointRollRight(); } else {
     * inst.lStop = false; scroll_var = 300; funcPointRollLeft(); } } };
     *
     * $('circle_3' + id).onclick = function() { activeClass(3); if (inst.x<465)
     * {inst.lStop = false; scroll_var = inst.rollWidth;
     * funcPointRollLeft(); } };
     */
    /* points 1-2-3 */
  }
});

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;
        };
      }
    });