(function($) {

    $.fn.laceSlide = function(options) {
        var activeIndex = 0;
        //declare an enum type
        var state = { playing: 0, paused: 1, stopped: 2 };

        //set status variable
        var slideStatus = state.playing;

        var slideSettings = $.extend({}, $.fn.laceSlide.defaults, options);
        var markup = '<div id="laceSlide"><h2>Title</h2><div class="laceSlide-stage"><a href="" class="laceSlide-control"></a><div class="laceSlide-display"><img src="" class="laceSlide-image" alt="" /><div class="laceSlide-info"><h2 class="laceSlide-title">Title</h2><p class="laceSlide-caption">Caption</p></div></div></div></div>';

        $originalMarkup = $(this).hide();
        $(slideSettings.containerDisplay).append(markup);
        //$originalMarkup.hide();

        $slide = $('#laceSlide');
        //title
        $('h2', $slide).text($('.slideTitle', $originalMarkup).text());

        $slideStage = $('.laceSlide-stage', $slide);
        $slideDisplay = $('.laceSlide-display', $slide);
        $slideImage = $('.laceSlide-image', $slide).hide();
        $slideControl = $('.laceSlide-control', $slide);
        $slideInfo = $('.laceSlide-info', $slide);
        $slideTitle = $('.laceSlide-title', $slide);
        $slideCaption = $('.laceSlide-caption', $slide);

        $slideControl.css({
            "background-image": 'url(' + slideSettings.baseUrl + slideSettings.imagePausePath + ')',
            "top": 20,
            "left": ($slideStage.width() / 2) - ($slideControl.width() / 2)
        }).click(function(e) {
            e.preventDefault();
            $slideControl.fadeOut(500, function() {
                switch (slideStatus) {
                    case state.playing:
                        $slide.pauseSlide();
                        break;
                    case state.paused:
                        $slide.resumeSlide();
                        break;
                    case state.stopped:
                        $slide.restartSlide();
                        break;
                }
                $slideControl.fadeIn(500);
            });
        });

        function showControl() {
            $slideControl.animate({ "top": 20 }, 1000);
        }
        function hideControl() {
            $slideControl.animate({ "top": -80 }, 1000);
        }
        function updateControl() {
            path = (slideStatus == state.paused || slideStatus == state.stopped) ? slideSettings.baseUrl + slideSettings.imagePlayPath : slideSettings.baseUrl + slideSettings.imagePausePath;
            $slideControl.css({ "background-image": 'url(' + path + ')' });
        }
        //move control into view when mouse hovers
        var mouseInStage = false;

        function mouseOverStage() {
            if (mouseInStage) {
                showControl();
            } else setTimeout(function() {
                if (!mouseInStage)
                    hideControl();
            }, 3000);
        }

        $slideStage.hover(function() {
            mouseInStage = true;
            mouseOverStage();
        }, function() {
            mouseInStage = false;
            mouseOverStage();
        });

        //hide control if mouse is outside
        mouseOverStage();

        $slideInfo.css({
            "left": slideSettings.photoBorder,
            "right": slideSettings.photoBorder,
            "opacity": "0.75",
            "width": "auto",
            "bottom": -($slideInfo.height())
        });

        var photos = [];
        $('.' + slideSettings.photoClassName, $originalMarkup).each(function() {
            //we expect photos to be in <a>
            href = $(this).attr('href');
            //title = $(this).attr('title');
            title = $(this).siblings('.' + slideSettings.titleClassName).text();
            //caption = $(this).attr('rel');
            caption = $(this).siblings('.' + slideSettings.captionClassName).text();
            photos.push(new Array(href, title, caption));
        });

        //setup external methods
        var sliding = false;
        $.fn.extend($slide, {
            slideTo: function(i) {
                activeIndex = i;
                slide(i);
            },
            nextSlide: function() {
                //if paused, we loop out
                if ((slideStatus == state.playing) && (!sliding)) {
                    newIndex = activeIndex + 1;
                    if (newIndex > photos.length - 1) {
                        if (slideSettings.loopSlide) {
                            $slide.restartSlide(); //reached end and loop
                        }
                        else {
                            $slide.stopSlide(); //stop slide cos we reach the end, and doesnt loop
                        }
                    } else {//continue with next slide
                        $slide.slideTo(newIndex);
                    }
                }
            },
            resumeSlide: function() {
                //paused = false;
                slideStatus = state.playing;
                updateControl();
                $slide.nextSlide();
            },
            pauseSlide: function() {
                //paused = true;
                slideStatus = state.paused;
                updateControl();
            },
            restartSlide: function() {
                slideStatus = state.playing;
                updateControl();
                $slide.slideTo(0);
            },
            stopSlide: function() {
                slideStatus = state.stopped;
                updateControl();
            }
        });

        $slide.slideTo(0); //start

        function slide(i) {
            var height;
            var width;
            var src = photos[i][0];
            sliding = true;
            preloader = new Image();
            preloader.onload = function() {
                if (preloader.height > preloader.width) {//portrait
                    ratio = (preloader.width / preloader.height);
                    preloader.height = preloader.height > slideSettings.maxSize ? slideSettings.maxSize : preloader.height;
                    preloader.width = preloader.height * ratio;
                } else { //landscape or square
                    ratio = (preloader.height / preloader.width);
                    preloader.width = preloader.width > slideSettings.maxSize ? slideSettings.maxSize : preloader.width;
                    preloader.height = preloader.width * ratio;
                }
                // resize the display according to our preloader + play/pause button
                height = preloader.height + (slideSettings.photoBorder * 2); // +$slideInfo.height();
                width = preloader.width + (slideSettings.photoBorder * 2);

                var vcenter = $slideStage.height() / 2;
                var hcenter = $slideStage.width() / 2;
                var top = vcenter - (height / 2);
                var left = hcenter - (width / 2);

                if ($.isFunction(slideSettings.onSlideChange))
                    slideSettings.onSlideChange.call(this, i);

                $slideInfo.animate({ "bottom": -($slideInfo.height()) }, 1000, slideSettings.easingResize, function() {
                    $slideImage.fadeOut('slow', resizeFrame);
                });


                //highlight active thumb
                //active(i);

                function resizeFrame() {
                    //resize picture frame
                    $slideDisplay.animate({
                        //absolute positioning
                        //"top": top,
                        //"left": left,
                        //
                        //relative positioning
                        "top": top,
                        "margin-left": left,
                        "height": height,
                        "width": width
                    }, slideSettings.transitionResize, slideSettings.easingResize, showImage);
                }

                function showImage() {
                    //assign and fade in new image
                    $slideImage.attr("src", src);
                    //limit the max width/height
                    $slideImage.height(preloader.height).width(preloader.width);
                    $slideImage.css({ "margin-top": slideSettings.photoBorder });
                    $slideImage.fadeIn(slideSettings.transitionImage, showInfo);
                }

                function showInfo() {
                    //assign and display photo info
                    $slideInfo.css({ "left": slideSettings.photoBorder, "right": slideSettings.photoBorder, "width": "auto" });
                    $slideTitle.text(photos[i][1]);
                    $slideCaption.text('Photo ' + (i + 1) + ' of ' + photos.length + ' : ' + photos[i][2]);
                    $slideInfo.animate({ "bottom": slideSettings.photoBorder }, 1500, slideSettings.easingResize, function() {
                        setTimeout(function() {
                            sliding = false;
                            $slide.nextSlide();
                        }, slideSettings.durationDisplay);
                    });
                }
            }
            preloader.src = src;
        }

        if (slideSettings.useCarousel) {
            $.fn.laceCarousel.defaults.onThumbClick = function(index) {
                //called from carousel
                $slide.pauseSlide();
                $slide.slideTo(index);
            };
            $.fn.laceCarousel.defaults.onButtonClick = function() {
                $slide.pauseSlide();
            };
            $.fn.laceCarousel.defaults.containerDisplay = '.laceSlide-stage';
            $.fn.laceCarousel.defaults.baseUrl = slideSettings.baseUrl;
            c = $originalMarkup.laceCarousel();
            c.css({
                "position": "absolute",
                "bottom": 0,
                "left": 0,
                "right": 0,
                "width": "auto"
            });
            //event hookup
            slideSettings.onSlideChange = c.active;
        }

        return $slide;
    };

    $.fn.laceSlide.defaults = {
        baseUrl: '',
        containerDisplay: '#SlideshowDisplay',
        slideTitle: '',
        photoClassName: 'photo',
        titleClassName: 'title',
        captionClassName: 'caption',
        photoBorder: 10,
        transitionResize: 1000,
        transitionImage: 1000,
        easingResize: 'swing',
        durationDisplay: 3000,
        loopSlide: true,
        useCarousel: true,
        onSlideChange: null,
        maxSize: 500, //maximum photo width/length
        imagePlayPath: '/scripts/images/slide-play.png',
        imagePausePath: '/scripts/images/slide-pause.png'
    };
})(jQuery);