<div id="app"></div>

@import 'https://fonts.googleapis.com/css?family=Oswald:700';

body {
	background: black;
	display: flex;
	align-items: center;
	height: 100vh;
}

.App {
	width: 100vw;
	height: 156px;
	display: flex;
	background: #000000;
	position: relative;
	font-family: 'Oswald';
	font-weight: 700;
}

.text-overlay {
	position: absolute;
	z-index: 1;
	height: 100%;
	width: 100%;
	color: white;
	display: flex;
	align-items: center;
	font-size: 160px;
	box-sizing: border-box;
	
	div {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 0 auto;
		width: 25%;
	}
}

.Column {
	height: 156px;
	flex: 1 0 auto;
	position: relative;
	mix-blend-mode: multiply;
	z-index: 2;
	align-items: center;
}

.Marker {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #019CDF;
	opacity: 1;
	border-radius: 2px;
	overflow: hidden;
	animation: hueylewisandthenews 10s infinite;
	
	&--seconds {
		transition: height 1s linear;
	}
	
	&::before {
		height: 20px;
		width: calc(760px * 2);
		background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wave.jpg);
		position: absolute;
		top: 0px;
		content: '';
		animation: wave 10s infinite linear;
	}
}

@keyframes wave {
	0% {
		left: 0;
	}
	
	100% {
		left: -760px;
	}
}

@keyframes hueylewisandthenews {
	0% {
		filter: hue-rotate(0deg);
	}
	
	50% {
		filter: hue-rotate(-30deg);
	}
	
	100% {
		filter: hue-rotate(0deg);
	}
}

var App = React.createClass({
	getInitialState: function() {
		return this.getDate();
	},
	getDate: function() {
		var newdate = new Date();
		var date = {};

		date.hours = newdate.getHours();
		date.minutes = newdate.getMinutes();
		date.seconds = newdate.getSeconds();

		return date;
	},
	updateDate: function() {
		this.setState(this.getDate());
	},
	renderDate: function() {
		var secondOffset = (date.seconds / 60) * 100 + '%';
		var minuteOffset = (date.minutes / 60) * 100 + '%';
		var hourOffset = (date.hours / 24) * 100 + '%';

		var secondopacity = (date.seconds / 60 * 100) / 100;
		var minuteopacity = (date.minutes / 60 * 100) / 100;
		var houropacity = (date.hours / 24 * 100) / 100;
	},
	componentDidMount: function() {
		var that = this;
		setInterval(function() {
			that.updateDate();
		}, 1000);
	},
	render: function() {
		return (
			<div className="App">
				<Marker type="hours" time={this.state.hours} />
				<Marker type="minutes" time={this.state.minutes} />
				<Marker type="seconds" time={this.state.seconds} />
				<div className="text-overlay">
					<Timer type="hours" time={this.state.hours} />
					<Timer type="minutes" time={this.state.minutes} />
					<Timer type="seconds" time={this.state.seconds} />
				</div>
			</div>
		);
	}
});

var Marker = React.createClass({
	render: function() {
		switch (this.props.type) {
			case 'hours':
				var measurement = 24;
				break;
			case 'minutes':
				var measurement = 60;
				break;
			case 'seconds':
				var measurement = 60;
				break;
		}
		
		var offset = (this.props.time / measurement) * 100 + '%';
		var opacity = (this.props.time / measurement * 100) / 100;
		
		var columnClasses = 'Column Column--' + this.props.type;
		var typeClasses = 'Marker Marker--' + this.props.type;
		return (
			<div className={columnClasses}>
				<div className={typeClasses} style={{height: offset, opacity: opacity}}></div>
			</div>
		);
	}
});

var Timer = React.createClass({
	render: function() {
		if (this.props.time < 10) {
			var time = '0' + this.props.time;
		} else {
			var time = this.props.time;
		}
		return (
			<div className={this.props.type}>{time}</div>
		);
	}
});

ReactDOM.render(
	<App />,
	document.getElementById('app')
);