(function($) {
    $.fn.slider = function() {
        return $(this).each(function() {
            var ul = this;
            var wintop = $(ul).parent().css('top');
            var step = 0;
            var v = $(ul).find('li img')[0];
            var navi = $('<div class="navigation">');
            step = 563;
            $(ul).find('li img').each(function(k, v) {
                var cls = '';
                if(k == 0) cls = ' class="active"';
                if($(ul).find('li img').length > 1) {
                    navi.append($(' <a href="#"'+cls+'> ').data('img', v).click(function() {
                        $(ul).stop(true, false).animate({left: k * step * -1}, 500);
                        $(ul).css('left', k * step * -1);
                        var self2 = this;
                        $(self2).parent().find('a').removeClass('active');
                        $(self2).addClass('active');
                        $(ul).parent().parent().find('.title').html($($($(this).data('img'))[0]).attr('title'));
                        return false;
                    }).html(k+1))
                }
            });
            var slider = $('<div class="slidercontainer">')
            $(ul).wrap(slider);
            $(ul).after(navi);
            $(ul).after('<span class="title"></span>');
            $(ul).parent().parent().find('.title').html($($(ul).find('li img')[0]).attr('title'));
            width = parseInt($(v).width());
            var viewport = $('<div class="viewport">')
            $(ul).wrap(viewport);
        })
    }
})(jQuery);