'use strict';

// ensure viewport state is updated before loading elements

renderRect();
appendText();
updateText();
// add a listener to catch responsive events
W.addListener(update);

function update() {
	renderRect();
	updateText();
}

function renderRect() {
	// Get the current viewport width
	var width = W.getViewportWidth();
	// Get the current viewport height
	var height = W.getViewportHeight();

	var svg = d3.select('#vis').attr({
		preserveAspectRatio: 'xMidYMid meet',
		viewBox: '0 0 ' + width + ' ' + height,
		class: 'bg-silver'
	});

	// render rect (ratio of screen)
	if (svg.selectAll('.sampleRect').empty()) {
		initRect();
	}

	// update
	svg.selectAll('.sampleRect').attr({
		width: width / 2,
		height: height / 2,
		x: width / 2 - width / 4,
		y: height / 2 - height / 4
	});

	function initRect() {
		svg.append('rect').attr({
			class: 'sampleRect fill-yellow',
			width: width / 4,
			height: height / 4,
			x: width / 2 - width / 4,
			y: height / 2 - height / 4
		});
	}
}

function appendText() {
	var text = ['textOrientation', 'textWidth', 'textHeight'];

	d3.select('#vis').selectAll('.details').data(text).enter().append('text').attr({
		class: 'details',
		id: function id(d) {
			return d;
		},
		x: 25,
		y: function y(d, i) {
			return (i + 1) * 30;
		}
	});
}

function updateText() {
	// get the orientation of the device (return 'portrait' or 'landscape')
	var orientation = W.getOrientation();
	// get the current viewport width
	var width = W.getViewportWidth();
	// get the current viewport height
	var height = W.getViewportHeight();

	var selection = d3.select('#vis');

	selection.select('#textOrientation').text('Orientation: ' + orientation);

	selection.select('#textWidth').text('Viewport width: ' + width);

	selection.select('#textHeight').text('Viewport height: ' + height);
}