%script{ :src => 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js', :type => 'text/javascript', :charset => 'utf-8' }
%h3{:style => 'text-align:center;'}
  %a{:href => '/'} GroupDocs Ruby SDK Samples
  \- Sample11
.samplecontent{:style => 'padding:10px;'}
  %i This sample will show how programmatically create and post an annotation into document. How to delete the annotation using Ruby SDK
  %br/
  %br/
  %p
    You entered:
  %p
    UserId = #{(defined? userId) ? userId : ''}
  %p
    PrivateKey = #{(defined? privateKey) ? privateKey : ''}
  %p
    FileId = #{(defined? fileId) ? fileId : ''}
  %p
    Annotation ID = #{(defined? annotationId) ? annotationId : ''}
  %p
    Annotation Type = #{(defined? annotationType) ? annotationType : ''}
  %p
    Annotation Text = #{(defined? annotationText) ? annotationText : ''}
  %p
    %font{:color => 'red'} #{(defined? err) ? err : ''}
  %br/

  #requestForm{:style => 'padding:20px; border:1px solid black;'}
    %form{:action => '/sample11', :method => 'post'}
      %input{:type => 'hidden', :name => 'annotationId', :value => (defined? annotationId) ? annotationId : ''}
      %p Enter data for request and press "Make request" button

      %label{:for => 'client_id'} GroupDocs ClientID
      %br/
      %input{:type=>'text', :name=>'client_id', :value => (defined? userId) ? userId : ''}
      %br/
      %label{:for => 'private_key'} GroupDocs PrivateKey
      %br/
      %input{:type=>'text', :name=>'private_key', :value => (defined? privateKey) ? privateKey : ''}
      %br/
      %label{:for => 'file_id'} GroupDocs FileID
      %br/
      %input{:type=>'text', :name=>'fileId', :value => (defined? fileId) ? fileId : ''}
      %br/
      Annotation Type
      %br/
      %select{:name => 'annotation_type', :id => 'annotation_type'}
        %option{:value => 'text'}Text
        %option{:value => 'area'}Area
        %option{:value => 'point', :selected => 'selected'}Point
      %br/
      %br/

      %fieldset
        %legend Parameters (all are required)
        %div
          %span Box X
          %input{:type=>'text', :name=>'box_x', :placeholder => 'double'}
        %div
          %span Box Y
          %input{:type=>'text', :name=>'box_y', :placeholder => 'double'}

        %div{:style => 'display:none', :id => 'box-params'}
          %div
            %span Box Width
            %input{:type=>'text', :name=>'box_width', :placeholder => 'double'}
          %div
            %span Box Height
            %input{:type=>'text', :name=>'box_height', :placeholder => 'double'}

        %div{:style => 'display:none', :id => 'annotation-position'}
          %div
            %span Annotation Position X
            %input{:type=>'text', :name=>'annotationPosition_x', :placeholder => 'double'}
          %div
            %span Annotation Position Y
            %input{:type=>'text', :name=>'annotationPosition_y', :placeholder => 'double'}

        %div
          %span Text
          %input{:type=>'text', :name=>'text', :placeholder => 'text'}


      %input{:type => 'submit', :value => 'Make request'}/

= partial :_others_samples

:javascript
  $(function() {
      $('select[name="annotation_type"]').change(function() {
          var obj = $(this);

          if (obj.val() == "text") {
              $('#text-params, #annotation-position, #box-params').show();
          }
          else if (obj.val() == "area") {
              $('#box-params').show();
              $('#annotation-position').hide();
          }
          else if (obj.val() == "point") {
              $('#annotation-position, #box-params').hide();
          }
      });
  });