micktwomey/slideshow.html

## slideshow.html
<html>
<head>
  <title>London GameCraft 2014</title>
  <meta application-name="London GameCraft 2014" data-allowsresizing="YES" data-default-size="4,3" data-min-size="4,3" datamax-size="16,12" data-allows-scrolling="NO" />
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    body {
      font-family: "Roadgeek 2005 Series C";
      font-family: "Roadgeek 2005 Series D";
      font-family: "Roadgeek 2005 Series EM";
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

<div id="slideshow"></div>

<script src="http://fb.me/react-with-addons-0.12.1.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<!-- <script src="slideshow.js" type="text/jsx"></script> -->
<script type="text/jsx">
var Slideshow = React.createClass({
    getInitialState: function() {
        console.log("Getting initial state");
        var slides = [
            "https://www.dropbox.com/s/wzqv2uhg9yomvpc/ms.jpg",
            "https://www.dropbox.com/s/y2haa2kehlmkqx3/sponsors.002.jpg?dl=1",
            "https://www.dropbox.com/s/eduv3px5wl8544v/sponsors.003.jpg?dl=1",
            "https://www.dropbox.com/s/xvd2zal6946476f/sponsors.004.jpg?dl=1"
        ];
        return {
            slides: slides,
            image: slides[0],
            index: 0
        };
    },
    rotateImage: function() {
        console.log(this.state);
        console.log(this.state.index);
        console.log(this.state.slides.length);
        var new_index = Math.min(this.state.index + 1, this.state.slides.length - 1);
        var image = this.state.slides[new_index];
        console.log("Image will be", image, "index is now", new_index);
        this.setState({
            index: new_index,
            image: image
        });
    },
    componentDidMount: function() {
        setInterval(this.rotateImage, 6000);
    },
    render: function() {
        console.log("Rendering");
        return (
            <div className="slideshow">
                <img src={this.state.image} />
            </div>
        );
    }
});

React.render(
  <Slideshow />,
  document.getElementById('slideshow')
);
</script>
</body>
</html>
	<html>
	<head>
	<title>London GameCraft 2014</title>
	<meta application-name="London GameCraft 2014" data-allowsresizing="YES" data-default-size="4,3" data-min-size="4,3" datamax-size="16,12" data-allows-scrolling="NO" />
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}
	body {
	font-family: "Roadgeek 2005 Series C";
	font-family: "Roadgeek 2005 Series D";
	font-family: "Roadgeek 2005 Series EM";
	}

	img {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>

	<div id="slideshow"></div>

	<script src="http://fb.me/react-with-addons-0.12.1.min.js"></script>
	<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
	<!-- <script src="slideshow.js" type="text/jsx"></script> -->
	<script type="text/jsx">
	var Slideshow = React.createClass({
	getInitialState: function() {
	console.log("Getting initial state");
	var slides = [
	"https://www.dropbox.com/s/wzqv2uhg9yomvpc/ms.jpg",
	"https://www.dropbox.com/s/y2haa2kehlmkqx3/sponsors.002.jpg?dl=1",
	"https://www.dropbox.com/s/eduv3px5wl8544v/sponsors.003.jpg?dl=1",
	"https://www.dropbox.com/s/xvd2zal6946476f/sponsors.004.jpg?dl=1"
	];
	return {
	slides: slides,
	image: slides[0],
	index: 0
	};
	},
	rotateImage: function() {
	console.log(this.state);
	console.log(this.state.index);
	console.log(this.state.slides.length);
	var new_index = Math.min(this.state.index + 1, this.state.slides.length - 1);
	var image = this.state.slides[new_index];
	console.log("Image will be", image, "index is now", new_index);
	this.setState({
	index: new_index,
	image: image
	});
	},
	componentDidMount: function() {
	setInterval(this.rotateImage, 6000);
	},
	render: function() {
	console.log("Rendering");
	return (
	<div className="slideshow">
	<img src={this.state.image} />
	</div>
	);
	}
	});

	React.render(
	<Slideshow />,
	document.getElementById('slideshow')
	);
	</script>
	</body>
	</html>