$(function(){
			
	var loop = 21;	// number of loops
	
	// popup position
	var popup_position_top = 100;
	var popup_position_buttom = 40;
	var popup_width = 130;
	var popup_margin = 10;
	
	for(i=0;i<loop;i++){
		var counter = i+1;
		var targetObj = '';
		if(i<9){
			var idcnt = '0'+counter;
		} else {
			var idcnt = counter;
		}
		targetObj = $('.mapspot'+idcnt);
//trace(idcnt);

		targetObj.bind("mouseover", {id:idcnt}, onMouseOver);		
		targetObj.bind("mouseout", {id:idcnt}, onMouseOut);	
	}
	
	function onMouseOver(e){
//alert(mappos_top+','+mappos_left);
				var pos = $('.mapspot'+e.data.id).position();
				pos_top = pos.top-popup_position_top;
				if(pos_top<0){
						pos_top = pos.top+popup_position_buttom;
				}
				var mappos = $('.mapspot'+e.data.id).position();
				var mapwidth = $('.mapspot'+e.data.id).width();
				var maxwidth = $('.map').width();
				pos_left = pos.left - ((popup_width/2)-(mapwidth/2));
				if(pos_left<0){
					pos_left = popup_margin;
				} else if(maxwidth<(pos_left+popup_width)){
					pos_left = maxwidth-popup_width-popup_margin;
				}
//alert(pos_top+','+pos.left);
				//o = $('.popspot'+e.data.id).position();
				$('.popspot'+e.data.id).css({top: pos_top,left: pos_left});
				$('.popspot'+e.data.id).stop(true,true).animate(
					{marginTop: "-10px", easing : "linear", opacity: "show"},"normal"
				);
				
	}
	// MouseOut
	function onMouseOut(e){
//trace(e.data.id);
				$('.popspot'+e.data.id).stop(true,true).animate(
					{marginTop: "0px", easing : "linear", opacity: "hide"},"fast"
				);
	}
	
	//debug mode
	function trace(val){
		console.log(val);
	}

});