import pages = require("ui/page");
import slider = require("ui/slider");
import imageSource = require("image-source");
import gridModule = require("ui/layouts/grid-layout");
import enums = require("ui/enums");

export function createPage() {
    var StackLayout = require("ui/layouts/stack-layout").StackLayout;
    var Image = require("ui/image").Image;

    var stack = new StackLayout();
    var grid = new gridModule.GridLayout();

    grid.addColumn(new gridModule.ItemSpec(1, gridModule.GridUnitType.auto));
    grid.addColumn(new gridModule.ItemSpec(1, gridModule.GridUnitType.star));

    grid.addRow(new gridModule.ItemSpec(1, gridModule.GridUnitType.auto));
    grid.addRow(new gridModule.ItemSpec(1, gridModule.GridUnitType.star));

    var sldr = new slider.Slider();
    gridModule.GridLayout.setColumnSpan(sldr, 2);
    sldr.maxValue = 500;
 
    stack.addChild(sldr);
    stack.addChild(grid);

    var image = new Image();
    image.stretch = enums.Stretch.fill;
    image.verticalAlignment = 2;
    image.horizontalAlignment = 1;

    image.source = imageSource.fromFile(__dirname + "test.png");
    grid.addChild(image);

    var page = new pages.Page();
    page.content = stack;
    page.css = "GridLayout { background-color: pink } image { background-color: green }";
    return page;
}
//export var Page = page;