<!--
****************************************************************************  
*  Description: Layout for tickets content                                 *
*  Created: 05/22/2006                                                     *
****************************************************************************
-->
<style type="text/css">
.ticket-header {
    border-bottom: 3px solid #D6DEC6;
    border-top: 3px solid #D6DEC6;
    background-color: #F1F8E3;
    padding: 0 20px 0 0;
    position: relative;
    top: -14px;
    height: 67px;
    margin: 0 0 -1px;
    width: auto;
}
.ticket-header-block {
	margin: 10px -7px 10px 10px;
    border-right: 1px dashed #D4D4D4;
    color: #666666;
    padding-top: 5px;
    width: auto;
    height: 40px;
    text-align:center;
}
.ticket-header-block-title {
    
}
.ticket-header-block-value {
    font-size: larger;
    font-weight: bolder;
}
.ticket-meta-deta-box {
    -moz-background-inline-policy: continuous;
    -moz-border-radius: 5px 5px 5px 5px;
    border: 1px solid #EBEBEB;
    color: #666666;
    height: 18px;
    padding: 4px;

    border-bottom-left-radius:5px 5px;
   border-bottom-right-radius:5px 5px;
   border-top-left-radius:5px 5px;
   border-top-right-radius:5px 5px;
    
}

.ticket-collapsed-divider {
    height: 20px;
    background: -moz-linear-gradient(270deg, #fff, #f1f1f1) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f1f1f1));
    margin-left: 1px;

}

.ticket-attachment {
    -moz-background-inline-policy: continuous;
    -moz-border-radius: 3px 3px 3px 3px;
    background: none repeat scroll 0 0 #5a91e7;
    color: white;
    padding: 2px 5px;

     border-bottom-left-radius:3px 3px;
   border-bottom-right-radius:3px 3px;
   border-top-left-radius:3px 3px;
   border-top-right-radius:3px 3px;

}

</style>

<script type="text/javascript" src="../javascript/modules/support.js?version={VERSION}"></script>
<script type="text/javascript">

    $(document).ready(function() {
        $('.ticket-header-block:last').css('border-right','none');
    });

    var NotificationBtn = '';
    var ticketid = {TICKETID};
    Ext.onReady(function(){
        DeleteBtn = new Ext.Button({
            text:     lang('Delete'),
            renderTo: 'ExtDeleteTicketBtn',
            type:     'submit',
            width:    100,
            handler:  function(){
                          return deleteTicket();
                      }
        });

        NextBtn = new Ext.Button({
            text: lang('Next')+" &#155;",
            renderTo: 'ExtNextTicketBtn',
            type:   'button',
            width: 50,
            handler: function(){
                increaseStartValue(1);
                return false;
            }
        });

        PreviousBtn = new Ext.Button({
            text: "&#139; "+lang('Previous'),
            renderTo: 'ExtPreviousTicketBtn',
            type:   'button',
            width: 50,
            handler: function(){
                increaseStartValue(-1);
                return false;
            }
        });

        NotificationBtn = new Ext.Button({
            id:       'ticketAdditionalNotificationButton',
            text:     '{TICKET_ADDITIONAL_NOTIFICATION_TITLE}',
            renderTo: 'ExtTicketAdditionalNotificationButton',
            type:     'button',
            width:    100,
            handler:  function(){
                          ticketAdditionalNotification();
                      }
        });
    });

    onLoadFunctions.push(
        function()
        {
            changeTicketType({TICKETID}, '{EXTRA_ARGS}');
        }
    );

    function deleteTicket()
    {
        var val = confirm(lang("Click OK if you are sure you want to delete this ticket"));
        if(val){
            window.location = "index.php?fuse=support&action=DeleteTicket&ticketid={TICKETID}&sessionHash="+gHash;
        }
    }

    function ticketAdditionalNotification()
    {
        var ticketId = document.getElementById('ticketid').value;
        var ticketAdditionalNotificationId = document.getElementById('ticketAdditionalNotificationId').value;
        
        if(ticketId == 0){
            return;
        }
        if(ticketAdditionalNotificationId == 0){

            Ext.Ajax.request({
                url: 'index.php?fuse=support&action=AddTicketAdditionalNotification_ASync',
                params: { ticketid:ticketId},
                success: AddTicketAdditionalNotification
            });

        }else{

            Ext.Ajax.request({
                url: 'index.php?fuse=support&action=DeleteTicketAdditionalNotification_ASync',
                params: { additionalNotificationID:ticketAdditionalNotificationId},
                success: DeleteTicketAdditionalNotification
            });

        }
    }

    function AddTicketAdditionalNotification(responseObj)
    {
        var responseArr = responseObj.responseText.split('|');
        
        if(typeof responseArr[1] == 'undefined' || responseArr[0] != 'OK'){
            alert(responseObj.responseText);
        }else{
            document.getElementById('ticketAdditionalNotificationId').value = responseArr[1];
            NotificationBtn.setText(lang("Unsubscribe"));
        }
        callTicketSummaries();
    }

    function DeleteTicketAdditionalNotification(responseObj)
    {
        if(responseObj.responseText == 'OK'){
            document.getElementById('ticketAdditionalNotificationId').value = 0;
            NotificationBtn.setText(lang("Subscribe"));
        }else{
            alert(responseObj.responseText);
        }
        callTicketSummaries();
    }
    
    function increaseStartValue(increaseValue)
    {

         Ext.Ajax.request({
            url: 'index.php?fuse=support&action=IncreaseStartValue',
            params: { increaseValue:increaseValue},
            success: increaseStartValue_Callback
        });

    }
    
    function increaseStartValue_Callback(responseObj)
    {
        var responseArr = responseObj.responseText.split('|');
        if(responseArr[0] == 1){
            if(responseArr[1] == -1){
                this.location = "index.php?fuse=support&view=Admin_ViewTicketMessage&ticketID={PREVIOUS_TICKET_ID}";
            }else if(responseArr[1] == 1){
                this.location = "index.php?fuse=support&view=Admin_ViewTicketMessage&ticketID={NEXT_TICKET_ID}";
            }
        }
    }
    
    {TICKET_TYPE_ARRAY}
</script>

<!--<div class="inside">-->
<!--<div class="inside">-->
    <!--<div id="ticketDetailsDiv" style"width:660px">-->
    <div style="display: block">
           <!--<table bgcolor=white cellpadding=0 cellspacing=0 border=0 width=823px>-->
           <table cellpadding='0' cellspacing='0' border='0' width="100%">
            <tr>
                <td colspan="6">
                    <div  style="width:auto;">
                        <input type="hidden" id="originalStatus" value="{TICKET_STATUS}" />
                        <input type="hidden" id="originalPriority" value="{TICKET_PRIORITY}" />
                        <input type="hidden" id="originalType" value="{TICKET_TYPE}" />
						<input type="hidden" id="originalSubject" value="{TICKET_SUBJECT}" />
                        <input type="hidden" id="ticket_owner_id" value="{TICKET_OWNER_ID}" />
                        <input type="hidden" id="originalAssignedToName" value="{TICKET_ASSIGNEE}" />
                        <input type="hidden" id="assignedToId" value="{TICKET_ASSIGNED_TO_ID}" />
                        <input type="hidden" id="userId" value="{USER_ID}" />                        
                        <input type="hidden" id="ticketid" name="ticketid" value="{TICKET_ID}" />
                        <input type="hidden" id="originalDomain" value="{TICKET_DOMAIN}" />

                        <div class="info_user">                                    
                            <div class="heading_line_usr" style="margin-bottom:14px;padding-top:8px;">                                
                                <span class="snapshot-header-text" style="font-size:21px;">&nbsp;[l]TKT[/l] #{TICKET_HEADER_NUMBER}</span>&nbsp;&nbsp;
                                <span id="tdSubject" style="position:relative;top:-1px;font-size:21px;"><span class="{PRIORITY_COLOR}">&nbsp;{TICKET_HEADER_SUBJECT}</span></span>                                
                            </div><!-- CLose div.heading_line_usr -->
                            <div id="ticketdetails-min">
                                <div class="ticket-meta-deta-box">
                                    <span style="padding-left: 3px;" class="grid-meta">
                                        <strong>[l]By[/l]</strong>: {TICKET_OWNERLINK_MIN} <span style="color:#dfdfdf">|</span>
                                        <strong>[l]Date[/l]</strong>: {TICKET_DATESUBMITTED} <span style="color:#dfdfdf">|</span>
                                        <strong>[l]Elapsed[/l]</strong>: {TICKET_TIMEELAPSED} <span style="color:#dfdfdf">|</span>
                                        <strong>[l]Package[/l]</strong>: <span id="tdDomain"> {TICKET_DOMAIN_LINK}&nbsp;&nbsp;</span><span id="ticket_packagename">{TICKET_PACKAGENAME}</span>
                                    </span>
                                </div>
                            </div>
                            <div id="ticketdetails" style="padding-bottom:10px;display:{ticketheader_style}">
                                
                            </div><!-- Close div.ticketdetials - part that hides on collapse-->
                        </div><!-- Close div.class.info_user -->                                  
                    </div>

					<div class="ticket-header">
					      <table style="width:100%" cellpadding="0" cellspacing="0">
					      <tr>
					      <td>
						      <div class="ticket-header-block">
						         <div class="ticket-header-block-title">Department</div>
						         <div class="ticket-header-block-value"><span id="assignedtodept" class="value">{TICKET_DEPARTMENT}</a></div>
						      </div>
					      </td>
					      <td>
						      <div class="ticket-header-block">
						         <div class="ticket-header-block-title">Assigned To</div>
						         <div class="ticket-header-block-value"><span id="assignedtoname" class="value">{TICKET_ASSIGNEE_LINK}</span></div>
						      </div>
					      </td>
					      <td>
						      <div class="ticket-header-block">
						         <div class="ticket-header-block-title">Type</div>
						         <div class="ticket-header-block-value"><span id="tdType" class="value">{TICKET_TYPE_LINK}</span></div>
						      </div>
					      </td>
					      <td>
						      <div class="ticket-header-block">
						         <div class="ticket-header-block-title">Priority</div>
						         <div class="ticket-header-block-value"><span id="tdPriority" class="value" {TICKET_PRIORITYCLASS} >{TICKET_PRIORITY_LINK}</div>
						      </div>
					      </td>
					      <td>
						      <div class="ticket-header-block">
						         <div class="ticket-header-block-title">Status</div>
						         <div class="ticket-header-block-value"><span id="ticket_status_link" class="value">{TICKET_STATUS_LINK}</span></div>
						      </div>
					      </td>
					      <!-- BEGIN DYNAMIC BLOCK: ticketRate -->
					      <td>
					      	<div class="ticket-header-block">
					      		<div class="ticket-header-block-title">Rating</div>
					      		<div class="ticket-header-block-value">{TICKET_RATE}</div>
					      	</div>
					      </td>
						  <!-- END DYNAMIC BLOCK: ticketRate -->
					      </tr>
					      </table>      
					</div>


                    <div style="position:relative;clear:both;">
                        <ul id="ajaxTabs" class="tabs" style="margin-bottom:6px;">
                            <li {viewticketmessageactive} name='tickettab' id='tickettab_messages_tab'>
                                <a href="index.php?fuse=support&view=Admin_ViewTicketMessage&ticketID={TICKETID}&email={GUEST_EMAIL}&accesscode={ACCESS_CODE}&customerId={TICKET_OWNER_ID}">Messages</a>
                            </li>

                            <!-- BEGIN DYNAMIC BLOCK: ticketeventtab -->
                            <li {viewticketeventtabactive} name='tickettab' id='tickettab_eventlog_tab'>
                                <a href="index.php?fuse=support&view=Admin_TicketEvents&ticketID={TICKETID}&email={GUEST_EMAIL}&accesscode={ACCESS_CODE}&customerId={TICKET_OWNER_ID}">Event Log</a>
                            </li>
                            <!-- END DYNAMIC BLOCK: ticketeventtab -->

                            <!-- template below used for dynamic tabs that get added after page load -->
                            <!-- BEGIN DYNAMIC BLOCK: tickettab -->
                            <li class="{TICKETTAB_CLASS}" name='tickettab' id='{TICKETTAB_ID}_tab'>
                                <a href="{TICKETTAB_URL}">{TICKETTAB_NAME}</a>
                            </li>
                            <!-- END DYNAMIC BLOCK: tickettab -->
                        </ul>
                        <div style="position:absolute; right:0; bottom:5px; border:1x solid blue">
                            <table>
                                <tr>
                                    <td>
                                        <span id='ExtPreviousTicketBtn' style="display: {PREVIOUS_TICKET_DISPLAY}"></span>
                                    </td>
                                    <td nowrap align=center valign=center>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <!--<span style="display: {SEPARATOR_DISPLAY}">&nbsp;|&nbsp;</span>-->
                                        <span id='ExtNextTicketBtn' style="display: {NEXT_TICKET_DISPLAY}"></span>
                                    </td>
                                    <td nowrap align=center valign=center>
                                        &nbsp;
                                    </td>
                                    <td nowrap align=center valign=center>
                                        <span id="notificationButton" style="display:{STYLE_TICKET_NOTIFICATIONS}">
                                            <span id='ExtTicketAdditionalNotificationButton'></span>
                                            <input type="hidden" id="ticketAdditionalNotificationId" value="{TICKET_ADDITIONAL_NOTIFICATION_ID}" />
                                        </span>
                                    </td>
                                    <!-- BEGIN DYNAMIC BLOCK: deleteTicketBtn -->
                                    <td nowrap align=center valign=center>
                                        &nbsp;
                                    </td>
                                    <td nowrap align=center valign=center>
                                            <span id='ExtDeleteTicketBtn'></span>
                                    </td>
                                    <!-- END DYNAMIC BLOCK: deleteTicketBtn -->
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div id="activetickettab">
                    </div>
                </td>
            </tr>
        </table>
    </div>