<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:ev="http://www.w3.org/2001/xml-events">
  <head>
    <title>Search Flickr using Firefox Form</title>
    <!-- Inspired by http://skimstone.x-port.net/index.php?q=node/89 -->
    <!-- and http://www.mozilla.org/projects/xforms/samples/flickr-search.xhtml -->
    <xf:model>
      <!-- The data sent to flickr -->
      <xf:instance xmlns="">
        <instanceData>
          <method>flickr.photos.search</method>
          <api_key>68149024a667e0be3c63708f002ffe1e</api_key>
          <tags />
          <per_page>12</per_page>
        </instanceData>
      </xf:instance>

      <!-- The data returned by flickr -->
      <xf:instance id="inst-rs" xmlns="">
         <dummy />
      </xf:instance>
      <xf:submission id="sub-flickr"
		     method="get" action="http://www.flickr.com/services/rest/"
		     separator="&amp;"
		     replace="instance" instance="inst-rs">
         <xf:toggle case="case-busy" ev:event="xforms-submit" />
         <xf:toggle case="case-submit-error" ev:event="xforms-submit-error" />
         <xf:toggle case="case-done" ev:event="xforms-submit-done" />
      </xf:submission>

      <!-- Used to hold image size -->
      <xf:instance id="inst-control" xmlns="">
         <instanceData>
           <size>s</size>
         </instanceData>
      </xf:instance>
    </xf:model>

    <!--Mozilla XForms Custom Control-->
    <bindings id="xformsBindings"
	      xmlns="http://www.mozilla.org/xbl"
	      xmlns:html="http://www.w3.org/1999/xhtml">
      <binding id="output-image"
	       extends="chrome://xforms/content/xforms.xml#xformswidget-base">
         <content>
           <html:div>
             <html:img anonid="content" style="float: left; margin-right: 5px;"/>
           </html:div>
         </content>
         <implementation implements="nsIXFormsUIWidget">
            <method name="refresh">
                <body>
                  var img = document.getAnonymousElementByAttribute(this, "anonid", "content");
                  img.setAttribute("src", this.stringValue);
                  return true;
                </body>
           </method>
         </implementation>
      </binding>
    </bindings>

    <!-- Bind the custom control to output with class="image" -->
    <style type="text/css">
      @namespace xf url(http://www.w3.org/2002/xforms);

      xf|output.image {
        -moz-binding: url('#output-image');
      }
    </style>
  </head>

  <!-- BODY -->
  <body>
   <xf:group id="main-body">
     <xf:input ref="tags">

       <xf:label>Search tag:</xf:label>
     </xf:input>
     <xf:submit submission="sub-flickr">
       <xf:label>Find</xf:label>
     </xf:submit>
     <xf:select1 ref="instance('inst-control')/size" incremental="true">
       <xf:label>Size: </xf:label>
       <xf:item>
          <xf:label>Small</xf:label>
          <xf:value>s</xf:value>
       </xf:item>
       <xf:item>
          <xf:label>Medium</xf:label>
          <xf:value>m</xf:value>
       </xf:item>
     </xf:select1>
     <xf:switch>
         <xf:case id="case-start"></xf:case>
         <xf:case id="case-busy">
            <p>Searching...</p>
         </xf:case>
         <xf:case id="case-submit-error">
            <p>Submission error! Did you remember to allow XForms to submit data to other domains?</p>
         </xf:case>
         <xf:case id="case-done">Done</xf:case>
      </xf:switch>
    <xf:group ref="instance('inst-rs')">
      <xf:output ref="err/@msg"/>
      <xf:repeat nodeset="photos/photo">
         <xf:output
         value="concat(
            'http://static.flickr.com/',
            @server, '/',
            @id, '_',
            @secret, '_',
             instance('inst-control')/size,
             '.jpg'
         )"
         class="image"
        />
     </xf:repeat>
     <div style="clear: both;"></div>
    </xf:group>
   </xf:group>
 </body>
</html>