(function ($) {
    $.fn.carousel = function (delay, transitionSpeed) {

        var carouselId = $(this).attr("id");
        var carouselItemCount = $(".carouselItem", "#" + carouselId).length;
        var currentIndex = 1; // $('.carouselItem.middle', "#" + carouselId).index() - 2; //minus 3 to cater for the 2 masks and and the zero index.
		if (carouselItemCount < 5) {
            //copy elements into new divs so the carousel works as it should
            $(".carouselItem", "#" + carouselId).each(function () {
                var item = $(this).clone();
                $(item).removeClass('left');
                $(item).removeClass('middle');
                $(item).removeClass('right');
				//$('.carouselItem.middle').remove();
                $(item).appendTo('.inner', "#" + carouselId);
            });
        }

        carouselItemCount = $(".carouselItem", "#" + carouselId).length;

        $(this).data("carouselId", carouselId);
        $(this).data("carouselItemCount", carouselItemCount);

        //var currentIndex = 0;// $('.carouselItem.middle', "#" + carouselId).index() - 2; //minus 3 to cater for the 2 masks and and the zero index.

        $(this).data("currentIndex", currentIndex);
        $(this).data("transitionSpeed", transitionSpeed);


        var leftIndex = currentIndex - 1;
        var rightIndex = currentIndex + 1;

        if (leftIndex < 0)
            leftIndex = carouselItemCount - 1;

        if (rightIndex >= carouselItemCount)
            rightIndex = 0;


        var outerLeftIndex = leftIndex - 1;
        var outerRightIndex = rightIndex + 1;

        if (outerLeftIndex < 0)
            outerLeftIndex = carouselItemCount - 1;

        if (outerRightIndex >= carouselItemCount)
            outerRightIndex = 0;

        var outerLeftItem = $($(".carouselItem", "#" + carouselId)[outerLeftIndex]);
        var leftItem = $($(".carouselItem", "#" + carouselId)[leftIndex]);
        var middleItem = $($(".carouselItem", "#" + carouselId)[currentIndex]);
        var rightItem = $($(".carouselItem", "#" + carouselId)[rightIndex]);
        var outerRightItem = $($(".carouselItem", "#" + carouselId)[outerRightIndex]);


        //fadeout next / previous icons
        $('.carouselItem .carouselNext').css('opacity', '0');
        $('.carouselItem .carouselPrevious').css('opacity', '0');



        $('.carouselNext', $(middleItem)).css('opacity', '1');
        $('.carouselPrevious', $(middleItem)).css('opacity', '1');

        $(outerLeftItem).css("left", "-" + (2 * $(outerLeftItem).width()) + "px");
        $(leftItem).css("left", "-" + ($(leftItem).width()) + "px");
        $(middleItem).css("left", "0px");
        $(rightItem).css("left", ($(rightItem).width()) + "px");
        $(outerRightItem).css("left", (2 * $(outerRightItem).width()) + "px");




        var times = 0;
        $(this).everyTime(delay, function () {
            ChangeImage($(this));
        }, times);

        $('.carouselPrevious a', "#" + carouselId).bind('click', function (e) {
            // do something on click
            var carousel = $(e.target).closest(".carousel");
            PreviousImage(carousel);
            e.preventDefault();
        });

        $('.carouselNext a', "#" + carouselId).bind('click', function (e) {
            // do something on click
            var carousel = $(e.target).closest(".carousel");
            NextImage(carousel);
            e.preventDefault();
        });

    };
})(jQuery);


function NextImage(carouselItem) {
    $(carouselItem).stopTime();
    ChangeImage(carouselItem);
}

function PreviousImage(carouselItem) {
    $(carouselItem).stopTime();
    //slide images left
    //left left
    //middle left
    //right left
    //next to right move to the right and move left
    var carouselId = $(carouselItem).data("carouselId");
    var currentIndex = $(carouselItem).data("currentIndex");
    var carouselItemCount = $(carouselItem).data("carouselItemCount");

    var leftIndex = currentIndex - 1;
    var rightIndex = currentIndex + 1;

    if (leftIndex < 0)
        leftIndex = carouselItemCount - 1;

    if (rightIndex >= carouselItemCount)
        rightIndex = 0;


    var outerLeftIndex = leftIndex - 1;
    var outerRightIndex = rightIndex + 1;

    if (outerLeftIndex < 0)
        outerLeftIndex = carouselItemCount - 1;

    if (outerRightIndex >= carouselItemCount)
        outerRightIndex = 0;

    var outerLeftItem = $($(".carouselItem", "#" + carouselId)[outerLeftIndex]);
    var leftItem = $($(".carouselItem", "#" + carouselId)[leftIndex]);
    var middleItem = $($(".carouselItem", "#" + carouselId)[currentIndex]);
    var rightItem = $($(".carouselItem", "#" + carouselId)[rightIndex]);
    var outerRightItem = $($(".carouselItem", "#" + carouselId)[outerRightIndex]);


    //fadeout next / previous icons
    $('.carouselItem .carouselNext').animate({
        opacity: '0'
    }, {
        duration: 250,
        complete: function () {

        }
    });

    $('.carouselItem .carouselPrevious').animate({
        opacity: '0'
    }, {
        duration: 250,
        complete: function () {

        }
    });


    $(outerLeftItem).css("left", "-" + (2 * $(outerLeftItem).width()) + "px");
    $(outerRightItem).css("left", (2 * $(outerRightItem).width()) + "px");

    var transitionSpeed = $(carouselItem).data("transitionSpeed");
    //animate items right
    $(outerLeftItem).animate({
        left: ($(outerLeftItem).position().left + $(outerLeftItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {

        }
    });

    $(leftItem).animate({
        left: ($(leftItem).position().left + $(leftItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {

            //fadein next / previous icons
            $('.carouselNext', $(this)).animate({
                opacity: '1'
            }, {
                duration: 250,
                complete: function () {

                }
            });

            $('.carouselPrevious', $(this)).animate({
                opacity: '1'
            }, {
                duration: 250,
                complete: function () {

                }
            });

        }
    });

    $(middleItem).animate({
        left: ($(middleItem).position().left + $(middleItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {

        }
    });

    $(rightItem).animate({
        left: ($(rightItem).position().left + $(rightItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {

        }
    });

    $(outerRightItem).animate({
        left: ($(outerRightItem).position().left + $(outerRightItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {

        }
    });


    currentIndex--;
    if (currentIndex < 0)
        currentIndex = carouselItemCount - 1;
    $(carouselItem).data("currentIndex", currentIndex);
}


function ChangeImage(carouselItem) {
    $('.carouselItem').stop();
    //slide images left
    //left left
    //middle left
    //right left
    //next to right move to the right and move left
    var carouselId = $(carouselItem).data("carouselId");
    var currentIndex = $(carouselItem).data("currentIndex");
    var carouselItemCount = $(carouselItem).data("carouselItemCount");

    var leftIndex = currentIndex - 1;
    var rightIndex = currentIndex + 1;

    if (leftIndex < 0)
        leftIndex = carouselItemCount - 1;

    if (rightIndex >= carouselItemCount)
        rightIndex = 0;


    var outerLeftIndex = leftIndex - 1;
    var outerRightIndex = rightIndex + 1;

    if (outerLeftIndex < 0)
        outerLeftIndex = carouselItemCount - 1;

    if (outerRightIndex >= carouselItemCount)
        outerRightIndex = 0;

    var outerLeftItem = $($(".carouselItem", "#" + carouselId)[outerLeftIndex]);
    var leftItem = $($(".carouselItem", "#" + carouselId)[leftIndex]);
    var middleItem = $($(".carouselItem", "#" + carouselId)[currentIndex]);
    var rightItem = $($(".carouselItem", "#" + carouselId)[rightIndex]);
    var outerRightItem = $($(".carouselItem", "#" + carouselId)[outerRightIndex]);

    //fadeout next / previous icons
    $('.carouselItem .carouselNext').filter(':not(:animated)').animate({
        opacity: '0'
    }, {
        duration: 250,
        complete: function () {

        }
    });

    $('.carouselItem .carouselPrevious').filter(':not(:animated)').animate({
        opacity: '0'
    }, {
        duration: 250,
        complete: function () {

        }
    });


    $(outerLeftItem).css("left", "-" + (2 * $(outerLeftItem).width()) + "px");
    $(outerRightItem).css("left", (2 * $(outerRightItem).width()) + "px");

    var transitionSpeed = $(carouselItem).data("transitionSpeed");
    //animate items left
    $(outerLeftItem).filter(':not(:animated)').animate({
        left: ($(outerLeftItem).position().left - $(outerLeftItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {
            
        }
    });

    $(leftItem).filter(':not(:animated)').animate({
        left: ($(leftItem).position().left - $(leftItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {

        }
    });

    $(middleItem).filter(':not(:animated)').animate({
        left: ($(middleItem).position().left - $(middleItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {

        }
    });

    $(rightItem).filter(':not(:animated)').animate({
        left: ($(rightItem).position().left - $(rightItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {

            //fadein next / previous icons
            $('.carouselNext', $(this)).animate({
                opacity: '1'
            }, {
                duration: 250,
                complete: function () {

                }
            });

            $('.carouselPrevious', $(this)).animate({
                opacity: '1'
            }, {
                duration: 250,
                complete: function () {

                }
            });

        }
    });

    $(outerRightItem).filter(':not(:animated)').animate({
        left: ($(outerRightItem).position().left - $(outerRightItem).width()) + 'px'
    }, {
        duration: transitionSpeed,
        complete: function () {

        }
    });


    currentIndex++;
    if (currentIndex >= carouselItemCount)
        currentIndex = 0;
    $(carouselItem).data("currentIndex", currentIndex);
}