function Cities(master)
	{
		var self=this;
		this.init=function()
		{
			self.cities=client_cities;
			self.rendered_cities=self.render_cities();
		}
		this.render_cities=function()
		{
			var cities=[];
			for(var i=0;i<self.cities.length;i++)
				cities[i]=JQ(self.render_city(self.cities[i]));
			return cities;	
		}
		this.render_city=function(city)
		{
			var str= "<li>";
				str+="	<div class=\"title\" id=\""+city.term+"\">"+city.title+"</div>";
				if('data'in city)
				{
					if('sub_locations' in city.data)
					{
						str+="<ul>";
						for(var i=0;i<city.data.sub_locations.length;i++)					
							str+=self.render_city(city.data.sub_locations[i]);
						str+="</ul>";
					}
				}
				str+="</li>";
			return str;
		}
		self.showCities=function(div)
		{
			JQ(div).empty();
			self.scroller=new Scroller(self.rendered_cities, div);
		}
		
		self.init();
	}
	
	function Scroller(contents,target_div)
	{
		var self=this;
		this.init=function()
		{
			self.div=JQ(target_div);
			self.ul=self.makeUL();
			self.buildScroller();
		}
		self.makeUL=function()
		{
			var ul=JQ("<ul class=\"scroller_content\"></ul>");
			for(var i=0;i<contents.length;i++)
				ul.append(contents[i]);				
										
			return ul;
		}
		this.buildScroller=function()
		{
			self.div.append("<div class=\"scroller_wrapper\"></div>");

			var str ="<div class=\"scroller_content\">";
				str+="</div>"
				str+="<div class=\"slider\">";
				str+="	<div class='handle'></div>";
				str+="</div>";
				str+="<div class=\"clearme\"></div>"

			self.div.find("div.scroller_wrapper").append(str);
			self.div.find("div.scroller_content").append(self.ul);
			
			var container=JQ("div.scroller_wrapper");
			var ul=JQ("ul.scroller_content",container);
			var inner=ul.innerHeight();
			var outer=container.outerHeight();
			self.itemsHeight=inner-outer;
						
			if(self.itemsHeight>0)
			{
				JQ("div.slider",container).slider({
					min:0,
					max:self.itemsHeight,
					handle:'div.handle',
					stop:function(event,ui){	ul.css('top', ui.value*-1)	},
					slide:function(event,ui){	ul.css('top', ui.value*-1)	}
				});
			}
			else
				JQ("div.slider").hide();
			
		}
		self.init();
	}