<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Forums Statistics"
      description="Display the global and weekly statistics of the Forums">
    <Require feature="dynamic-height"/>
    <Locale messages="locale/default.xml" />
    <Locale lang="fr" messages="locale/fr.xml" />
    <Locale lang="it" messages="locale/it.xml" />
</ModulePrefs>
<Content type="html">
<![CDATA[   
 <head>
      <title>Forums Statistics</title>
      <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css" />
      <link rel="stylesheet" type="text/css" href="/exo-gadget-resources/skin/exo-gadget/gadget-common.css" />
      <link rel="stylesheet" type="text/css" href="/exo-gadget-resources/script/jquery/plugins/jqplot/1.0.0/jquery.jqplot.min.css" />
      <link type="text/css" rel="stylesheet" href="skin/pagination.css" />
      <link type="text/css" rel="stylesheet" href="skin/ForumsStatistic.css" />

      <script language="javascript" type="text/javascript" src="/exo-gadget-resources/script/jquery/1.6.2/jquery.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
      <script type="text/javascript" src="script/date.format.js"></script>
      <script language="javascript" type="text/javascript" src="/exo-gadget-resources/script/jquery/plugins/jqplot/1.0.0/jquery.jqplot.min.js"></script>
      <script language="javascript" type="text/javascript" src="/exo-gadget-resources/script/jquery/plugins/jqplot/1.0.0/plugins/jqplot.dateAxisRenderer.min.js"></script>

      <script type="text/javascript" src="script/jquery.pagination.js"></script>
      
      <script type="text/javascript">
        
             var statisticList = new Array();
             var pageIndex=1;
       
             /**
             * Callback function that displays the content. 
             */
             function pageselectCallback(page_index, jq){
                // Get number of elements per pagionation page from form
                var items_per_page = 5;
                var max_elem = Math.min((page_index+1) * items_per_page, statisticList.length);
                var newcontent = '';
                var items = [];
                var chartData=[]; //data for draw chart
               
                pageIndex = page_index;
                // Iterate through a selection of the content and build an HTML string
             
                for(var i=page_index*items_per_page;i<max_elem;i++)
                {
                  var startDate = new Date(statisticList[i].startDate.time);

                  var startDateStr = (startDate.format("yyyy/mm/dd"));
                  var lastStatEntry = new Date(statisticList[i].lastStatEntry.time);
                  var lastStatEntryStr = (lastStatEntry.format("yyyy/mm/dd"));
                  
                  //push data for create chart
                  chartData.push([lastStatEntryStr,statisticList[i].postsCountOfWeek]);

                  items.push('<div class="IconLink">' + startDateStr + " - " + lastStatEntryStr + " : <i> " + statisticList[i].postsCountOfWeek + " __MSG_forums.weekly.statistic.post.open__" +'</i></div>');    
                }
                
               //draw chart
               createChart(chartData);
               
                //clean weekly statistic
                document.getElementById('weeklyStatistic').innerHTML='';
        
                $('<div/>', {
                    'class': 'users',
                     html: items.join('')
                }).appendTo('#weeklyStatistic');
                gadgets.window.adjustHeight();
                return false;
            }

            // This function creates an option object for the pagination function.
            function getOptions(){
                var opt = {callback: pageselectCallback};
                opt.prev_text = "__MSG_forums.weekly.statistic.prev__";
                opt.next_text = "__MSG_forums.weekly.statistic.next__";
                opt.items_per_page = 5;
                return opt;
            }
      
            // When document has loaded, initialize pagination and form
            $(document).ready(function(){

              $('#seeTotalStatistic').hide();
              $('#weeklyStatisticArea').hide();
              
              viewForumsWeeklyStatistic();
              viewForumsTotalStatistic();

              $('#viewTotalStatistic').click(function() {
                  $('#seeWeeklyStatistic').show();
                  $('#seeTotalStatistic').hide();
                  $('#weeklyStatisticArea').hide();
                  $('#totalStatisticArea').show();
              });
              
              $('#viewWeeklyStatistic').click(function() {
                if( $('#weeklyStatistic').text()== ""){
                  //viewForumsWeeklyStatistic();
                }
                $('#seeWeeklyStatistic').hide();
                $('#seeTotalStatistic').show();
                $('#weeklyStatisticArea').show();
                $('#totalStatisticArea').hide();
                
              });
              
              
            });

        function viewForumsWeeklyStatistic(){
            $('#chartdiv').hide();
            $('#viewList').hide();
            
            $('#viewChart').click(function() {
                $('#chartdiv').show();
                $('#weeklyStatistic').hide();
                $('#viewList').show();
                $('#viewChart').hide();
                pageselectCallback(pageIndex);
            });
            
            $('#viewList').click(function() {
                $('#chartdiv').hide();
                $('#weeklyStatistic').show();    
                $('#viewList').hide();
                $('#viewChart').show();
            });

            $.getJSON('/rest/forumsService/forums/weeklystatistic', function(data) {
                $.each(data, function(i, statistic) {
                  $.each(statistic, function(key, weeklyStatistic) {
                    $.each(weeklyStatistic, function(index, week) {
                      statisticList[index]= week;
                   });

                  });
                });

               // Create pagination element with options from form
               var optInit = getOptions();
               $("#Pagination").pagination(statisticList.length, optInit);
           
             });
        }
        function viewForumsTotalStatistic(){
          $.getJSON('/rest/forumsService/forums/statistic', function(data) {
                var items = [];
                
                $.each(data, function(i, statistic) {
                  $.each(statistic, function(key, statistic) {
                    items.push('<div class="IconLink">' + "__MSG_forums.statistic.total.topic__" + ' ' + statistic.topicCount+ '</div>');
                    items.push('<div class="IconLink">' + "__MSG_forums.statistic.total.post__" + ' ' + statistic.postCount+ '</div>');
                    items.push('<div class="IconLink">' + "__MSG_forums.statistic.total.member__" + ' ' + statistic.membersCount+ '</div>');
                    items.push('<div class="IconLink">' + "__MSG_forums.statistic.active.member__" + ' ' + statistic.activeUsers+ '</div>');
                    
                    var arr = statistic.mostUsersOnline.split(' ');
                    var maximumUser = arr[0];
                    var dateLong= new Number (arr[arr.length - 1]);
                    var time = new Date(dateLong);
                    var onlineTime = time.toDateString() + ' ' + time.toLocaleTimeString() ;
                    items.push('<div class="IconLink">' + "__MSG_forums.statistic.maximum.user__"  + ' ' +'</div>');
                    items.push('<div style="margin-left:10px"><i>' + maximumUser + ' __MSG_forums.statistic.at__ ' + onlineTime +'</i></div>' );
             
                  });
                });
                
                $('<div/>', {
                  'class': 'users',
                  html: items.join('')
                }).appendTo('#totalStatisticArea');
                // adjust the gadget size
                gadgets.window.adjustHeight();
              });
        }
        
        function createChart(dataList){
             //clean chart
              document.getElementById('chartdiv').innerHTML='';
        
              $.jqplot('chartdiv', [dataList], {
                axes:{yaxis:{min:0},xaxis:{renderer:$.jqplot.DateAxisRenderer}},
                 series:[{color:'#FF4500'},{lineWidth:1}]
              });
        }

      </script>
    </head>
    <body>
       <div class="UIGadgetThemes">
          <div class="TitGad ClearFix">
            <a target="_blank" id="ShowAll" class="IconDropDown" title="Show all"> </a>
            <div title="Setting" id="SettingButton" class="SettingButton">
               <a href="javascript:eXoEventGadget.showHideSetting(true);" title="Setting"></a>
            </div>

            <div id ="seeWeeklyStatistic" class="ContTit ClearFix">
              <span>__MSG_forums.statistic.title__</span>
              <img id ="viewWeeklyStatistic" class = 'icon' src ='skin/weekly-stats-icon.png' title = "__MSG_forums.statistic.see.weekly.statistic__" alt="" />
            </div>
            
            <div id ="seeTotalStatistic" class="ContTit ClearFix">
              <span>__MSG_forums.weekly.statistic.title__</span>
              <img id ="viewTotalStatistic" alt="" class = 'icon' src='/exo-gadget-resources/skin/exo-gadget/images/back.png' title = "__MSG_forums.statistic.see.total.statistic__"/>
              <img id ="viewChart" alt="" class = 'icon' src='/exo-gadget-resources/skin/exo-gadget/images/chart.png' title = "__MSG_forums.weekly.statistic.view.chart__"/>
              <img id ="viewList" alt="" class = 'icon' src='/exo-gadget-resources/skin/exo-gadget/images/list.png' title = "__MSG_forums.weekly.statistic.view.list__"/>
            </div>
            
          </div>
          
          <div id ="weeklyStatisticArea" class ="WeeklyStatisticArea">

            <div id="weeklyStatistic" class="GadCont users"></div>    
   
            <div id="chartdiv" class = "ChartContent"></div>
            
            <div id="Pagination" class="pagination"></div>
          </div>
          
          <div id="totalStatisticArea" class="GadCont users TotalStatisticArea"></div>
           
        </div>
    </body>

]]></Content></Module>
