<link href="modules/servers/axxessReseller/assets/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="modules/servers/axxessReseller/assets/js/bootstrap-toggle.min.js"></script>
<script src="modules/servers/axxessReseller/assets/js/zingchart.min.js"></script>

{literal}
<style>
::-moz-focus-inner
{
    border: 0;
}

::selection
{
    background: #FE6A12;
    color: #fff;
}

.roll
{
    position: absolute;
    font-size: 16px;
    width: 100px;
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.bold
{
    font-weight: bold;
}

.needle
{
    position: absolute;
    left: 268px;
    top: 65px;
    -ms-transform-origin: center 96%;
    -webkit-transform-origin: center 96%;
    transform-origin: center 96%;
}


.current
{
    font-size: 37px;
    width: 200px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    position: absolute;
}

</style>
    

<script>
    
function Utils() 
{

}

Utils.prototype = 
        {
            constructor: Utils,
            isElementInView: function (element, fullyInView)
            {
                var pageTop = $(window).scrollTop();
                var pageBottom = pageTop + $(window).height();
                var elementTop = $(element).offset().top;
                var elementBottom = elementTop + $(element).height();

                if(fullyInView === true) 
                {
                    return ((pageTop < elementTop) && (pageBottom > elementBottom));
                }
                else
                {
                    return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
                }
            }
    };

 var Utils = new Utils();

function AnimateRotate(angle) 
{
    var $elem = $('#needle');
    
    $({deg: -90}).animate({deg: angle}, 
    {
        duration: 2000,
        step: function(now) 
        {
            $elem.css({transform: 'rotateZ(' + now + 'deg)'});
        }
    });
}

var voipGauge = true;

$(document).ready(function()
{
    $(window).scroll(function()
    {      
        var isElementInView = Utils.isElementInView($('#needle'), false);

        if(isElementInView && voipGauge) 
        {
            voipGauge = false;
            AnimateRotate({/literal}{$degree}{literal});
        }
        
    });
    
    $('#toggle-gauge').change(function() 
    {
        if($(this).prop('checked'))
        {
            $('#split-gauge').hide();
            $('#graph-note').text('This graph is scaled on total allocated CallTime');
            $('#usageGauge').show();
            AnimateRotate({/literal}{$degree}{literal});
        }
        else
        {
            $('#usageGauge').hide();
            $('#graph-note').text('This graph is scaled on current service plan CallTime');
            $('#split-gauge').show();
            
            zingchart.render({
                id: 'currentMonChart',
                data: currentMon,
                height: "50%",
                width: "100%"
            });
          
          zingchart.render({
                        id: 'rolloverChart',
                        data: rolloverConfig,
                        height: "50%",
                        width: "100%"
                        });    
        }
    });
    
    
});

</script>
    
{/literal}

<div class="row">
    <div style="text-align:center;font-weight: bold;margin-bottom: 20px;">
        
        <h3>CallTime Stats for this Billing Period</h3>
        
        <p style="color:#17a2b8">
            <span>Service Plan: {$planName}</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span>Allocated Calltime: {$allocated}</span><br/>
            <small>(Prorata Applicable)</small>
        </p>
        
        
        <ul style="display:ruby;">
            <li style="color:green;margin-right: 5%;">Available Total: {$availtotal}</li>
            <li style="color:#FE6A12;margin-right: 5%;">Used Total: {$usedtotal}</li>
        </ul>
        
    </div>
    
    <div>
        <input type="checkbox" id="toggle-gauge" data-width="140" checked data-toggle="toggle" data-on="Composite View" data-off="Split View" data-onstyle="primary" data-offstyle="warning">
    </div>
    
    <div style="margin-top: 50px;margin-bottom: 50px;">
        <small style="color: #6c757d;" id="graph-note">This graph is scaled on total allocated CallTime </small>
    </div>
        
    <div id="usageGauge">
        <div class="" style="width:549px;height:393px;position:relative; background:url('modules/servers/axxessReseller/assets/img/gauge_calltime_bg.png') no-repeat;margin:0 auto;">
            <div id="e1" class="roll" style="-ms-transform:rotate(-74deg);-webkit-transform:rotate(-74deg);transform:rotate(-74deg);top:210px;left:15px;"><span class="char1" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(-3deg);">{$lastmonth1.0}</span><span class="char2" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(0deg);">{$lastmonth1.1}</span><span class="char3" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(1deg);">{$lastmonth1.2}</span><span class="char4" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(3deg);">{$lastmonth1.3}</span><span class="char5" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(4deg);">{$lastmonth1.4}</span></div>
            <div id="e2" class="roll" style="-ms-transform:rotate(-43deg);-webkit-transform:rotate(-43deg);transform:rotate(-43deg);top:110px;left:73px;"><span class="char1" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(-5deg);">{$lastmonth2.0}</span><span class="char2" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(-1deg);">{$lastmonth2.1}</span><span class="char3" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(0deg);">{$lastmonth2.2}</span><span class="char4" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(3deg);">{$lastmonth2.3}</span><span class="char5" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(1px) rotate(5deg);">{$lastmonth2.4}</span></div>
            <div id="e3" class="roll" style="-ms-transform:rotate(-13deg);-webkit-transform:rotate(-13deg);transform:rotate(-13deg);top:55px;left:173px;"><span class="char1" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(2px) rotate(-9deg);">{$lastmonth3.0}</span><span class="char2" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(1px) rotate(-6deg);">{$lastmonth3.1}</span><span class="char3" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(-3deg);">{$lastmonth3.2}</span><span class="char4" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(-1deg);">{$lastmonth3.3}</span><span class="char5" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(1deg);">{$lastmonth3.4}</span><span class="char6" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(4deg);">{$lastmonth3.5}</span><span class="char7" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(1px) rotate(6deg);">{$lastmonth3.6}</span><span class="char8" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(2px) rotate(9deg);">{$lastmonth3.7}</span></div>
            <div id="e4" class="current" style="-ms-transform:rotate(42deg);-webkit-transform:rotate(42deg);transform:rotate(42deg);top:90px;left:330px;"><span class="char1" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(2px) rotate(-8deg);">{$currMonthAvail.0}</span><span class="char2" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(-3deg);">{$currMonthAvail.1}</span><span class="char3" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(0deg);">{$currMonthAvail.2}</span><span class="char4" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(3deg);">{$currMonthAvail.3}</span><span class="char5" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(2px) rotate(8deg);">{$currMonthAvail.4}</span></div>
            <div id="m1" class="roll" style="-ms-transform:rotate(-74deg);-webkit-transform:rotate(-74deg);transform:rotate(-74deg);top:220px;left:55px;color:#333;font-size:14px;"><span class="char1" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(-5deg);">2</span><span class="char2" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(-2deg);">5</span><span class="char3" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(0deg);">.</span><span class="char4" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(2deg);">0</span><span class="char5" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(5deg);">2</span></div>
            <div id="m2" class="roll" style="-ms-transform:rotate(-43deg);-webkit-transform:rotate(-43deg);transform:rotate(-43deg);top:140px;left:105px;color:#333;font-size:14px;"><span class="char1" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(0deg);">0</span></div>
            <div id="m3" class="roll" style="-ms-transform:rotate(-13deg);-webkit-transform:rotate(-13deg);transform:rotate(-13deg);top:98px;left:182px;color:#333;font-size:14px;"><span class="char1" style="display: inline-block; transition: none 0s ease 0s; transform: translateX(0px) translateY(0px) rotate(0deg);">0</span></div>
            <div style="font-size:24px;width:460px;margin:0 auto;padding-top:330px;text-align:center;">
                <span class="bold">your</span> available total = <span style="font-size:35px;color:#DB4D26;" class="bold">{$availtotal}</span>
            </div>
            <img id="needle" src="modules/servers/axxessReseller/assets/img/needle.png" alt="" class="needle" style="transform: rotateZ(-90deg);" width="20" height="223" border="0">
        </div>
    </div>
    
    <!---split--->
    
    <div id="split-gauge" style="display:none;margin-top:10px">
        <p style="text-align:left;display: list-item;list-style: disclosure-closed;font-weight: bold;">Current month calltime stats</p>
        <div id='currentMonChart'></div>
        <p style="text-align:left;display: list-item;list-style: disclosure-closed;font-weight: bold;">
            Last 3 Months rollover calltime stats({$rollover.2.month1},{$rollover.1.month2},{$rollover.0.month3})
        </p>
        <div id='rolloverChart'></div>
    </div>
    
</div>

{literal}
    <script>
        var apertureAngle = 180;
        var ringRed = {/literal}{$red}{literal};
        var ringGreen = {/literal}{$green}{literal};
        {/literal}
        {if $purchased ==50}
            {literal}apertureAngle = 180;{/literal}
        {elseif $purchased > 50 && $purchased < 300}
            {literal}apertureAngle = 270;{/literal}
        {elseif $purchased >= 300}
            {literal}apertureAngle = 315;{/literal}
        {/if}
        {literal}
        var currentMon = 
                {
                    type: "gauge",
                    
                    'scale-r': 
                            {
                                aperture: apertureAngle,//Specify your scale range.
                                values: "0:{/literal}{$purchased}{literal}:10",//Provide min/max/step scale values.
                                //values: "0:500:10",
                                center: 
                                        {  //Pivot Point
                                            //size:5,
                                            'background-color': "#a6a8ab",
                                            'border-color': "#58595B"
                                        },
                                        ring: 
                                                {  //Gauge Ring
                                                    size:40,//width of dail
                                                    'background-color': "purple",
                                                    rules: [
                                                            {
                                                              rule: "%v >= 0 && %v <= "+ringRed,
                                                              'background-color': "red"
                                                            },
                                                            {
                                                              rule: "%v >= "+ringRed+" && %v <= "+ringGreen,
                                                              'background-color': "#ff6b12"
                                                            },
                                                            {
                                                              rule: "%v >= "+ringGreen,
                                                              'background-color': "green"
                                                            },
                                                            
                                                          ]
                                                },
                                                item: {    
                                                    //Scale Label Styling
                                                    'font-color': "#333",
                                                    //'font-family': "Georgia, serif",
                                                    'font-size':14,
                                                    'font-weight': "bold",     //or "normal"
                                                    'font-style': "normal",    //or "italic"
                                                    'offset-r':-90,    //To adjust the placement of your scale labels.
                                                    angle: "auto"    //To adjust the angle of your scale labels.
                                                },
                                                tick: 
                                                        {  
                                                            //Tick Markers
                                                            'line-color': "#fff",
                                                            'line-style': "solid", //solid, dashed, or dotted
                                                            'line-width':3,
                                                            size:40,
                                                            placement: "inner" //outer, inner, or cross
                                                        },
                                                        'minor-ticks':4,  //Specify the NUMBER of minor tick marks.
                                                    'minor-tick': {    //And then STYLE your minor tick markers.
                                                      'line-color': "#FFF",
                                                      'line-style': "solid", //solid, dashed, or dotted
                                                      'line-width':1,
                                                      size:40,
                                                      placement: "inner" //outer, inner, or cross
                                                    }
                            },
                            plot: {
                                    csize: "5%",
                                    //size: "100%",
                                    'background-color': "#000000",
                                    'value-box': 
                                            { 
                                                //Value Boxes
                                                placement: "center",  //Specify placement at "center", "tip", or "edge".
                                                text: "%v",
                                                'font-color': "blue"
                                            },
                                            animation: 
                                                    { //Animation object
                                                        effect:2,
                                                        method:4,
                                                        sequence:1,
                                                        speed:10000
                                                    }
                                    },
                    series: [
                            {
                                values: [{/literal}{$currMonthAvail}{literal}],
                                'background-color': "#CC0066"
                            }
                            ]
                };
     
     
        
        
        
        var rolloverConfig = 
                {
                    graphset: 
                    [
                        {
                            type: "gauge",
                            height: "100%",
                            width: "30%",
                            x: "0%",
                            y: "0%",
                            scale: 
                            {
                                'size-factor': "100%" //Modify your gauge chart size.
                            },
                            'scale-r': 
                            {
                                aperture: apertureAngle,     //Specify your scale range.
                                values: "0:{/literal}{$purchased}{literal}:10",//Provide min/max/step scale values.
                                center: 
                                        {  //Pivot Point
                                            size:12,
                                            'background-color': "#a6a8ab",
                                            'border-color': "#58595B"
                                        },
                                        ring: 
                                        {  
                                            //Gauge Ring
                                            size:20,//width of dail
                                            'background-color': "purple",
                                            rules: [
                                                            {
                                                              rule: "%v >= 0 && %v <= "+ringRed,
                                                              'background-color': "red"
                                                            },
                                                            {
                                                              rule: "%v >= "+ringRed+" && %v <= "+ringGreen,
                                                              'background-color': "#ff6b12"
                                                            },
                                                            {
                                                              rule: "%v >= "+ringGreen,
                                                              'background-color': "green"
                                                            },
                                                            
                                                          ]
                                         },
                                        item:
                                        {    
                                            //Scale Label Styling
                                            'font-color': "#333",
                                            //'font-family': "Georgia, serif",
                                            'font-size':12,
                                            'font-weight': "bold",     //or "normal"
                                            'font-style': "normal",    //or "italic"
                                            'offset-r':-55,    //To adjust the placement of your scale labels.
                                            angle: "auto"    //To adjust the angle of your scale labels.
                                        },
                                        tick: 
                                        {  
                                            //Tick Markers
                                            'line-color': "#fff",
                                            'line-style': "solid", //solid, dashed, or dotted
                                            'line-width':3,
                                            size:20,
                                            placement: "inner" //outer, inner, or cross
                                        },
                                        'minor-ticks':4,  //Specify the NUMBER of minor tick marks.
                                        'minor-tick': 
                                        {
                                            //And then STYLE your minor tick markers.
                                            'line-color': "#FFF",
                                            'line-style': "solid", //solid, dashed, or dotted
                                            'line-width':1,
                                            size:20,
                                            placement: "inner" //outer, inner, or cross
                                        }
                            },
                            plot:
                            {
                                csize: "3%",
                                //size: "100%",
                                'background-color': "#000000",
                                'value-box': 
                                { 
                                    //Value Boxes
                                    placement: "center",  //Specify placement at "center", "tip", or "edge".
                                    text: "%v",
                                    'font-color': "blue"
                                },
                                animation: 
                                { //Animation object
                                    effect:2,
                                    method:4,
                                    sequence:1,
                                    speed:10000
                                }
                            },
                            series: 
                            [
                                {
                                    values: [{/literal}{$rollover.2.calltimeAvail}{literal}],
                                    'background-color': "#CC0066"
                                }
                            ]
                        },
                        {
                            type: "gauge",
                            height: "100%",
                            width: "30%",
                            x: "30%",
                            y: "0%",
                            scale: 
                            {
                              'size-factor': "100%" //Modify your gauge chart size.
                            },
                            'scale-r': 
                            {
                                aperture: apertureAngle,     //Specify your scale range.
                                values: "0:{/literal}{$purchased}{literal}:10",//Provide min/max/step scale values.
                                center: 
                                {  //Pivot Point
                                    size:12,
                                    'background-color': "#a6a8ab",
                                    'border-color': "#58595B"
                                },
                                ring: 
                                {  
                                    //Gauge Ring
                                    size:20,//width of dail
                                    'background-color': "purple",
                                    rules: [
                                                            {
                                                              rule: "%v >= 0 && %v <= "+ringRed,
                                                              'background-color': "red"
                                                            },
                                                            {
                                                              rule: "%v >= "+ringRed+" && %v <= "+ringGreen,
                                                              'background-color': "#ff6b12"
                                                            },
                                                            {
                                                              rule: "%v >= "+ringGreen,
                                                              'background-color': "green"
                                                            },
                                                            
                                                          ]
                                },
                                item: 
                                {    
                                    //Scale Label Styling
                                    'font-color': "#333",
                                    //'font-family': "Georgia, serif",
                                    'font-size':12,
                                    'font-weight': "bold",     //or "normal"
                                    'font-style': "normal",    //or "italic"
                                    'offset-r':-55,    //To adjust the placement of your scale labels.
                                     angle: "auto"    //To adjust the angle of your scale labels.
                                },
                                tick: 
                                {  
                                    //Tick Markers
                                    'line-color': "#fff",
                                    'line-style': "solid", //solid, dashed, or dotted
                                    'line-width':3,
                                    size:20,
                                    placement: "inner" //outer, inner, or cross
                                },
                                'minor-ticks':4,  //Specify the NUMBER of minor tick marks.
                                'minor-tick': 
                                {
                                    //And then STYLE your minor tick markers.
                                    'line-color': "#FFF",
                                    'line-style': "solid", //solid, dashed, or dotted
                                    'line-width':1,
                                    size:20,
                                    placement: "inner" //outer, inner, or cross
                                }
                            },
                            plot: 
                            {
                                csize: "3%",
                                //size: "100%",
                                'background-color': "#000000",
                                'value-box': 
                                { 
                                    //Value Boxes
                                    placement: "center",  //Specify placement at "center", "tip", or "edge".
                                    text: "%v",
                                    'font-color': "blue"
                                },
                                animation: 
                                { //Animation object
                                    effect:2,
                                    method:4,
                                    sequence:1,
                                    speed:10000
                                }
                            },
                            series: 
                            [
                                {
                                    values: [{/literal}{$rollover.1.calltimeAvail}{literal}],
                                    'background-color': "#CC0066"
                                }
                            ]
                        },
                        {
                            type: "gauge",
                            height: "100%",
                            width: "30%",
                            x: "60%",
                            y: "0%",
                            scale:
                            {
                                'size-factor': "100%" //Modify your gauge chart size.
                            },
                            'scale-r': 
                            {
                                aperture: apertureAngle,     //Specify your scale range.
                                values: "0:{/literal}{$purchased}{literal}:10",//Provide min/max/step scale values.
                                center: 
                                {  //Pivot Point
                                    size:12,
                                    'background-color': "#a6a8ab",
                                    'border-color': "#58595B"
                                },
                                ring: 
                                {  //Gauge Ring
                                    size:20,//width of dail
                                    'background-color': "purple",
                                    rules: [
                                                            {
                                                              rule: "%v >= 0 && %v <= "+ringRed,
                                                              'background-color': "red"
                                                            },
                                                            {
                                                              rule: "%v >= "+ringRed+" && %v <= "+ringGreen,
                                                              'background-color': "#ff6b12"
                                                            },
                                                            {
                                                              rule: "%v >= "+ringGreen,
                                                              'background-color': "green"
                                                            },
                                                            
                                                          ]
                                },
                                item: 
                                {    
                                    //Scale Label Styling
                                    'font-color': "#333",
                                    //'font-family': "Georgia, serif",
                                    'font-size':12,
                                    'font-weight': "bold",     //or "normal"
                                    'font-style': "normal",    //or "italic"
                                    'offset-r':-55,    //To adjust the placement of your scale labels.
                                    angle: "auto"    //To adjust the angle of your scale labels.
                                },
                                tick: 
                                {  
                                    //Tick Markers
                                    'line-color': "#fff",
                                    'line-style': "solid", //solid, dashed, or dotted
                                    'line-width':3,
                                    size:20,
                                    placement: "inner" //outer, inner, or cross
                                },
                                'minor-ticks':4,  //Specify the NUMBER of minor tick marks.
                                'minor-tick': 
                                {
                                    //And then STYLE your minor tick markers.
                                    'line-color': "#FFF",
                                    'line-style': "solid", //solid, dashed, or dotted
                                    'line-width':1,
                                    size:20,
                                    placement: "inner" //outer, inner, or cross
                                }
                            },
                            plot:
                            {
                                csize: "3%",
                                //size: "100%",
                                'background-color': "#000000",
                                'value-box': 
                                { 
                                    //Value Boxes
                                    placement: "center",  //Specify placement at "center", "tip", or "edge".
                                    text: "%v",
                                    'font-color': "blue"
                                },
                                animation: 
                                { //Animation object
                                    effect:2,
                                    method:4,
                                    sequence:1,
                                    speed:10000
                                }
                            },
                            series:
                            [
                                {
                                    values: [{/literal}{$rollover.0.calltimeAvail}{literal}],
                                    'background-color': "#CC0066"
                                }
                            ]
                        }   
                    ]
                }
                
      </script>
{/literal}
