"use strict";

require("./index.styl");

var React = require("react");
var Carousel = require("merry-go-round/Carousel");

var MAX_WIDTH = 1024/*px*/;
var MARGIN = 16/*px*/;
var ANIMATION_DURATION = 400/*ms*/;
var COLORS = [
    "blue",
    "green",
    "red",
    "cyan",
    "magenta",
    "pink",
    "orange",
    "maroon",
    "cornflowerblue",
    "blanchedalmond",
    "chartreuse",
    "olive",
];

var Page = React.createClass({
    render () {
        var boxes = COLORS.map((color, index) => {
            color = COLORS[(index + this.props.index) % COLORS.length];
            return (
                

                    { this.props.page.text }
                
            );
        });

        return (
            

                { boxes }
            
        );
    },
});

var MyCarousel = React.createClass({
    getInitialState () {
        return {
            screenWidth: window.innerWidth,
            pageIndex: 0,
            previousPageIndex: 0,
        };
    },

    updateScreenSize () {
        this.setState({
            screenWidth: window.innerWidth,
        });
    },

    componentDidMount () {
        window.addEventListener("resize", this.updateScreenSize, false);
    },

    handleSwipe (event) {
        var pageIndex = this.state.pageIndex + event.sign;
        this.setState({ pageIndex: pageIndex });

        clearTimeout(this.animationTimer);
        this.animationTimer = setTimeout(() => {
            this.setState({ previousPageIndex: pageIndex });
        }, ANIMATION_DURATION);
    },

    render () {
        var pages = [{
            text: "foo",
        }, {
            text: "bar",
        }];

        var width = Math.min(this.state.screenWidth, MAX_WIDTH);
        var pageWidth = width - MARGIN * 2;
        var height = Math.ceil(pageWidth / 21 * 9);

        return (
            
        );
    },
});

React.initializeTouchEvents();
React.renderComponent(MyCarousel(), document.getElementById("example"));

// expose for React devtools.
window.React = React;

.merry-go-round
    position: relative

    &__slider
        position: relative
        width: 9999px

        &--moving
            transition: all 0.4s ease-out

    &__page
        position: absolute
        float: left

.page
    width: 100%
    height: 100%

// just to make the boxes look more interesting :)
.box
    float: left
    display: inline-block
    width: 23%
    height: 30%
    border: 2px solid black
    margin: 0 1% 1.5333%
    box-shadow: 0 0 40px #000 inset
    text-align: center
    color: #fff
    line-height: 12vw