<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8">
            <title>Pegasus Data Reports</title>

            <!-- Styles -->

                    <style>
                        h3 {
                                -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
                                -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
                                box-shadow:inset 0px 1px 0px 0px #ffffff;
                                background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
                                background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
                                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
                                background-color:#ededed;
                                -webkit-border-top-left-radius:0px;
                                -moz-border-radius-topleft:0px;
                                border-top-left-radius:0px;
                                -webkit-border-top-right-radius:0px;
                                -moz-border-radius-topright:0px;
                                border-top-right-radius:0px;
                                -webkit-border-bottom-right-radius:0px;
                                -moz-border-radius-bottomright:0px;
                                border-bottom-right-radius:0px;
                                -webkit-border-bottom-left-radius:0px;
                                -moz-border-radius-bottomleft:0px;
                                border-bottom-left-radius:0px;
                                text-indent:0;
                                border:1px solid #dcdcdc;
                                display:inline-block;
                                color:#777777;
                                font-family:Arial;
                                font-size:18px;
                                font-weight:bold;
                                font-style:normal;
                                height:30px;
                                line-height:30px;
                                width:200px;
                                text-decoration:none;
                                text-align:center;
                                text-shadow:1px 1px 0px #ffffff;
                        }
                        .button:hover {
                                background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
                                background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
                                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
                                background-color:#dfdfdf;
                        }.button:active {
                                position:relative;
                                top:1px;
                        }
                        ul
                        {
                                list-style-type:none;
                                margin:0;
                                padding:0;
                        }

                        button {
                                -moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
                                -webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
                                box-shadow:inset 0px 1px 0px 0px #bee2f9;
                                background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
                                background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
                                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
                                background-color:#63b8ee;
                                -webkit-border-top-left-radius:20px;
                                -moz-border-radius-topleft:20px;
                                border-top-left-radius:20px;
                                -webkit-border-top-right-radius:20px;
                                -moz-border-radius-topright:20px;
                                border-top-right-radius:20px;
                                -webkit-border-bottom-right-radius:20px;
                                -moz-border-radius-bottomright:20px;
                                border-bottom-right-radius:20px;
                                -webkit-border-bottom-left-radius:20px;
                                -moz-border-radius-bottomleft:20px;
                                border-bottom-left-radius:20px;
                                text-indent:0;
                                border:1px solid #3866a3;
                                display:inline-block;
                                color:#14396a;
                                font-family:Arial;
                                font-size:12px;
                                font-weight:bold;
                                font-style:normal;
                                height:20px;
                                line-height:20px;
                                width:200px;
                                text-decoration:none;
                                text-align:center;
                                text-shadow:1px 1px 0px #7cacde;
                        }
                        .button:hover {
                                background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
                                background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
                                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
                                background-color:#468ccf;
                        }.button:active {
                                position:relative;
                                top:1px;
                        }
                        input {
                                margin-bottom:0.5em;   
                        }
                        form {
                                text-align:left;
                                display:none;
                                float:left;
                        }
                        #datareportmenu {
                                display:none;
                        }
                    </style>

                    <style type="text/css"></style>

                    <!-- Divs -->

                    <!-- Highcharts JS includes -->
                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
                    <script src="http://code.highcharts.com/highcharts.js"></script>


                    <!--JQuery includes -->
                    <link href="../../../Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet"
                    type="text/css" />
                    <script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
                    <script src="../../../Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>

                    <!-- Functions -->

 
                    <script>
                       
                            /* Variable Report Stubs */
                            var reportID;
                            var reportString;
                            var reportRows;
                            var numOfRows;
                            var rowElements;
                            var hasReportRun = 0;
                            var userList = [];
                            var dataList = [];
                            var trendList = [];
                            var dateList = [];
                            var username;
                            var timeInterval;
                            var dataType;
                            var userTitle;
                            var trendList = [];
                            var filteredList = [];
                            var seriesdata = [];
                            var seriesName;
                            //userList = ['cchen', 'bkirtman', 'ahuang', 'cmattock', 'cnoller', 'akapur', 'bioinfo', 'bwang', 'asarafraz', 'bissac'];
                            //dataList = [108, 90, 85, 81, 75, 65, 63, 62, 58, 55];
                            trendListG = [119000, 162000, 80000, 10005, 70009, 120000, 40006, 147000, 80007, 40003, 20000, 267000];
                            trendListC = [189, 112, 70, 60, 20, 40, 90, 147, 180, 140, 120, 182];
                            dateList12 = ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr'];
                            dateList6 = ['Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr'];
                            dateList3 = ['Feb', 'Mar', 'Apr'];
                            function setReportString(returnedReport){
                                reportString = returnedReport;
                            }

//                            function clearContainers(){
//                                reportID = "";
//                                reportString = "";
//                                reportRows.length = 0;
//                                numOfRows = 0;
//                                rowElements.length = 0;
//                                userList.length = 0;
//                                dataList.length = 0;
//                                trendList.length = 0;
//                                dateList.length = 0;
//                                hasReportRun = 0;
//                            }
                            /* Create Top Ten Quota Users Report. Makes a column chart with the top ten users */

                            function createTopTenQuotaUsers(){
                                    
                                    reportID = "topTenQuotaUsers";
                                    requestReport();
                                    
                                    /* Split the report into an array of rows */
                                    reportRows = reportString.split("\n");
                                    numOfRows = reportRows.length;
                                    
                                   /* clear the containers */
                                    userList.length = 0;
                                    dataList.length = 0;
                                    
                                    /* Iterate over the top 10 and put them into containers to be charted */
                                    if(numOfRows > 9){
                                        for (i = 0; i < 10; i++){
                                            rowElements = reportRows[i].split(" ");

                                            userList.push(rowElements[0]);
                                            dataList.push(parseInt(rowElements[1]));  

                                        }
                                    }
                                    
                                    /* Display the data report menu tabs*/
                                    document.getElementById('datareportmenu').style.display = "none";
                                    $(function () {
                                            $('#chartwindow').highcharts({
                                                    chart: {
                                                            type: 'column'
                                                    },
                                                    legend: {
                                                            enabled: false
                                                    },
                                                    title: {
                                                            text: 'Top Ten Quota Users'
                                                    },
                                                    xAxis: {
                                                            categories: userList
                                                    },
                                                    yAxis: {
                                                            title: {
                                                                    text: 'Space Used of Quota'
                                                            }
                                                    },
                                                    plotOptions: {
                                                            series: {
                                                                    allowPointSelect: true
                                                            }
                                                    },
                                                    series: [{
                                                            data: dataList  
                                                    }]
                                            });
                                    });
                                    
                            }	
                            

                            /* Create Top Ten Churn Users Report. Makes a column chart with the top ten churn users */
                            function createTopTenChurnUsers(){
                                   
                                    reportID = "topTenChurnUsers";
                                    requestReport();
                                    /* Split the report into an array of rows */
                                    reportRows = reportString.split("\n");
                                    numOfRows = reportRows.length;
                                    
                                   /* clear the containers */
                                    userList.length = 0;
                                    dataList.length = 0;
                                    
                                    /* Iterate over the top 10 and put them into containers to be charted */
                                    if(numOfRows > 9){
                                        for (i = 0; i < 10; i++){
                                            rowElements = reportRows[i].split(" ");

                                            userList.push(rowElements[0]);
                                            dataList.push(parseInt(rowElements[1]));  

                                        }
                                    }                                    
                                    document.getElementById('datareportmenu').style.display = "none";
                                    $(function () {
                                            $('#chartwindow').highcharts({
                                                    chart: {
                                                            type: 'column'
                                                    },
                                                    legend: {
                                                            enabled: false
                                                    },
                                                    title: {
                                                            text: 'Top Ten Churn Users'
                                                    },
                                                    xAxis: {
                                                            categories: userList
                                                    },
                                                    yAxis: {
                                                            title: {
                                                                    text: 'Churn'
                                                            }
                                                    },
                                                    plotOptions: {
                                                            column: {
                                                                    allowPointSelect: true,
                                                                    cursor: 'pointer',
                                                                    point: {
                                                                        events: {
                                                                            click: function() {
                                                                                filteredList.push(this.category);
                                                                                //alert('Username: ' + this.category);
                                                                            }
                                                                        }
                                                                    }

                                                            }
                                                    },
                                                    series: [{
                                                            data: dataList  
                                                    }]
                                            });
                                    });


                            }

                            /* Create Growth Trends Overall Report. Makes a line chart with the overall growth trends */
                            function createGrowthTrendsOverall(){
                                    
                                    document.getElementById('datareportmenu').style.display = "none";
                                    $(function () {
                                            $('#chartwindow').highcharts({
                                                    chart: {
                                                            type: 'line'
                                                    },
                                                    legend: {
                                                            enabled: false
                                                    },
                                                    title: {
                                                            text: 'Growth Trends - Overall'
                                                    },
                                                    xAxis: {
                                                            categories: dateList12
                                                    },
                                                    yAxis: {
                                                            title: {
                                                                    text: 'Usage'   
                                                            }
                                                    },
                                                    plotOptions: {
                                                            series: {
                                                                    allowPointSelect: true
                                                            }
                                                    },
                                                    series: [{
                                                            data: trendListG  
                                                    }]
                                            });
                                    });

                            }

                            /* Create Churn Trend Overall Report. Makes a line chart with the overall churn trend */
                            function createChurnTrendOverall(){
                                
                                    document.getElementById('datareportmenu').style.display = "none";
                                    $(function () {
                                            $('#chartwindow').highcharts({
                                                    chart: {
                                                            type: 'line'
                                                    },
                                                    legend: {
                                                            enabled: false
                                                    },
                                                    title: {
                                                            text: 'Growth Trends Overall'
                                                    },
                                                    xAxis: {
                                                            categories: dateList12
                                                    },
                                                    yAxis: {
                                                            title: {
                                                                    text: 'Churn' 
                                                            }
                                                    },
                                                    plotOptions: {
                                                            series: {
                                                                    allowPointSelect: true
                                                            }
                                                    },
                                                    series: [{
                                                            data: trendListC  
                                                    }]
                                            });
                                    });
                            }
                            
                    </script>
                    <script>
                        
                        
                        
                        /* Displays the Data Report in the Data Report Window */
                        function requestReport(){
                            hasReportRun = 1;

                            /*This goes to the file DataReport.php, which should echo onto the data reports window
                              the data report in the same way it's formatted*/
                              
                            $.ajax({
                                type: "GET",
                                url:'DataReport.php',
                                data: {reportID : reportID},
                                complete: function (response) {

                                    setReportString(response.responseText);
                                    $('#datareportwindow').html(response.responseText);
                                },
                                error: function () {
                                    $('#datareportwindow').html('Error!');
                                }
                            });
                           
                            return false;


                       }
                       

                    </script>
                    <script>
                       
                       function requestAnalysis(){
                            $.ajax({
                                url:'DataAnalysis.php',
                                complete: function (response) {
                                    //$('#datareportmenu').html('<a href=\"#\" onclick=\"showDataReport();\">Show Data Report</a><a href=\"#\" onclick=\"showDataAnalysis();\">Show Data Analysis</a>');
                                    $('#datareportwindow').html(response.responseText);
                                    
                                },
                                error: function () {
                                    $('#datareportwindow').html('error!');
                                }
                            });
                            return false; 
                       }
                       
                    </script>
                    <script>
                              $(function () {
                                $('form').on('submit', function (e) {
                                  $.ajax({
                                    type: 'get',
                                    url: 'CustomReport.php',
                                    
                                    data: $('form').serialize(),
                                    complete: function (response) {
                                        
                                      setReportString(response.responseText);
                                      $('#datareportwindow').html(response.responseText);
                                     
                                    }
                                  });
                                  

                                  e.preventDefault();
                                  
                                    /* Split the report into an array of rows */
                                    reportRows = reportString.split("\n");
                                    numOfRows = reportRows.length;
                                    if (numOfRows === 3){
                                        dateList = dateList3;
                                    }
                                    if (numOfRows === 6){
                                        dateList = dateList6;
                                    }
                                    if (numOfRows === 12){
                                        dateList = dateList12;
                                    }                                    
                                   /* clear the containers */
                                    trendList.length = 0;
                                    userTitle = '';
                                        for (i = 0; i < numOfRows; i++){
                                            rowElements = reportRows[i].split(" ");

                                            userTitle = rowElements[0];
                                            trendList.push(parseInt(rowElements[4]));  

                                        }
                                  document.getElementById('datareportmenu').style.display = "block";      
                                  $(function () {
                                            $('#chartwindow').highcharts({
                                                    chart: {
                                                            type: 'line'
                                                    },
                                                    legend: {
                                                            enabled: false
                                                    },
                                                    title: {
                                                            text: userTitle 
                                                    },
                                                    xAxis: {
                                                            categories: dateList
                                                    },
                                                    yAxis: {
                                                            title: {
                                                                    text: 'Usage'   
                                                            }
                                                    },
                                                    plotOptions: {
                                                            series: {
                                                                    allowPointSelect: true
                                                            }
                                                    },
                                                    series: [{
                                                            data: trendList  
                                                    }]
                                            });
                                    });
                                });
                              });
                    </script>
    </head>


    <body>

            <!-- Title -->
            <div>
                    <center><h1>Pegasus Data Reports<h1></center>
            </div>

            <!-- Title Separator -->
            <HR>

            <!-- Left Menu -->
            <div id="menu" style="float:left;">
                    <ul>	
                            <p>
                                    <li><h3>Predefined Reports</h3></li>
                                    <li><button onclick="createTopTenQuotaUsers()">Top 10 Quota Users</button></li>
                                    <li><button onclick="createTopTenChurnUsers()">Top 10 Churn Users</button></li>
                                    <li><button onclick="createGrowthTrendsOverall()">Growth Trends - Overall</button></li>
                                    <li><button onclick="createChurnTrendOverall()">Churn Trend - Overall</button></li>
                                    <li><h3>Filters</h3></li>
                                    <!--<li><button onclick="filterByGroup()">Filter By Filesystem</button></li>-->
                                    <li><button onclick="filterByUser()">Filter By User</button></li>
                                    <li><h3>Create Custom Report</h3></li>
                                    <li><button type="button" id="f1">Custom Report</button></li>
                                    

                            </p>
                    </ul>
                                    <form name="myForm" id="order">
                                    <p>Username:<br><input type="text" name="username" placeholder="Enter the username" required="required" autocomplete="on" /><br>
                                    Data:<br><select name="data">
                                    <option value="growth">Growth Trend</option>
                                    <option value="churn">Churn Trend</option>
                                    </select><br>
                                        Trend Interval<br>
                                        3 mth <input type="radio" id = "time" name="time" value="3m" checked="checked"/> 
                                        6 mth <input type="radio" id = "time" name="time" value="6m" /> 
                                        12 mth <input type ="radio" id = "time" name="time" value = "12m" /><br>
                                    <br>
                                        <input name = "submit" type="submit" id="submit" value="Submit" onClick="return checkForm()"/></p>
                                    </form>
            </div>
            <script>
                        function checkForm(){
                            var x = document.myForm.username.value;
                            if ((x !== 'afabregat') && (x !== 'afarooq') && (x !== 'ahuang')/* && (x !== 'akapur') && (x !== 'amorales') && (x !== 'amyers') && (x !== 'andres') && (x !== 'asarafraz') && (x !== 'bannane') && (x !== 'bchen')*/){
                            //if (document.myForm.username.value !== ('afabregat' || 'afarooq' || 'ahuang' || 'akapur' || 'amorales' || 'amyers' || 'andres' || 'asarafraz' || 'bannane' || 'bchen')){
                                alert("That user does not exist!");
                                return false;
                            }else{
                                return true;
                            }
                        }
                            
                        function func(a) {
                            var el;
                            if(a === 1) {
                                el = document.getElementById("order");
                            }
                            el.style.display = el.style.display === "block" ? "none" : "block";
                        }


                        document.getElementById('f1').onclick = function () {
                            func(1);
                        };
             </script>

             <script>
             function filterByUser(){
                 //JSON.stringify(filteredList);
                $.ajax({
                    type: "GET",
                    url:'FilteredReport.php',
                    data: {jsondata : JSON.stringify(filteredList)},
                    complete: function (response) {

                        setReportString(response.responseText);
                        $('#datareportwindow').html(response.responseText);
                        x();
                    },
                    error: function () {
                        $('#datareportwindow').html('Error!');
                    }
                });
            }
                function x(){
                    
                
                //$('#chartwindow').highcharts().destroy();
                var reportRows = reportString.split("\n");
                numOfRows = reportRows.length - 1;
//                var filteredDataSeries = "[";
//                
//                for (i = 0; i < numOfRows; i++){
//                    rowElements = reportRows[i].split(" ");
//                    
//                    filteredDataSeries = filteredDataSeries + "{name: \'" + rowElements[0] + "\', data: [";
//                    
////                    for (j = 1; j < 13; j++){
////                        filteredDataSeries = filteredDataSeries + parseInt(rowElements[j]) + ", ";
////                    }
////                    filteredDataSeries = filteredDataSeries + "]}, ";
//                      
//
//                }  
//                
//                filteredDataSeries = filteredDataSeries + "]";
             
             $(function () {
                        $('#chartwindow').highcharts({
                                chart: {
                                        type: 'line'
                                },
                                legend: {
                                        enabled: true
                                },
                                title: {
                                        text: 'Growth Trends By User'
                                },
                                xAxis: {
                                        categories: dateList12
                                },
                                yAxis: {
                                        title: {
                                                text: 'Quota Used' 
                                        }
                                },
                                plotOptions: {
                                        series: {
                                                allowPointSelect: false
                                        }
                                },
                                series: []
                        });
                });
                chart = $('#chartwindow').highcharts();
             for (i = 0; i < numOfRows; i++){
                    var seriesdata = [];
                    var seriesName = '';
                    rowElements = reportRows[i].split(" ");
                    
//                    filteredDataSeries = filteredDataSeries + "{name: \'" + rowElements[0] + "\', data: [";
                      seriesName = rowElements[0];
                      //t = 0;
                    for (j = 1; j < 13; j++){
//                        filteredDataSeries = filteredDataSeries + parseInt(rowElements[j]) + ", ";
                      var data = rowElements[j];
                      seriesdata.push(parseInt(rowElements[j]));
                      //t++;
                    }
                    
                    
                    
                    chart.addSeries({
                        name: seriesName,
                        data: seriesdata
                        //name: 'afabregat',
                        //data: [119000, 162000, 80000, 10005, 70009, 120000, 40006, 147000, 80007, 40003, 20000, 267000]
                        
                    });
                    //filteredDataSeries = filteredDataSeries + "]}, ";
                      

                }  
             
         }
             </script>
            <!--Chart Window -->
            <div id="chartwindow" style="width: 1000px; float:left"></div>

            <!-- Tabular Data Reports Separator -->
            <div>
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />	
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />                 
                    <HR>
            </div>

             <div><center><h2>Tabular Data Reports</h2></center></div>
             
             <!-- Data Reports Window menu -->
             <div id ="datareportmenu">
                 
              
              
              
              <!--<a href="#" onclick="showData();">Show Data Report</a>-->
              <a href="#" onclick="requestAnalysis();">Show Data Analysis</a>
              
              
             </div>

            <div id ="datareportwindow"></div>







    </body>
</html>


