(function ($) {
    $.fn.heroescarousel = function (options) {

        var opts = $.extend({}, $.fn.heroescarousel.defaultSettings, options);
        var me = $(this);

        $(this).data('state', { buttonUp: opts.buttonUp, buttonDown: opts.buttonDown, direction: opts.direction, currentPosition: 0, counter: 0, items: opts.scrollBy, target: me, growth: opts.growthSize });
        if (opts.direction == 'vertical') {

        }
        var dataReference = me.data('state');
        dataReference.counter = 0 - me.children('li').length;
        renderButtons(dataReference);
        $(opts.buttonUp).click(function (e) {
            e.preventDefault();
            moveImages(dataReference, dataReference.items);
        });

        $(opts.buttonDown).click(function (e) {
            e.preventDefault();
            moveImages(dataReference, -dataReference.items);
        });
    };

    function renderButtons(data) {

        //alert("CurrentPosition: " + currentPosition);
        if ((data.currentPosition - data.items) <= data.counter) {
            $(data.buttonDown).fadeOut('fast');
        }
        else {
            $(data.buttonDown).fadeIn('fast');
        }

        if (data.currentPosition == 0) {
            $(data.buttonUp).fadeOut('fast');
        }
        else {
            $(data.buttonUp).fadeIn('fast');
        }

    }

    function moveImages(data, count) {
        var restWaarde = data.counter % count;
        var naarPositie = data.currentPosition + count
        if ((data.currentPosition + count) > 0 && count > 0) {
            count = restWaarde * -1;
        }

        callback = function () {
            renderButtons(data);
        }

        if (((data.counter) - restWaarde) == (data.currentPosition + count)) {
            count = restWaarde;
        }

        if ((naarPositie + count) >= data.counter && (data.currentPosition + count) <= 0) {
            if (data.direction == 'vertical') {
                data.target.animate({ marginTop: (data.currentPosition + count) * data.growth }, 'slow', callback);
            }
            else {
                data.target.animate({ marginLeft: (data.currentPosition + count) * data.growth }, 'slow', callback);
            }

            data.currentPosition += count;
        }
    }

    $.fn.heroescarousel.defaultSettings = { buttonUp: "#Up", buttonDown: "#Down", direction: 'horizontal', scrollBy: 3, growthSize: 90 };
})(jQuery);