!!! 5
%html
  %head
    %meta{:name => "apple-mobile-web-app-capable", :content => "yes"}
    %meta{:name => "apple-mobile-web-app-status-bar-style", :content => "default"}
    %meta{:name => "viewport",
          :content => "width=device-width, minimum-scale=1.0, maximum-scale=1.0"}
  
    %link{ :rel => "stylesheet", :href => "/reset.css", :media => "screen", :type => "text/css" }
    %link{ :rel => "stylesheet", :href => "/style.css", :media => "screen", :type => "text/css" }
    %link{ :rel => "stylesheet", :href => "/jquery.mobile-1.0a2.min.css" }
    %title= "fingerpoken - iphone/ipad == touchpad"
    %script{ :src => "/js/jquery.min.js",
             :type => "text/javascript" }
    %script{ :src => "/js/jquery.mobile-1.0a2.min.js",
             :type => "text/javascript" }

  %body
    / touchpad
    %div{"data-role" => "page", "data-theme" => "a", "id" => "touchpad"}
      %div.header{"data-role" => "header"}
        %h1 fingerpoken
        %a{:href => "#config", "data-role" => "button", "data-rel" => "dialog", "data-transition" => "pop"} Config
        %a{:href => "javascript:window.location.reload()", "data-role" => "button", "data-inline" => true} Reload
      %div.content{"data-role" => "content"}
        #area
          /%pre#status

      %div.footer{"data-role" => "footer"}
        %span.left
          %a{:href => "#commands", "data-role" => "button", "data-rel" => "dialog", "data-transition" => "pop"} Commands
        %span.right
          %a.command{:href => "#", "data-role" => "button", "data-action" => "click", "data-button" => "1"} Left
          %a.command{:href => "#", "data-role" => "button", "data-action" => "click", "data-button" => "3"} Right

    %div{"data-role" => "page", "data-theme" => "a", "id" => "commands"}
      %div{"data-role" => "header"}
        %h1 Commands
        %a{:href => "#touchpad", "data-role" => "button"} Touchpad
      %div{"data-role" => "content"}
        %a.command{:href => "#", "data-role" => "button", "data-action" => "keypress", "data-key" => "Right"} Next Slide
        %a.command{:href => "#", "data-role" => "button", "data-action" => "keypress", "data-key" => "Left"} Prev Slide
        %hr
        %a.command{:href => "#", "data-role" => "button", "data-action" => "keypress", "data-key" => "ctrl+plus"} Zoom In
        %a.command{:href => "#", "data-role" => "button", "data-action" => "keypress", "data-key" => "ctrl+minus"} Zoom Out
        %a.command{:href => "#", "data-role" => "button", "data-action" => "keypress", "data-key" => "ctrl+0"} Zoom Zero
        %hr
        %a.command{:href => "#", "data-role" => "button", "data-action" => "keypress", "data-key" => "alt+Return"} Full Screen
        %a.command{:href => "#", "data-role" => "button", "data-action" => "keypress", "data-key" => "End"} End
        %a.command{:href => "#", "data-role" => "button", "data-action" => "keypress", "data-key" => "Home"} Home
        %a.command{:href => "#", "data-role" => "button", "data-action" => "keypress", "data-key" => "Return"} Return

    %div{"data-role" => "page", "data-theme" => "a", "id" => "config"}
      %div{"data-role" => "header"}
        %a{:href => "#touchpad", "data-role" => "button"} Touchpad
        %h1 Configuration
      %div{"data-role" => "content"}
        Mouse movement
        
        / Mouse movement type
        %fieldset{"data-role" => "controlgroup"}
          %input{:type => :radio, :name => "mouse-config", :id => "mouse-relative", :value => "relative"}
          %label{:for => "mouse-relative"} relative
          %input{:type => :radio, :name => "mouse-config", :id => "mouse-absolute", :value => "absolute"}
          %label{:for => "mouse-absolute"} absolute
          %input{:type => :radio, :name => "mouse-config", :id => "mouse-vector", :value => "vector"}
          %label{:for => "mouse-vector"} vector

        / Mouse acceleration
        %label{:for => "mouse-acceleration"} Acceleration
        %input{:type => "range", :name => "mouse-acceleration", :id => "mouse-acceleration", :min => 1, :max => 300, :step => "any"}

    %script{ :src => "/js/fingerpoken.js" }