Question

I am using ContentFLow, a javascript coverflow for images, here and I am integrating jQueryUI for Themes and icons/buttons. I am specifically integrating a Play/Pause button for a slideshow and I have it working in Safari with the following code but I get an error in FireBug in Firefox, and the code fails.
The FireBug error:

play_slide is not defined
[Break On This Error] var p = play_slide;

Here is my ContentFlow Code for the play/pause function:

if (conf.showControlls) {
var c = document.createElement('div');
var p = play_slide;
}

/* toggle slideshow on and off */
flow.toggleSlideshow = function(force) {

if (this._slideshow_locked) var t = "stop";
else var t = "play";
if (force) {
    switch (force) {
    case "stop":
    case "play":
        var t = force;
        break;
    }
}

switch (t) {
case "stop":
    if (p) {
        p.removeClassName('play');
        p.addClassName('pause');
        p.setAttribute('title', "pause");
    }
    this._slideshow_locked = false;
    this._startSlideshow();
    break;

case "play":
    if (p) {
        p.removeClassName('pause');
        p.addClassName('play');
        p.setAttribute('title', "play");
    }
    this._slideshow_locked = true;
    this._stopSlideshow();
    break;
}
}; 

/* add controll elements */
if (c) {

p.addEvent('click', flow.toggleSlideshow.bind(flow), '');

Here is my JqueryUI code for the Play button, and to change the icon from pLay to Pause

$(function() {
$("#play_slide").button({
    text: false,
    icons: {
        primary: "ui-icon-play"
    }
}).click(function() {
    var options;
    if ($(this).text() === "play") {
        options = {
            label: "pause",
            icons: {
                primary: "ui-icon-pause"
            }


        };
    } else {
        options = {
            label: "play",
            icons: {
                primary: "ui-icon-play"
            }
        };
    }
    $(this).button("option", options);
    $(this).toggleSlideshow();
});
});

Not sure why it works in Safari and not Firefox but I obviously need some help with
var p = play_slide;
Any help for this novice will be appreciated!

Mike

Answer 1

I answered my own question. After some trial and error, changing var p to:

var p = document.getElementById("play_slide");

and remove this:

$(this).toggleSlideshow();