// JavaScript Document


(function($) {

    $.fn.extend({

        jsCarousel: function(options) {

            var settings = $.extend({

                scrollspeed: 500,

                delay: 5000,

                itemstodisplay: 8,

                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);