var pageId = 0;

var last_page = function(){
    pageId--;
    if(pageId<1)
        pageId=5;
    show_page();
};

var next_page = function(){
    pageId++;
    if(pageId>5)
        pageId=1;
    show_page();
}

var show_back =  function(){
    pageId=0;
    show_page();
}

var init = function(){
    show_page();
}

var show_page = function(){
    $("#data_div").html('');
    for(var i=1;i<6;i++){
        if($("#pager_"+i).hasClass("current_page"))
            $("#pager_"+i).removeClass("current_page");
    }
    if(pageId==0){
        if($("#back_div").hasClass("shown"))
            $("#back_div").removeClass("shown");
        if(!($("#back_div").hasClass("hidden")))
            $("#back_div").addClass("hidden");
        if($("#last_div").hasClass("shown"))
            $("#last_div").removeClass("shown");
        if(!($("#last_div").hasClass("hidden")))
            $("#last_div").addClass("hidden");
        if($("#next_div").hasClass("shown"))
            $("#next_div").removeClass("shown");
        if(!($("#next_div").hasClass("hidden")))
            $("#next_div").addClass("hidden");
        for(var i=1;i<6;i++){
            if($("#pager_"+i).hasClass("shown"))
                $("#pager_"+i).removeClass("shown");
            if(!($("#pager_"+i).hasClass("hidden")))
                $("#pager_"+i).addClass("hidden");
        }
        show_frontpage();
    }else{
        if($("#back_div").hasClass("hidden"))
            $("#back_div").removeClass("hidden");
        if(!($("#back_div").hasClass("shown")))
            $("#back_div").addClass("shown");
        if($("#last_div").hasClass("hidden"))
            $("#last_div").removeClass("hidden");
        if(!($("#last_div").hasClass("shown")))
            $("#last_div").addClass("shown");
        if($("#next_div").hasClass("hidden"))
            $("#next_div").removeClass("hidden");
        if(!($("#next_div").hasClass("shown")))
            $("#next_div").addClass("shown");
        for(var i=1;i<6;i++){
            if($("#pager_"+i).hasClass("hidden"))
                $("#pager_"+i).removeClass("hidden");
            if(!($("#pager_"+i).hasClass("shown")))
                $("#pager_"+i).addClass("shown");
        }
        $("#pager_"+pageId).addClass("current_page");
        show_page_at(pageId);
    }
};

var show_page_at = function(page){

    $('#data_div').highcharts({
                                chart:{
                                      type:'pie',
                                      options3d:{
                                          enabled:true,
                                          alpha:45,
                                          beta:0
                                      },
                                      backgroundColor:'rgba(0,0,0,0)'
                                  },
                                  credits:{
                                      enabled:false
                                  },
                                  exporting:{
                                      enabled:false
                                  },
                                  title:{
                                      text: page==1?'火灾监控实时信息'
                                                   :page==2?'电气火灾监控实时信息'
                                                           :page==3?'消防水系统监控实时信息'
                                                                   :page==4?'通道监控实时信息'
                                                                           :'消防电源监控实时信息',
                                    style:{
                                        color:'#ffffff'
                                    }
                                  },
                                  tooltip: {
                                      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                                  },
                                  legend:{
                                      itemStyle:{
                                          color:'#ffffff'
                                      },
                                      align:'right',
                                      verticalAlign:'top',
                                      y:70,
                                      layout:'vertical',
                                      labelFormat:'{name}: <b>{y:.1f}%</b>'
                                  },
                                plotOptions: {
                                     pie: {
                                         allowPointSelect: true,
                                         cursor: 'pointer',
                                         depth: 35,
                                         dataLabels: {
                                             enabled: true,
                                              style:{
                                                  color:'#ffffff'
                                              }
                                         },
                                          showInLegend:true
                                     }
                                 },
                                  colors:['#fea82d','#fe0000','#4dffff'],
                              series: [{
                                          type: 'pie',
                                          name: '占比',
                                          data: [
                                              ['故障', page==1?0.0
                                                            :page==2?0.0
                                                                    :page==3?0.0
                                                                            :page==4?0.0
                                                                                    :0.0],
                                              ['告警', page==1?0.0
                                                            :page==2?0.0
                                                                    :page==3?20.0
                                                                            :page==4?0.0
                                                                                    :12.5],
                                              [ '正常',page==1?100.0
                                                            :page==2?100.0
                                                                    :page==3?80.0
                                                                            :page==4?100.0
                                                                                    :87.5]
                                          ],
                                          pointPlacement:'on'
                                      }]
    });
}

var show_frontpage = function(){
    $('#data_div').highcharts({
          chart:{
              polar:true,
              color:'#ffffff',
              backgroundColor:'rgba(0,0,0,0)',
              type:'line'
          },
          credits:{
              enabled:false
          },
          exporting:{
              enabled:false
          },
        colors:['#60ff4d','#4dffff'],
          title:{
              style:{
                  color:'#ffffff'
              },
              text:'本地消防信息汇总',
              x: -80
          },
          pane:{
              size:'80%'
          },
          xAxis:{
              labels:{
                  style:{
                      color:'#ffffff'
                  }
              },
              categories:['火灾监控','电气火灾监控','消防水系统监控','通道监控','消防电源监控'],
              tickmarkPlacement:'on',
              lineWidth:0
          },
          yAxis:{
              labels:{
                  style:{
                      color:'#ffffff'
                  }
              },
              gridLineInterpolation:'polygon',
              lineWidth:0,
              min:0
          },
          legend:{
              itemStyle:{
                  color:'#ffffff'
              },
              align:'right',
              verticalAlign:'top',
              y:70,
              layout:'vertical'
          },
          series:[{
                  name:'监控点数量',
                  data:[8,4,5,3,8],
                  pointPlacement:'on'
              },{
                  name:'监控点正常数量',
                  data:[8,4,4,3,7],
                  pointPlacement:'on'
          }]
      });
}