Help with Carousel-like script - Jscheur?

[santamonica10]

Hello All,

I am having an issue using the sightglass script - http://www.otanistudio.com/swt/sightglass/

Everything is working, except the js is reading my file as though there were one more "items" than there actually are. When i click next, i am allowed to go one item past my last grouping before the next button is deactivated.

I have spent hours trying to trouble shoot this to no avail.

Here is the sightglass script:

var Sightglass = function(sightglass, itemContainer, controllers) {
  
  // Custom events in case you want to do some other cool thing...
  // TODO: Make these events unique to every class instance
  this.scrollComplete = new YAHOO.util.CustomEvent('SIGHTGLASS_SCROLL_COMPLETE');
  this.scrollStart = new YAHOO.util.CustomEvent('SIGHTGLASS_SCROLL_START');
  this.onNext = new YAHOO.util.CustomEvent('SIGHTGLASS_NEXT');
  this.onPrev = new YAHOO.util.CustomEvent('SIGHTGLASS_PREV');
  this.onFirst = new YAHOO.util.CustomEvent('SIGHTGLASS_FIRST');
  this.onLast = new YAHOO.util.CustomEvent('SIGHTGLASS_LAST');

  // Watch yer scope
  var that = this;
  
  // private methods and properties
  var _animating = false;
  
  var _autovalue = function(value) {
    if ("auto" === value || "undefined" === typeof value) {
      value = 0;
    }
    return parseInt(value);
  };
  
  var _scrollBy = function() {
    // TODO: Instead, find every position of every Nth element
    //       so that one may scroll there. This prevents possible
    //       clipping annoyances via the sightglass...
    return _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width')) || 200;
  };
  
  var _boundary = function(side) {    
    var listLeft = _autovalue(YAHOO.util.Dom.getStyle(itemContainer, 'left'));
    var listWidth = 0;
    var items = document.getElementById(itemContainer).childNodes;
    for (var i=0; i < items.length; i++) {
        if (1 === items[i].nodeType) {
          listWidth += _autovalue(items[i].offsetWidth)
          + _autovalue(YAHOO.util.Dom.getStyle(items[i].id, 'padding-right'))
          + _autovalue(YAHOO.util.Dom.getStyle(items[i].id, 'padding-left'));
        }
    }
    var sightglassWidth = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width'));
    var sightglassLeft  = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'left'));

    if (side === "left") {
      if (listLeft < sightglassLeft) {
        return true;
      } else {
        return false;
      }
    } else if (side === "right") {
      if (listWidth + listLeft > sightglassWidth) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
      }
  };
  
  var _move = function(properties, time, eventTarget) {
    // properties is a configuration object for YUI animation 
    // make sure anims are complete before starting a whole new one...
    if(!_animating) {
      var _anim = new YAHOO.util.Anim(itemContainer, properties, time, YAHOO.util.Easing.easeOut);
      _anim.onStart.subscribe(
        function(){
          _animating = true;
          that.scrollStart.fire();
        }
      );
      _anim.onComplete.subscribe(_buttonState);
      _anim.onComplete.subscribe(
        function(){ 
          _animating = false; 
          that.scrollComplete.fire();
        }
      );
      _anim.animate();
    }
  };
  
  var _buttonState = function() {
    if(_boundary("left")) {
      YAHOO.util.Dom.setStyle(controllers.buttons.left, 'opacity', '1');
    } else {
      YAHOO.util.Dom.setStyle(controllers.buttons.left, 'opacity', '0.33');
    }
    
    if(_boundary("right")) {
      YAHOO.util.Dom.setStyle(controllers.buttons.right, 'opacity', '1');
    } else {
      YAHOO.util.Dom.setStyle(controllers.buttons.right, 'opacity', '0.33');
    }
  };

  if ('undefined' === typeof that._INITIALIZED ) {

    Sightglass.prototype.next = function(e) {
      if (_boundary("right")) {
        _move({"left": {by: -1 * _scrollBy()}}, 0.6);
      }
      that.onNext.fire();
    };
    
    Sightglass.prototype.previous = function(e) {
      if (_boundary("left")) {
        _move({"left" : {by: _scrollBy()}}, 0.6);
      }
      that.onPrev.fire();
    };
    
    Sightglass.prototype.first = function(e) {
      if (_boundary("left")) {
        _move({"left" : {to: 0}}, 1.2);
      }
      that.onFirst.fire();
    };
  
    Sightglass.prototype.last = function(e) {
      var items = YAHOO.util.Dom.get(itemContainer).getElementsByTagName('div');

      // Calculate where to move the item cluster based on
      // locations of first and last items.
      var lastItemLocation = items[items.length-1].offsetLeft;
      var firstItemLocation = items[0].offsetLeft;
      var sightglassWidth = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width'));

      if (_boundary("right")) {
        var aProp = {
          "left" : {
            to: Math.ceil(
              firstItemLocation - lastItemLocation + (0.5 * sightglassWidth)
             )
           }
        };
        _move(aProp, 1.2);
      }
      that.onLast.fire();
    };    
    that._INITIALIZED = true;
  }
  
};

Here is my html:

<div id="product-browser">
   <!--Start Product Browser-->

   	<!--Next Button-->
    <div id="buttons-left">
    <div id="previous">
	</div>
    </div>

    <!--Previous Button-->
    <div id="buttons-right">
    <div id="next">
    </div>
    </div>

	<!--Start Product Browser Grid-->
    <div id="sightglass" class="prod-browser-grid">
    	
        <div id="items">
            <!--Product Browser Item 1-->
            <div id="item1" class="prod-browser-ul item">
                    <div class="prod-browser-ttl">
                        <h3 class="track-color">Vertical <br />Cylinder</h3>    
                    </div>
                    <div onclick="window.location.href='productdetail.php?id=1'" class="prod-browser-li">
                        <img src="images/products/T/track_736-cmh_t.png" alt="736CMH" width="128" height="125" /> 
                        <h3 class="track-color">736<span class="size12">CMH Series</span></h3>    
                        <h4 class="track-color">Logic 6 T PAR16 Vertical Mini Cylinder</h4>       
                    </div>
                    <div onclick="window.location.href='productdetail.php?id=2'" class="prod-browser-li">
                        <img src="images/products/T/track_737-cmh_t.png" alt="737CMH" width="128" height="125" />
                        <h3 class="track-color">737<span class="size12">CMH Series</span></h3>    
                        <h4 class="track-color">Logic 6 T PAR20 Vertical Mini Cylinder</h4>           
                    </div>
            <!--End Product Browser Item-->        	
            </div>
            
             <!--Product Browser Item 2-->
              
             <!--Product Browser Item 3-->

             <!--Product Browser Item 4-->


            
        </div>
        
    <!--End Product Browser Grid-->
    </div>

    <!--End Product Browser-->
    </div>

I see that this is the function that controls the boundaries:

var _boundary = function(side) {    
    var listLeft = _autovalue(YAHOO.util.Dom.getStyle(itemContainer, 'left'));
    var listWidth = 0;
    var items = document.getElementById(itemContainer).childNodes;
    for (var i=0; i < items.length; i++) {
        if (1 === items[i].nodeType) {
          listWidth += _autovalue(items[i].offsetWidth)
          + _autovalue(YAHOO.util.Dom.getStyle(items[i].id, 'padding-right'))
          + _autovalue(YAHOO.util.Dom.getStyle(items[i].id, 'padding-left'));
        }
    }

Any help here?

here is an example of my script in action (use the product browser at the bottom):
www-dot-coreymichaelstudio-dot-com/janmar/productdetail.php?id=1

Thanks for the help in advance.

[santamonica10]

Problem solved.

I have to change

var sightglassWidth = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width'));

to

var sightglassWidth = _autovalue(YAHOO.util.Dom.getStyle(sightglass, 'width')) + 200;