jQuery: How can I put two of these elements on the same page?
<p>I am using the following script, but if I put more than 1 occurrence on the same page, it breaks. I am trying to get it to where I can put multiple carousels on the same page.</p>

<p>HTML: </p>

<pre><code>&lt;div class="carousel_outer"&gt;
    &lt;div class="portfolio-carousel horizontal"&gt;
        &lt;div class="carousel" id="carousel1"&gt;
            &lt;div class="carousel_container carousel1"&gt;
                &lt;ul class="portfolio-wrap carousel1"&gt;
                    &lt;li&gt;&lt;a class="gall_thumb" href="#" title="First Pic"&gt;&lt;img src="#" alt="First Pic" /&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="gall_thumb" href="#" title="Second Pic"&gt;&lt;img src="#" alt="Second Pic" /&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt; 
            &lt;a class="carousel_prev" href="#"&gt;Previous&lt;/a&gt;
            &lt;a class="carousel_next" href="#"&gt;Next&lt;/a&gt;
        &lt;/div&gt; 
    &lt;/div&gt; 
&lt;/div&gt;
</code></pre>

<p>Javascript on the page:</p>

<pre><code>$('.carousel').mycarousel({
    delay: 150,
    fade:300,
    slide: 700,
    effect:'slide',                   
    orientation:'horizontal',
    loop: false,
    autoplay: false
});
</code></pre>

<p>And the actual carousel javascript:</p>

<pre><code>(function ($) {
$.fn.extend({
    mycarousel: function (options) {
        var defaults = {
            delay: 150,
            fade: 300,
            slide: 500,
            effect: "fade",
            orientation: "horizontal",
            captionFade: 150,
            loop: false,
            autoplay: true,
            time: 3000
        };
        var options = $.extend(defaults, options);
        return this.each(function () {
            var o = options;
            var carousel = this;
            $carousel_container = $(carousel).find(".carousel_container");
            $li = $(carousel).find(".carousel_container ul li");
            var visible_width = parseInt($carousel_container.css("width"), 10);
            var visible_height = parseInt($carousel_container.css("height"), 10);
            var number_items = $li.size();
            var item_width = parseInt($li.css("width"), 10);
            var item_height = parseInt($li.css("height"), 10);
            var item_marginRight = parseInt($li.css("marginRight"), 10);
            var item_marginLeft = parseInt($li.css("marginLeft"), 10);
            var item_marginTop = parseInt($li.css("marginTop"), 10);
            var item_marginBottom = parseInt($li.css("marginBottom"), 10);
            if (o.orientation == "horizontal") {
                var visible_items = Math.ceil(visible_width / (item_width + item_marginRight + item_marginLeft));
            } else {
                var visible_items = Math.ceil(visible_height / (item_height + item_marginTop + item_marginBottom));
            }
            var slides = Math.ceil(number_items / visible_items);
            $float_easing = "easeInOutQuart";

            function set_item_classes_visibility() {
                $li.each(function (index) {
                    var class_number = Math.floor((index + visible_items) / visible_items);
                    $(this).addClass("visible_" + class_number);
                    if (class_number == "1") {
                        $(this).css("display", "block");
                        $(this).find(".inner").css("display", "block");
                    } else {
                        $(this).css("display", "none");
                        $(this).find(".inner").css("display", "none");
                    }
                });
            }
            set_item_classes_visibility();

            function set_next_prev_classes() {
                var visible_item_class = $(carousel).find(".carousel_container ul li:visible").attr("class");
                var visible_id = visible_item_class.split("_");
                if (!o.loop) {
                    if (visible_id[1] == "1") {
                        $(".carousel_prev").addClass("disable");
                    } else {
                        $(".carousel_prev").removeClass("disable");
                    }
                    if (visible_id[1] == slides) {
                        $(".carousel_next").addClass("disable");
                    } else {
                        $(".carousel_next").removeClass("disable");
                    }
                }
            }
            set_next_prev_classes();

            function set_item_position() {
                $li.each(function () {
                    $(this).css("display", "none");
                    $(this).css("position", "absolute");
                    if (o.orientation == "horizontal") {
                        $(this).css("top", "0");
                        $(this).css("left", visible_width + parseInt($carousel_container.css("paddingLeft")) + parseInt($carousel_container.css("paddingRight")), 10);
                    } else {
                        if (o.orientation == "vertical") {
                            $(this).css("left", "0");
                            $(this).css("top", visible_height + parseInt($carousel_container.css("paddingTop")) + parseInt($carousel_container.css("paddingBottom")), 10);
                        }
                    }
                });
                $carousel_container.find("li.visible_1").each(function (index) {
                    $(this).css("display", "block");
                    if (o.orientation == "horizontal") {
                        var left_position = (index * (item_width + item_marginRight + item_marginLeft)) + parseInt($carousel_container.css("paddingLeft"), 10);
                        $(this).css("left", left_position);
                    } else {
                        if (o.orientation == "vertical") {
                            var top_position = (index * (item_height + item_marginTop + item_marginBottom)) + parseInt($carousel_container.css("paddingTop"), 10);
                            $(this).css("top", top_position);
                        }
                    }
                });
            }
            if (o.effect == "slide") {
                set_item_position();
            }
            function show_next_prev(method) {
                function show_items_fade(id) {
                    var next_class_name = "visible_" + id;
                    $carousel_container.find("li." + next_class_name).css("display", "block");
                    $carousel_container.find("li." + next_class_name).each(function (index) {
                        var delay = (index) * o.delay;
                        if (method == "prev") {
                            var delay = ((visible_items - 1) - index) * o.delay;
                        }
                        var index_item = (index + 1);
                        $(this).find(".inner").delay(delay).fadeIn(o.fade, function () {
                            if (index_item == visible_items || id == slides) {
                                set_next_prev_classes();
                            }
                        });
                    });
                }
                function show_items_slide(id) {
                    var next_class_name = "visible_" + id;
                    $carousel_container.find("li." + next_class_name + " .inner").css("display", "block");
                    $carousel_container.find("li." + next_class_name).each(function (index) {
                        $(this).css("display", "block");
                        var delay = (index) * o.delay;
                        if (method == "prev") {
                            var delay = ((visible_items - 1) - index) * o.delay;
                        }
                        var index_item = (index + 1);
                        if (o.orientation == "horizontal") {
                            var left_position = (index * (item_width + item_marginRight + item_marginLeft)) + parseInt($carousel_container.css("paddingLeft"), 10);
                            $(this).delay(delay).animate({
                                left: left_position
                            }, o.slide, $float_easing, function () {
                                if (index_item == visible_items || id == slides) {
                                    set_next_prev_classes();
                                }
                            });
                        } else {
                            if (o.orientation == "vertical") {
                                var top_position = (index * (item_height + item_marginTop + item_marginBottom)) + parseInt($carousel_container.css("paddingTop"), 10);
                                $(this).delay(delay).animate({
                                    top: top_position
                                }, o.slide, $float_easing, function () {
                                    if (index_item == visible_items || id == slides) {
                                        set_next_prev_classes();
                                    }
                                });
                            }
                        }
                    });
                }
                var visible_item_class = $carousel_container.find("li:visible").attr("class");
                visible_id = visible_item_class.split("_");
                var next_id = parseInt(visible_id[1], 10) + 1;
                var prev_id = parseInt(visible_id[1], 10) - 1;
                if (visible_id[1] == 1) {
                    prev_id = slides;
                }
                if (visible_id[1] == slides) {
                    next_id = 1;
                }
                switch (o.effect) {
                    case "fade":
                        $carousel_container.find("li:visible").each(function (index) {
                            var delay = (index) * o.delay;
                            var index_item = (index + 1);
                            var last_item = $carousel_container.find("li." + visible_item_class).size();
                            if (method == "prev") {
                                delay = ((visible_items - 1) - index) * o.delay;
                                last_item = 1;
                            }
                            $(this).find(".inner").delay(delay).fadeOut(o.fade, function () {
                                if (index_item == last_item) {
                                    $("li." + visible_item_class).css("display", "none");
                                    if (method == "next") {
                                        show_items_fade(next_id);
                                    } else {
                                        if (method == "prev") {
                                            show_items_fade(prev_id);
                                        }
                                    }
                                }
                            });
                        });
                        break;
                    case "slide":
                        $carousel_container.find("li.visible_" + prev_id).each(function (index) {
                            if (o.orientation == "horizontal") {
                                if (method == "next") {
                                    var left_position = visible_width + parseInt($carousel_container.css("paddingLeft"), 10) + parseInt($carousel_container.css("paddingRight"), 10);
                                } else {
                                    if (method == "prev") {
                                        var left_position = "-" + item_width + "px";
                                    }
                                }
                                $(this).css("left", left_position);
                            } else {
                                if (o.orientation == "vertical") {
                                    if (method == "next") {
                                        var top_position = visible_height + parseInt($carousel_container.css("paddingTop"), 10) + parseInt($carousel_container.css("paddingBottom"), 10);
                                    } else {
                                        if (method == "prev") {
                                            var top_position = "-" + item_height + "px";
                                        }
                                    }
                                    $(this).css("top", top_position);
                                }
                            }
                        });
                        $carousel_container.find("li." + visible_item_class).each(function (index) {
                            var delay = (index) * o.delay;
                            var zindex = index + 10;
                            var index_item = (index + 1);
                            var last_item = $carousel_container.find("li." + visible_item_class).size();
                            if (method == "prev") {
                                delay = ((visible_items - 1) - index) * o.delay;
                                zindex = ((visible_items - 1) - index) + 10;
                                last_item = 1;
                            }
                            $(this).css("z-index", zindex);
                            if (o.orientation == "horizontal") {
                                if (method == "next") {
                                    var left_position = "-" + item_width;
                                } else {
                                    if (method == "prev") {
                                        var left_position = visible_width + parseInt($carousel_container.css("paddingLeft"), 10) + parseInt($carousel_container.css("paddingRight"), 10);
                                    }
                                }
                                $(this).delay(delay).animate({
                                    left: left_position
                                }, o.slide, $float_easing, function () {
                                    if (index_item == last_item) {
                                        $("li." + visible_item_class).css("display", "none");
                                        if (method == "next") {
                                            show_items_slide(next_id);
                                        } else {
                                            if (method == "prev") {
                                                show_items_slide(prev_id);
                                            }
                                        }
                                    }
                                });
                            } else {
                                if (o.orientation == "vertical") {
                                    if (method == "next") {
                                        var top_position = "-" + item_height;
                                    } else {
                                        if (method == "prev") {
                                            var top_position = visible_height + parseInt($carousel_container.css("paddingTop"), 10) + parseInt($carousel_container.css("paddingBottom"), 10);
                                        }
                                    }
                                    $(this).delay(delay).animate({
                                        top: top_position
                                    }, o.slide, $float_easing, function () {
                                        if (index_item == last_item) {
                                            $("li." + visible_item_class).css("display", "none");
                                            if (method == "next") {
                                                show_items_slide(next_id);
                                            } else {
                                                if (method == "prev") {
                                                    show_items_slide(prev_id);
                                                }
                                            }
                                        }
                                    });
                                }
                            }
                        });
                        break;
                }
            }
            if (o.autoplay) {
                var interval = setInterval(function () {
                    var visible_item_class = $(carousel).find(".carousel_container ul li:visible").attr("class");
                    var visible_id = visible_item_class.split("_");
                    if (!o.loop) {
                        if (visible_id[1] == slides) {
                            clearInterval(interval);
                        } else {
                            show_next_prev("next");
                        }
                    } else {
                        show_next_prev("next");
                    }
                }, o.time);
            }
            $(carousel).find(".carousel_next").click(function () {
                clearInterval(interval);
                show_next_prev("next");
                return (false);
            });
            $(carousel).find(".carousel_prev").click(function () {
                clearInterval(interval);
                show_next_prev("prev");
                return (false);
            });
            $li.hover(function () {
                clearInterval(interval);
                $(this).find(".caption").fadeIn(o.captionFade);
            }, function () {
                $(this).find(".caption").fadeOut(o.captionFade);
            });
        });
    }
});
})(jQuery);
</code></pre>

<p>I'm thinking if there is some way I can identify each carousel with an ID and the script only executes things within each ID it would work, but I can't figure out how to get it done.</p>

<p>EDIT: I am getting the following js console error when I click a next/prev button: <code>visible_item_class is undefined</code></p>
