(function($) {
    $.fn.extend({
        slider: function(options) {
            var settings = $.extend({
                speed: 500

            },
            options);
            return this.each(function() {
                var slidercontents = $(this).addclass('image-slider-contents');
                var slider = $('<div/>').addclass('image-slider').attr('id', slidercontents.attr('id'));
                var backbutton = $('<div/>').addclass('image-slider-back');
                var forwardbutton = $('<div/>').addclass('image-slider-forward');
                slidercontents.removeattr('id');
                slidercontents.before(slider);
                slider.append(backbutton);
                slider.append(slidercontents);
                slider.append(forwardbutton);
                var total = $('> div', slidercontents).length;
                var left = 0;
                var w;
                var width;
                var maxscroll;
                slider.append($('<div/>').css('display', 'none').addclass('preview').append($('<div/>').addclass('img-large')
                .append($('<div/>').html('&nbsp').click(function(e) {
                    e.stoppropagation();
                    e.stopimmediatepropagation();
                    //display previous image
                    var img = $(this).parent().find('img');
                    var index = parseint(img.attr('class'));
                    img.removeattr('class');
                    if (index > 1) {
                        index--;
                        var src = $('.' + index + ' div img').attr('src');
                        var txt = $('.' + index + ' div a').html();
                       /* $('.preview').find('.label').html(txt);
                        $('.preview').find('img').addclass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({
                            opacity: 1
                        },
                        1000);*/

                    }
                    else
                    $('.preview').find('img').addclass('' + (index) + '');

                }).addclass('left').css('opacity', '0.5').hover(function() {
                    $(this).css('opacity', '1')
                },
                function() {
                    $(this).css('opacity', '0.5')
                }))
                .append($('<div/>').html('&nbsp').click(function(e) {
                    e.stoppropagation();
                    e.stopimmediatepropagation();
                    //display next image
                    var img = $(this).parent().find('img');
                    var index = parseint(img.attr('class'));
                    img.removeattr('class');
                    if (index < total) {
                        index++;
                        var src = $('.' + index + ' div img').attr('src');
                        var txt = $('.' + index + ' div a').html();
                        $('.preview').find('.label').html(txt);
                        $('.preview').find('img').addclass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({
                            opacity: 1
                        },
                        1000);

                    }
                    else
                    $('.preview').find('img').addclass('' + (index) + '')

                }).addclass('right').css('opacity', '0.5').hover(function() {
                    $(this).css('opacity', '1')
                },
                function() {
                    $(this).css('opacity', '0.5')
                }))
                .append($('<img/>'))).append($('<div/>').addclass('label').css('opacity', '0.8'))
                .append($('<div/>').addclass('close').click(function(e) {
                    $(this).parent().fadeout("slow");

                })));
                $(document).click(function(e) {
                    if ($('.preview').css('display') == 'block')
                    $('.preview').fadeout("slow");

                });
                function initialize() {
                    var tempelements = $('> div', slidercontents);
                    var allelements = new array();
                    tempelements.each(function(index, el) {
                        allelements.push($('<div/>').addclass('' + (index + 1) + '').addclass('outer').append(el));

                    });

                    allelements = $(allelements);
                    $('> div', slidercontents).remove();
                    var wrapper = $('<div/>').addclass('contents-wrapper');
                    allelements.each(function(index, el) {

                        wrapper.append($(el));

                    });
                    slidercontents.append(wrapper);
                    var w = $('.outer:eq(0)', slidercontents).outerwidth() + parsefloat($('.outer:eq(0)', slidercontents).css('margin-left')) + parsefloat($('.outer:eq(0)', slidercontents).css('margin-right'));
                    var width = (total + 1) * w;
                    var maxscroll = width - $('.image-slider-contents').outerwidth();
                    wrapper.css({
                        width: width
                    });
                    $('> div > div', slidercontents).css('display', '');
                    $('.outer', slidercontents).each(function(index) {
                        $(this).prepend($('<img/>').attr('src', 'images/zoom.png').addclass('zoom')
                        .css({
                            cursor: 'pointer',
                            'position': 'absolute',
                            'float': 'right',
                            right:-10,
                            top: -12,
                            width: 34,
                            height: 32
                        }));

                    });
                    $('.outer a').click(function(e) {
                        e.stoppropagation();
                        e.stopimmediatepropagation();


                    });
                    $('.outer').hover(function() {
                        $(this).addclass('active');
                    },
                    function() {
                        $(this).removeclass('active');
                    }).click(
                    function(e) {
                        e.stoppropagation();
                        e.stopimmediatepropagation();
                        var cls = $(this).attr('class').split(' ')[0];
                        var p = $(this).find('div');
                        var img = p.find('img').attr('src');
                        var preview = $('.preview');
                        var l = $('.image-slider').width() / 2 - preview.outerwidth() / 2;
                        var t = (p.offset().top - preview.height());
                        t -= t / 2;
                        preview.css({
                            left:302,
                            top: 0
                        });
                        var text = p.find('a').html();
                        preview.find('img').attr('src', img).addclass(cls);
                        preview.find('.label').html(text);
                        preview.fadein("slow");


                    });

                    forwardbutton.click(function() {
                        left -= w;
                        if (left + maxscroll >= 0) {
                            $('.contents-wrapper').stop(false, true).animate({
                                left: '-=' + w
                            },
                            settings.speed);

                        }
                        else
                        left += w;

                    });
                    backbutton.click(function() {
                        if (left < 0) {
                            left += w;
                            $('.contents-wrapper').stop(false, true).animate({
                                left: '+=' + w
                            },
                            settings.speed);

                        }

                    });

                }
                initialize();

                function getdimensions(value) {
                    return value + 'px';

                }


            });

        }

    });

})(jquery);