var pickupBlogBaroons = new Array();

function createPickupBaroons() {

    var contents = parseJson();
    var pickupBlogItems = document.getElementById("pickupBlogItems");
    var ids = new Array();
    var node;
    var idx = 0;
    var baroon;
    var thumbPos;
    for (var index = 0 ; index < pickupBlogItems.childNodes.length; index++) {
        node = pickupBlogItems.childNodes[index].childNodes[0];
        if (node.nodeName == 'IMG') {
            baroon = new function() {
                this.top = 0; 
                this.left = 0;
                this.bottom = 0;
                this.right = 0;
                this.background = null;
                this.contents = null;
                this.exist = false;
                this.img = node;
            };
            thumbPos = getPosition(node);
            baroon.top = thumbPos.y;
            baroon.left = thumbPos.x;
            baroon.bottom = baroon.top + node.height;
            baroon.right = baroon.left + node.width;
			      baroon.background = createBaroon(baroon.top, baroon.left, -80, -90);
			      baroon.contents = createContents(baroon.top, baroon.left, -80, -90, contents[index]);
			      pickupBlogBaroons[index] = baroon;
			
        }
        
    }
    
}

function parseJson() {

    var pickupBlogItems = document.getElementById('pickupBlogBaroon').value;
    
    var data = eval("(" + pickupBlogItems + ")");
    
    return data.items;

}

function captcherMousePoint(e) {

    var items = parseJson();

    if (e == null) {
        e = window.event;
    }
    
    var mouseX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    var mouseY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

    for (var index = 0 ; index < pickupBlogBaroons.length ; index++) {
        var baroon = pickupBlogBaroons[index];    
	    if (mouseY >= baroon.top &&
	        mouseY <= baroon.bottom &&
	        mouseX >= baroon.left &&
	        mouseX <= baroon.right) {
	        if (baroon.exist == false) {
    			document.body.appendChild(baroon.background);
	    		document.body.appendChild(baroon.contents);
	            baroon.exist = true;
	        }
	        baroon.background.style.display = "block";
	        baroon.contents.style.display = "block";
	    } else {
	        baroon.background.style.display = "none";
	        baroon.contents.style.display = "none";
	    }
    }
    
}

function createBaroon(targetTop, targetLeft, offsetX, offsetY) {

    var baroon = document.createElement("div");
    baroon.style.position = "absolute";
    baroon.style.top = targetTop + offsetY + "px";
    baroon.style.left = targetLeft + offsetX + "px";
    baroon.style.padding = "5px";
    baroon.style.width = "320px";
    baroon.style.height = "100px";
    baroon.style.opacity = "0.95";
    baroon.style.filter = "alpha(style=1, opacity=95, finishopacity=95)";
    baroon.style.backgroundImage = "url('../image/ranking/body/center/baroonbg.gif')";
    baroon.style.display = "none";
    
    return baroon;

}

function createContents(targetTop, targetLeft, offsetX, offsetY, item) {

    var contents = document.createElement("div");
    contents.style.position = "absolute";
    contents.style.top = targetTop + offsetY + "px";
    contents.style.left = targetLeft + offsetX + "px";
    contents.style.padding = "5px";
    contents.style.width = "320px";
    contents.style.height = "100px";
    contents.style.display = "none";

    var blogTitle = document.createElement("p");
    blogTitle.style.fontSize = "10px";
    blogTitle.style.fontWeight = "bold";
    blogTitle.style.fontFamily = "ＭＳ　ゴシック";
    blogTitle.style.margin = isGecko() ? "5px 10px" : "10px";
    blogTitle.style.padding = "3px";
    blogTitle.style.textAlign = "left";
    blogTitle.style.color = "#FFF";
    blogTitle.appendChild(document.createTextNode(item.blogTitle));
    contents.appendChild(blogTitle);

    var blogDesc = document.createElement("p");
    blogDesc.style.fontSize = "10px";
    blogDesc.style.fontFamily = "ＭＳ　ゴシック";
    blogDesc.style.margin = "10px 0 0 10px";
    blogDesc.style.padding = "0px";
    blogDesc.style.textAlign = "left";
    blogDesc.appendChild(document.createTextNode(item.blogDesc));
    contents.appendChild(blogDesc);

    var rank = document.createElement("p");
    rank.style.fontSize = "15px";
    rank.style.fontWeight = "bold";
    rank.style.fontFamily = "ＭＳ　ゴシック";
    rank.style.textAlign = "right";
    if (browerType() == 'ie6') {
      rank.style.margin = "17px 20px 0px 264px";
    } else if (browerType() == 'ie7') {
      rank.style.margin = "19px 20px 0px 264px";
    } else {
      rank.style.margin = "14px 20px 0px 264px";
    }
    rank.appendChild(document.createTextNode(item.rank));
    contents.appendChild(rank);

    return contents;

}

function isGecko() {

    if(navigator){
        if(navigator.userAgent){
            if(navigator.userAgent.indexOf("Gecko/") != -1){
                return true;
            }
        }
    }
    
    return false;
    
}

function browerType() {

    if(navigator){
        if(navigator.userAgent){
            if(navigator.userAgent.indexOf("Gecko/") != -1){
                return "gecko";
            } else if(navigator.userAgent.indexOf("MSIE 7") != -1){
                return "ie7";
            } else if(navigator.userAgent.indexOf("MSIE 6") != -1){
                return "ie6";
            } else {
                return null;
            }
        }
    }
    
    return false;
    
}

function initPickupBlogBaroon() {

    createPickupBaroons();
    
}

document.onmousemove = captcherMousePoint;