(function ($) {

    $.fn.imagefade = function (options) {

        var defaults = {
            controlsShow: true,
            lastShow: false,
            firstShow: false,
            prevId: 'prevBtn',
            prevText: '',
            nextId: 'nextBtn',
            nextText: '',
            slideId: 'slide',
            autoFade: true,
            autoFadeInterval: 5000,
            fadeSpeed: 1000
        };

        var options = $.extend(defaults, options);
        //will only work with one item
        this.each(function () {
            var obj = $(this);
            var s = $("li", obj).length;

            var liItem = $("li", obj);
            liItem.not(':first-child').css('display', 'none');
            liItem.css('position', 'absolute');

            var t = 0;

            if (options.controlsShow) {
                var html = "";
                html += ' <span id="' + options.prevId + '"><a href=\"javascript:void(0);\">' + options.prevText + '</a></span>';
                html += ' <span id="' + options.nextId + '"><a href=\"javascript:void(0);\">' + options.nextText + '</a></span>';
                $(obj).after(html);
            };

            $('body').prepend("<div id='divmaskin' style='position:absolute;left:0;top:0;width:100%;height:100%;display:none;z-index:0;'></div>");
            $('body').prepend("<div id='divmaskout' style='position:absolute;left:0;top:0;width:100%;height:100%;display:none;z-index:0;'></div>");
            updateBackgroud($('li:visible', obj));
            $('#divmaskin').show()



            $("a", "#" + options.nextId).click(function () {
                $(this).unbind('click');
                fadeNext($(this));
            });

            $("a", "#" + options.prevId).click(function () {
                $(this).unbind('click');
                fadePrev($(this));
            });


            var autoFade;

            function fadeNext(item) {
                clearInterval(autoFade);
                fade(function (position) { return (position + 1); }, function () {
                    item.click(function () {
                        $(this).unbind('click');
                        fadeNext($(this));
                    });
                });
            };

            function fadePrev(item) {
                clearInterval(autoFade);
                fade(function (position) { return (position - 1); }, function () {
                    item.click(function () {
                        $(this).unbind('click');
                        fadePrev($(this));
                    });
                });
            };

            if (options.autoFade) {
                autoFade = setInterval(function () { fade(function (position) { return (position + 1); }); }, options.autoFadeInterval);
            }

            function fade(action, callback) {
                var current = $('li:visible', obj);
                var position = parseInt(current.index());
                position = action(position);

                if (position >= s)
                { position = 0; }
                else if (position < 0) { (position = s - 1); }
                var next = $('li', obj).get(position);
                transitionBackgroud($(next));
                current.fadeOut(options.fadeSpeed, function () { $(next).fadeIn(options.fadeSpeed, function () { if (callback) { callback(); }; }); });
            }

            function updateBackgroud(current) {
                if (current) {
                    var background = current.data('assosiatedbackground');
                    if (background) {
                        $('#divmaskin').css('background', 'url(' + background + ') center top no-repeat');
                    };
                }
            }

            var toggle = true;
            function transitionBackgroud(current) {
                if (current) {
                    var background = current.data('assosiatedbackground');
                    if (background) {
                        if (toggle) {
                            $('#divmaskout').css('background', 'url(' + background + ') center top no-repeat');
                            $('#divmaskin').fadeOut(options.fadeSpeed);
                            $('#divmaskout').fadeIn(options.fadeSpeed);
                        }
                        else {
                            $('#divmaskin').css('background', 'url(' + background + ') center top no-repeat');
                            $('#divmaskout').fadeOut(options.fadeSpeed);
                            $('#divmaskin').fadeIn(options.fadeSpeed);
                        }
                        toggle = !toggle;
                    };
                }
            }

        });

    }

})(jQuery);