%head
  %script{:type=>"text/javascript", :src=>'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'}
  %script{:type=>"text/javascript", :src=>'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js'}
  %script{:type=>"text/javascript", :src=>'http://dev-apps-groupdocs.dynabic.com/content/signaturewidgets/groupdocs.sign.js'}
  :javascript
    $(document).ready(setTimeout(check, 5000));
                function check() {

                    if (($("input[name=callbackUrl]").val() != "") && (document.getElementById("result") != null)) {
                        $('#resultsStatus').fadeIn("slow");
                        $.ajax({
                            type: 'POST',
                            url: '/sample39/check',
                            success: function (data) {
                                var result = null;
                                result = data
                                if (result!= null) {
                                    $("#result").css("display", "none");
                                    var guid = result;
                                    var leftvar = (screen.width-800)/2;
                                    var topvar = (screen.height-600)/2;
                                    window.open('/popup?guid=' + guid, 'Redirect window', 'width=850,height=500,left=' + leftvar + ',top=' + topvar + ',resizable=no,scrollbars=no,location=no');
                                } else {
                                    var leftvar = (screen.width-800)/2;
                                    var topvar = (screen.height-600)/2;
                                    window.open('/popup', 'Redirect window', 'width=850,height=500,left=' + leftvar + ',top=' + topvar + ',resizable=no,scrollbars=no,location=no');
                                }
                            },
                            dataType: "text"
                        });
                    }
                }
                function setLogic() {
                    if ($("#useWidget").is(':checked')) {
                         $("#btnLoad").prop('type', 'button');
                         $("#btnLoad").attr('onClick', 'load();');
                         $("#form").removeAttr("type");
                         $("#form").removeAttr("method");
                         $("#form").attr('action', '#');
                         $("#signature").css("display", "block");
                         $("#fiSignatureLabel").css("display", "block");
                         $("#callBackLabel").css("display", "none");
                         $("#callbackUrl").css("display", "none");
                         $("#emailLabel").css("display", "none");
                         $("#email").css("display", "none");
                         $("#nameLabel").css("display", "none");
                         $("#name").css("display", "none");
                         $("#lastNameLabel").css("display", "none");
                         $("#lastName").css("display", "none");
                         $("#result").css("display", "none");
                    } else {
                        $("#form").attr('action', 'sample39');
                        $("#form").attr('method', 'post');
                        $("#btnLoad").prop('type', 'multipart/form-data');
                        $("#signature").css("display", "none");
                        $("#fiSignatureLabel").css("display", "none");
                        $("#callBackLabel").css("display", "block");
                        $("#callbackUrl").css("display", "block");
                        $("#btnLoad").prop('type', 'submit');
                        $("#btnLoad").removeAttr('onClick');
                        $("#emailLabel").css("display", "block");
                        $("#email").css("display", "block");
                        $("#nameLabel").css("display", "block");
                        $("#name").css("display", "block");
                        $("#lastNameLabel").css("display", "block");
                        $("#lastName").css("display", "block");
                        $("#result").css("display", "block");
                    }
                }

                function load() {
                        $('#resultsStatus').fadeIn("slow");
                        var inputDocument, inputSignature, fileDocument, fileSignature, frDocument, frSignature;
                        if (typeof window.FileReader !== 'function') {
                            $("enteredData").append("p", "The file API isn't supported on this browser yet.");
                            return;
                        }
                        inputDocument = document.getElementById('document');
                        if (!inputDocument) {
                            $("enteredData").append("p", "Um, couldn't find the fileinput element.");
                        }
                        else if (!inputDocument.files) {
                            $("enteredData").append("p", "This browser doesn't seem to support the `files` property of file inputs.");
                        }
                        else if (!inputDocument.files[0]) {
                            $("#files_form").append("<p class='error'>Please select a file before clicking 'Load'</p>");
                        }
                        else {
                            fileDocument = inputDocument.files[0];
                            frDocument = new FileReader();
                            frDocument.onload = receivedDocument;
                            frDocument.readAsDataURL(fileDocument);
                        }


                    function receivedDocument() {

                        inputSignature = document.getElementById('signature');
                        if (!inputSignature) {
                            $("enteredData").append("Um, couldn't find the fileinput element.");
                        }
                        else if (!inputSignature.files) {
                            $("enteredData").append("p", "This browser doesn't seem to support the `files` property of file inputs.");
                        }
                        else if (!inputSignature.files[0]) {
                            $("enteredData").append("<p>Please select a file before clicking 'Load'</p>");
                        }
                        else {
                            fileSignature = inputSignature.files[0];
                            frSignature = new FileReader();
                            frSignature.onload = receivedSignature;
                            frSignature.readAsDataURL(fileSignature);
                        }
                    }

                    function receivedSignature() {
                        var span = document.createElement('span');
                        span.innerHTML = ['<img class="thumb" width="100" src="', frSignature.result, '"/>'].join('');
                        signDocument();
                    }

                    function signDocument() {
                        $("body").sign({
                            userId: $('#clientId').val(),
                            privateKey: $('#privateKey').val(),
                            signMethod: "/sample39/postdata",
                            onError: function(e, data) {
                                alert(data);
                            },
                            onSigned: function(e, data) {
                                $('#resultsStatus').fadeOut("slow");
                                var result = $.parseJSON(data);
                                console.log(result)
                                if (result.error == null) {
                                    var guid = result[0].guid;
                                    $("#clientId").val(result[0].clientId);
                                    $("#privateKey").val(result[0].privateKey);
                                    var leftvar = (screen.width-800)/2;
                                    var topvar = (screen.height-600)/2;
                                    window.open('/popup?guid=' + guid, 'Redirect window', 'width=850,height=500,left=' + leftvar + ',top=' + topvar + ',resizable=no,scrollbars=no,location=no');
                                }
                            }
                        });
                        $("body").sign("addDocument", {
                            name: fileDocument.name,
                            data: frDocument.result
                        });
                        $("body").sign("addSigner", {
                            name: 'Marketplace Team',
                            top: 0.03319,
                            left: 0.52171,
                            width: 100,
                            height: 40,
                            data: frSignature.result
                        });
                        $("body").sign("sign");
                    }
                }
%body
  %h3{:style => 'text-align:center;'}
    %a{:href => '/'} GroupDocs Ruby SDK Samples
    \- Sample39
  .samplecontent{:style => 'padding:10px;'}
    %i This sample will show how to add a Signature to a document and redirect after signing with GroupDocs widget
    %br/
    %br/
    %span.documentation
      %a{:href => '/docs/sample39.html'} Builtin documentation for this sample
    %br/
    %br/
    %p
      You entered:
    %p
      UserId = #{(defined? userId) ? userId : ''}
    %p
      PrivateKey = #{(defined? privateKey) ? privateKey : ''}
    %p
      Email = #{(defined? email) ? email : ''}
    %p
      Name = #{(defined? name) ? name : ''}
    %p
      Last Name = #{(defined? lastName) ? lastName : ''}
    %p
      %font{:color => 'red'} #{(defined? err) ? err : ''}
    %br/
    #requestForm{:style => 'padding:20px; border:1px solid black;'}
      %p Enter data for request and press "Make request" button
      %form{:action => '/sample39', :enctype => 'multipart/form-data', :method => 'post'}
        %label{:for => 'clientId'} GroupDocs ClientID
        %br/
        %input{:type=>'text', :name=>'clientId', :id=>'clientId'}
        %br/
        %label{:for => 'privateKey'} GroupDocs PrivateKey
        %br/
        %input{:type=>'text', :name=>'privateKey', :id=>'privateKey'}
        %br/
        %input{:type=>'checkbox', :name=>'useWidget', :value=>'use', :id=>'useWidget', :onclick=> 'setLogic();'}
        %br/
        %label{:for => 'email', :id=>"emailLabel"} Email
        %br/
        %input{:type=>'text', :name=>'email', :id=>'email'}
        %br/
        %label{:for => 'name', :id=>'nameLabel'} Name
        %br/
        %input{:type=>'text', :name=>'name', :id=>'name'}
        %br/
        %label{:for => 'lastName', :id=>'lastNameLabel'} Last Name
        %br/
        %input{:type=>'text', :name=>'lastName', :id=>'lastName'}
        %br/
        %br/
        %label{:for => 'document'} Document to sign
        %br/
        %input{:type=>'file', :name=>'file', :id=>'document'}
        %br/
        %label{:for => 'signature', :id=>'fiSignatureLabel', :style=>'display:none;'} Signature
        %br/
        %input{:type=>'file',:id=>'signature', :style=>'display:none;'}
        %br/
        %label{:for=>'callbackUrl', :id=>'callBackLabel'}
          Callback URL
          %span{:class => 'optional'} (Optional) <br/> (For test Callback you can use this URL: http://groupdocs-ruby-samples.herokuapp.com/sample39/signature_callback)
        %input{:type=>'text', :size=>'70', :value=>"#{(defined? callback) ? callback : ''}", :name=>'callbackUrl', :id=>'callbackUrl'}
        %br/
        %br/
        %input{:type => 'submit', :id=>'btnLoad', :value => 'Upload and sign the document'}
        %span{:id=>'resultsStatus', :style=>'color:red;display:none;'} (Please wait for ajax response)
        %br/
      %iframe{:id=>'downloadframe', :style=>'display:none'}
    %div{:style => 'padding:20px; border:1px solid black;', :id=>'result'}
      %p
        Results:
        %br/
      #{(defined? iframe) ? iframe : ''}

  = partial :_others_samples