<div id="vtabContent">
    

<form action="#" method="post" name="settings" id="sitesettings">
<dl class="form noborder automation-options">
    
    <dt><label>Tab Title</label></dt>
    <dd>
        <select id="tabimageid" name="tabimageid">
            <option selected="true" value="support">Support&nbsp;&nbsp;</option>
            <option value="ask-us">Ask Us&nbsp;&nbsp;</option>
            <option value="feedback">Feedback&nbsp;&nbsp;</option>                                
            <option value="help">Help&nbsp;&nbsp;</option>                                
            <option value="comments">Comments&nbsp;&nbsp;</option>                 
            <option value="questions">Questions&nbsp;&nbsp;</option>               
            <option value="service">Service&nbsp;&nbsp;</option>            
        </select>
    </dd>
    <!-- Setting Description -->
    <dd class="full desc">
        <span>
        Select the text to place on your Feedback Tab.
        </span>
    </dd>

<dt><label>Tab Position</label></dt>
    <dd>
        <select id="tabposition" name="tabposition">
            <option selected="true" value="left">Left&nbsp;&nbsp;</option>
            <option value="right">Right&nbsp;&nbsp;</option>
        </select>
    </dd>
    <!-- Setting Description -->
    <dd class="full desc">
        <span>
        Select the position of the screen the tab will appear at.
        </span>
    </dd>
<!--
<dt><label>Tab Color</label></dt>
    <dd class="full desc">
        <span>
        A hex value or name of color that the tab will appear as.
        </span>
    </dd>
    <dd class="nextline">
        <input type="text" value="black" style="width: 507px;" class="x-form-text x-form-field" id="tabcolor" name="tabcolor">
    </dd>
-->

<dt><label>Require Knowledge Base Search</label></dt>
    <dd>
        <input type="radio" checked="true" value="1" name="forcesearch" id="forcesearch"> Yes&nbsp;&nbsp;
        <input type="radio" value="0" name="forcesearch" id="forcesearch"> No&nbsp;&nbsp;
    </dd>
    <!-- Setting Description -->
    <dd class="full desc">
        <span>
        If Yes then users will first be asked to enter keywords about their question and will be shown results from the knowledge base before being taken to the ticket submission page. Users may search the knowledge base from the ticket submission page as well.
        </span>
    </dd>
    
    

<dt><label>Default Ticket Type</label></dt>
<dd>
    <select id="tickettypeid" name="tickettypeid">
        <?php foreach ($this->tickettypes as $tickettype) { ?>
            <option value="<?php echo $tickettype['value'];?>"><?php echo $tickettype['name'];?>&nbsp;&nbsp;</option>
        <?php }?>
    </select>
</dd>
<!-- Setting Description -->
<dd class="full desc">
    <span>
    Select the ticket type you want to associate the tickets opened via the Support Widget.
    </span>
</dd>    
    
</dl>
    
    
<input type="button" id="btnGetSnippet" value="grab snippet" class="button" style="margin-left: 351px;">
</form>
</div>
    
<!-- on click we want to open an extjs window and pass ajax call -->
<script type="text/javascript">
    Ext.onReady(function(){
     Ext.get('btnGetSnippet').on('click', function(e){
         
        //obtain code to add into msgbox.. if error return error and do not show snippet 
        Ext.Ajax.request({
            url: "index.php?fuse=support&action=getFeedbackTabSnippet",
            params: {
                tabimageid : $('#tabimageid').val(),
                position: $('#tabposition').val(),
                //color: $('#tabcolor').val(),
                requireSearch : $('#forcesearch:checked').val(),
                tickettypeid: $('#tickettypeid').val()
            },
            success: function(respObj){
                json = ce.parseAjaxResponse(respObj);
                if (!json.error) {
                    var snippet = json.snippet;
                    var msgBox = Ext.MessageBox;
                    msgBox.show({
                       title: 'Feedback Tab Code Snippet',
                       msg: 'Paste this code into each web page where you want your Tab to appear:',
                       width:600,
                       defaultTextHeight: 260,
                       buttons: Ext.MessageBox.OK,
                       multiline: 260,
                       value: snippet,
                       animEl: 'btnGetSnippet'
                   });
                   //if we ever want need the textarea just do $(textAreaSelector)
                   //var textAreaSelector = "#"+msgBox.getDialog().getId()+" textarea:first";
                   
                }
            }
        }); 
    });
    
});
</script>