$(function() {
  productScroller = {};
  productScroller.step_num = 1;
  productScroller.max_step = 5;
  productScroller.last_viewport_width = 0;
  productScroller.no_arrows = false;
  productScroller.getStepLen = function() {
    return 92;
    var w_s = $('#slide_element').width();
    var w_c = $('.slider').width();
    var step = Math.ceil((w_s - w_c) / productScroller.max_step);
    return step;
  }
  productScroller.checkViewport = function() {
    var cur_width = $('body').width();
    if (cur_width != productScroller.last_viewport_width) {
      productScroller.scrollTo($('#slide_element').css('left'));
      productScroller.last_viewport_width = cur_width;
    }
  }
  productScroller.moveLeft = function() {
    productScroller.checkViewport();
    if (!$('#slide_element:animated').length && productScroller.step_num <= productScroller.max_step) {
      if (productScroller.step_num == productScroller.max_step) {
        var w_s = $('#slide_element').width();
        var w_c = $('.slider').width();
        var new_left =  -(w_s - w_c) + 'px';
      } else {
        var left = $('#slide_element').css('left');
        var new_left = parseInt(left) - productScroller.getStepLen() + 'px'; 
     
      }
      //error      
      
      $('#slide_element').css({ left: new_left });
      //alert($('#slide_element').css('left'));
      //alert(new_left);
      //$('#slide_element').attr('left', 100);
      productScroller.step_num++;
    }
    productScroller.checkButtons();
  }
  productScroller.moveRight = function() {
    productScroller.checkViewport();
    if (!$('#slide_element:animated').length && productScroller.step_num > 1) {
      if (productScroller.step_num == 2) {
        var new_left = '0px';
      } else {
        var left = $('#slide_element').css('left');
        var new_left = parseInt(left) + productScroller.getStepLen() + 'px';
      }
      $('#slide_element').css({ left: new_left })
      productScroller.step_num--;
    }
    productScroller.checkButtons();
  }
  productScroller.checkButtons = function() {
    if (productScroller.no_arrows) {
      $('.top_arr').hide();
      $('.bottom_arr').hide();
      return false;
    }
    if (productScroller.step_num == 1) {
      $('.top_arr').hide();
      $('.bottom_arr').show();
    } else {
      $('.slider_leftArr').show();
    }
    if (productScroller.step_num == productScroller.max_step + 1) {
      $('.bottom_arr').hide();
      $('.top_arr').show();
    } else {
      $('.bottom_arr').show();
    }
  }
  productScroller.scroll = function(e, delta) {
    switch (delta) {
      case 1:
        productScroller.moveRight();
        break;
      case -1:
        productScroller.moveLeft();
        break;
    }
    return false;
  }
  productScroller.scrollTo = function(left_pos) {
    if (productScroller.no_arrows) {
      return false;
    }
    var step = productScroller.getStepLen();
    if (left_pos < 0) {
      productScroller.step_num = 1;
    } else if (left_pos > step * productScroller.max_step) {
      productScroller.step_num = productScroller.max_step + 1;
    } else {
      for (var i = 1; i < productScroller.max_step; i++) {
        var _left = i * step;
        var _right = (i + 1) * step;
        if (left_pos > _left && left_pos < _right) {
          productScroller.step_num = i + 1;
          break;
        }
      }
    }
    var new_left = (productScroller.step_num - 1) * step;
    $('#slide_element').animate({ left: -new_left }, 1000);
    productScroller.checkButtons();
  }
  productScroller.init = function() {
    var w_s = $('#slide_element').width();
    var w_c = $('.slider').width();

    productScroller.max_step = Math.ceil((w_s - w_c) / productScroller.getStepLen());
    if (w_s < w_c) {
      $('.slider').width(w_s);
      $('.top_arr').hide();
      $('.bottom_arr').hide();
      productScroller.no_arrows = true;
    } else {
      $('.top_arr').mousehold(productScroller.moveRight);
      $('.bottom_arr').mousehold(productScroller.moveLeft);
      $('#slide_element').mousewheel(productScroller.scroll);
      productScroller.checkButtons();
    }
    productScroller.last_viewport_width = $('body').width();
  }
  //init
  productScroller.init();
});