(function($) {

    $.fn.extend({

        jscarousel: function(options) {

            var settings = $.extend({

                scrollspeed: 500,

                delay: 5000,

                itemstodisplay: 4,

                autoscroll: false,

                onthumbnailclick: null

            }, options);

            return this.each(function() {

            var slidercontents = $(this).addclass('jscarousal-contents');

                var slider = $('<div/>').addclass('jscarousal');

                var leftbutton = $('<div/>').addclass('jscarousal-left');

                var rightbutton = $('<div/>').addclass('jscarousal-right');

                slidercontents.before(slider);

                slider.append(leftbutton);

                slider.append(slidercontents);

                slider.append(rightbutton);



                var total = $('> div', slidercontents).css('display', 'none').length;

                var index = 0;

                var start = 0;

                var current = $('<div/>');

                var noofblocks;

                var interval;

                var left;

                var display = settings.itemstodisplay;

                var speed = settings.scrollspeed;

                var containerwidth;

                var height;

                var direction = "forward";



                function initialize() {

                    index = -1;

                    noofblocks = parseint(total / display);

                    if (total % display > 0) noofblocks++;

                    var startindex = 0;

                    var endindex = display;

                    var copy = false;

                    var allelements = $('> div', slidercontents);

                    $('> div', slidercontents).remove();

                    allelements.addclass('thumbnail-inactive').hover(function() { $(this).removeclass('thumbnail-inactive').addclass('thumbnail-active'); }, function() { $(this).removeclass('thumbnail-active').addclass('thumbnail-inactive'); })

                    for (var i = 0; i < noofblocks; i++) {

                        if (total > display) {

                            startindex = i * display;

                            endindex = startindex + display;

                            if (endindex > total) {

                                startindex -= (endindex - total);

                                endindex = startindex + display;

                                copy = true;

                            }

                        }

                        else {

                            startindex = 0;

                            endindex = total;

                        }

                        var wrapper = $('<div/>')

                        allelements.slice(startindex, endindex).each(function(index, el) {

                            if (!copy)

                                wrapper.append(el);

                            else wrapper.append($(el).clone(true));



                        });

                        wrapper.find("img").click(

                         function() {

                             if (settings.onthumbnailclick != null) settings.onthumbnailclick($(this).attr('src'));

                         });

                        slidercontents.append(wrapper);

                    }

                    $('> div', slidercontents).addclass('hidden');

                    $('> div > div', slidercontents).css('display', '');

                    left = $('> div:eq(' + index + ')', slidercontents).css('left');



                    containerwidth = slidercontents.width();

                    height = slidercontents.get(0).offsetheight;

                    $('> div', slidercontents).css('left', '-' + containerwidth + 'px');

                    $('> div:eq(0)', slidercontents).addclass('visible').removeclass('hidden');

                    $('> div:eq(0)', slidercontents).stop().animate({ left: 0 }, speed, function() { index += 1; });

                    slider.mouseenter(function() {  if (settings.autoscroll) stopanimate(); }).mouseleave(function() { if (settings.autoscroll) animate(); });

                    if (settings.autoscroll)

                        animate();



                    rightbutton.click(function() {

                        direction = "forward";

                        showthumbs();

                    });

                    leftbutton.click(function() {

                        direction = "backward";

                        showthumbs();

                    });

                }

                initialize();

                function stopanimate() {



                    cleartimeout(interval);

                    slider.children().clearqueue();

                    slider.children().stop();

                }

                function animate() {

                    cleartimeout(interval);

                    if (settings.autoscroll)

                        interval = settimeout(changeslide, settings.delay);

                }

                function changeslide() {

                    if (direction == "forward") {

                        if (index >= noofblocks - 1) { index = -1; }

                    } else {

                        if (index <= 0) index = noofblocks - 1;

                    }

                    showthumbs();

                    interval = settimeout(changeslide, settings.delay);

                }

                function getdimensions(value) {

                    return value + 'px';

                }



                function showthumbs() {

                    var current = $('.visible');

                    var scrollspeed = speed;



                    if (direction == "forward") {

                        index++;

                        if (index < noofblocks) {

                            $('>div:eq(' + index + ')', slidercontents).removeclass('hidden').addclass('visible').css({

                                'left': getdimensions(-containerwidth)

                            }).stop().animate({ 'left': '+=' + getdimensions(containerwidth) }, scrollspeed);



                            current.stop().animate({ 'left': '+=' + getdimensions(containerwidth) }, scrollspeed,

                            function() {

                                $(this).removeclass('visible').addclass('hidden');

                                $(this).css('left', getdimensions(-containerwidth));

                            });



                        } else index = noofblocks - 1;

                    }

                    else if (direction == "backward") {

                        index--;

                        if (index >= 0) {

                            $('>div:eq(' + index + ')', slidercontents).css('left', getdimensions(containerwidth)).removeclass('hidden').addclass('visible').stop().animate({ 'left': '-=' + getdimensions(containerwidth) }, scrollspeed);

                            current.stop().animate({ 'left': '-=' + getdimensions(containerwidth) }, scrollspeed, function() {

                                $(this).removeclass('visible').addclass('hidden');

                                $(this).css('left', left);

                            });

                        } else index = 0;

                    }

                }

            });

        }

    });

})(jquery);