pf.img = '../_img/cm/';

pf.loci = [
    ['au', 547.25, 225, 63, 56],
    ['at', 390, 125, 14, 7],
    ['be', 380, 122, 7, 5],
    ['br', 263, 201, 61, 63],
    ['ca', 159, 36, 136, 104],
    ['cn', 489, 118, 92, 60],
    ['da', 390, 110, 6, 6],
    ['fi', 408, 78, 16, 25],
    ['fr', 369, 123, 23, 19],
    ['de', 385, 114, 14, 16],
    ['in', 480, 152, 43, 45],
    ['ie', 361, 114, 7, 8],
    ['it', 386, 130, 18, 20],
    ['jp', 572, 134, 27, 26],
    ['kr', 566, 147, 6, 8],
    ['nz', 627, 264, 22, 25],
    ['no', 385, 75, 39, 33],
    ['ru', 418, 43, 250, 99],
    ['es', 361, 138, 20, 15],
    ['se', 393, 80, 20, 34],
    ['ch', 386, 129, 9, 5],
    ['tr', 416, 140, 29, 12],
    ['gb', 364, 105, 16, 20],
    ['us', 118, 76, 155, 95],
    ['xl', 198, 157, 101, 148],
];

pf.init = function(lang)
{
    if (document.getElementById('map')) {
        var map = new pf.Map(lang);
    }
    
};

pf.Map = function(lang)
{
    this.lang = lang;

    this.root = pf.ge('map');

    this.map = pf.ce('div', 0, 0);

    this.bg = pf.ce('img', 0, 0);
    this.bg.className = 'bg';
    this.bg.width = 670;
    this.bg.height = 420;
    this.bg.src = pf.img + 'career-map-bg-gray.png';

    this.title = pf.ce('div', 10, 10);
    this.title.className = 'label';
    this.title.innerHTML = 'Loading'; //'Global Locations';
    this.title.style['min-width'] = '100px';

    pf.ac(this.map, this.bg);
    pf.ac(this.map, this.title)
    pf.ac(this.root, this.map);

    this.desc = pf.ce('div', 0, 0);
    this.desc.style.visibility = 'hidden';
    this.desc.className = 'content';

    this.dbg = pf.ce('img', 0, 0);
    this.dbg.className = 'bg';
    this.dbg.width = 670;
    this.dbg.height = 420;
    this.dbg.src = pf.img + 'career-map-bg-light.png';

    this.back = pf.ce('div', 10, 10);
    
    this.bimg = pf.ce('img', 0, 0);
    this.bimg.src = pf.img + 'back.png';

    this.blbl = pf.ce('a', 2.5, 23);
    this.blbl.className = 'back';
    this.blbl.innerHTML = 'Loading'; //Back to Map';

    pf.ac(this.back, this.bimg);
    pf.ac(this.back, this.blbl);

    this.sdiv = pf.ce('div', 0, 0);
    this.slider = new pf.Slider(this.sdiv, 640, 20, 420);
    this.slider.addPosListener(this);

    var obj = this;
    this.back.onclick = function() { obj.showMap() };
    this.back.onmouseover = function() { obj.blbl.style.color = '#005aa1'; };
    this.back.onmouseout = function() { obj.blbl.style.color = '#00a1e7'; };
    

    this.text = pf.ce('div', 45, 15);
    this.content = pf.ce('div', 0, 0);

    this.text.style.width = '610px';
    this.text.style.height = '420px';
    this.text.style.overflow = 'hidden';
    pf.ac(this.text, this.content);

    var fadeTop = pf.ce('img', 45, 15);
    fadeTop.src = pf.img + 'fade-top.png';
    pf.resize(fadeTop, 610, 20);

    var fadeBot = pf.ce('img', 420 + 35 - fadeTop.height, 15);
    fadeBot.src = pf.img + 'fade-bot.png';
    pf.resize(fadeBot, fadeTop.width, fadeTop.height);

    pf.ac(this.desc, this.dbg);
    pf.ac(this.desc, this.back);
    pf.ac(this.desc, this.text);
    pf.ac(this.desc, this.sdiv);
    pf.ac(this.desc, fadeTop);
    pf.ac(this.desc, fadeBot);

    pf.ac(this.root, this.desc);

    this.loadLabels();
    this.loadLoci();
};

pf.mp = pf.Map.prototype;

pf.mp.loadLabels = function()
{
    var url = '../app-labels.php?app=map&lang=' + this.lang;
    var obj = this;
    var handler = function (xml) { obj.labelsLoaded(xml); };

    pf.loadXML(url, handler);
};

pf.mp.labelsLoaded = function(xml)
{
    var c = xml.getElementsByTagName('label');

    var ids = {};
    ids['title'] = 'title';
    ids['back'] = 'blbl';

    for (var i = 0; i < c.length; i++) {
        var name = c[i].getAttribute('name');
        var value = c[i].getAttribute('value');
        this[ids[name]].innerHTML = value;
    };
};

pf.mp.loadLoci = function()
{
    var r = new XMLHttpRequest();
    var url = '../locations.php?lang=' + this.lang;

    var obj = this;
    r.onreadystatechange = function() {
        if (r.readyState == 4 && r.status == 200) {
            obj.lociLoaded(r.responseXML);
        };
    };

    r.open("GET", url);
    r.send(null);
};

pf.mp.lociLoaded = function(xml)
{
    var c = xml.getElementsByTagName('country');
    var labels = {};

    for (var i = 0; i < c.length; i++) {
        var code = c[i].getAttribute('code');
        var label = c[i].getAttribute('label');
        labels[code] = label;
    };

    this.lociObjs = [];
    for (var i = 0; i < pf.loci.length; i++) {
        var l = pf.loci[i];
        var text = labels[l[0]];
        this.lociObjs[i] = new pf.Locus(this, i, l[0], l[1], l[2], l[3], l[4], text);
    };    
};

pf.mp.loadDesc = function(id)
{
    var r = new XMLHttpRequest();
    var url = '../location.php?lang=' + this.lang + '&id=' + id;

    var obj = this;
    r.onreadystatechange = function() {
        if (r.readyState == 4 && r.status == 200) {
            obj.descLoaded(r.responseXML);
        };
    };

    r.open("GET", url);
    r.send(null);
};

pf.mp.descLoaded = function(xml)
{
    var desc = xml.getElementsByTagName('location')[0].firstChild.data;

    this.content.innerHTML += desc;

    if (this.content.offsetHeight < this.text.offsetHeight) {
        this.slider.disable();
    }
    else {
        this.slider.enable();
    };
};

pf.mp.showDesc = function(id, label)
{
    this.loadDesc(id);

    this.content.innerHTML = '';
    if (pf.ie) this.content.innerHTML += "<br />";
    this.content.innerHTML += '<h3>' + label + '</h3>';

    this.map.style.visibility = 'hidden';

    this.desc.style.opacity = 0;
    this.slider.setPos(0);
    this.slider.disable();

    this.desc.style.visibility = 'visible';

    var obj = this.desc.style;
    var parent = this;

    var fade = function() {
        var dx = (1.0 - obj.opacity);
        obj.opacity = .1 * dx + 1 * obj.opacity;
        
        if (dx < .01) {
            obj.opacity = 1.0;
            parent.stopFade();
        };
    };

    this.fadeTimer = window.setInterval(fade, 10);
};

pf.mp.stopFade = function()
{
    window.clearInterval(this.fadeTimer);
};

pf.mp.stopSlide = function()
{    
    window.clearInterval(this.slideTimer);
    this.isSliding = false;
};

pf.mp.showMap = function()
{
    this.desc.style.visibility = 'hidden';
    this.slider.disable();
    this.map.style.visibility = 'visible';
};

pf.mp.firePosChanged = function(pos)
{
    var contentHeight = this.content.offsetHeight;
    var windowHeight = this.text.offsetHeight;

    var minY = -1 * (contentHeight - windowHeight);
    var currentY = pf.numeric(this.content.style.top);

    this.targetY = pos * minY;

    if (!this.isSliding)
    {
        var obj = this.content.style;
        var parent = this;
        var slide = function() {
            var cy = pf.numeric(obj.top);
            var dy = parent.targetY - cy;
            obj.top = (.1 * dy + 1 * cy) + 'px';
        
            if (Math.abs(dy) < .01) {
                obj.top = parent.targetY + 'px';
                parent.stopSlide();
            };
        
        };

        this.isSliding = true;
        this.slideTimer = window.setInterval(slide, 10);
    };
};

pf.Locus = function(parent, idx, id, x, y, w, h, label)
{
    this.parent = parent;
    this.id = id;
    this.idx = idx;

    this.text = pf.ce('div', 0, 0);
    this.link = pf.ce('a',  35 + idx * 16, 10);
    this.link.className = 'link';
    this.link.innerHTML = '<b>&#183;</b> ' + label;
    pf.ac(this.parent.map, this.link);

    this.img = pf.ce('img', y, x);
    this.img.className = 'locus';
    this.img.width = w;
    this.img.height = h;
    this.img.src = pf.img + id + '-off.png';
    if (id == 'ca') this.img.style.zIndex = 1;
    if (id == 'fi') this.img.style.zIndex = 1;
    var obj = this;
    this.img.onmouseover = function() { obj.hover(); };
    this.link.onmouseover = this.img.onmouseover;

    this.img.onmouseout = function() { obj.unhover(); };
    this.link.onmouseout = this.img.onmouseout;

    this.img.onclick = function() { obj.parent.showDesc(id, label); };
    this.link.onclick = this.img.onclick;

    pf.ac(this.parent.map, this.img);
};

pf.lp = pf.Locus.prototype;

pf.lp.hover = function()
{
    this.img.src = pf.img + this.id + '-on.png';
    this.link.style.color = '#005aa1';
};

pf.lp.unhover = function()
{
    this.img.src = pf.img + this.id + '-off.png';
    this.link.style.color = '#00a1e7';
};

///

pf.Slider = function(parent, x, y, h)
{    
    this.parent = parent;
    this.root = pf.ce('div', y, x);
    this.bg = new pf.VRect(this.root, h, 's');

    var handleH = 60;
    this.handle = new pf.VRect(this.root, handleH, 'sh');

    this.maxY = h - handleH;

    var obj = this;
    this.handle.root.onmousedown = function(e) { obj.startDrag(e); };
    this.handle.root.onmouseup = function(e) { obj.stopDrag(e); };

    pf.ac(this.parent, this.root);    

    this.posListeners = [];
};

pf.sp = pf.Slider.prototype;

pf.sp.disable = function()
{
    this.handle.root.style.visibility = 'hidden';
};

pf.sp.enable = function()
{
    this.handle.root.style.visibility = 'visible';
};

pf.sp.startDrag = function(e)
{    
    e = pf.event(e);
    if (e.preventDefault) e.preventDefault();

    this.y = pf.mouseY(e);

    var prev = this.y; 
    var start = pf.numeric(this.handle.root.style.top);

    var obj = this;
    document.onmousemove = function(e) {
        e = pf.event(e);
        var dy = pf.mouseY(e) - prev;

        var y = start + dy;

        if (y > obj.maxY) { y = obj.maxY; };
        if (y < 0) { y = 0; };

        obj.setPos(y);
    };

    document.onmouseup = this.handle.root.onmouseup;

    // IE
    e.stopPropagation();
};

pf.sp.setPos = function(y)
{
    this.handle.root.style.top = y + 'px';
    this.notifyPosChanged(y);
};

pf.sp.stopDrag = function(e)
{
    document.onmousemove = null;
    document.onmouseup = null;
};

pf.sp.notifyPosChanged = function(y)
{
    var normY = y / this.maxY;

    for (var i = 0; i < this.posListeners.length; i++) {
        this.posListeners[i].firePosChanged(normY);
    };
};

pf.sp.addPosListener = function(obj) 
{
    this.posListeners.push(obj);
};

pf.VRect = function(parent, h, prefix)
{
    this.parent = parent;
    this.root = pf.ce('div',0,0);
    var w = 15;

    this.top = pf.ce('img',0,0);
    this.top.width = w;
    this.top.height = 5;
    this.top.src = pf.img + prefix + '-top.png';
    
    this.mid = pf.ce('img', 5, 0);
    this.mid.width = w;
    this.mid.height = h;

    // IE
    this.mid.style.height = h;

    this.mid.src = pf.img + prefix + '-mid.png';

    this.bot = pf.ce('img', 5 + h, 0);
    this.bot.width = w;
    this.bot.height = 5;
    this.bot.src = pf.img + prefix + '-bot.png';
    
    pf.ac(this.root, this.top);
    pf.ac(this.root, this.mid);
    pf.ac(this.root, this.bot);
    pf.ac(this.parent, this.root);
};

pf.vrp = pf.VRect.prototype;