Basically all of the UI objects we were using for bandscape (the concert aggregator)

UIobjects.js

// DOM objects used in bandscape main view
// author: Artur Sapek
// bandscape 2011

// pre: nothing
// post: returns top-right control on the map, date and city (city doesn't do anything) and injects into DOM
function dateControl(){
	var me = this;
	this.dropdownFairGame = true;
	this.keepopen = false;
	this.keepDateOpen = this.keepCityOpen = false;
	this.lastNonSpecifyOption = maptime_src;
	
	// DOM OBJECTS
	var names = ['container', 'all', 'maptime_container', 'maptime_content'];
	for (var x in names){
		this[names[x]] = createC('div', { className: 'timeControl_' + names[x], id: 'timeControl_' + names[x] });
	}
	this._text_ = createC('div', { className: 'timeControl_regText padding_16'}, 'bands playing ');
	this.maptime_content.innerHTML = maptime;
	var textToValues = {'tonight':'tonight','tomorrow night':'tomorrow','this weekend':'weekend','this week':'week','next weekend':'nextweekend','next week':'nextweek'};
	this.days = analyzeDates(maptime);
	var findMaptime = this.days.indexOf(maptimeParse(maptime_src)[0]);
	if (findMaptime >- 1){  this.days.splice(findMaptime, 1);  }
	//
	appendobj([ [this.container, this.all], [this.all, this._text_], [this.all, this.maptime_container],  [this.maptime_container, this.maptime_content]]); // must be in this order
	$(this.maptime_container).mouseenter(function(){ // specify
		if (me.dropdownFairGame){
			me.dropdown();
			me.maptime_content.className = 'timeControl_content_drained';
		}
	}).mouseleave(function(){
		if (me.dropdownFairGame){
			me.closeDropdown();
		}		
	});		
	this.initSpecify = function(){
		me.closeDropdown();
		me.dropdownFairGame = false;
		$(me.maptime_content).remove();
		me.specify_inputbox = createC('input', { 'type' : 'text', 'className': 'specifyControl_textbox specifyControl_textbox_selected' } );
		me.maptime_container.appendChild(me.specify_inputbox);
		$(me.specify_inputbox).focus().autoGrowInput({ comfortZone: 0, minWidth: 25, maxWidth: 300 }).keydown(function(event){ 
			if (event.which == 13){  // when they hit enter, commit it
				me.maptime_content = new createC('div', { 'className': 'timeControl_maptime_content' }, $(me.specify_inputbox).val() );
				me.dropdownFairGame = true;
				$(me.maptime_container).append(me.maptime_content);
				parseSpecifyInput($(this).val())
				me.maptime_content.innerHTML = ''
				me.maptime_content.id = 'timeControl_maptime_content';
				globals.loaderIMG = createC('img', {'src': '/media/img/date loader.gif'})
				me.maptime_content.appendChild(globals.loaderIMG);
				
				$(this).remove()
				event.stopPropagation();
			}
		});
	}	
	this.dropdown = function(){
		var days = analyzeDates(me.maptime_content.innerHTML);
		var findMaptime = this.days.indexOf(maptimeParse(maptime_src)[0]);
		if (findMaptime >- 1){  this.days.splice(findMaptime, 1);  } //  remove current selection from options list
		var co = me.dropdown_container = createC('div', { className: 'timeControl_dropdown_container'});
		$(co).mouseenter(function(){ // the dropdown container
			me.keepopen = true;
		}).mouseleave(function(){
			me.keepopen = false;
		});
		me.maptime_container.appendChild(co);
		for (var d = 0; d < days.length; d ++){	
			co.appendChild(new this.dayOption(days[d]));
		}
	}
	this.closeDropdown = function(){
		rem(me.dropdown_container);
		me.keepopen = false;
		me.maptime_content.className = 'timeControl_maptime_content';
	}
	this.dayOption = function(x){
		var dayOptionContainer = createC('div', {className:'timeControl_dayOption_container'});
		var dayOptionContent = createC('div',  {className:'timeControl_dayOption_content'}, x);
		if (x == 'specify...'){
			$(dayOptionContainer).click(function(){
				me.initSpecify();
				me.days = analyzeDates('f');
			});
		} else {
			$(dayOptionContainer).click(function(){
				me.lastNonSpecifyOption = textToValues[x];
				me.days = analyzeDates(textToValues[x]);
				hash(textToValues[x]);
				var oldTimeSelection = me.maptime_content.innerHTML;
				me.maptime_content.innerHTML = '';
				me.maptime_content.id = 'timeControl_maptime_content';
				globals.loaderIMG = createC('img', {'src': '/media/img/date loader.gif'})
				me.maptime_content.appendChild(globals.loaderIMG);
				me.closeDropdown();
			}).mouseenter(function(){
				me.maptime_content.className = 'timeControl_content_drained'; // set styles to open button
			});	
		}
		dayOptionContainer.appendChild(dayOptionContent);
		return dayOptionContainer;
	}
	$('#map_container').prepend( this.container );
}

function bandFocus(x){
	var me = this;
	var container = this.container = createC('div', {className: 'focus_container'});
	this.all = createC('div', {className: 'focus_main'});
	this.bandname = createC('div', {className: 'focus_bandname'}, x.name);
	this.subhead = createC('div', {className: 'focus_subhead'});
	var info = this.info = createC('div', {className: 'focus_info'});
	if (x.cover){ 
		this.albumcover = new Image();
		this.albumcover.onload = function(){
			info.style.left = this.width + 30 + 'px';
			
		};
		this.albumcover.className = 'focus_cover';
		this.albumcover.src = ('/media/img/covers/' + sanitize(x.name.replace('The ','').substring(0,1)) + '/' + sanitize(x.name, false) + '.jpg').split(' ').join('');
		appendobj([ [this.all, this.albumcover] ]);
	}
	appendobj([ [this.container, this.all], [this.all, this.info], [this.info, this.bandname], [this.info, this.subhead], 
				[this.subhead,createC('span', {className: '_bf_dark'}, x.genre)] ]);
	if (x.origin != '') appendobj([ [this.subhead,createC('span', {className: '_bf_grey'}, ' from ')], [this.subhead,createC('span', {className: '_bf_dark'}, x.origin)] ])
	if (x.listen){
		var site = x.listen.match(/\w+\.com|\w+\.fm/gi).toString().replace('.com','').split('.').join('');
		this.listen = createC('div', {className: 'focus_listen'});
		this.listento = createC('div', {className: 'focus_listento'}, 'listen to ' + x.name);
		this.listenlink = createC('a', {className: 'focus_listenlink _ll_' + site, href: x.listen, target: '_blank'}, 'on ' + site + ' »');
		appendobj([ [this.all, this.listen], [this.listen, this.listento], [this.listen, this.listenlink] ]);
	}
	return this.container;
}

function venueFocus(x){
	this.saniname = sanitize(x.name, false, false);
	this.iconsrc = '/media/img/vmarkers/' + this.saniname + '.png';
	var container = this.container = createC('div', {className: 'focus_container'});
	this.all = createC('div', {className: 'focus_main'});
	this.icon = new Image;
	var info = this.info = createC('div', {className: 'focus_info'});
	this.icon.onload = function(){
		info.style.left = this.width + 40 + 'px';
		$('#hub_elements').append(container);
	};
	this.icon.className = 'focus_vicon';
	this.icon.src = this.iconsrc;
	this.venuename = createC('div', {className: 'focus_bandname'}, x.name);
	this.neighborhood = createC('div', {className: 'focus_subhead'}, x.neighborhood);
	this.address = createC('div', {className: 'focus_address'}, x.address);
	appendobj([ [this.all, this.icon], [this.container, this.all], [this.info, this.venuename], [this.info, this.neighborhood], [this.info, this.address], [this.all, this.info] ]);
	return this.container;
}

// pre: pass in raw input from user
// post: hopefully return a parsed date object or the last valid option selected before
function parseSpecifyInput(x){
							   // this will probably be used a lot so it has to be thorough
	var monthsWritten = { '01': ['jan', 'january'], '02': ['feb', 'febuary', 'february'], '03': ['mar', 'march'], '04': ['apr', 'april'], '05': ['may'], '06': ['jun', 'june'], '07': ['jul', 'july'],
		     			  '08': ['aug', 'august'], '09': ['sep', 'sept', 'september'], '10': ['oct', 'october'], '11': ['nov', 'november'], '12': ['dec', 'december'] }
	var month = null;
	var day = null;
	// find seperator
	var seperators = ['-', ' ', '.', '/', '\\']; // 99%
	var confirmedSeperators = [ ];
	for (var s in seperators){
		if (x.indexOf(seperators[s]) != -1){
			confirmedSeperators.push(seperators[s]); // this figures out what is seperating the entry. ex 1[.]12[.]11 or March[ ]12 etc.
		}
	}
	if (confirmedSeperators.length == 1){ // else nothing for now, i dont imagine that will ever happen
		var xSplit = x.split(confirmedSeperators[0]);
	} else {
		xSplit = new Array(x);
	}
	
	var foundNumbers = [ ];
	var foundText = [ ];
	
	if (xSplit.length > 1){
		for (var p in xSplit){
			var numberFound = false;
			var matchNumbers = xSplit[p].match(/\d+/gi);
			var matchText = xSplit[p].match(/[A-Z]/gi);
			if (matchNumbers){
				foundNumbers.push(matchNumbers.join(''));
				numberFound = true;
			} else {
				foundNumbers.push('');
			}	
			if (matchText){
				if (!numberFound){
					foundText.push(matchText.join(''));
				} else {
					if (['th', 'st', 'rd'].indexOf(matchText.join('')) == -1){
						foundText.push(matchText.join(''));
					} else {
						foundText.push('');	
					}
				}
			} else {
				foundText.push('');	
			}
		}
	} else {
		if(xSplit[0].match(/\d+/gi)){
			var foundNumbers = new Array(xSplit[0].match(/\d+/gi).join(''));
		}
		if(xSplit[0].match(/[A-Z]/gi)){
			var foundText = new Array(xSplit[0].match(/[A-Z]/gi).join(''));
		}
	}

	var numberofKeywords = xSplit.length;
	
	for (var i = 0; i < numberofKeywords; i ++){
		if (foundNumbers[i] != '' && foundText[i] == ''){ // number
			if (!month && foundNumbers.length > i){
				month = (parseInt(foundNumbers[i]) - 1).toString();
				if (month.length == 1){
					month = '0' + (parseInt(month) + 1).toString();
				}
			} else if (month && parseInt(foundNumbers[i]) <= {1:31, 2:28, 3:31, 4:30, 5:31, 6:30, 7:31, 8:31, 9:30, 10:31, 11:30, 12:31}[parseInt(month)] && !day){
				day = foundNumbers[i];
			}
		} else if (foundNumbers[i] == '' && foundText[i] != ''){ // text
			for (var m in monthsWritten){
				if (monthsWritten[m].indexOf(foundText[i].toLowerCase()) != -1){
					month = m;
				}
			}
		} else {
			// ,'>/
		}
	}
	if (day && day.length == 1){
		day = '0' + day;
	}
	if ((month + day).length == 4){
		hash(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'][parseInt(month) - 1] + day);
	} else {
		hash(dateControl.lastNonSpecifyOption); // resort to last good option
	}	
}

// pre: pass in the date option clicked, so as to exclude it
// post: return list of date options for dropdown list relative to day of the week
function analyzeDates(y){
	var tonight = maptimeParse(0)[1][0].getDay();
	var days = [ ];
	var p = ['tonight', 'tomorrow night'];
	for (var o in p){
		if (y != p[o]){
			days.push(p[o]);
		}
	}
	var p = [[[0,5,6], 'this weekend'],[[0,5,6],'this week']];
	for (var o in p){
		if (p[o][0].indexOf(tonight) == -1 && p[o][1] != y){
			days.push(p[o][1]);
		}
	}
	var p = ['next weekend', 'next week']
	for (var o in p){
		if (p[o] != y){
			days.push(p[o]); //always offer this
		}
	}
	days.push('specify...');
	return days;
}

// pre: pass in maptime_src in mmddyy format
// post: return array of semantic version and Date object version of that particular day
function maptimeParse(x){
	if (x.length >= 4){
		var month = x.substring(0,2);
		var day = parseInt(x.substring(2,4));
		if (month.substring(0,1) == '0'){
			month = parseInt(month.substring(1));
		} else {
			month = parseInt(month);
		}
		if (x[2] == '0'){ day = parseInt(x[3]); }
		if (day <= {1:31, 2:28, 3:31, 4:30, 5:31, 6:30, 7:31, 8:31, 9:30, 10:31, 11:30, 12:31}[month]) {
			var specific = new Date(); specific.setFullYear(2012, month - 1, day);
			var string = 'Sun,Mon,Tue,Wed,Thu,Fri,Sat'.split(',')[specific.getDay()] + ', ' + 
			'Jan,Feb,March,April,May,June,July,Aug,Sept,Oct,Nov,Dec'.split(',')[specific.getMonth()] + ' ' + 
			specific.getDate();
			return [string,[specific]];
		}
	} else {	
		if (x == 0){ return ['tonight',[new Date()]]; }
		if (x == 1){ var tomo = new Date(); tomo.setDate(tomo.getDate()+1); return ['tomorrow night',[tomo]]; }
		if (x == 2){ var fri = new Date(), sat = new Date(); fri.setDate(sat.getDate()+(5 - fri.getDay())); sat.setDate(sat.getDate()+(6 - sat.getDay())); return ['this weekend',[fri, sat]]; }
		if (x == 3){ var week = []; var y = 0; for (var i = 0; i < (8 - new Date().getDay()); i ++){var g = new Date(); g.setDate(g.getDate() + y); y ++; ;week.push(g);} return ['this week', week]; }
		if (x == 4){ var fri = new Date(), sat = new Date(); fri.setDate(sat.getDate()+(12 - fri.getDay())); sat.setDate(sat.getDate()+(13 - sat.getDay())); return ['next weekend',[fri, sat]]; }
		if (x == 5){ var week = []; var y = 0; for (var i = 0; i < 7; i ++){var g = new Date(); g.setDate(g.getDate() + (8 - g.getDay()) + y); y ++; week.push(g);} return ['next week', week]; }
	}
}

// pre: pass in show information
// post: returns show listing object. simple :)
function showListing(show){
	this.all = createC('div', {className: 'show_listing'});
	this.all.id = 'sl' + show.id;
	this.heading = createC('div', {className: '_sl_heading'}, maptimeParse(show.date)[0] + ' <span class="_sl_grey">at</span> ' + show.venue.name);
	this.all.appendChild(this.heading);
	for (var b in show.bands){
		var band = show.bands[b];
		var bt = new bandtab(band)
		this.all.appendChild(bt);
	}	
	var codes = show.price.match(/[A-Z][a-z]*/gi);
	if(codes){
		price = parsePrice(show.price, show.date);
	} else {
		price = show.price
	}
	
	this.info = createC('div', {className: '_sl_info'}, '<span class="_sl_price">' + price + '</span> / <span class="_sl_age">' + {true: '21+', false: 'all ages'}[show.twentyone] + '</span>');
	this.all.appendChild(this.info);
	return this.all
}

// pre: pass in name of neighborhood
// post: adds a neighborhood div to the swag
function neighborhoodGroup(name){
	var container = createC('div', {id: name.match(/\w+/gi).join(''), className: 'neighborhood_group'});
	var header = createC('div', {className: 'neighborhood_heading'}, name);
	$(container).append(header);
	$('#hub_elements').append(container);
	return container;
}

// pre: pass in price string with codes like ADV DAYOF UW
// post: spits out a semantic string to display
function parsePrice(x, showDate){
	parts = x.match(/\$[\w\.]*/gi);
	if (parts){
		if (parts.length == 1){
			return parts[0].match(/\$\d*/gi);
		} else {
			var today = new Date();
			var d = today.getDate();
			var m = (today.getMonth() + 1).toString();
			var y = today.getFullYear().toString().substring(2,4);
			if (d.length == 1){ d = '0' + d; }
			if (m.length == 1){ m = '0' + m; }
			var today = m + d + y;
			var prices = { };
			for (var p in parts){
				prices[parts[p].match(/[A-Z][a-z]*/gi).join()] = parts[p].match(/\$\d*/gi);
			}
			if (today == showDate && prices['dayof'] !== undefined){
				return prices['dayof']
			} else if(prices['dayof'] !== undefined) {
				return prices['adv']
			}
		}
	} else {
		return 'Free'
	}
}

// pre: pass in array of info for band or venue
// post: return DOM infobox to be injected into header
function bandtab(data){
	var name = data.name, genre = data.genre, origin = data.origin, albumsrc = data.cover;
	var coversrc = ('/media/img/covers/' + sanitize(name.replace('The ','').substring(0,1)) + '/' + sanitize(name, false) + '__.jpg').split(' ').join('');
	var all = createC("div", {className: "bandtab_all", id:sanitize(name, false, false)});
	var wrapper = createC("div", {className: "bandtab_wrapper"});
	var bandname = createC("div", {className: "bandtab_bandname"});
	var bandnamespan = createC("div", {className: "bandtab_bandnamespan"}, name);
	var genrespan = createC("span", {className: "bandtab_genrespan"}, '');
	if (genre != '') genrespan.innerHTML += genre;
	if (origin != '') genrespan.innerHTML += ' <span class="_sl_grey">from</span> ' + origin;
	if (albumsrc){ 
		var album = createC("img", {className: "bandtab_album", src: coversrc});
		preload(0, [('covers/' + sanitize(name.replace('The ','').substring(0,1)) + '/' + sanitize(name, false) + '.jpg').split(' ').join('')]);
	}
	appendobj([[bandname, bandnamespan]]);
	if (genre != '' || origin != ''){  appendobj([[bandnamespan, genrespan]]);  }
	if (albumsrc) appendobj([[all, album]]);
	if (genre == '' && origin == '' && !albumsrc){
		bandname.style.height ='42px';
		wrapper.style.height ='42px';
		all.style.height ='42px';
	}
	appendobj([[wrapper, bandname], [all, wrapper]]);
	if (genre != '' || origin != '' || albumsrc){
		$(all).click(function(){
			hash(URLsafe(name));
		}).addClass('_bt_clickable');
	}
	
	return all;
}

function URLsafe(x){
	var R = {' ':'_'}
	for (var r in R){
		x = x.split(r).join(R[r]);
	}
	return x
}