var pop;
var popTimeout = .25;
var popHideTimeout = 100;
var popContent = "";
var opacity = 9;
var slideDirection = "right";
var height = "230";
var width = "220";
var varHeight = 0;
var varWidth = 0;
var xH = 0;
var xW = 0;
var yH = .2; // slide out speed for height
var zH = 25; // also affects slide out speed -> higher = faster
var yW = .2; // slide out speed for width
var zW = 25; // also affects slide out speed -> higher = faster
var tH;
var tW;
var tR;
var tP;
var tS;
var url = "/Portals/1/rsWorldMap/ClientBin/Continents.xml";
var continent = "";
var isOnPopout = false;

function delay(seconds) {
    tS = setTimeout("delayFunction()", seconds*1000);
}

function delayFunction() {
    toggleHeight();
    toggleWidth();
}

function showRegion(region) {
    isOnPopout = false;
    varHeight = 0;
    varWidth = 0;
    xH = 0;
    xW = 0;
    clearTimeout(tH);
    clearTimeout(tW);
    $(".rs-popout").each(function() {
        $(this).css("display", "none");
    });
    continent = region;
    var img = document.getElementById("rs-" + continent);
    if (img != null) {
        img.src = "/Portals/1/rsWorldMap/ClientBin/images/" + continent + "-On.png";
    }
    pop = document.getElementById("rs-Pop" + continent);
    if (pop != null) {
        pop.style.display = "none";
        pop.style.width = "0px";
        pop.style.height = "0px";
        pop.innerHTML = "";
        delay(popTimeout);
    }
}

function hideRegion(region) {
    continent = region;
    clearTimeout(tS);
    if (!isOnPopout) {
        var img = document.getElementById("rs-" + region);
        if (img != null) {
            img.src = "/Portals/1/rsWorldMap/ClientBin/images/" + region + "-Off.png";
        }
        tP = setTimeout("hidePop()", popHideTimeout);
    }
}

function hidePop() {
    if (pop != null) {
        if (!isOnPopout) {
            pop.style.display = "none";
            pop.style.width = "0px";
            pop.style.height = "0px";
            pop.innerHTML = "";
            varHeight = 0;
            varWidth = 0;
            xH = 0;
            xW = 0;
            clearTimeout(tH);
            clearTimeout(tW);
        }
    }
}

function toggleHeight() {
    if (xH === 0) {
        pop.style.display = "block";
        pop.style.opacity = opacity / 10;
        pop.style.filter = 'alpha(opacity=' + opacity * 10 + ')';
        pop.style.height = varHeight + "px";
        
        // height
        if (((height - varHeight) < zH) && (varHeight !== height)) {
            varHeight = height;
        }
        else {
            varHeight = varHeight + zH;
        }
        if (varHeight <= height) {
            tH = setTimeout('toggleHeight()', yH);
        }
        if (varHeight > height) {
            varHeight = height;
            xH = 1;
            tH = setTimeout('toggleHeight()', yH);
        }
    }
    else if (xH === 1) {
        getContent();
    }
}

function toggleWidth() {
    if (xW === 0) {
        pop.style.display = "block";
        pop.style.opacity = opacity / 10;
        pop.style.filter = 'alpha(opacity=' + opacity * 10 + ')';
        pop.style.width = varWidth + "px";

        // width
        if (((width - varWidth) < zW) && (varWidth !== width)) {
            varWidth = width;
        }
        else {
            varWidth = varWidth + zW;
        }
        if (varWidth <= width) {
            tW = setTimeout('toggleWidth()', yW);
        }
        if (varWidth > width) {
            varWidth = width;
            xW = 1;
            tW = setTimeout('toggleWidth()', yW);
        }
    }
    else if (xW === 1) {
        getContent();
    }
}

function getContent() {
    pop.innerHTML = "Getting content...";
    try {
        $.ajax({
            type: "GET",
            url: url,
            dataType: "xml",
            success: parseXml
        });
    }
    catch (err){
        pop.innerHTML = "Error";
    }
}

function parseXml(xml) {
    $(xml).find("continent").each(function() {
        if ($(this).find("name").text().indexOf(continent) > -1) {
            fillContent($(this));
        }
    });
}

function fillContent(myContinent) {
    var myDetails = myContinent.find("details").text();
    var myThumb = myContinent.find("thumb").text();
    var myLink = myContinent.find("link").text();
    var myLinkText = myContinent.find("linktext").text();
    var myContent = "<div class=\"rs-thumb\"><img src=\"/Portals/1/rsWorldMap/ClientBin/" + myThumb + "\" alt=\"\" /></div><div class=\"rs-details\">" + myDetails + "</div><div class=\"rs-link\"><a href=\"" + myLink + "\" />" + myLinkText + "</a></div>";
    pop.innerHTML = myContent;
}

function onPopout() {
    isOnPopout = true;
    var img = document.getElementById("rs-" + continent);
    if (img != null) {
        img.src = "/Portals/1/rsWorldMap/ClientBin/images/" + continent + "-On.png";
    }
}

function offPopout() {
    isOnPopout = false;
    hideRegion(continent);
}