var y_offset    = 219;
var x_offset    = 190;
var cities      = new Array(
    new Array("raleigh", 366, 87),
    new Array("greensboro", 290, 70),
    new Array("greenville", 408, 82),
    new Array("wilmington", 338, 153),
    new Array("asheville", 171, 77),
    new Array("duncan", 200, 112),
    new Array("anderson", 210, 154),
    new Array("athens", 147, 168),
    new Array("augusta", 193, 210),
    new Array("chattanooga", 45, 99),
    new Array("gastonia", 232, 98)
);




/*******************************************************************************
    The onload attached event handler. Anything that should run once the page is 
    loaded, place here in this anonymous function.
*******************************************************************************/
window.onload = function() {
    place_cities();    
}
/* Ditto for resizing -- we need to replace the cities */
window.onresize = function() {
    turn_off_info();
    place_cities();
}


function place_cities() {
    x_offset    = parseInt((parseInt(document.body.offsetWidth) / 2) - 190);
    for (var i = 0; i < cities.length; i ++) {
        document.getElementById(cities[i][0]).style.left   = (x_offset + cities[i][1]) + "px";
        document.getElementById(cities[i][0]).style.top    = (y_offset + cities[i][2]) + "px";
    }
}

function get_city_index(city) {
    for (var i = 0; i < cities.length; i ++) {
        if (cities[i][0] == city) {
            return(i);
        }
    }
}

function turn_off_info() {
    for (var i = 0; i < cities.length; i ++) {
        document.getElementById(cities[i][0]).style.fontSize            = "11px";
        document.getElementById(cities[i][0]).className                         = "city";
        document.getElementById(cities[i][0] + "-info").style.display   = "none";
    }
    document.getElementById("pointer").style.display                    = "none";
}

function info_box(city) {
    var info_box    = document.getElementById(city + "-info");

    var display     = info_box.style.display;
    var star_height = parseInt(document.getElementById(city).offsetHeight);
    var city_index  = get_city_index(city);
        x_offset    = parseInt((parseInt(document.body.offsetWidth) / 2) - 190);
    var pointer     = document.getElementById("pointer");
        
    turn_off_info();
    
    if (display == "block") {
        info_box.style.display                          = "none";
        document.getElementById(city).className         = "city";
        pointer.style.display                           = "none";
    } else {
        info_box.style.display                          = "block";
        document.getElementById(city).className         = "city-big";
        document.getElementById(city).style.fontSize    = "16px";
        pointer.style.display                           = "block";
    }
    
    info_box.style.top  = (y_offset + cities[city_index][2]) + "px";
    pointer.style.top   = (y_offset + cities[city_index][2] - 11) + "px";
    
    info_box.style.left = (x_offset + cities[city_index][1] - 217) + "px";
    pointer.style.left  = (x_offset + cities[city_index][1] - 16) + "px";
//    pointer.style.border= "10px solid red";

    
    
}