%div.hero-unit
  %h1= @title
  %p= @plugin.meta[:description]
  %div
    %p#fields
      - @plugin.fields.values.sort{|a,b| a[:index] <=> b[:index] }.each do |field|
        %div
          %label.text
            #{field[:name]}
            %input{:type => :text, :size => 40, :value => field[:default], :class => "field", :name => field[:name]}
      %div
        %button.btn.btn-primary.btn-large#btn_submit Run &raquo;
    - if @plugin.get :callback
      %p
        %h2 return value
        %input#return_value{:type => :text, :readonly => true}
%h2 code
%div#code
  %pre

- content_for :foot_script do
  :javascript
    var post_data = function(){
      _post_data = {};
      var fields = $('.field');
      for(var i = 0; i < fields.length; i++){
        var field = fields[i];
        _post_data[field.name] = field.value;
      }
      return _post_data;
    };
    var show_sample_code = function(){
      var code = [];
      code.push('<scr'+'ipt src="#{bowl_js}"></scr'+'ipt>');
      code.push('<script type="text/javascript">');
      if(#{@plugin.get :callback}){
        code.push('  var callback = function(data){');
        code.push('    alert(data);');
        code.push('  };');
        code.push('  bowl.plugin("#{@plugin.name}",'+JSON.stringify(post_data())+', callback);');
      }
      else{
        code.push('  bowl.plugin("#{@plugin.name}",'+JSON.stringify(post_data())+');');
      }
      code.push('</scr'+'ipt>');
      code = code.join("\n");
      $("#code pre").text(code);
    };
    $(function(){
      var callback = null;
      if(#{@plugin.get :callback}){
        callback = function(data){
          console.log("return : "+data);
          $("input#return_value").val(data);
        };
      }
      $("#btn_submit").click(function(){
        bowl.plugin("#{@plugin.name}", post_data(), callback);
      });
      show_sample_code();
      $('.field').keyup(show_sample_code);
    });