var networkMap = null;
var mapController = null;
var currentCRS = null;

$(document).ready(function() {

    //show the splashscreen
    ShowSplash();

    //set up network map
    networkMap = new NetworkMap('myMap', 1, 4, false);

    //set up network map callbacks
    networkMap.OnDataLoad = function(data) {

        var options = "";
        for (var index in data.Items) {
            options += "<option value=\"" + data.Items[index].nearest_station_crs + "\">" +
                            data.Items[index].nearest_station_name +
                        "</option>";
        }

        $("select#station_select").html(options);

        HideSplash();

    };

    networkMap.OnPointSelected = function(point) {

        currentCRS = point.nearest_station_crs;

        $("select#station_select option[value='" + currentCRS + "']").attr("selected", "selected");

    };

    //call init before we try to get the map
    networkMap.init();

    //set up map controller
    mapController = new MapController(networkMap.GetMap(), 1, 4);

    //set up ui events
    $("#search_button").click(function() {

        currentCRS = $("select#station_select option:selected").val();

        networkMap.SelectPoint(currentCRS);

    });

    $("#print_button").click(function() {

        if (currentCRS != null) {
            window.open("printnetworkmap.aspx?stn=" + currentCRS, "", "width=600,height=660");
        }
        else {
            alert("Please Select a Station");
        }

    });
});


function ShowSplash() {

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

    //transition effect		
    //$('#mask').show();
    $('#mask').fadeTo("slow", 0.5);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $('#dialog').css('top', winH / 2 - $('#dialog').height() / 2);
    $('#dialog').css('left', winW / 2 - $('#dialog').width() / 2);

    //transition effect
    $('#dialog').css("opacity", "0");
    $('#dialog').show();
    $('#dialog').fadeTo("5000", 0.8);

    //make sure the mask stays the size of the page
    $(window).resize(function() {
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
    });
}

function HideSplash() {
    $('#mask').hide("fast");
    $('.window').hide("fast");    
}