var mapArea = function(){this.init();}
mapArea.prototype = {
	init: function(){
		mapcol = document.getElementById("mapcol");if(!mapcol) return false;
		lis = mapcol.getElementsByTagName("li");if(!lis) return false;
		sels = document.getElementById("chosearea");if(!sels) return false;
		new Btn();
		new Pulldown();
	}
}

var Btn = function(){this.init();}
Btn.prototype = {
	init: function(){
		for(var i = 0,f=lis.length ; i < f ; i++) {
			(function(i) {
				lis[i].onclick = function() {
					sels.selectedIndex = i + 1;
					for(var j = 0; j < f; j++) {
						(function(j) {
							img = lis[j].getElementsByTagName("img");
							if(j != i){
								img[0].src = "../img/btn-off.gif";
							}else{
								img[0].src = "../img/btn-on.gif";
							}
						})(j);
					}
				}
			})(i);
		}
	}
}
var Pulldown = function(){this.init();}
Pulldown.prototype = {
	init: function(){
		sels.onchange = function(){
			val = this.selectedIndex -1;
			for(var i = 0,f=lis.length; i<f ; i++) {
				(function(i) {
					img = lis[i].getElementsByTagName("img");
					if(val != i){
						img[0].src = "../img/btn-off.gif";
					}else{
						img[0].src = "../img/btn-on.gif";
					}
				})(i);
			}
		}
	}
}


var maparea = new mapArea();
window.addOnload(maparea.init);