new.html.erb

       <script>
            document.observe('dom:loaded', function() {
                WebcallPlugin.initialize({
                    actionButton   : $$('#webcall-wrapper a.form-submit')[0],
                    frameContainer : $$('#webcall-wrapper ul')[0],
                    frameWidth     : $$('#webcall-wrapper ul li')[0].getWidth(),
                    haveMoney      : <%=@current_user.webcall_allowed?%>,
                    captions       : {
                        phone : 'phone number',
                        sip   : 'SIP Address',
                        skype : 'skype name'
                    }
                });
            });
        </script>

        <div id="webcall-wrapper">
          <%remote_form_for :webcall, @webcall, :url => webcalls_path, :html => {:id => 'webcall_form'}  do |f|%>
                <h2>Web call back</h2>
                <p>To make a call, please enter both destinations and press "Call"</p>

                <div id="webcall-form-body-wrapper">
                    <div id="webcall-form-body">
                        <ul>
                            <li id="webcall-main">
                                <div class="form-row" id="phone-1">
                                    <h3>Your <span>phone number</span></h3>
                                    <div class="webcall-selectbox">
                                        <span>Type</span>
                                        <select name="webcall[from_transport]" id="webcall-selectbox-1">
                                            <option value="4" class="webcall-phone-icon">Phone</option>
                                            <option value="1" class="webcall-sip-icon">SIP</option>
                                            <option value="2" class="webcall-skype-icon">Skype</option>
                                        </select>
                                    </div>
                                    <div class="webcall-input" id="phone-2">
                                        <span>Destination</span>
                                        <i>+</i><input type="text" name="webcall[from]" value="" id="webcall-from" />
                                        <p id="from-price">
                                            &nbsp;
                                        </p>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <h3>Enter <span>phone number</span> to call</h3>
                                    <div class="webcall-selectbox">
                                        <span>Type</span>
                                        <select name="webcall[to_transport]" id="webcall-selectbox-2">
                                            <option value="4" class="webcall-phone-icon">Phone</option>
                                            <option value="1" class="webcall-sip-icon">SIP</option>
                                            <option value="2" class="webcall-skype-icon">Skype</option>
                                        </select>
                                    </div>
                                    <div class="webcall-input">
                                         <span>Destination</span>
                                         <i>+</i><input type="text" name="webcall[to]" value="" id="webcall-to" />
                                        <p id="to-price">
                                            &nbsp;
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li id="webcall-calling">
                                <h3>Call in progress</h3>
                                <p>
                                    Initiating call from <span class="webcall-skype-icon call-from-icon"></span> to <span class="webcall-phone-icon call-to-icon"></span> <span class="phonenum">&nbsp;</span>
                                </p>
                                <div>
                                    Call rate <span class="call-rate" id="full_rate"><!--$&nbsp;0.0345--></span> per minute
                                </div>
                                <p>
                                    <span class="to-left">Calling <span class="webcall-skype-icon call-from-icon"></span> <span class="phonenum-from">&nbsp;</span></span><span class="to-right success-calling call-status-from">&nbsp;</span>
                                </p>
                                <p>
                                    <span class="to-left">Calling <span class="webcall-phone-icon call-to-icon"></span> <span class="phonenum-to">&nbsp;</span></span><span class="to-right fail-calling call-status-to">&nbsp;</span>
                                </p>

                                <a href="javascript:;">&larr;&nbsp;Make another call</a>
                            </li>
                            <li id="webcall-no-money">
                                <h3>Please purchase at least one DID number first.</h3>

                                <p>
                                    Webcall feature is activated automatically once you have at least 1 DID number in your account (any DID - any country).
                                    Please add a number to your account and return to this page.
                                </p>

                                <p>Check the per-minute rates below - start typing in the number, country code first (i.e. 12125551212 US, 442050003000 UK etc.)</p>

                                <div class="form-row">
                                    <div class="webcall-destin">
                                        <span>Destination</span>
                                        <input type="text" name="" />
                                        <p>
                                            &nbsp;
                                        </p>
                                    </div>
                                    <div class="webcall-rate">
                                        <span>Rate per min</span>
                                        <input type="text" id="single_rate" name="" readonly="readonly" />
                                    </div>
                                </div>

                                <a href="javascript:;">&larr;&nbsp;Back to Webcall</a>

                            </li>
                        </ul>

                    </div>
                </div>
                <div class="form-submit">
                    <a href="javascript:;" class="form-submit"><span></span></a>
                </div>
              <%end -%>
        </div>
        <%= observe_form :webcall_form, :url => cost_webcalls_path, :frequency => 0.5%>
        <script type="text/javascript" src="/javascripts/webcall/webcall.js"></script>