REBOL []

colorize: func [img col /local hsv hue][
    hsv: rgb-to-hsv col
    all [hsv/2 = 0 return img]
    img: copy img
    repeat pix length? img [poke img pix col-pixel img/:pix col]
    return img
]

col-pixel: func [col amt /local hsv hsv-new][
    hsv: rgb-to-hsv col
    hsv-new: rgb-to-hsv amt
    hsv/1: hsv-new/1
;    hsv/3: round 2 * hsv/3 + hsv-new/3 / 3
    hsv/3: round (3 * hsv/3) + (255 - hsv/2) + hsv-new/3 / 5
    hsv/2: 255 - hsv/3
    return hsv-to-rgb hsv
]

; --- TESTS ---

red: 255.0.0
green: 0.255.0
blue: 0.0.255

my-web: http://www.ross-gill.com/
do my-web/r/btn-style.r

; Test to demonstrate Colorize function
cm1: load-image my-web/images/blue/cirmhor.png
cm2: colorize cm1 red
cm3: colorize cm1 green
cm4: colorize cm1 blue

; Demonstrates range
dr1: to-image make-face/spec 'box [size: 80x20 effect: [gradient 0.0.0 255.255.255]]
dr2: colorize dr1 red
dr3: colorize dr1 green
dr4: colorize dr1 blue

; Button Example
bu1: load-stock 'btn-up
bu2: colorize bu1 red
bu3: colorize bu1 green
bu4: colorize bu1 blue

; Aqua Button Example
ab-u1: load-image my-web/r/btn-up.png
ab-u2: colorize ab-u1 red
ab-u3: colorize ab-u1 green
ab-u4: colorize ab-u1 blue
ab-d1: load-image my-web/r/btn-dn.png
ab-d2: colorize ab-d1 red
ab-d3: colorize ab-d1 green
ab-d4: colorize ab-d1 blue

view layout [
    backdrop any [load-image my-web/r/bg-metal.png 236.233.216] effect [tile]
    style bi image 120x21 effect [extend]
    style btn btn 120 with [feel/hover?: none] effect ['extend 'flip 0x1]
    image cm1 image cm2 image cm3 image cm4 return
    bi bu1 bi bu2 bi bu3 bi bu4
    image dr1 image dr2 image dr3 image dr4 return
    btn "Default" with [look/default: ab-u1 look/down: ab-d1]
    btn "Red" with [look/default: ab-u2 look/down: ab-d2]
    btn "Green" with [look/default: ab-u3 look/down: ab-d3]
    btn "Blue" with [look/default: ab-u4 look/down: ab-d4]
]

red: 153.151.140
green: 0.153.51
blue: 51.0.153

; XP Buttons
btn-u: load-image my-web/r/btn-dark-default.png
btn-d: load-image my-web/r/btn-dark-down.png
btn-h: load-image my-web/r/btn-dark-hover.png
btnr-u: colorize btn-u red
btnr-d: colorize btn-d red
btnr-h: colorize btn-h red
btng-u: colorize btn-u green
btng-d: colorize btn-d green
btng-h: colorize btn-h green
btnb-u: colorize btn-u blue
btnb-d: colorize btn-d blue
btnb-h: colorize btn-h blue

view layout [
    backdrop any [load-image my-web/r/bg-metal.png 236.233.216] effect [tile]
    style btn btn 120 "Test" with [feel/hover?: off]
    style btn-red btn with [look: reduce ['default btnr-u 'down btnr-d 'hover btnr-h]]
    style btn-green btn with [look: reduce ['default btng-u 'down btng-d 'hover btng-h]]
    style btn-blue btn with [look: reduce ['default btnb-u 'down btnb-d 'hover btnb-h]]
    btn-red btn-green btn-blue
    btn-red btn-green btn-blue
    btn-red btn-green btn-blue
]