playing with erlang, nitrogen, and raphael

myraphaelpage.erl

%% -*- mode: nitrogen -*-
-module (myraphaelpage).
-compile(export_all).
-include_lib("nitrogen_core/include/wf.hrl").
-include_lib("nitrogen_core/include/google_chart.hrl").
-include("records.hrl").

main() -> #template { file="./site/templates/raphael.html" }.

title() -> "Todd's <b>Raphael</b> Page".

body() -> 

  Panel = #panel { style="margin: 50px 100px;", body=[
      #span { text="Raphael Test" },
      #button { id=mybutton, text="reflect!"},
      #panel {id=holder, body=[
          #image { id=photo, image="test-poster.png", alt="Test" }
        ]}
    ]},
  wf:wire(#script { script="
      console.log('wiring reflectImage');
      var reflectImage = function(targetContainer, targetImage) {
        var container = obj(targetContainer);
        var img = obj(targetImage);
        console.log('targetImage:' + img);
        img.style.display = 'none';
        var r = Raphael(container, 600, 540);
        
        r.image(img.src, 140, 140, 320, 240);
        r.image(img.src, 140, 380, 320, 240).scale(1, -1).attr({opacity: .5});
        r.rect(0, 380, 600, 160).attr({gradient: '90-#000-#000', opacity: .5});
      };
      reflectImage('holder', 'photo');" }),
  wf:wire(#event {
      type=click, trigger=mybutton, target=holder, actions=#script { script="
        console.log('calling reflectImage');
        reflectImage('holder', 'photo');"}}),
  Panel.