var img = "<img src='img_bw/bulletmap.gif' width='14' height='14'>";
var imgSrc = "img_bw/bulletmap.gif";
var imgOverSrc = "img_bw/bulletmap_hi.gif";

function drawonmap(id,posX,posY)	{
	var imgpos = $("#cardnoe").offset();
	$("#content").append("<div id='bullet"+id+"' class='bulletmap' style='left:"+(imgpos.left+posX)+"px;top:"+(imgpos.top+posY)+"px;'>"+img+"</div>");
}

function swapByStr()	{
	$('.stagelist a').hover(function(){
		var stageDiv = $(this).parent().get(0).id;
		var bwId = stageDiv.substring(2);
		var cityId = getCityId(bwId);
		var imgEl = $("#bullet"+cityId).children("img");
		var imgId = $("#bullet"+cityId).get(0).id;
		imgEl.attr("src", imgEl.attr("src").replace( /\.gif$/, '_hi.gif'));
		writePopStage(cityId,bwId,stageDiv,imgId);
	},function(){
		var bwId = $(this).parent().get(0).id.substring(2);
		var cityId = getCityId(bwId);
		var imgEl = $("#bullet"+cityId).children("img");
		imgEl.attr("src", imgEl.attr("src").replace( /_hi\.gif$/, '.gif'));
	});
}
function getCityId(bwId)	{
	var cityId = "";
	for(i=0;i<cities.length;i++)	{
		if (cities[i].stages.length > 0)	{
			for(j=0;j<cities[i].stages.length;j++)	{
				if (cities[i].stages[j].stageId == bwId)	{cityId = cities[i].cityId; break;}
			}
		}
	}
	return cityId;
}

function swapByImg() {
	$('.bulletmap img').hover(function() {
		var cityId = $(this).parent().get(0).id.substring(6);
		var bulletId = $(this).parent().get(0).id;
		$(this).attr("src", $(this).attr("src").replace( /\.gif$/, '_hi.gif'));
		writePopCity(cityId, bulletId);
	},
	function() {
		$(this).attr("src", $(this).attr("src").replace( /_hi\.gif$/, '.gif'));
	});
}

function writePopStage(cityId,stageId,stageDiv,imgId)	{
	var cont = "";
	for(i=0;i<cities.length;i++)	{
		if (cities[i].cityId == cityId)	{
			cont = "<div style='font-weight:bold;color:#B82D22;margin-bottom:10px'>"+cities[i].cityName+"</div>";
			for(j=0;j<cities[i].stages.length;j++)	{
				if (cities[i].stages[j].stageId == stageId)	{
					cont += "<div style='font-weight:bold'>"+cities[i].stages[j].stageName+"</div>";
					cont += cities[i].stages[j].stageAddress;
					break;
				}
			}
			break;
		}
	}
	$("#"+stageDiv).qtip({
		content: cont,
		position: { target: $("#"+imgId), corner:{ target: 'topRight', tooltip: 'bottomLeft'} },
		style: 'bwstyle'
	})
}
function writePopCity(cityId,bullet)	{
	var cont = "";
	for(i=0;i<cities.length;i++)	{
		if (cities[i].cityId == cityId)	{
			cont = "<div style='font-weight:bold;color:#B82D22;margin-bottom:10px'>"+cities[i].cityName+"</div>";
			for(j=0;j<cities[i].stages.length;j++)	{
					cont += "<div style='margin-top:5px'><div style='font-weight:bold'>"+cities[i].stages[j].stageName+"</div>";
					cont += cities[i].stages[j].stageAddress+"</div>";
			}
			break;
		}
	}
	$("#"+bullet).qtip({
		content: cont,
		position: { corner:{ target: 'topRight', tooltip: 'bottomLeft'} },
		style: 'bwstyle'
	})
}

//--- style for qtip ----
$.fn.qtip.styles.bwstyle = {
	border: { width: 2, radius: 5, color: '#FFD500' },
	tip: 'bottomLeft',
	name: 'cream',
	title: {'font-family': 'Arial'}
}



$(document).ready(function(){					
	placeMap();
	swapByStr();
	swapByImg();
});