MJ Carousel

/*
    Author      : Michael Janea
    Version     : 1.0.1
    Author URL  : www.michaeljanea.byethost7.com
*/

(function($){

    //define plugin
    $.fn.mjCarousel = function(options){

        //defaults
        var defaults = {
            transition  : 400,
            delay       : 3000
        };

        //extends
        var settings = $.extend({}, defaults, options);

        //variables
        var nextSlide, playing = navigationClicked = false;

        //function
        return this.each(function(){

            //element var
            el = $(this);

            //set next slide
            nextSlide = $(el).find('.mj_carousel_image.active').index() + 2;

            //auto play
            /*setTimeout(function(){
                autoPlay(el);
            }, settings.delay);*/
            eval("mjCarousel_loop_" + $(el).index() + " = setTimeout(function(){autoPlay(el);}, settings.delay);");

            //auto play function
            function autoPlay(el){

                //trigger next button
                $(el).find('.mj_carousel_next').trigger('click');

                //play again
                eval("mjCarousel_loop_" + $(el).index() + " = setTimeout(function(){autoPlay(el);}, settings.delay);");

            };

            //on next click
            $(this).find('.mj_carousel_next').on('click', function(){

                //do the action if not carousel in not playing
                if(!playing){

                    //set carousel as playing
                    playing = true;

                    //disable auto play
                    eval("clearTimeout(mjCarousel_loop_" + $(this).closest('.mj_carousel').index() + ")");

                    //next slide
                    if(!navigationClicked){
                        nextSlide = $(this).closest('.mj_carousel').find('.mj_carousel_image.active').index() + 2;
                    }
                    nextSlide = nextSlide > $(this).closest('.mj_carousel').find('.mj_carousel_image').size() ? 1 : nextSlide;

                    //top position
                    topPosition = nextSlide == 1 ? 0 : '-' + $(this).closest('.mj_carousel').outerHeight();

                    //change active navigation
                    $(this).closest('.mj_carousel').find('.mj_carousel_navigation').find('li').removeClass('active').siblings(':nth-child(' + nextSlide + ')').addClass('active');

                    //position the next slide and animate to show it
                    $(this).closest('.mj_carousel').find('.mj_carousel_image.active').siblings(':nth-child(' + nextSlide + ')').css({display:'block', left:$(this).closest('.mj_carousel').outerWidth()}).animate({top:topPosition, marginBottom:'-' + $(this).closest('.mj_carousel').outerHeight()}, 0).stop(true, true).animate({top:topPosition, left:'-=' + $(this).closest('.mj_carousel').outerWidth()}, settings.transition, function(){

                        //remove inline css generated by jquery and set as active
                        $(this).addClass('active').removeAttr('style');

                        //tell the carousel that navigation wasn't clicked
                        navigationClicked = false;

                        //next slide increment
                        nextSlide++;

                        //set carousel as done playing
                        playing = false;

                        //temporary carousel variable
                        var elTmp = $(this).closest('.mj_carousel');

                        //enable auto play
                        /*mjCarousel_loop_ = setTimeout(function(){
                            autoPlay(elTmp);
                        }, settings.delay);*/
                        eval("mjCarousel_loop_" + $(elTmp).index() + " = setTimeout(function(){autoPlay(elTmp);}, settings.delay);");

                    });

                    //position the current active slide to hide
                    $(this).closest('.mj_carousel').find('.mj_carousel_image.active').stop(true, true).animate({left:'-=' + $(this).closest('.mj_carousel').outerWidth()}, settings.transition, function(){

                        //remove inline css generated by jquery and remove its class active
                        $(this).removeAttr('style').removeClass('active');

                    });

                }

            });

            //on previous click
            $(this).find('.mj_carousel_prev').on('click', function(){

                //do the action if not carousel in not playing
                if(!playing){

                    //set carousel as playing
                    playing = true;

                    //disable auto play
                    eval("clearTimeout(mjCarousel_loop_" + $(this).closest('.mj_carousel').index() + ")");

                    //prev slide
                    if(!navigationClicked){
                        prevSlide = $(this).closest('.mj_carousel').find('.mj_carousel_image.active').index();
                    }
                    prevSlide = prevSlide == 0 ? $(this).closest('.mj_carousel').find('.mj_carousel_image').size() : prevSlide;

                    //top position
                    topPosition = prevSlide < $(this).closest('.mj_carousel').find('.mj_carousel_image').size() ? 0 : '-' + $(this).closest('.mj_carousel').outerHeight();

                    //change active navigation
                    $(this).closest('.mj_carousel').find('.mj_carousel_navigation').find('li').removeClass('active').siblings(':nth-child(' + prevSlide + ')').addClass('active');

                    //position the prev slide and animate to show it
                    $(this).closest('.mj_carousel').find('.mj_carousel_image.active').siblings(':nth-child(' + prevSlide + ')').css({display:'block'}).animate({top:topPosition, marginBottom:'-' + $(this).closest('.mj_carousel').outerHeight(), left:'-' + $(this).closest('.mj_carousel').outerWidth()}, 0).stop(true, true).animate({left:'+=' + $(this).closest('.mj_carousel').outerWidth()}, settings.transition, function(){

                        //remove inline css generated by jquery and set as active
                        $(this).addClass('active').removeAttr('style');

                        //tell the carousel that navigation wasn't clicked
                        navigationClicked = false;

                        //prev slide decrement
                        prevSlide--;

                        //set carousel as done playing
                        playing = false;

                        //temporary carousel variable
                        var elTmp = $(this).closest('.mj_carousel');

                        //enable auto play
                        /*mjCarousel_loop_ = setTimeout(function(){
                            autoPlay(elTmp);
                        }, settings.delay);*/
                        eval("mjCarousel_loop_" + $(elTmp).index() + " = setTimeout(function(){autoPlay(elTmp);}, settings.delay);");

                    });

                    //position the current active slide to hide
                    $(this).closest('.mj_carousel').find('.mj_carousel_image.active').stop(true, true).animate({left:'+=' + $(this).closest('.mj_carousel').outerWidth()}, settings.transition, function(){

                        //remove inline css generated by jquery and remove its class active
                        $(this).removeAttr('style').removeClass('active');

                    });

                }

            });

            //navigations
            $(this).find('.mj_carousel_navigation').find('li').on('click', function(){

                    //disable auto play
                    eval("clearTimeout(mjCarousel_loop_" + $(this).closest('.mj_carousel').index() + ")");

                    //tell the carousel that navigation was clicked
                    navigationClicked = true;

                    //if next slide is greater than the current slide
                    if($(this).attr('data-slide') >= nextSlide){

                        //set next slide
                        nextSlide = $(this).attr('data-slide');

                        //trigger next button
                        $(this).closest('.mj_carousel').find('.mj_carousel_next').trigger('click');

                    //if next slide is less than the current slide
                    }else if($(this).attr('data-slide') < nextSlide){

                        //set prev slide
                        prevSlide = $(this).attr('data-slide');

                        //trigger prev button
                        $(this).closest('.mj_carousel').find('.mj_carousel_prev').trigger('click');

                    }

            });

        });

    };

})(jQuery);