$(function() {

// This is the HTML that will be used for all slides.
// Don't edit this unless you're making changes to the overall structure

var boilerplate = '\
        <div class="contentItem" style="::div_style::">\
            <a href="::url::">\
                <img src="::image::" style="::image_style::" />\
            </a>\
            <div class="overlay"> </div>\
            <div class="caption">\
                <h3>\
                   <a href="::url::">\
                        ::slide_title::\
                    </a>\
                </h3>\
                <p>::caption::</p>\
            </div>\
        </div>';

var slides = Array();

// Edit the slide information below
// Make sure to replace apostrophes with "&#39;"
// Modify the display order by cutting & pasting the slide blocks to where you want them.
// IMPORTANT: Save a copy on your computer before making changes in case you need to 
// go back to what you had before.

// Beginning of slide
s = {
image : "slideshow/images/beach_wedding.jpg",
div_style : "background-image: url('slideshow/images/beach_wedding_back.jpg'); background-repeat: repeat-x;",
image_style : "",
slide_title : "How to say, I DO in an exotic locale",
caption : "The location of your wedding can be one of the most critical decisions you make. Are you prepared?",
url : "http://www.vibride.com/index.php?module=article&id=264",
};
slides.push(add_content(s));
// End of slide


// Beginning of slide
s = {
image : "slideshow/images/homecaketopper.jpg",
div_style : "background: black",
image_style : "",
slide_title : "Toppers That Take The Cake",
caption : "Whether you need it for a birthday cake, anniversary cake, or to add something special to that Wedding Cake, our quality cake decor acts as the perfect compliment.",
url : "https://www.vibride.com/shop/index.php?main_page=index&cPath=75_93",
};
slides.push(add_content(s));
// End of slide


// Beginning of slide
s = {
image : "slideshow/images/Garnier black.jpg",
div_style : "background: #734a2e",
image_style : "",
slide_title : "Ceremony Decorations",
caption : "Set the stage for a wonderful celebration by combining decorative elements that reflect your personal style.",
url : "http://www.vibride.com/index.php?module=article&id=34",
};
slides.push(add_content(s));
// End of slide


// Beginning of slide
s = {
image : "slideshow/images/couple.jpg",
div_style : "background: white",
image_style : "",
slide_title : "The Cultural Divide",
caption : "Incorporate cool ideas into your wedding by adding a touch of your ancestral culture.",
url : "http://www.vibride.com/index.php?module=article&id=79",
};
slides.push(add_content(s));
// End of slide


// Beginning of slide
s = {
image : "slideshow/images/tabletop design.jpg",
div_style : "background: #a06b02",
image_style : "",
slide_title : "Outstanding Table Tops",
caption : "We guarantee that our Reception Gallery will dazzle and inspire you to present the most fabulous events.",
url : "https://www.vibride.com/shop/index.php?module=photoalbum&PHPWS_Album_op=view&PHPWS_Album_id=38",
};
slides.push(add_content(s));
// End of slide



s = '';
startSlideshow(slides);

    function add_content(s) {
        var str = boilerplate;
        str = str.replace('::image::', s.image);
        str = str.replace('::div_style::', s.div_style);
        str = str.replace('::image_style::', s.image_style);
        str = str.replace(/::slide_title::/g, s.slide_title);
        str = str.replace('::caption::', s.caption);
        str = str.replace(/::url::/g, s.url);
        return str;
    }

    // retrieve list of slides from server
//    $.getJSON('themes/Orchid Fantasy/jquery.cycle/main_slideshow.cfg', startSlideshow);
   
    function startSlideshow(slides) {
        /* server returns an array of slides which looks like this:
        [
            'images/beach2.jpg',
            'images/beach3.jpg',
            'images/beach4.jpg',
            'images/beach5.jpg',
            'images/beach6.jpg',
            'images/beach7.jpg',
            'images/beach8.jpg'
        ]
        */

        var totalSlideCount = slides.length;
        var $slideshow = $('#slideshow');

        $slideshow.append(slides.shift());
        // markup contains only a single slide; before starting the slideshow we 
        // append one slide and prepend one slide (to account for prev/next behavior)
//        $slideshow.prepend(slides.pop());
        $slideshow.append(slides.shift());
//debugger;
        // start slideshow
        $('#slideshow').after('<div id="nav">').cycle({
            fx: 'scrollHorz',
//            startingSlide: 1,  // start on the slide that was in the markup
            timeout:  5000,
            speed:    1000,
            pager:  '#nav',
            before:   onBefore
        });

        function onBefore(curr, next, opts, fwd) {
            // on Before arguments:
            //  curr == DOM element for the slide that is currently being displayed
            //  next == DOM element for the slide that is about to be displayed
            //  opts == slideshow options
            //  fwd  == true if cycling forward, false if cycling backward
                
            // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
            if (!opts.addSlide)
                return;

            // have we added all our slides?
            if (opts.slideCount == totalSlideCount)
                return;

            // shift or pop from our slide array 
            var nextSlideSrc = fwd ? slides.shift() : slides.pop();

            // add our next slide
            opts.addSlide(nextSlideSrc, fwd == false);
        };
    };
});