﻿(function($) {

    $.support.transition = (function() {
        var thisBody = document.body || document.documentElement,
                thisStyle = thisBody.style,
                support = thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined;
        return support;
    })();

    $.fn.getIndex = function() {
        var $p = $(this).parent().children();
        return $p.index(this);
    }

    function cr_autoswitch(options, slideshowContainer, linksContainer) {
        var index = $('div.' + options.selectedSlideClass, slideshowContainer).getIndex() + 1;
        if (index == $('div.' + options.slideClass, slideshowContainer).length || index == 0) {
            index = 1;
        } else {
            index++;
        }
        cr_switchslide(options, index, slideshowContainer, linksContainer);
    }

    // switch function
    function cr_switchslide(options, index, slideshowContainer, linksContainer) {
        if ($.support.transition) {
            $('div.' + options.selectedSlideClass, slideshowContainer).removeClass(options.selectedSlideClass);
            $('div.' + options.slideClass + ':nth-child(' + index + ')', slideshowContainer).addClass(options.selectedSlideClass);
        } else {
            // store the selected slide, animated slides and the new slide into objects to avoid calling jQuery constructor
            var newSlide = $('div.' + options.slideClass + ':nth-child(' + index + ')', slideshowContainer);
            var allSlides = $('div.' + options.slideClass + ':animated, div.' + options.selectedSlideClass, slideshowContainer).not(newSlide);
            var currentSlide = $('div.' + options.selectedSlideClass, slideshowContainer);

            // Do the switch animation - fade the selected one to 0.2, then the new one to 0.8, then completly hide the selected one to 0, and show the new slide one at 1
            allSlides.stop().animate({ opacity: 0.1 }, options.speed, function() {
                newSlide.stop().animate({ opacity: 0.5 }, options.speed, function() {
                    allSlides.animate({ opacity: 0 }, options.speed)
                                .removeClass(options.selectedSlideClass);
                    newSlide.animate({ opacity: 1 }, options.speed)
                                .addClass(options.selectedSlideClass);
                });
            });
        }
        if (options.showLinks) {
            // Update the links with the selected link class
            $('a.' + options.selectedLinkClass, linksContainer).removeClass(options.selectedLinkClass);
            $('a:nth-child(' + index + ')', linksContainer).addClass(options.selectedLinkClass);
        }
    }

    // allows to overload the craftedslide method by being able to specify options or not
    $.fn.craftedslide = function(slide) {
        return $.fn.craftedslide(slide, {});
    };

    $.fn.craftedslide = function(slide, options) {

        // default options
        var defaults = {
            containerClass: 'jq-slideshow',
            slideClass: 'jq-slide',
            selectedSlideClass: 'jq-selected-slide',
            speed: 'slow',
            linksClass: 'jq-slideshow-links',
            selectedLinkClass: 'jq-slideshow-link-selected',
            animation: 'fade',
            firstSlide: 1,
            event: 'click',
            timer: true,
            showLinks: true,
            delay: 10000
        };

        options = $.extend(defaults, options);

        // Initial setup
        var links = '', index = 1, slideshowContainer = $(this);

        // Update the slides
        // start by adding the selected class and then add slide class
        $(slide, slideshowContainer).each(function() {
            links = links + '<a href="#">' + index + '</a>';
            if (index == options.firstSlide) {
                $(this).addClass(options.selectedSlideClass);
            }
            if (!$.support.transition) {
                if (index == options.firstSlide) {
                    $(this).css('opacity', 1);
                } else {
                    $(this).css('opacity', 0);
                }
            }
            index++;
        }).addClass(options.slideClass);

        $(slide, slideshowContainer).css({ 'display': 'block' });
        
        // Set up links
        slideshowContainer.addClass(options.containerClass);

        var linksContainer = null;

        if (options.showLinks) {
            slideshowContainer.append('<div class="' + options.linksClass + '">' + links + '</div>');

            linksContainer = $('div.' + options.linksClass, slideshowContainer);

            $('a:nth-child(' + options.firstSlide + ')', linksContainer).addClass(options.selectedLinkClass);

            // Create the switch effect on link event
            $('a', linksContainer).bind(options.event, function(e) {
                // disable normal behaviour
                e.preventDefault();

                // disable timer if set
                if (options.timer) {
                    clearInterval(cr_interval);
                }

                // The link was set as having text the index
                var selectedLink = $(this);
                var index = selectedLink.html();

                cr_switchslide(options, index, slideshowContainer, linksContainer);
            });
        }

        if (options.timer) {
            var cr_interval = setInterval(function() {
                cr_autoswitch(options, slideshowContainer, linksContainer);
            }, options.delay);
        }

        return this;
    };
})(jQuery);
