var COLOURPICKER = {
    create: function() {
        $('select.colours').each(function() {
            var parent = $(this).parent();
            var select = $(this);

            var input = $('<input />').attr({
                'type': 'hidden',
                'id': select.attr('id'),
                'name': select.attr('name')
            }).insertAfter(select);

            $(this).children('option').each(function() {
                $('<a></a>').css( {
                    'position': 'relative',
                    'display': 'block',
                    'float': 'left',
                    'width': '16px',
                    'height': '16px',
                    'border': '1px solid black',
                    'margin': '0 2px 2px 0',
                    'background': '#' + $(this).attr('value'),
                    'cursor': 'pointer'
                })
                .attr({
                    'class': 'colour',
                    'rel': $(this).attr('value')
                })
                .data('input', input)
                .click(function() {
                    parent.find('a.selected').animate({
                        'top': '0px',
                        'width': '16px',
                        'height': '16px'
                    }, 200, function() {
                        $(this).removeClass('selected');
                    });

                    $(this).animate({
                        'top': '-4px',
                        'width': '24px',
                        'height': '24px'
                    }, 200, function() {
                        $(this).addClass('selected');
                    });

                    var colour = $(this).attr('rel');
                    var field = $(this).data('input');
                    field.val(colour);
                })
                .insertAfter(select);
            });
            select.remove();
            parent.find('a.colour:first').click();
        });
    }
};