$(window).load(function(){
    $('.gallery-wrapper').each(function(){
        var wrapper = $(this),
            gallery = wrapper.find('.gallery'),
            image_list = wrapper.find('.image-list'),
            images = gallery.find('.gallery-image'),
            nav_left = wrapper.find('.gallery-nav-left'),
            nav_right = wrapper.find('.gallery-nav-right'),
            gallery_width = 0, avarage_width = 0, block_width = 0, slide_width;

        images.each(function(){
            gallery_width = gallery_width + $(this).width() + parseFloat($(this).css('marginRight')) + 2;
        });

//        gallery_width = gallery_width - parseFloat(images.css('marginRight')) - 2;
        block_width = gallery_width - images.last().width() - parseFloat(images.css('marginRight')) - (2*images.length);
        avarage_width = gallery_width / images.length;
        if (gallery_width > wrapper.width() - (nav_left.width() + nav_right.width())) {
            nav_left.show();
            nav_right.show();
            gallery.css('margin', '0 20px').find('.image-list').width(gallery_width);
        } else {
            return;
        }

        nav_left.hover(function(){
            if (parseFloat(image_list.css('marginLeft')) < 0) $(this).css('opacity', 1);
        }, function(){
            $(this).css('opacity', .3);
        }).click(function(){
            var left_margin = (parseFloat(image_list.css('marginLeft')));
            if (left_margin == 0) slide_width = 0;
            else if ((left_margin + avarage_width) > 0) {
                slide_width = -left_margin;
            } else slide_width = avarage_width;
            image_list.animate({marginLeft: '+='+slide_width+'px'}, 1000);
        });

        nav_right.hover(function(){            
            if (parseFloat(image_list.css('marginLeft')) < block_width) $(this).css('opacity', 1);
        }, function(){
            $(this).css('opacity', .3);
        }).click(function(){
            var left_margin = (parseFloat(image_list.css('marginLeft')));
            if (left_margin == block_width) slide_width = 0;
            else if ((left_margin - avarage_width) < -block_width) {
                slide_width = block_width + left_margin;
            } else slide_width = avarage_width;
            image_list.animate({marginLeft: '-='+slide_width+'px'}, 1000);
        });
    });
});