[fatalstrike]

Пишу плагин выбора изображения для сайта, но возникли некоторые вопросы. Помогите разобраться.

Смысл таков. При создании поста на сайте пользователю предлагается выбрать 2 изображения: большое и маленькое.
Соответственно 2 кнопки: выбрать большое изображение и выбрать маленькое. Возле каждой кнопки есть изображение-превью.

Например, пользователь нажимает на кнопку "выбрать большое изображение", появляется всплывающее окно, где он выбирает изображение и нажимает кнопку "ок". Далее всплывающее окно исчезает и в превью отображается выбранное изображение.

Проблема в том, что при выборе большого изображения, заполняется и маленькое. И наоборот.

Вот накидал в песочнице простой аналог, только вместо выбора диалога с изображениями появляется простое окно с кнопкой "цвет".

http://codepen.io/fatalstrike/pen/bIfBy

Заранее спасибо за помощь

js код плагина:

(function ($) {
    $.fn.test = function (options) {
        options = $.extend({
            'color': '#777',
            'myclick': function () {
            }
        }, options);

        var $this = this;
        var color_btn = $("#button");
        var popup = $('.popup');


        $.each($this, function () {


            $(this).click(function () {
                popup.css('display', 'block');
              popup.find('p').text('Квадрат должен окрасится в цвет: ' + options.color);
            })

            color_btn.click(function() {
              popup.css('display', 'none');
                var color = options.color;
                options.myclick.call($this, color);
            });
        });

    }
})(jQuery);

$('#close').click(function() {
    $(this).parent().css('display', 'none');
});

$('#link1').test({
    color: 'red',
    myclick: function (color) {
        $('.box').css('background', color);
    }
});


$('#link2').test({
    color: 'green',
    myclick: function (color) {
        $('.box').css('background', color);
    }
});