var cityList;
var cityHostControl;
var cityPopup;

var cityScrollOffset = 14;

var cityRecords = new Array();

var newLocation = null;

function OnCityPopupLoaded(sender)
{
    cityList = sender.findName("CityList");
    cityHostControl = sender.getHost();
    cityPopup = sender.findName("CityPopup");
    
//    // Test code
//    var cities = new Array();
//    cities[0] = "Germantown, MD";
//    cities[1] = "Detroit, MI";
//    cities[2] = "Helsinki, Finland";
//    cities[3] = "Los Angeles, CA";
//    cities[4] = "London, England";
//    cities[5] = "New York, NY";
//    cities[6] = "Miami, FL";
//    cities[7] = "Savannah, GA";
//    cities[8] = "Santa Barbara, CA";
//    populateCityRecords(cities);
//    
//    // Do it twice to make sure the record clearing functionality works.
//    populateCityRecords(cities);

}

function clearOldCityRecords()
{
    for(var i = 0; i < cityRecords.length; ++i)
    {
        cityList.children.remove(cityRecords[i]);
    }

    cityRecords = new Array();
}

function fixupCityDisplays()
{
    // Each element is 28 pixels high.
    // Adjust the elements so that they line up nicely.
    for(var i = 0; i < cityRecords.length; ++i)
    {
        var element = cityRecords[i];
        element["Canvas.Top"] = i * 28;
        cityList.children.add(element);        
    }

}

function populateCityRecords(locationData)
{
    clearOldCityRecords();
    for(var i = 0; i < locationData.cityList.length; ++i)
    {
        var loc = locationData.cityList[i].city + ", ";
        loc += (locationData.cityList[i].isUs) ? locationData.cityList[i].state : locationData.cityList[i].country;
        var locCode = stringify(locationData.cityList[i]);
        addCityRecord(loc, locCode);
    }
    fixupCityDisplays();
}

function addCityRecord(city, locCode)
{
    var cityRecord = cityHostControl.content.createFromXaml(    
      '<Canvas Width="158" Height="28">'
    + '  <Rectangle Width="158" Height="28" Fill="#FFFFFFFF" Stroke="#FF94B6DC" RadiusX="0" RadiusY="0"/>'
    + '  <TextBlock Width="140" Height="20" TextWrapping="Wrap"  FontSize="12" Foreground="#FF0F2187" Text="" Canvas.Left="8" Canvas.Top="8"/>'
    + '  <TextBlock Width="0" Height="0" TextWrapping="Wrap"  FontSize="12" Foreground="#FF0F2187" Text="" Canvas.Left="8" Canvas.Top="8" Visibility="Collapsed" />'
    + '</Canvas>'
    );
    
    cityRecord.addEventListener("MouseLeftButtonDown", OnCitySelected);
    cityRecord.children.getItem(1).text = city;
    cityRecord.children.getItem(2).text = locCode;
    
    cityRecords[cityRecords.length] = cityRecord;
}
var newLocation = null;
function OnCitySelected(sender, args, locCode)
{
    //alert(sender.children.getItem(1).text);
    var locCode = sender.children.getItem(2).Text
    writeLine("locCode: " + locCode);
    
    ShowStationPopup(sender, null, locCode);
}

function OnCityScrollDown(sender, args)
{
    var maxHeight = 28 * cityRecords.length;
    var canvasHeight = cityList.findName("CityListMain").height;
    var xform = cityList.renderTransform.children.getItem(3);
    var y = xform.y;
    
    if(y <= canvasHeight - maxHeight)
    {
        xform.y = canvasHeight - maxHeight;
    }
    else
    {
        xform.y = y - cityScrollOffset;
    }
}

function OnCityScrollUp(sender, args)
{
    var xform = cityList.renderTransform.children.getItem(3);
    var y = xform.y;
    
    if(y >= 0)
    {
        xform.y = 0;
    }
    else
    {
        xform.y = y + cityScrollOffset;
    }
}

function ShowCityPopup(sender, args)
{
    cityPopup.opacity = 1;
    cityPopup.IsHitTestVisible = true;
}


function HideCityPopup(sender, args)
{
    cityPopup.opacity = 0;
    cityPopup.IsHitTestVisible = false;    
}