window.addEvent('domready', function(){
	
	var container = $$('.citytable')[0];
	var links = $$('.citytable td');
	var maxWidth = container.getSize().x;
	var diff = maxWidth;
	
	links.each(function(el, i) {
		var isSelected = false;
		if (el.hasClass("city_on")) {
			el.removeClass('city_on')
			el.addClass('city')
			isSelected = true;
		}
		var width = el.getSize().x
		var href = el.getElement('a');
		var h = href.get('href');
		diff -= width;
		el.store('oldWidth', width);
		el.store('oldHref', h);
		href.set('href', '#');
		el.setStyle('textAlign', 'left');
		el.addEvent('click', function() {
			links.each(function(td, index) {
				if (i == index) {
					td.set('tween', {onComplete:function() { window.location = td.retrieve('oldHref') }, fps:30})
					td.tween('width', parseInt(td.retrieve('oldWidth')) + diff);
				} else {
					td.tween('width', td.retrieve('oldWidth'));
				}
			})
		})
		
		if (isSelected) {
			el.removeClass('city')
			el.addClass('city_on')
		}
		
	})
	
})