var currentPanel = null;
      var targetPanel  = null;

      // ---- scroll functions 
      function scrollPanelLeft(scroller) {
        if (!currentPanel) { currentPanel = $('panel_1'); }
        targetPanel  = currentPanel.previous();
        
        if (targetPanel) {
          xAmount = targetPanel.getWidth();
          new Effect.Move( scroller, { x:xAmount, y:0, mode:'relative', duration: 0.3, queue:'end'});
          currentPanel = targetPanel;
        }
      }

      function scrollPanelRight(scroller) {
        if (!currentPanel) { currentPanel = $('panel_1'); }
        targetPanel  = currentPanel.next();
        
        if (targetPanel) {
          xAmount = targetPanel.getWidth();
          new Effect.Move( scroller, { x:-xAmount, y:0, mode:'relative', duration: 0.3, queue:'end'});
          currentPanel = targetPanel;
        }
      }

      function scrollToPanel(scroller, panel) {
        if (!currentPanel) { currentPanel = $('panel_1'); }
        targetPanel = panel;
        
        if (targetPanel) {
          var currentIndex = currentPanel.previousSiblings().size();
          var targetIndex  = targetPanel.previousSiblings().size();
          var xAmount = (targetIndex - currentIndex) * targetPanel.getWidth();
          // $('debug-text').innerHTML="current:"+currentIndex+" target:"+targetIndex+" xAmount:"+xAmount;
          new Effect.Move( scroller, { x:-xAmount, y:0, mode:'relative', duration: 0.3, queue:'end'});
          currentPanel = targetPanel;          
        }
      }

      //---- hook up the events
      Event.observe(window, 'load', function() {
          var tabs = $('scrolltabs').childElements();
          tabs.each(function(item){
              item.firstDescendant().observe('click', function(event){ 
                  var lsib = this.up().siblings();
                  lsib.each(function(litem) {
                      litem.className = null;
                    });
                  this.up().className = "active"; 
                  var thePanel = $(this.href.split('#')[1]);
                  if (thePanel) {
                    scrollToPanel('scrollcontent', thePanel); 
                  }
                  Event.stop(event);
                } );
            });

          setupZoom(); // zoom efects
        });