<a data-toggle="modal" href="#buyModal" id="buyBtnModal" class="btn success large"><perch:content id="buy-button-text" type="text" label="Button text" required="true" /></a>
<br/><br/>
<a data-toggle="modal" href="#callbackModal" id="callbackBtnModal" data-content="get service..." data-original-title="<perch:content id="callback-button-text" type="text" label="Callback Button text" required="true" />"  class="btn info large"><perch:content id="callback-button-text" type="text" label="Button text" required="true" /></a>

<perch:form id="buy-contact" method="post" app="perch_forms" class="horizontal-form">
    <div id="buyModal" class="modal hide fade">
        <div class="modal-header">
            <a href="#" class="close" data-dismiss="modal">&times;</a>
            <h3><perch:content id="modal-heading" type="text" label="Dialog title text" required="true" /></h3>
        </div>
        <div class="modal-body">
            <div id="buyform-step1">
                        <p><perch:content id="form-description" type="text" label="Form description on top" /></p>

                <fieldset class="control-group">
                    <label class="control-label" for="">Please tell us how we may help you</label>
                        <div class="controls">
                                <perch:label for="requested-services1">
                            <perch:input type="checkbox" id="requested-services1" value="Individual Product Presentation / Live-Demo" />
                            Individual Product Presentation / Live-Demo
                        </perch:label>
                        <perch:label for="requested-services2">
                            <perch:input type="checkbox" id="requested-services2" value="Z1 Software 30-Days-Trial" />
                            Z1 Software 30-Days-Trial
                        </perch:label>
                        <perch:label for="requested-services3">
                            <perch:input type="checkbox" id="requested-services3" value="Price Quote - depending on your requirements" />
                            Price Quote - depending on your requirements
                        </perch:label>
                        </div>
                    </fieldset>
                <p class="help-block">One of your staff members will contact you soon after your successful registration with zertificon.</p>
            </div>
            <div id="buyform-step2" class="hide">
                <legend>Online Inquiry Form - Z1 Demos, Trials and Price Info</legend>
                <fieldset class="control-group">
                        <label class="control-label" for="company-name">Company name</label>
                        <div class="controls">
                        <perch:input type="text" id="company-name" required="true" /> *
                        </div>
                </fieldset>
                <fieldset class="control-group">
                        <label class="control-label" for="company-name">Company Website URL</label>
                        <div class="controls">
                        <perch:input type="url" id="company-name" />
                        </div>
                </fieldset>
                <fieldset class="control-group">
                        <label class="control-label" for="name">Name</label>
                        <div class="controls">
                        <perch:input type="text" id="name" required="true" /> *
                        </div>
                </fieldset>
                <fieldset class="control-group">
                        <label class="control-label" for="e-mail">E-Mail address</label>
                        <div class="controls">
                        <perch:input type="email" id="e-mail" required="true" /> *
                    </div>
                    </fieldset>
                <fieldset class="control-group">
                        <label class="control-label" for="telephone">Phone no.</label>
                        <div class="controls">
                        <perch:input type="text" id="telephone" required="true" /> *
                        </div>
                    </fieldset>
            </div>
            <div id="buyform-step3" class="hide">
                <legend>Further Information (voluntary)</legend>
                <fieldset class="control-group">
                        <label class="control-label" for="attention">How did you find out about Zertificon?</label>
                        <div class="controls">
                        <perch:input type="select" id="attention" required="false" options="—, Search Engine|search, Attended trade show/event|event, Zertificon website|website, Press Release|press, Recommendation, Zertificon partner|partner" />
                        </div>
                </fieldset>
                <fieldset class="control-group">
                        <label class="control-label" for="organization-size">What's the size of your company?</label>
                        <div class="controls">
                        <perch:input type="select" id="organization-size" required="false" options="—, Big Corporation › 10.000 employees|big corporation, Mayor Enterprise › 1.000 employees|mayor enterprise, Medium sized company 101 - 1.000 employees|medium company, Small-medium sized enterprise 11 - 100 employees|small-medium, Small office / home office 1 - 10 employees|small company, Public institution|public institution, School/University|school university, Research/Development|research, Private, Other" />
                        </div>
                </fieldset>
            </div>
        </div>
        <div class="modal-footer">
            <div class="span2"><h3>Step <span id="buy-step-counter">3</span>/3</h3></div>


            <div class="span2">
                <a class="btn info hide" id="buy-back-button">Back</a>
            </div>
            <div class="span2 pull-right">
                <a class="btn primary" id="buy-next-button" >Next</a>
            </div>
            <div class="span2 pull-right">
                <input type="submit" value="Send Inquiry" class="btn success" id="buy-submit-button">
            </div>
        </div>
    </div>
</perch:form>

<perch:form id="callback" method="post" app="perch_forms" class="horizontal-form">
    <div id="callbackModal" class="modal hide fade" style="display: block; width: 586px;border-radius: 30px;">
        <a href="#" class="fancyclose" data-dismiss="modal" style="position: absolute;top: 10px;right: 13px;"></a>

        <div class="modal-body" style="">

            <div style="padding:50px">
                <label for="" style="font-family: Georgia,Times New Roman,Times,serif;font-size: 23px;color: #555;">Please write down your phone number:</label>

                <div class="horizontal-form" style="margin-top:30px;">
                    <perch:input type="text" id="telephone" style="background: none;border: 0;font-size: 40px;height: auto;font-family: Georgia,Times New Roman,Times,serif;width: 300px;margin: 20px 0;" placeholder="011-44-7981-897555" required="true" />
                    <span style="font-family: Georgia,Times New Roman,Times,serif;font-size: 23px;">*</span>
                    <input type="submit" value="CALL ME BACK" class="btn success large"/>
                </div>
            </div>
        </div>
    </div>
</perch:form>

<script src="/media/js/bootstrap-modal.js"></script>
<script src="/media/js/bootstrap-twipsy.js"></script>
<script src="/media/js/bootstrap-popover.js"></script>

<script>
$('#buyModal').modal('hide');
$('#callbackModal').modal('hide');

var cur_step;
setBuyStep(1);

$("#buy-submit-button").hide();
$("#buy-back-button").hide();

$("#buy-next-button").click(function() {
    $("#buyform-step"+cur_step).hide();
    cur_step++
    setBuyStep(cur_step);
    $("#buyform-step"+cur_step).show();
    $("#buy-back-button").show();
    if (cur_step==3)
    {
        $("#buy-next-button").hide();
        $("#buy-submit-button").show();
    }
});

function setBuyStep(step) {
    cur_step = step;
    $("#buy-step-counter").html(step);
}

$("#buy-back-button").click(function() {
    $("#buyform-step"+cur_step).hide();

    if(cur_step!=1)
    {
        cur_step--
        setBuyStep(cur_step);
        $("#buyform-step"+cur_step).show();
    }

    if (cur_step<3)
    {
        $("#buy-submit-button").hide();
        $("#buy-back-button").show();
        $("#buy-next-button").show();
    }

    if (cur_step==1)
    {
        $("#buy-back-button").hide();
    }
});

$("#callbackBtnModal").popover();

/*$('#callbackModal').modal('hide');*/
</script>