// NOTE:  Since the hourly screen data is so dynamic, it's best to create the 
//        XAML on the fly. For future reference, this is much easier in .NET

var hourlyScreen;
var hourlyDisplay;
var hourlyHostControl;

var hourlyElements = new Array();

var hourlyScrollOffset = 14;

function OnHourlyScreenLoaded(sender)
{
    //alert("HourlyScreenLoaded");
    hourlyScreen = sender.findName("HourlyForecastScreen");
    hourlyDisplay = sender.findName("HourlyDisplay");
    hourlyHostControl = sender.getHost();
 
    // Clear out any old hours
    clearOldHours();
    
    // TODO: Justin, you need to setup this loop to add hours
    // to the display. There are 3 functions you want to call:
    // addDayHeader(day, date)
    // addLightHour(hour, weatherIconSource, temperature, description)
    // addDarkHour(hour, weatherIconSource, temperature, description)
    //
    // The difference between light and dark hours is the background color.
//    var i;
//    addDayHeader("Wednesday", "February 20, 2008");
//    for(i = 0; i < 12; i+=2)
//    {
//        addDarkHour((i + 1) + "pm", "Media/weather_icon.png", "35°F", "Chance of Rain Showers");
//        addLightHour((i+2) + "pm", "Media/weather_icon.png", "35°F", "Chance of Thunderstorms");
//    }
//    
//    addDayHeader("Thursday", "Februrary 21, 2008");
//    for(i = 0; i < 12; i+=2)
//    {
//        addDarkHour((i+1) + "pm", "Media/weather_icon.png", "35°F", "Even colder");
//        addLightHour((i+2) + "pm", "Media/weather_icon.png", "35°F", "Even colder");
//    }
//    applyHourDisplays();
}

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

function clearOldHours()
{
    // Remove any old hour records 
    for(var i = 0; i < hourlyElements.length; ++i)
    {
        hourlyDisplay.children.remove(hourlyElements[i]);
    }
    
    hourlyElements = new Array();
}

function addDayHeader(day, date)
{
   // Draw the bar
    var dayHeader = hourlyHostControl.content.createFromXaml(
        '<Canvas Width="196" Height="28">'
      + '  <Rectangle Width="196" Height="28" Fill="#FFFFFFFF" Stroke="#FF94B6DC" RadiusX="0" RadiusY="0"/>'
      + '  <TextBlock Width="164.828" Height="19.5" TextWrapping="Wrap" Canvas.Left="18" Canvas.Top="3">'
      + '    <Run  FontSize="12" FontWeight="Bold" Foreground="#FF0F2187" Text="Day"/>'
      + '    <Run Text=" "/>'
      + '    <Run  FontSize="10" Foreground="#FF0F2187" Text="Date"/>'
      + '  </TextBlock>'
      + '</Canvas>'
      );
    
    // If the XAML is modified, make sure that the indexes into the runs still works.  
    var textblock = dayHeader.children.getItem(1);
    var dayRun = textblock.inlines.getItem(0);
    
    // Interesting bug (I think). In the middle run, each space is considered a run.
    var dateRun = textblock.inlines.getItem(4);
    
    /*
    // If something goes wrong with the above code, this loop
    // will help debug the text runs.
    for(var i = 0; i < textblock.inlines.count; ++i)
    {
        var run = textblock.inlines.getItem(i);
        alert(i);
        alert(run.text);
        alert(run.FontSize);
        alert(run.FontFamily);
    }
    */
    
    dayRun.text = day;
    dateRun.text = date;
      
    hourlyElements[hourlyElements.length] = dayHeader;
}

function addDarkHour(hour, weatherIconSource, temperature, description)
{
    var hourControl = hourlyHostControl.content.createFromXaml(
        '<Canvas Width="196" Height="28">'
      + '  <Rectangle Width="196" Height="28" Fill="#FF94B6DC" Stroke="#FF94B6DC" RadiusX="0" RadiusY="0"/>'
      + '  <TextBlock Width="27" Height="15" Canvas.Left="5" Canvas.Top="7.934" Text="12pm" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>'
      + '  <TextBlock Width="27" Height="15" Canvas.Left="60" Canvas.Top="7.934" Text="135°F" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>'
      + '  <TextBlock Width="100" Height="15" Canvas.Left="85" Canvas.Top="7.934" Text="Chance of Thunderstorms"  FontSize="10" Foreground="#FF0F2187"/>'
      + '  <Image Width="22" Height="22" Source="Media/weathericon_bg.png" Stretch="Fill" Canvas.Left="35" Canvas.Top="2.583"/>'
      + '  <Image Width="22" Height="22" Source="" Stretch="Fill" Canvas.Left="35" Canvas.Top="2.583"/>'
      + '</Canvas>'
      );
      
    hourControl.children.getItem(1).text = hour;
    hourControl.children.getItem(2).text = temperature;
    hourControl.children.getItem(3).text = description;
    hourControl.children.getItem(5).source = weatherIconSource;
   
    hourlyElements[hourlyElements.length] = hourControl;
}

function addLightHour(hour, weatherIconSource, temperature, description)
{
    var hourControl = hourlyHostControl.content.createFromXaml(
        '<Canvas Width="196" Height="28">'
      + '  <Rectangle Width="196" Height="28" Fill="#FFFFFFFF" Stroke="#FF94B6DC" RadiusX="0" RadiusY="0"/>'
      + '  <TextBlock Width="27" Height="15" Canvas.Left="5" Canvas.Top="7.934" Text="12pm" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>'
      + '  <TextBlock Width="27" Height="15" Canvas.Left="60" Canvas.Top="7.934" Text="135°F" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>'
      + '  <TextBlock Width="100" Height="15" Canvas.Left="85" Canvas.Top="7.934" Text="Chance of Thunderstorms"  FontSize="10" Foreground="#FF0F2187"/>'
      + '  <Image Width="22" Height="22" Source="Media/weathericon_bg.png" Stretch="Fill" Canvas.Left="35" Canvas.Top="2.583"/>'
      + '  <Image Width="22" Height="22" Source="" Stretch="Fill" Canvas.Left="35" Canvas.Top="2.583"/>'
      + '</Canvas>'
      );
      
    hourControl.children.getItem(1).text = hour;
    hourControl.children.getItem(2).text = temperature;
    hourControl.children.getItem(3).text = description;
    hourControl.children.getItem(5).source = weatherIconSource;
   
    hourlyElements[hourlyElements.length] = hourControl;
}

function OnHourlyScrollDown(sender, args)
{
    var maxHeight = 28 * (hourlyElements.length);
    var canvasHeight = hourlyScreen.findName("HourlyDisplayMain").height;
    var xform = hourlyDisplay.renderTransform.children.getItem(3);
    var y = xform.y;
    var minY = canvasHeight - maxHeight - (hourlyScrollOffset * 1.5); 
    
    if(y < minY + hourlyScrollOffset)
    {
        xform.y = minY;
    }
    else
    {
        xform.y = y - hourlyScrollOffset;
    }
}

function OnHourlyScrollUp(sender, args)
{
    var xform = hourlyDisplay.renderTransform.children.getItem(3);
    var y = xform.y;
    
    if(y > -hourlyScrollOffset)
    {
        xform.y = 0;
    }
    else
    {
        xform.y = y + hourlyScrollOffset;
    }
}


// Source XAML
/*
      <Canvas Width="194" Height="28" x:Name="DayHeader">
        <Rectangle Width="194" Height="28" Fill="#FFFFFFFF" Stroke="#FF94B6DC" RadiusX="0" RadiusY="0"/>
        <TextBlock Width="164.828" Height="19.5" TextWrapping="Wrap" Canvas.Left="18.303" Canvas.Top="7.295">
          <Run  FontSize="12" FontWeight="Bold" Foreground="#FF0F2187" Text="Monday"/>
          <Run Text=" "/>
          <Run  FontSize="10" Foreground="#FF0F2187" Text="   February 18, 2008"/>
        </TextBlock>
      </Canvas>

      <Canvas Width="194" Height="28" Canvas.Top="28" x:Name="DarkHour">
        <Rectangle Width="194" Height="28" Fill="#FF94B6DC" Stroke="#FF94B6DC" RadiusX="0" RadiusY="0"/>
        <TextBlock Width="27" Height="15" Canvas.Left="7.534" Canvas.Top="7.934" Text="12pm" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>
        <TextBlock Width="27" Height="15" Canvas.Left="74.692" Canvas.Top="7.934" Text="135°F" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>
        <TextBlock Width="80" Height="15" Canvas.Left="106.549" Canvas.Top="7.934" Text="Mostly Cloudy" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>
        <Image Width="22" Height="22" Source="Media/weathericon_bg.png" Stretch="Fill" Canvas.Left="43.911" Canvas.Top="2.583"/>
        <Image Width="22" Height="22" Source="Media/weather_icon.png" Stretch="Fill" Canvas.Left="43.911" Canvas.Top="2.583"/>
      </Canvas>

      <Canvas Width="194" Height="28" Canvas.Top="56" x:Name="LightHour">
        <Rectangle Width="194" Height="28" Fill="#FFFFFFFF" Stroke="#FF94B6DC" RadiusX="0" RadiusY="0"/>
        <TextBlock Width="27" Height="15" Canvas.Left="7.534" Canvas.Top="7.934" Text="12pm" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>
        <TextBlock Width="27" Height="15" Canvas.Left="74.692" Canvas.Top="7.934" Text="135°F" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>
        <TextBlock Width="80" Height="15" Canvas.Left="106.549" Canvas.Top="7.934" Text="Mostly Cloudy" TextWrapping="Wrap"  FontSize="10" Foreground="#FF0F2187"/>
        <Image Width="22" Height="22" Source="Media/weathericon_bg.png" Stretch="Fill" Canvas.Left="43.911" Canvas.Top="2.583"/>
        <Image Width="22" Height="22" Source="Media/weather_icon.png" Stretch="Fill" Canvas.Left="43.911" Canvas.Top="2.583"/>
      </Canvas>
*/