(function($) {

    $.fn.laceCarousel = function(options) {
        var carouselSettings = $.extend({}, $.fn.laceCarousel.defaults, options);
        var markup = '<div id="laceCarousel"><div class="laceCarousel-stage"><div><a class="laceCarousel-first"></a><a class="laceCarousel-prev"></a></div><div class="laceCarousel-viewport"><ul class="laceCarousel-scroller"></ul></div><div><a class="laceCarousel-next"></a><a class="laceCarousel-last"></a></div></div></div>';

        $originalMarkup = $(this).hide();
        $(carouselSettings.containerDisplay).append(markup);

        $carousel = $('#laceCarousel').hover(function() {
            $(this).css({ "z-index": "1000" });
        }, function() {
            $(this).css({ "z-index": "0" });
        });
        $carouselStage = $('.laceCarousel-stage', $carousel);
        $carouselViewport = $('.laceCarousel-viewport', $carousel);
        $carouselScroller = $('.laceCarousel-scroller', $carousel);

        $('.' + carouselSettings.thumbClassName, $originalMarkup).each(function() {
            //we expect thumb to be <img>
            $carouselScroller.append('<li><a href="' + $(this).attr('src') + '"><img class="laceCarousel-thumb" src="'
            + $(this).attr('src')
            + '" alt=""/></a></li>');
        });

        //get the thumbnails and fade them out //addClass('thumb').
        $thumbs = $('.laceCarousel-thumb', $carouselScroller).fadeTo(1000, 0.5).click(function(e) {
            e.preventDefault();
            //do click
            var index = $thumbs.index(this);
            if ($.isFunction(carouselSettings.onThumbClick))
                carouselSettings.onThumbClick.call(this, index);
            //$slide.slideTo(index);
        }).hover(function() {
            $(this).fadeTo(1000, 1);
        }, function() {
            $(this).not('.active').fadeTo(1000, 0.5);
        });

        //thumbwidth
        var thumbWidth = $thumbs.eq(1).offset().left - $thumbs.eq(0).offset().left;

        //adjust the width of the scroller which is set to 50000px in css
        $carouselScroller.width(thumbWidth * $thumbs.length);


        //buttons
        $carouselFirst = $('.laceCarousel-first', $carousel).text('').css({
            "background-image": 'url(' + carouselSettings.baseUrl + carouselSettings.firstImagePath + ')',
            "top": $carouselViewport.height() / 2 - 12,
            "left": 5
        });
        $carouselPrev = $('.laceCarousel-prev', $carousel).text('').css({
            "background-image": 'url(' + carouselSettings.baseUrl + carouselSettings.prevImagePath + ')',
            "top": $carouselViewport.height() / 2 - 12,
            "left": 35
        });
        $carouselNext = $('.laceCarousel-next', $carousel).text('').css({
            "background-image": 'url(' + carouselSettings.baseUrl + carouselSettings.nextImagePath + ')',
            "top": $carouselViewport.height() / 2 - 12,
            "right": 35
        });
        $carouselLast = $('.laceCarousel-last', $carousel).text('').css({
            "background-image": 'url(' + carouselSettings.baseUrl + carouselSettings.lastImagePath + ')',
            "top": $carouselViewport.height() / 2 - 12,
            "right": 5
        });

        $carouselFirst.click(function() {
            if ($.isFunction(carouselSettings.onButtonClick))
                carouselSettings.onButtonClick.call(this);
            $(this).fadeTo('slow', '0.3');
            $carousel.first(function() {
                $carouselFirst.fadeTo('slow', '1');
            });
        });
        $carouselPrev.click(function() {
            if ($.isFunction(carouselSettings.onButtonClick))
                carouselSettings.onButtonClick.call(this);
            $(this).fadeTo('slow', '0.3');
            $carousel.prevPage(function() {
                $carouselPrev.fadeTo('slow', '1');
            });
        });
        $carouselNext.click(function() {
            if ($.isFunction(carouselSettings.onButtonClick))
                carouselSettings.onButtonClick.call(this);
            $(this).fadeTo('slow', '0.3');
            $carousel.nextPage(function() {
                $carouselNext.fadeTo('slow', '1');
            });
        });
        $carouselLast.click(function() {
            if ($.isFunction(carouselSettings.onButtonClick))
                carouselSettings.onButtonClick.call(this);
            $(this).fadeTo('slow', '0.3');
            $carousel.last(function() {
                $carouselLast.fadeTo('slow', '1');
            });
        });

        //carousel methods
        $.fn.extend($carousel, {
            active: function(index) {
                var sLeft = $carouselScroller.offset().left;
                var tLeft = $thumbs.eq(index).offset().left;
                var newLeft = sLeft - tLeft + ($carouselViewport.width() / 2) - ($thumbs.eq(index).width() / 2);

                $thumbs.removeClass('active').fadeTo(1000, 0.5);
                scrollTo(newLeft, function() {
                    $thumbs.eq(index).addClass('active').fadeTo(1000, 1);
                });
            },
            first: function(callback) {
                //only move when there are more items than what is being viewed
                if ($carouselScroller.width() > $carouselViewport.width())
                    scrollTo(0, carouselSettings.easingScroll, callback);
            },
            last: function(callback) {
                //only move when there are more items than what is being viewed
                if ($carouselScroller.width() > $carouselViewport.width())
                    scrollTo($carouselScroller.offset().left - $thumbs.eq($thumbs.length - 1).offset().left, carouselSettings.easingScroll, callback);
            },
            prevPage: function(callback) {
                //only move when there are more items than what is being viewed
                if ($carouselScroller.width() > $carouselViewport.width())
                    scrollTo(($carouselScroller.offset().left - $carouselViewport.offset().left) + $carouselViewport.width(), 'swing', callback);
            },
            nextPage: function(callback) {
                //only move when there are more items than what is being viewed
                if ($carouselScroller.width() > $carouselViewport.width())
                    scrollTo($carouselScroller.offset().left - $carouselViewport.offset().left - $carouselViewport.width(), 'swing', callback);
            }
        });

        function scrollTo(left, easing, callback) {
            if (left > 0) {
                left = 0;
            }
            else {
                var delta = $carouselScroller.width() + left - $carouselViewport.width();
                if (delta < 0)
                    left = left - delta;
            }
            $carouselScroller.animate({ "left": left }, 1500, easing, callback);
        }

        return $carousel;
    };

    $.fn.laceCarousel.defaults = {
        baseUrl: '',
        containerDisplay: '#CarouselDisplay',
        thumbClassName: 'thumb',
        onThumbClick: null,
        onButtonClick: null,
        easingScroll: 'easeOutBounce',
        firstImagePath: '/Scripts/images/firstpage.png',
        prevImagePath: '/Scripts/images/prevpage.png',
        nextImagePath: '/Scripts/images/nextpage.png',
        lastImagePath: '/Scripts/images/lastpage.png'
    };
})(jQuery);