/**
 * Created by sf on 2018/8/3.
 */
var areaArr = []

var trackHost = 'https://segmentfault.com';
var viewApi = trackHost + '/ad/track/view'
var clickApi = trackHost + '/ad/track/click'

function ajax(opt) {
    opt = opt || {};//opt以数组方式存参，如果参数不存在就为空。
    opt.method = opt.method.toUpperCase() || 'POST';//转为大写失败，就转为POST
    opt.url = opt.url || '';//检查URL是否为空
    opt.async = opt.async || true;//是否异步
    opt.data = opt.data || null;//是否发送参数，如POST、GET发送参数
    opt.success = opt.success || function () {}; //成功后处理方式
    var xmlHttp = null;//定义1个空变量
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();//如果XMLHttpRequest存在就新建，IE大于9&&非IE有效
    }
    else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');//用于低版本IE
    }
    var params = [];//定义1个空数组
    for (var key in opt.data){
        params.push(key + '=' + opt.data[key]);//将opt里的data存到push里
    }
    var postData = params.join('&');//追加个& params
    if (opt.method.toUpperCase() === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);//开始请求
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');//发送头信息，与表单里的一样。
        xmlHttp.send(postData);//发送POST数据
    }
    else if (opt.method.toUpperCase() === 'GET') {
        xmlHttp.open(opt.method, opt.url, opt.async);//GET请求
        xmlHttp.send(null);//发送空数据
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {//readyState有5个状态，可以百度一下看看都有什么。当请求完成，并且返回数据成功
            opt.success(xmlHttp.responseText);//返回成功的数据
        }
    };
}

var sTitle="";
window.SFGridAd = {};
SFGridAd.d = function(o) {
    sTitle = o.getAttribute('stitle');
    document.getElementById("gridMapHoverBox").style.display = "block"
}

SFGridAd.e = function(o) {
    sTitle = "";
    document.getElementById("gridMapHoverBox").style.display = "none"
}

SFGridAd.c = function(id) {

    var clickApi2 = clickApi + '?id=' + id

    ajax({url: clickApi2, method: 'GET'})
};

// 这里 data 需要注入
[{"id":"1750000018025967","user_id":"1030000002496563","box_ad_id":"0","started":"1548777600","ended":"1551196800","cycles":"4","status":"0","banner":"\/696\/110\/696110750-5c4fd0cc1abb4","link":"https:\/\/www.fundebug.com\/?utm_source=sf_lattice_ad","title":"Debug\u5c31\u7528Fundebug\uff01","area_info":{"area":"G5:I5","height":"17","width":"51","left":"102","top":"68","pos":{"rowTop":5,"rowBottom":5,"columnLeft":7,"columnRight":9},"size":3},"created":"1548417266","modified":"1548728755"},{"id":"1750000018168875","user_id":"1030000011762220","box_ad_id":"0","started":"1550246400","ended":"1550851200","cycles":"1","status":"0","banner":"\/297\/175\/2971755335-5c669085babcb","link":"https:\/\/www.pintuan-xcx.cn","title":"\u5c0f\u62fc\u56e2","area_info":{"area":"F5:F5","height":"17","width":"17","left":"85","top":"68","pos":{"rowTop":5,"rowBottom":5,"columnLeft":6,"columnRight":6},"size":1},"created":"1550224521","modified":"1550225556"},{"id":"1750000018198085","user_id":"1030000000091606","box_ad_id":"0","started":"1550592000","ended":"1551801600","cycles":"2","status":"0","banner":"\/418\/237\/418237919-5c6b80e3da1d5","link":"https:\/\/fapiao.easyapi.com\/","title":"EasyAPI\u7535\u5b50\u53d1\u7968\uff0c\u8ba9App\uff0c\u5c0f\u7a0b\u5e8f\u7b49\u7acb\u523b\u62e5\u6709\u5f00\u5177\u7535\u5b50\u53d1\u7968\u529f\u80fd\u3002","area_info":{"area":"C7:E7","height":"17","width":"51","left":"34","top":"102","pos":{"rowTop":7,"rowBottom":7,"columnLeft":3,"columnRight":5},"size":3},"created":"1550537326","modified":"1550549232"}].forEach(function(item) {
    var html = '<area shape="rect" ' +
        'target="_blank" ' +
        'onmouseover="SFGridAd.d(this)" ' +
        'onmouseout="SFGridAd.e(this)" ' +
        'onclick="SFGridAd.c(' + item.id + ')" ' +
        'coords="' + item.area_info.left + ',' + item.area_info.top + ',' + ((+item.area_info.left)+(+item.area_info.width)) + ',' + ((+item.area_info.top)+(+item.area_info.height)) + '" ' +
        'href="' + item.link + '" ' +
        'stitle="' + item.title + '" />'

    areaArr.push(html)
})

document.getElementById('gridsMap').innerHTML = areaArr.join('')

document.getElementById('gridsMap').onmousemove = function(e) {
    var pos = getMousePos(e)

    document.getElementById("gridMapHoverBox").style.left = pos.x + 20 + 'px'
    document.getElementById("gridMapHoverBox").style.top = pos.y + 20 + 'px'

    document.getElementById("gridMapHoverBox").innerHTML = sTitle
}

// 增加 view 统计
setTimeout(function() {
    isShow = document.querySelector('img[src^="https://static.segmentfault.com/sponsor"]').clientHeight > 0
    if (isShow) ajax({url: viewApi, method: 'GET'})
}, 0)

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    return { 'x': x, 'y': y };
}