<script src="modules/servers/axxessReseller/assets/js/jqueryimport2.js"></script>
<script src="modules/servers/axxessReseller/assets/js/dailyuse.js"></script>
{literal}
<style>
#graph
{
    float: left;
    width: 100%;
    height: 44px;
    font-size: 12px;
}
::selection {
    background: #FE6A12;
    color: #fff;
}
#graph ul {
    margin: 0;
        margin-left: 0px;
    list-style: none;
    padding: 0;
    margin-left: 0px;
}
#graph li {
    float: left;
    margin: 0;
        margin-right: 0px;
    background: url('modules/servers/axxessReseller/assets/img/radiotab.png') no-repeat 10px 0;
    padding-left: 5px;
    margin-right: 6px;
}

#graph .tabselect {
    background: url('modules/servers/axxessReseller/assets/img/radiotab.png') no-repeat 10px -40px;
}

#graph .tabselect a {
    color: #E87507;
    padding-bottom: 5px;
    font-weight: bold;
}
#graph a {
    float: none;
}

#graph a {
    float: left;
    display: block;
    padding: 5px 0 0 25px;
    text-decoration: none;
    color: #765;
    line-height: 30px;
    font-weight: normal;
    margin-right: 10px;
}
::-moz-focus-inner {
    border: 0;
}

#datetxt {
    float: left;
    padding-left: 15px;
    color: #0E5A84;
    font-weight: bold;
    font-size: 18px;
}

#graphnavdiv {
    float: right;
    padding-right: 10px;
    padding-top: 6px;
}


.graphnav {
    display: block;
    float: left;
    width: 21px;
    height: 19px;
    background-color: red;
    margin-right: 5px;
}

.leftlabeldiv {
    position: relative;
    height: 32px;
}

.leftlabel {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-weight: bold;
    line-height: 9px;
}

.bardiv {
    width: 12px;
    height: 0px;
    background-color: #b6b6b6;
    position: absolute;
    bottom: 0px;
}

.barupload {
    width: 6px;
    height: 0px;
    background-color: #f60;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.bardownload {
    width: 6px;
    height: 0px;
    background-color: #0F5C88;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.botlabeldiv {
    float: left;
    width: 12px;
    margin-left: 8px;
    text-align: center;
    font-size: 10px;
}
.botlabeldays {
    color: #666;
}
.totaldiv {
    float: left;
    margin-right: 30px;
    margin-left: 10px;
}

.totallabel {
    float: right;
    font-weight: bold;
    text-align: right;
}

.totalbox {
    float: right;
    width: 16px;
    height: 11px;
    margin-right: 5px;
    margin-top: 3px;
}

#csvdiv {
    float: right;
    margin-right: 15px;
}

#csvdiv a:link, #csvdiv a:visited 
{
    color: #FA6501;
    font-weight: bold;
    text-decoration: none;
}
/*-----tab3--*/
#datetxt2 {
    float: left;
    padding-left: 15px;
    color: #0E5A84;
    font-weight: bold;
    font-size: 18px;
}
#graphnavdiv2 {
    float: right;
    padding-right: 10px;
    padding-top: 6px;
}

.graphnav {
    display: block;
    float: left;
    width: 21px;
    height: 19px;
    background-color: red;
    margin-right: 5px;
}


div.fht-table-wrapper {
    overflow: hidden;
}

.fht-table-wrapper {
    border: 1px solid #6E9BB3;
    background-color: #E8F2F9;
    margin-bottom: 10px;
    border-bottom: 0px;
}

.fht-table {
    border-collapse: collapse;
    border-spacing: 0;
}

.fht-table, .fht-table thead, .fht-table tfoot, .fht-table tbody, .fht-table tr, .fht-table th, .fht-table td {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: middle;
}

.axTable thead tr th, .axTable tfoot tr td 
{
    background-color: #0981bf;
    
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    
    vertical-align: middle;
}
.axTable td, .axTable th 
{
    border: 1px solid #6E9BB3;
        border-top-color: rgb(110, 155, 179);
        border-top-style: solid;
        border-top-width: 1px;
        border-left-color: rgb(110, 155, 179);
        border-left-style: solid;
        border-left-width: 1px;
    border-left: 0px;
    border-top: 0px;
    padding: 5px;
}


.axTable tbody tr.oddblue td
{
    background-color:#A9D1E7;
    color:#112E3E;
}

.axTable tbody tr.evenblue td
{
    background-color:#A9D1E7;
    color:#112E3E;
}
.dummyrow
{
    opacity:0;
}
.dummyrow td 
{
    
}

#tip
{
    width: 84px;
    height: 50px;
    background: url('modules/servers/axxessReseller/assets/img/tipcontainer.png') no-repeat;
    position: absolute;
    text-align: center;
    padding-top: 6px;
    display: none;
    z-index: 200;
}
#tipheader {
    font-size: 10px;
}

#tip1
{
    width: 84px;
    height: 45px;
    text-align: center;
    padding-top: 4px;
    z-index: 200;
}
#tipheader1 
{
    font-size: 10px;
}

#tiptxt
{
    margin-top: 5px;
    line-height: 11px;
    font-size: 12px;
    font-weight: bold;
}

#tabs-4-div a:link,#tabs-4-div a:visited {
    color: #FA6501;
    font-weight: bold;
    text-decoration: none;
}

#usage-graph div
{
    font-size: 14px;
}

.tooltip.left > .tooltip-arrow 
{
  overflow: visible;
}
</style>

<script>
    var largestVal;
    var mbCeil;

    var totalUploaded = 0;
    var totalDownloaded = 0;
    var totalUsed = 0;

    var graphId = 0;
    var dailyInit = "true";
    
    var username =  {/literal}'{$username}'{literal};

    // use to carry date across graphs + display
    var storedDate = "";
    
    
    $(document).ready(function()
    {
        $(".tabs-1").click(function()
        {
            graphId = 0;

            if (storedDate == "") 
            {
                var todayDate = getNow().split(" ")[0];
                storedDate = todayDate;
                callGraph(todayDate);
            }
            else
            {
                callGraph(storedDate);
            }

            clearMainDivs();
            $("#tabs-1-div").show();

        });

        $(".tabs-2").click(function()
        {

            graphId = 1;

            if (storedDate == "")
            {
                var todayDate = getNow().split(" ")[0];
                storedDate = todayDate;
                callGraph(todayDate);
            } 
            else
            {
                callGraph(storedDate);
            }

            clearMainDivs();
            $("#tabs-1-div").show();

        });

        $(".tabs-3").click(function()
        {
            clearGraph();
            clearMainDivs();

            if (storedDate == "") 
            {
                var todayDate = getNow().split(" ")[0];
                storedDate = todayDate;
                getBandwidthData(todayDate,username);
            } 
            else
            {
                getBandwidthData(storedDate,username);
            }

            // auto height
            $(".fht-tbody").css("height","auto");

            $('#tabs-3-div').css("opacity",100);
            $('#tabs-3-div').css("height","auto");
            $("#tabs-3-div").show();

        });

        $(".tabs-4").click(function()
        {

            clearGraph();
            clearMainDivs();
            $("#tabs-4-div").show();

        });

        
        $("#tabs li a").click(function() 
        {
            //$("#tabs li").removeClass('tabselect');
            //$(this).parent().addClass('tabselect');
            $("#tabs li").removeClass('tabselect');
            var thisAnchor = this.parentNode.firstChild;
            var thisList = this.parentNode;

            $(thisList).addClass('tabselect');
            //var thisDiv = document.getElementById(thisAnchor.id + "-div");

            //clearMainDivs();
            //$(thisDiv).show();

        });
        
        $('.tabs-1').click();
        dailyInit = "false";
    });
    
function getNow() 
{
    return {/literal}"{$dateNow}"{literal};
}    
    

function clearMainDivs() 
{
    var divArr = new Array('tabs-1-div', 'tabs-2-div', 'tabs-3-div', 'tabs-4-div', 'tabs-5-div', 'tabs-6-div');
    for (var i = 0; i < divArr.length; i++)
    {
        if (i == 2) 
        {
            if (dailyInit == "true")
            {
                $("#"+divArr[i]).css('opacity',0);
            }
            else if (dailyInit == "false") 
            {
                $("#"+divArr[i]).hide();
            }
        }
        else
        {
            $("#"+divArr[i]).hide();
        }
    }
}

function callGraph(date) 
{
    clearGraph();
    
    $("#datetxt").html("Loading..");

    var thisDateObj = date.split(" ")[0].split("-");
    var thisDateYear = thisDateObj[0];
    var thisDateMonth = parseFloat(thisDateObj[1]);
    var url = "modules/servers/axxessReseller/calls/bwusage.php?username="+username+"&year="+thisDateYear+"&month="+thisDateMonth;
    //var url = "calls/internalaction_bwusage.php?username=27836292611@yourmobile&year=2012&month=7";
    //var url = "json.txt";

    if ( typeof(graphAjax) == "object" ) 
    {
        // prevent multiple calls
	graphAjax.abort();
    }
	
    graphAjax = $.ajax({
            type: "GET",
            url: url,
            cache: false,
            dataType: "json",
            timeout: 45000,
            error: function(request,error,errorThrown) 
            {
                alert('Data cannot be loaded.');

                if(error == "timeout") 
                {
                    console.log('timeout');
                }
                else
                {
                    console.log(errorThrown);
                }
                    
            },
            success: loadGraph
      });

}


function loadGraph(data)
{
    console.log(data);
    
    var dataDoc = data;

    var thisDate = dataDoc.Date;

    var thisDateArr = thisDate.split(" ");
    var thisMonth = thisDateArr[0];
    var thisYear = thisDateArr[1];



    //-- cumulative detect day getNow
    var today = getNow().split(" ")[0].split("-");
    var todayYM = today[0]+"-"+parseFloat(today[1]);

    var stored = storedDate.split(" ")[0].split("-");
    var dataYM = stored[0]+"-"+parseFloat(stored[1]);

    var thisDay = parseFloat(today[2]);
    //--

    var combinedArr = new Array();
    var chkVal = 0;
    $.each(dataDoc.Usage,function(index,item){
            chkVal += parseFloat(item.up) + parseFloat(item.down);
            combinedArr.push(parseFloat(item.total));
    });


    var navArr = dataDoc.navigation.split(",");

    // show date
    $("#datetxt").html(thisDate);

    // create/show navigation
    var navButtons = "";
    // previous
    if (navArr[0] == 1)
    { 
        // active
        navButtons += '<a href="javascript://" onclick="changeMonth(\'prev\');" class="graphnav" style="background:url(\'modules/servers/axxessReseller/assets/img/graphnav_bg.png\') 0 0;" title="Previous Month"></a>';
    } 
    else if (navArr[0] == 0) 
    {
        //disabled
        navButtons += '<div class="graphnav" style="background:url(\'modules/servers/axxessReseller/assets/img/graphnav_bg.png\') -21px 0;"></div>';
    }
    // next
    if (navArr[1] == 1) 
    { 
        // active
        navButtons += '<a href="javascript://" onclick="changeMonth(\'next\');" class="graphnav" style="background:url(\'modules/servers/axxessReseller/assets/img/graphnav_bg.png\') -42px 0;" title="Next Month"></a>';
    } 
    else if (navArr[1] == 0)
    { 
        //disabled
        navButtons += '<div class="graphnav" style="background:url(\'modules/servers/axxessReseller/assets/img/graphnav_bg.png\') -63px 0;"></div>';
    }
    
    $("#graphnavdiv").html(navButtons);

    // no data
    if (chkVal == 0) 
    {
        if (graphId == 0) 
        {
            var graphTxt = "Daily";
        }
        else if (graphId == 1) 
        {
            var graphTxt = "Cumulative";		
        }
        
        //$("#nodatatxt").html("No "+graphTxt+" Data Available for "+thisDate);
        $("#nodatatxt").html("No current data available for "+thisDate);
        $("#nodata").show();
        return;
    }
    
    $("#nodata").hide();


    // create/show csv link
    //var csvDate = thisYear+"-"+(findMonth(thisMonth)+1)+"-01";
    //var sessionId = "";
    //var axsId = ""

    var csvUrl = "calls/internalaction_usagedownload.php?username="+username+"&year="+thisYear+"&month="+parseFloat(findMonth(thisMonth)+1);
    $("#csvdiv").html('<a href="'+csvUrl+'">Download CSV File</a>');

    // show totals
    showTotals(dataDoc.TotalUp,dataDoc.TotalDown,dataDoc.Total);

    // Show Size Labels
    if (graphId == 0)
    { 
        // daily
        largestVal = largestValue(combinedArr);
    } 
    else if (graphId == 1)
    {
        //cumulative
        totalUsed = parseFloat(dataDoc.Total);
        largestVal = parseFloat(totalUsed);

        var currentUpScale = 0;
        var currentDownScale = 0;

        var currentUpTotal = 0;
        var currentDownTotal = 0;

    }
    
    buildSizeLabel(largestVal);				

    //-----------------------------------------------


    $.each(dataDoc.Usage,function(index,item)
    {
        if (graphId == 0)
        { 
            // daily

            var dayAllTotal = parseFloat(item.total);
            var dayUpTotal = parseFloat(item.up);
            var dayDownTotal = parseFloat(item.down);

            var graphHeight = 161;
            var dayAllScale = parseInt(graphHeight * parseFloat(dayAllTotal / mbCeil));
            var dayUpScale = parseInt(graphHeight * parseFloat(dayUpTotal / mbCeil));
            var dayDownScale = parseInt(graphHeight * parseFloat(dayDownTotal / mbCeil));
            var graphDuration = 3000;


            if (todayYM == dataYM && index > thisDay) 
            { 
                // dont animate graph in future
                return;
            }


            if (dayAllTotal != 0) 
            { 
                //only animate if value

                // all - bind/unbind tooltip
                $("#bardiv_"+index).unbind('mousemove mouseleave')
                $("#bardiv_"+index).mousemove(function(e){
                        var str = "Total|"+showActualAmt(dayAllTotal);
                        showTip(str,this,e);
                });
                $("#bardiv_"+index).mouseleave(function(){
                        hideTip();
                });

                // animate all
                $("#bardiv_"+index).animate({
                height: dayAllScale
                }, graphDuration, 'linear');


                // uploads - bind/unbind tooltip
                $("#bardiv_"+index+" .barupload").unbind('mousemove mouseleave')
                $("#bardiv_"+index+" .barupload").mousemove(function(e){
                        var str = "Uploaded|"+showActualAmt(dayUpTotal);
                        e.stopPropagation();
                        showTip(str,this,e);
                });
                $("#bardiv_"+index+" .barupload").mouseleave(function(){
                        hideTip();
                });

                // animate uploads
                $("#bardiv_"+index+" .barupload").css("bottom","0px");
                $("#bardiv_"+index+" .barupload").css("width","6px");
                $("#bardiv_"+index+" .barupload").animate({
                height: dayUpScale
                }, graphDuration, 'linear');


                // downloads - bind/unbind tooltip
                $("#bardiv_"+index+" .bardownload").unbind('mousemove mouseleave')
                $("#bardiv_"+index+" .bardownload").mousemove(function(e){
                        var str = "Downloaded|"+showActualAmt(dayDownTotal);
                        e.stopPropagation();
                        showTip(str,this,e);
                });
                $("#bardiv_"+index+" .bardownload").mouseleave(function(){
                        hideTip();
                });

                // animate downloads
                $("#bardiv_"+index+" .bardownload").css("width","6px");
                $("#bardiv_"+index+" .bardownload").animate({
                height: dayDownScale
                },graphDuration, 'linear');

            }
        }
        else if (graphId == 1) 
        { 
            //cumulative

            var dayAllTotal = parseFloat(item.total);
            var dayUpTotal = parseFloat(item.up);
            var dayDownTotal = parseFloat(item.down);

            var graphHeight = 161;

            currentUpScale += parseInt(graphHeight * parseFloat(dayUpTotal / mbCeil));
            currentDownScale += parseInt(graphHeight * parseFloat(dayDownTotal / mbCeil));

            currentUpTotal += dayUpTotal;
            currentDownTotal += dayDownTotal;

            var nowUpTotal = currentUpTotal;
            var nowDownTotal = currentDownTotal;

            var graphDuration = 1000;


            if (todayYM == dataYM && index > thisDay)
            { 
                // dont animate graph in future
                return;
            }

            // all - unbind tooltip
            $("#bardiv_"+index).unbind('mousemove mouseleave')

            // downloads - bind/unbind tooltip
            $("#bardiv_"+index+" .bardownload").unbind('mousemove mouseleave');
            $("#bardiv_"+index+" .bardownload").mousemove(function(e)
            {
                var str = "Downloaded|"+showActualAmt(nowDownTotal);
                showTip(str,this,e);
            });
            
            $("#bardiv_"+index+" .bardownload").mouseleave(function()
            {
                hideTip();
            });

            // animate downloads
            $("#bardiv_"+index+" .bardownload").css("width","12px");
            $("#bardiv_"+index+" .bardownload").animate({
            height: currentDownScale
            },graphDuration, 'linear', function() 
            {
                $(this).prev().unbind('mousemove mouseleave')

                // uploads - bind/unbind tooltip
                $(this).prev().unbind('mousemove mouseleave')
                $(this).prev().mousemove(function(e){
                        var str = "Uploaded|"+showActualAmt(nowUpTotal);
                        showTip(str,this,e);
                });
                $(this).prev().mouseleave(function(){
                        hideTip(this);
                });

                // animate uploads
                $(this).prev().css("bottom",$(this).css("height"));
                $(this).prev().css("width","12px");
                $(this).prev().animate({
                        height: currentUpScale
                }, graphDuration, 'linear');

            });				  

        }

        // dont show empty data past current date
        //if (!checkDate(index, thisDateArr )) {
        //	return;
        //}

        // Show Date Labels
        $("#botlabel_" + index).html(index);

        var tempDateObj = new Date(thisYear, findMonth(thisMonth), 1);
        tempDateObj.setDate(index);

        $("#botlabeldays_" + index).html(showDayAbbr(tempDateObj.getDay()));

    });


 }
			

function findMonth(month)
{
    monthArr = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    
    for (var i = 0; i<monthArr.length; i++) 
    {
	if (month == monthArr[i]) 
        {
            return i;
	}
    }
}
    
        
function showDayAbbr(val) 
{
    var dayArr = new Array('S','M','T','W','T','F','S');
    return dayArr[val];
}


function largestValue(arr)
{
    // get largest number in array
    var largeVal = 0;
    for (var i = 0; i<arr.length; i++)
    {
	if (parseFloat(arr[i]) > parseFloat(largeVal)) 
        {
            largeVal = arr[i];
        }
    }
    
    return largeVal;
}

function getOffsetTotal(arr,index)
{
    var mainTotal = 0;
    for (var i = 0; i < index; i++)
    {
        mainTotal += parseFloat(arr[i]);
    }
    
    return mainTotal;
}
                        
function showTotals(totalUploaded,totalDownloaded,totalBandwidth)
{

    $("#total_used").html(showActualAmt(totalBandwidth));
    $("#total_downloaded").html(showActualAmt(totalDownloaded));
    $("#total_uploaded").html(showActualAmt(totalUploaded));
				
    $("#total_used").stop(true, true).cyclicFade({
            repeat: 2,
            params: [
                        {fadeout:100, stayout:200, opout:0, fadein:100, stayin:200, opin:1}
                    ]
            });
				
    $("#total_downloaded").stop(true, true).cyclicFade({
                                                        repeat: 2,
                                                        params: [
                                                                    {fadeout:100, stayout:200, opout:0, fadein:100, stayin:200, opin:1}
                                                                ]
                                                        });
				
    $("#total_uploaded").stop(true, true).cyclicFade({
				repeat: 2,
				params: [
                                            {fadeout:100, stayout:200, opout:0, fadein:100, stayin:200, opin:1}
                                        ]
				});
}


                        
function showActualAmt(mb) 
{

    if ( parseFloat(mb) < 1024 ) 
    {
        return parseFloat(mb).toFixed(2)+'<span class="amtlabel">MB</span>';
    }
    else if ( parseFloat(mb) >= 1024 && parseFloat(mb) < 1048576)
    {
        return parseFloat(mb / 1024).toFixed(2)+'<span class="amtlabel">GB</span>';
    }
    else if ( parseFloat(mb) >= 1048576 ) 
    { 
        return parseFloat(mb / 1048576).toFixed(2)+'<span class="amtlabel">TB</span>';
    }

}
                        
function buildSizeLabel(largestVal) 
{
    // CREATING CEILING LABEL + INCREMENT VALUE
    var isAmtLabel = "MB";

    var indexFloor = -1;
    var indexCeil = 0;

    for (var i=0; i < 16; i++) 
    { 
        //500000 mb [increase loop value for > amt]

        if (indexFloor == -1) 
        {
            indexFloor = 0;
            indexCeil = 1;
        }
        else
        {
            indexFloor = indexCeil;

            if (indexFloor.toString().indexOf("1") != -1 && indexFloor.toString().indexOf("5") == -1) 
            {
                indexCeil = parseInt(indexFloor * 5);	
            }
            else
            {
                indexCeil = parseInt(indexFloor * 2);
            }

        }


        if (largestVal > indexFloor && largestVal <= indexCeil) 
        {
            // create ceiling value + increment

            if (indexCeil <= 1000)
            {
                ceilVal = indexCeil;
            }
            else if (indexCeil > 1000 && indexCeil <= 1000000) 
            {
                ceilVal = (indexCeil / 1000);
            }
            else if (indexCeil > 1000000)
            {
                ceilVal = (indexCeil / 1000 / 1000);
            }

            var increment = ceilVal / 5;

        }

    }

    var thisVal = ceilVal;

    if (largestVal <= 1000) 
    {
        isAmtLabel = "MB";
        mbCeil = ceilVal;
    } 
    else if (largestVal > 1000 && largestVal <= 1000000) 
    {
        isAmtLabel = "GB";
        mbCeil = ceilVal * 1024;
    }
    else if (largestVal > 1000000) 
    {
        isAmtLabel = "TB";
        mbCeil = ceilVal * 1048576;
    }	

    // CREATE GIG VALUES
    for (var i = 0; i<6; i++) 
    {
        $('#leftlabel_'+i).html(parseFloat(thisVal)+'<span class="amtlabel">'+isAmtLabel+'</span>');
        thisVal = parseFloat(thisVal - increment).toFixed(2);
    }

}

function clearGraph()
{
    // clear csv link
    $("#csvdiv").html("");

    // clear navigation
    $("#graphnavdiv").html("");

    // clear totals
    $("#total_used").html("");
    $("#total_downloaded").html("");
    $("#total_uploaded").html("");

    // clear date
    $("#datetxt").html("");

    // clear size labels
    $(".leftlabel").html("");

    var dateI = 0;
    $.each(new Array(31), function()
    {
        dateI++;

        // stop all graphs
        $("#bardiv_"+dateI).stop();
        $("#bardiv_"+dateI+" .barupload").stop();
	$("#bardiv_"+dateI+" .bardownload").stop();

	// clear all graphs
        $("#bardiv_"+dateI).css("height","0px");
        $("#bardiv_"+dateI+" .barupload").css("height","0px");
        $("#bardiv_"+dateI+" .bardownload").css("height","0px");

        $("#bardiv_"+dateI).css("overflow","visible");
        $("#bardiv_"+dateI+" .barupload").css("overflow","visible");
        $("#bardiv_"+dateI+" .bardownload").css("overflow","visible");

        // clear all labels
        $("#botlabel_" + dateI).html("");
        $("#botlabeldays_" + dateI).html("");

        });

        // clear total blink
        $("#total_used").stop();
        $("#total_downloaded").stop();
        $("#total_uploaded").stop();

}

function changeMonth(dir) 
{

    var thisDate = $("#datetxt").html();
    var thisDateArr = thisDate.split(" ");
    var thisMonth = thisDateArr[0];
    var thisYear = thisDateArr[1];

    if(dir == "prev")
    {
        prevObj = new Date (thisYear, findMonth(thisMonth), 1); 
        prevObj.setMonth(prevObj.getMonth()-1);
        var newDate = prevObj.getFullYear() +"-"+parseInt(prevObj.getMonth()+1) +"-01";
    }
    else if (dir == "next") 
    {
        nextObj = new Date (thisYear, findMonth(thisMonth), 1);
        nextObj.setMonth(nextObj.getMonth()+1);
        var newDate = nextObj.getFullYear() +"-"+parseInt(nextObj.getMonth()+1) +"-01";
    }

    storedDate = newDate;
    callGraph(newDate);
}


function showTip(str,obj,e) 
{
    var strArr = str.split("|");
    var pos = 'top';
    
    $("#tipheader").html(strArr[0]);
    $("#tiptxt").html(strArr[1]);

    //alert(strArr[0]);

    if(strArr[0]=='Uploaded')
    {
        $(obj).parent().tooltip('hide');
        //pos = 'left';
    }
    else if(strArr[0]=='Downloaded')
    {
        $(obj).parent().tooltip('hide');
        //pos = 'right';
    }
    $(obj).tooltip({
                    title: '<div id="tip1"><div id="tipheader1">'+strArr[0]+'</div><div id="tiptxt">'+strArr[1]+'</div></div>',
                    html: true,
                    placement: pos,
                    });
}

function hideTip(obj) 
{
    $(obj).tooltip('hide');
}

</script>


{/literal}
<div class="row" id="usage-graph">
    <div id="tooltip" style="display:none;"></div>
        <div id="tip">
            <div id="tipheader"></div>
            <div id="tiptxt"></div>
        </div>
        <input id="usernamedata" type="hidden" value="{$username}">
    <!--tab-->
    <div id="graph">
        <ul id="tabs" style="margin-left:0px;">
            <li class="tabselect"><a href="javascript://" class="tabs-1">Daily Graph</a></li>
            <li><a href="javascript://" class="tabs-2">Cumulative Graph</a></li>
            <li><a href="javascript://" class="tabs-3">Daily Usage</a></li>
            <li><a href="javascript://" class="tabs-4">Session Data</a></li>
        </ul>
    </div>
    
    <div style="clear:left;"></div>
    
    <p style="margin-top:10px;"></p>
    
    <!---tab block-->
    
    <!---block 1,2-->
    <div id="tabs-1-div" onselectstart="return false" style="display: block;">
        <div style="width:100%;border:1px solid #B9D9EC;background-color:#fff;">
            <div style="width:100%;height:32px;background-color:#E6F2F9;line-height:32px;border-bottom:1px solid #B9D9EC;">
                <div id="datetxt">Jun 2020</div>
                <div id="graphnavdiv">
                    <a href="javascript://" onclick="changeMonth('prev');" class="graphnav" style="background:url('modules/servers/axxessReseller/assets/img/graphnav_bg.png') 0 0;" title="Previous Month"></a>
                    <div class="graphnav" style="background:url('modules/servers/axxessReseller/assets/img/graphnav_bg.png') -63px 0;"></div>
                </div>
            </div>
            <div style="width:95%;height:240px;margin: 0px 15px;position:relative;">
                <div id="nodata" style="display: none;">
                    <div id="nodatatxt"></div>
                </div>
                <div style="float:left;width:40px;height:192px;margin-right:10px;">
                    <div class="leftlabeldiv">
                        <div id="leftlabel_0" class="leftlabel">50<span class="amtlabel">MB</span></div>
                    </div>
                    <div class="leftlabeldiv">
                        <div id="leftlabel_1" class="leftlabel">40<span class="amtlabel">MB</span></div>
                    </div>
                    <div class="leftlabeldiv">
                        <div id="leftlabel_2" class="leftlabel">30<span class="amtlabel">MB</span></div>
                    </div>
                    <div class="leftlabeldiv">
                        <div id="leftlabel_3" class="leftlabel">20<span class="amtlabel">MB</span></div>
                    </div>
                    <div class="leftlabeldiv">
                        <div id="leftlabel_4" class="leftlabel">10<span class="amtlabel">MB</span></div>
                    </div>
                    <div class="leftlabeldiv">
                        <div id="leftlabel_5" class="leftlabel">0<span class="amtlabel">MB</span></div>
                    </div>
                </div>
                <div style="float:left;width:85%;overflow:hidden;">
                    <div style="margin-top:32px;height:161px;background:url('modules/servers/axxessReseller/assets/img/chart_bg_update.png') repeat-x;position:relative;">
                        
                        <div id="bardiv_1" class="bardiv" style="left: 6px; height: 19px; overflow: visible;">
                            <div class="barupload" style="height: 9px; overflow: visible; bottom: 0px; width: 6px;"></div>
                            <div class="bardownload" style="height: 9px; overflow: visible; width: 6px;"></div>
                        </div>
                        <div id="bardiv_2" class="bardiv" style="left: 26px; height: 90px; overflow: visible;">
                            <div class="barupload" style="height: 16px; overflow: visible; bottom: 0px; width: 6px;"></div>
                            <div class="bardownload" style="height: 74px; overflow: visible; width: 6px;"></div>
                        </div>
                        <div id="bardiv_3" class="bardiv" style="left: 46px; height: 148px; overflow: visible;">
                            <div class="barupload" style="height: 22px; overflow: visible; bottom: 0px; width: 6px;"></div>
                            <div class="bardownload" style="height: 122px; overflow: visible; width: 6px;"></div>
                        </div>
                        <div id="bardiv_4" class="bardiv" style="left: 66px; height: 48px; overflow: visible;">
                            <div class="barupload" style="height: 6px; overflow: visible; bottom: 0px; width: 6px;"></div>
                            <div class="bardownload" style="height: 38px; overflow: visible; width: 6px;"></div>
                        </div>
                        <div id="bardiv_5" class="bardiv" style="left: 86px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_6" class="bardiv" style="left: 106px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_7" class="bardiv" style="left: 126px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_8" class="bardiv" style="left: 146px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_9" class="bardiv" style="left: 166px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_10" class="bardiv" style="left: 186px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_11" class="bardiv" style="left: 206px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_12" class="bardiv" style="left: 226px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_13" class="bardiv" style="left: 246px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_14" class="bardiv" style="left: 266px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_15" class="bardiv" style="left: 286px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_16" class="bardiv" style="left: 306px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_17" class="bardiv" style="left: 326px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_18" class="bardiv" style="left: 346px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_19" class="bardiv" style="left: 366px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_20" class="bardiv" style="left: 386px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_21" class="bardiv" style="left: 406px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_22" class="bardiv" style="left: 426px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_23" class="bardiv" style="left: 446px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_24" class="bardiv" style="left: 466px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_25" class="bardiv" style="left: 486px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_26" class="bardiv" style="left: 506px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_27" class="bardiv" style="left: 526px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_28" class="bardiv" style="left: 546px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_29" class="bardiv" style="left: 566px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_30" class="bardiv" style="left: 586px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                        <div id="bardiv_31" class="bardiv" style="left: 606px; height: 0px; overflow: visible;">
                            <div class="barupload" style="height: 0px; overflow: visible;"></div>
                            <div class="bardownload" style="height: 0px; overflow: visible;"></div>
                        </div>
                    </div>
                    <div style="margin-top:10px;">
                        <div class="botlabeldiv" style="margin-left:6px;"><span id="botlabel_1">1</span><br><span id="botlabeldays_1" class="botlabeldays">M</span></div>
                        <div class="botlabeldiv"><span id="botlabel_2">2</span><br><span id="botlabeldays_2" class="botlabeldays">T</span></div>
                        <div class="botlabeldiv"><span id="botlabel_3">3</span><br><span id="botlabeldays_3" class="botlabeldays">W</span></div>
                        <div class="botlabeldiv"><span id="botlabel_4">4</span><br><span id="botlabeldays_4" class="botlabeldays">T</span></div>
                        <div class="botlabeldiv"><span id="botlabel_5"></span><br><span id="botlabeldays_5" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_6"></span><br><span id="botlabeldays_6" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_7"></span><br><span id="botlabeldays_7" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_8"></span><br><span id="botlabeldays_8" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_9"></span><br><span id="botlabeldays_9" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_10"></span><br><span id="botlabeldays_10" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_11"></span><br><span id="botlabeldays_11" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_12"></span><br><span id="botlabeldays_12" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_13"></span><br><span id="botlabeldays_13" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_14"></span><br><span id="botlabeldays_14" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_15"></span><br><span id="botlabeldays_15" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_16"></span><br><span id="botlabeldays_16" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_17"></span><br><span id="botlabeldays_17" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_18"></span><br><span id="botlabeldays_18" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_19"></span><br><span id="botlabeldays_19" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_20"></span><br><span id="botlabeldays_20" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_21"></span><br><span id="botlabeldays_21" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_22"></span><br><span id="botlabeldays_22" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_23"></span><br><span id="botlabeldays_23" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_24"></span><br><span id="botlabeldays_24" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_25"></span><br><span id="botlabeldays_25" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_26"></span><br><span id="botlabeldays_26" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_27"></span><br><span id="botlabeldays_27" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_28"></span><br><span id="botlabeldays_28" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_29"></span><br><span id="botlabeldays_29" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_30"></span><br><span id="botlabeldays_30" class="botlabeldays"></span></div>
                        <div class="botlabeldiv"><span id="botlabel_31"></span><br><span id="botlabeldays_31" class="botlabeldays"></span></div>
                    </div>
                </div>
            </div>
            
            
            <div style="clear:both;"></div>
            
            <div style="width:100%;height:60px;background-color:#E6F2F9;border-top:1px solid #B9D9EC;padding-top:10px;margin-top:10px;padding-bottom:10px;">
                <div class="totaldiv" style="width:140px;">
                    <div class="totallabel">Total Uploaded:<br><span id="total_uploaded" style="opacity: 1;">19.29<span class="amtlabel">MB</span></span></div>
                    <div class="totalbox" style="background-color:#f60;"></div>
                </div>
                <div class="totaldiv" style="width:160px;">
                    <div class="totallabel">Total Downloaded:<br><span id="total_downloaded" style="opacity: 1;">78.00<span class="amtlabel">MB</span></span></div>
                    <div class="totalbox" style="background-color:#0F5C88;"></div>
                </div>
                <div class="totaldiv" style="width:110px;">
                    <div class="totallabel">Total Used:<br><span id="total_used" style="opacity: 1;">97.29<span class="amtlabel">MB</span></span></div>
                    <div class="totalbox" style="background-color:#b6b6b6;"></div>
                </div>
                <div id="csvdiv"><a href="https://rcp.axxess.co.za/calls/internalaction_usagedownload.php?username={$username}&amp;year={$currYear}&amp;month={$currMon}">Download CSV File</a></div>
            </div>
        </div>
        <p></p>
        <div style="font-size:11px;color:#c00;padding-left:10px;">Please note that the above data does not include any active sessions.<br>Data is only updated after your session ends. <br>
        </div>
    </div>

    <!---block 3-->
    

    <div id="tabs-3-div" style="display: none; opacity: 100; height: auto;">
        <div style="width:100%;border:1px solid #B9D9EC;background-color:#fff;">
            <div style="width:100%;height:32px;background-color:#E6F2F9;line-height:32px;border-bottom:1px solid #B9D9EC;">
                <div id="datetxt2">Jun 2020</div>
                <div id="graphnavdiv2">
                    <a href="javascript://" onclick="changeMonth2('prev');" class="graphnav" style="background:url('modules/servers/axxessReseller/assets/img/graphnav_bg.png') 0 0;" title="Previous Month"></a>
                    <div class="graphnav" style="background:url('modules/servers/axxessReseller/assets/img/graphnav_bg.png') -63px 0;"></div>
                </div>
            </div>
            <div style="width:100%;min-height:240px;margin: 15px;position:relative;">
                <div id="nodata2" style="display: none;">
                    <div id="nodatatxt2"></div>
                </div>
                <div id="axtablediv" style="display: block;">
                    <div class="fht-table-wrapper axTable" style="width: 97%; height: auto;">
                        <div class="fht-thead" style="display:none;">
                            
                            <table class="fht-table axtable" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th class="bold" style="width:110px;font-size:11px;">
                                            Date Online
                                            <div class="fht-cell" style="width: 111px;"></div>
                                        </th>
                                        <th class="bold" style="font-size:11px;">
                                            Uploaded(MB)
                                            <div class="fht-cell" style="width: 156px;"></div>
                                        </th>
                                        <th class="bold" style="font-size:11px;">
                                            Downloaded(MB)
                                            <div class="fht-cell" style="width: 185px;"></div>
                                        </th>
                                        <th class="bold" style="font-size:11px;">
                                            Total Used(MB)
                                            <div class="fht-cell" style="width: 166px;"></div>
                                        </th>
                                        <th class="bold" style="border-right: 0px none; font-size: 11px; padding-right: 22px;">
                                            Cumulative(MB)
                                            <div class="fht-cell" style="width: 90px;"></div>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        
                        <div class="fht-tbody table-responsive" style="height: auto;">
                            <table class="axtable fht-table fht-table-init" id="xmltable" style="width: 100%; /*margin-top: -27px;*/" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th class="bold" style="width:110px;font-size:11px;">
                                            Date Online
                                            <div class="fht-cell" style="width: 111px;"></div>
                                        </th>
                                        <th class="bold" style="font-size:11px;">
                                            Uploaded(MB)
                                            <div class="fht-cell" style="width: 156px;"></div>
                                        </th>
                                        <th class="bold" style="font-size:11px;">
                                            Downloaded(MB)
                                            <div class="fht-cell" style="width: 185px;"></div>
                                        </th>
                                        <th class="bold" style="font-size:11px;">
                                            Total Used(MB)
                                            <div class="fht-cell" style="width: 166px;"></div>
                                        </th>
                                        <th class="bold" style="border-right:0px;font-size:11px;">
                                            Cumulative(MB)
                                            <div class="fht-cell" style="width: 90px;"></div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="tbody">
                                    <tr class="dummyrow" style="display: none;">
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <!--
                                    <tr class="even">
                                        <td id="dcell1">1 Jun 2020</td>
                                        <td id="ocell1" align="right">3.00</td>
                                        <td id="icell1" align="right">3.00</td>
                                        <td id="tcell1" align="right">6.00</td>
                                        <td id="ccell1" style="width: 100%;" align="right">6.00</td>
                                    </tr>
                                    <tr class="odd">
                                        <td id="dcell2">2 Jun 2020</td>
                                        <td id="ocell2" align="right">5.00</td>
                                        <td id="icell2" align="right">23.00</td>
                                        <td id="tcell2" align="right">28.00</td>
                                        <td id="ccell2" style="width: 100%;" align="right">34.00</td>
                                    </tr>
                                    <tr class="even">
                                        <td id="dcell3">3 Jun 2020</td>
                                        <td id="ocell3" align="right">7.00</td>
                                        <td id="icell3" align="right">38.00</td>
                                        <td id="tcell3" align="right">46.00</td>
                                        <td id="ccell3" style="width: 100%;" align="right">80.00</td>
                                    </tr>
                                    <tr class="odd">
                                        <td id="dcell4">4 Jun 2020</td>
                                        <td id="ocell4" align="right">2.00</td>
                                        <td id="icell4" align="right">12.00</td>
                                        <td id="tcell4" align="right">15.00</td>
                                        <td id="ccell4" style="width: 100%;" align="right">95.00</td>
                                    </tr>
                                    -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p></p>
        <div style="font-size:11px;color:#c00;padding-left:10px;">
            Please note that the above data does not include any active sessions.<br>Data is only updated after your session ends.<br>
        </div>
    </div>


    <!---block 4-->
    

    <div id="tabs-4-div" style="display: none;">
        The session data for this month can be downloaded here.
        <p>
            <a href="https://rcp.axxess.co.za/calls/internalaction_sessiondata.php?username={$username}&amp;action=last" id="session-1" target="_blank"><img src="modules/servers/axxessReseller/assets/img/csv.gif" alt="" width="11" height="11" border="0"> &nbsp; Download Session data for last month</a><br>
            <a href="https://rcp.axxess.co.za/calls/internalaction_sessiondata.php?username={$username}&amp;action=this" id="session-2" target="_blank"><img src="modules/servers/axxessReseller/assets/img/csv.gif" alt="" width="11" height="11" border="0"> &nbsp; Download Session data for this month</a>
        </p>
        <p style="margin-top:30px;">
        </p>
        <div style="color:#666;font-style:italic;font-size:11px;">
            Session Details are not an accurate representation of total usage for any period.<br>
            Session details may contain usage from the previous month and usage on sessions currently running.
        </div>
    </div>


    <!---ends tab block-->
</div>