Accordion di Dreamweaver: "dirottare" funzione NextPanel su un pulsante

[Mikele Sagitter]

Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
    this.timer = null;
    this.interval = 0;

    this.fps = 60;
    this.duration = 500;
    this.startTime = 0;

    this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;

    this.onComplete = null;

    this.panel = panel;
    this.panelToOpen = accordion.getElement(panel);
    this.panelData = [];
    this.useFixedPanelHeights = accordion.useFixedPanelHeights;

    Spry.Widget.Accordion.setOptions(this, opts, true);

    this.interval = Math.floor(1000 / this.fps);

    // Set up the array of panels we want to animate.

    var panels = accordion.getPanels();
    for (var i = 0; i < panels.length; i++)
    {
        var p = panels[i];
        var c = accordion.getPanelContent(p);
        if (c)
        {
            var h = c.offsetHeight;
            if (h == undefined)
                h = 0;

            if (p == panel && h == 0)
                c.style.display = "block";

            if (p == panel || h > 0)
            {
                var obj = new Object;
                obj.panel = p;
                obj.content = c;
                obj.fromHeight = h;
                obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
                obj.distance = obj.toHeight - obj.fromHeight;
                obj.overflow = c.style.overflow;
                this.panelData.push(obj);

                c.style.overflow = "hidden";
                c.style.height = h + "px";
            }
        }
    }
};

Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
    var self = this;
    this.startTime = (new Date).getTime();
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};

Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
    if (this.timer)
    {
        clearTimeout(this.timer);

        // If we're killing the timer, restore the overflow
        // properties on the panels we were animating!

        for (i = 0; i < this.panelData.length; i++)
        {
            obj = this.panelData[i];
            obj.content.style.overflow = obj.overflow;
        }
    }

    this.timer = null;
};

Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
    var curTime = (new Date).getTime();
    var elapsedTime = curTime - this.startTime;

    var i, obj;

    if (elapsedTime >= this.duration)
    {
        for (i = 0; i < this.panelData.length; i++)
        {
            obj = this.panelData[i];
            if (obj.panel != this.panel)
            {
                obj.content.style.display = "none";
                obj.content.style.height = "0px";
            }
            obj.content.style.overflow = obj.overflow;
            obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
        }
        if (this.onComplete)
            this.onComplete();
        return;
    }

    for (i = 0; i < this.panelData.length; i++)
    {
        obj = this.panelData[i];
        var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
        obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
    }
    
    var self = this;
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};


<div id="Accordion1" class="Accordion" tabindex="0">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Etichetta 1</div>
    <div class="AccordionPanelContent">Contenuto 1
<a onclick="Spry.Widget.Accordion.prototype.closePanel()">cambia pannello</a></div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Etichetta 2</div>
    <div class="AccordionPanelContent">Contenuto 2</div>
  </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Etichetta 3</div>
    <div class="AccordionPanelContent">Contenuto 3</div>
  </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Etichetta 4</div>
    <div class="AccordionPanelContent">Contenuto 4</div>
  </div>
</div>