$(function(){
    if(exitmap){
        $.ajax({
            type: "get",
            url: "https://reliable-c.net/web_analyze/admin/map/exitmap?callback=getsavedata",
            dataType: "jsonp",
            data: {"url":location.href},        
            crossDomain: true,
            success:function(data){
                fExitmapView(data);
            }
        });
    }    
    if(clickmap){
        $.ajax({
            type: "get",
            url: "https://reliable-c.net/web_analyze/admin/map/click?callback=getsavedata",
            dataType: "jsonp",
            data: {"url":location.href},        
            crossDomain: true,
            success:function(data){
                fClickmapView(data);
            }
        });
    }
    if(scrollmap){
        $.ajax({
            type: "get",
            url: "https://reliable-c.net/web_analyze/admin/map/scroll?callback=getsavedata",
            dataType: "jsonp",
            data: {"url":location.href},        
            crossDomain: true,
            success:function(data){
                fScrollmapView(data);
            }
        });
    }
})

function viewHeat(params){
    var i=0;

    $.each(params , function(key , row){
        i++;
        $("body").append("<canvas id='click_canvas_" + i + "' width=30 height=30 style='z-index:9999;position: absolute; top:" + row.y + "px; left:" + row.x + "px'></canvas>");
    })

    i=0;
    $.each(params , function(key , row){
        i++;
        draw($("#click_canvas_" + i));
    })
}

function draw(canvas_pram) {
    var canvas = canvas_pram[0];

  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.globalAlpha = 0.5;
  var grad  = ctx.createRadialGradient(15,15,3,15,15,10,15,15,15);
  grad.addColorStop(0,'red');      // 赤
  grad.addColorStop(0.4,'yellow'); // 黄
  grad.addColorStop(0.8,'green'); // 緑  
  grad.addColorStop(1,'rgba(0,0,0,0)');     // 青
  ctx.fillStyle = grad;
  ctx.rect(0,0, 30,30);
  ctx.fill();
}

function viewScroll(area_id , count , maxCount){
    var startTop = area_id * 300;
    var endTop = (parseInt(area_id) + 1) * 300;

    value = Math.ceil(count / maxCount * 755);

    rgb = getColor(value);

    $(document.body).append("<div style='position:absolute; top:" + (startTop + 200) + "px;left:0px;width:100%;height:" + (endTop - startTop) + "px'><div style='background-color:" + rgb + ";opacity: 0.3;width:100%;height:" + (endTop - startTop) + "px;color:black'></div><span style='color: #FFF;font-size: 30px;font-weight: bold;text-shadow: 2px 2px 1px #00F,-2px 2px 1px #00F,2px -2px 1px #00F,-2px -2px 1px #00F;'>" + Math.ceil(count / maxCount * 100) + "%</span></div>");
}

function fExitmapView(data){
    var params = [];
    maxCount = data["maxCount"];
    var seidokuData = data["seidokuData"];
    $.each(seidokuData , function(key , row){
        viewScroll(key , row , maxCount);
    })
}
function fScrollmapView(data){
    var params = [];
    maxCount = data["maxCount"];
    var seidokuData = data["seidokuData"];
    $.each(seidokuData , function(key , row){
        viewScroll(key , row , maxCount);
    })
}
function fClickmapView(data){
    var params = [];
    $.each(data , function(key , row){
        $.each(row , function(i , val){
            elementPosition = get_elementPosition(cipher(key));
            params.push({x:parseInt(cipher(val.x)) + parseInt(elementPosition.left) , y:parseInt(cipher(val.y)) + parseInt(elementPosition.top) , count:5});
        })
    })

    viewHeat(params);
}