// define variables
var formatlist = ["%Y-%m-%d", "%m/%d/%Y", "%H:%M","%H:%M %p", "%B %d", "%d %b", "%d-%b-%y", "%S s", "%M m", "%H h", "%a", "%A", "%d d", "%b", "%m/%Y",
	"%b %Y", "%B", "%c", "%d", "%e", "%H", "%I", "%j", 
	"%m", "%M", "%L", "%p", "%S", "%U", "%w", "%W", "%x", "%X", "%y", "%Z" 
];
var userTime = document.getElementById("userTime");
var colorLow = 'blue'
var colorHigh = 'red'


// add listener to call formatter function when user changes the number
userTime.addEventListener("change",
	function(e) {
		myFormats.changeNumber(userTime.value);
	},
	false
);


// need way to update list
formatSpecifier.addEventListener("change",
	function(e) {
		myFormats.addToList(formatSpecifier.value);
	},
	false
);

// create a little color scale function to make the output look pretty
function setColorScale(max) {
	return d3.scale.linear()
		.domain([0, max])
		.interpolate(d3.interpolateRgb)
		.range([colorLow, colorHigh])
}

// construct code/text pairs from list of formats I could use
var constructFormatObject = function(mylist) {
	var types = [];
	mylist.forEach(function(d) {
		types.push({
			code: d3.time.format(d),
			text: 'd3.time.format("' + d + '")'
		})
	})
	return types
}

//Jan. 28, 1986, 11:38:00 a.m. EST
//Mission Duration: 1 minute, 13 seconds

var myFormats = new ShowFormats(
	formatlist,
	new Date(1986, 0, 28, 11, 39, 13));