$(document).ready(function(){
	//vars
	var map = $("#map");
	var fullInfo = $("#full_info");
	var expandFullInfo = false;
	var shortInfoHtml = "<table width='100%'><tr valign='middle'><td width='62' valign='top'><img src='images/pin_icon.png'></td><td><span class='title'>{title}</span><br /><span class='information'>{information}</span></td><td width='131'><span class='information'>Dates: </span><br /><span class='dates'>{dates}</span></td></tr></table>";
	
	var fullInfoHtml = "<table width='100%'><tr valign='middle'><td width='62' valign='top'><img src='images/pin_icon.png'></td><td><span class='title'>{title}</span><br /><span class='information'>{information}</span></td><td width='121'><img src='images/back_to_map.png' class='back_to_map'></td></tr><tr valign='middle'><td colspan='3'><div style='padding-left:10px;padding-bottom:5px;' class='description'>{description}</div></td></tr></table>{dates}";
	
	var fullInfoDates = "<table width='100%' height='20'><tr class='date_container'><td width='50%'><span class='date'>{date}</span></td><td align='right'><span class='link'><a target='_top' href='{link}'>click here for show page</a></span></td></tr><tr><td colspan='2'><span class='doors_open'>Doors open: {doors_open}</span><br /><span class='showtime'>Showtime: {showtime}</span></td></tr></table>";
	
	//init
	function init()
	{
		//add pins on the map
		for(i = 0, size = pins.length; i < size; i++)
		{
			var pin = pins[i];
			var newPinContainer = $("<div class='pin_container' id='pin_" + i + "'></div>");
			newPinContainer.css({left: pin[1], top: pin[0]});
			var newPin = $("<div class='pin'><img src='images/large_pin.png'></div>");
			newPin.hover(startExpandPin, startConstrictFlag);
			newPin.click(showFullInfoStart);
			var newFlag = $("<div class='flag'><img src='images/flag.png'></div>");
			if(pin[6] == "left")
				newFlag.css({left: "auto", right: "10px"});
			else
				newFlag.css({left: "10px", right: "auto"});
			newFlag.hover(startExpandPin, startConstrictFlag);
			newFlag.click(showFullInfoStart);
			newPinContainer.append(newPin).append(newFlag);
			map.append(newPinContainer);
		}
	}
	
	//start expand pin
	function startExpandPin()
	{
		var item = $(this);
		var pinContainer = item.parent(0);
		var pin = $(".pin", pinContainer);
		var flag = $(".flag", pinContainer);
		pin.stop();
		flag.stop();
		pinContainer.css("z-index", "100");
		pin.animate({width: "30px", height: "50px", marginTop: "-25px", marginLeft: "-7.5px"}, 200, "linear", stopExpandPin);

		var pinInfo = pins[pinContainer.attr('id').substring(4)];
		var datesArr = pinInfo[4].split(";");
		var datesStr = "";
		for(i = 0, size = datesArr.length; i < size; i++)
			datesStr += datesArr[i].substring(0, datesArr[i].indexOf("*")) + "<br />";
		fullInfo.html(shortInfoHtml.replace(/{title}/i, pinInfo[2]).replace(/{information}/i, pinInfo[3]).replace(/{dates}/i, datesStr));
		fullInfo.animate({top: "205px", opacity: "0.90"}, 200, "linear");
	}
	
	//stop expand pin
	function stopExpandPin()
	{
		var item = $(this);
		var pinContainer = item.parent(0);
		startExpandFlag(pinContainer);
	}
	
	//start expand flag
	function startExpandFlag(pinContainer)
	{
		var pin = $(".pin", pinContainer);
		var flag = $(".flag", pinContainer);
		flag.animate({width: "125px"}, 200, "linear", stopExpandFlag);
	}
	
	//stop expand flag
	function stopExpandFlag()
	{
	}
	
	//start constrict flag
	function startConstrictFlag()
	{
		if(expandFullInfo)
			return;
		var item = $(this);
		var pinContainer = item.parent(0);
		var pin = $(".pin", pinContainer);
		var flag = $(".flag", pinContainer);
		pin.stop();
		flag.stop();
		flag.animate({width: "0px"}, 200, "linear", stopConstrictFlag);
	}
	
	//stop constrict flag
	function stopConstrictFlag()
	{
		var item = $(this);
		var pinContainer = item.parent(0);
		startConstictPin(pinContainer);
	}
	
	//start constrict pin
	function startConstictPin(pinContainer)
	{
		var pin = $(".pin", pinContainer);
		var flag = $(".flag", pinContainer);
		pin.animate({width: "15px", height: "25px", marginTop: "0px", marginLeft: "0px"}, 200, "linear", stopConstictPin);
		hideFullInfo();
	}
	
	//stop constrict pin
	function stopConstictPin()
	{
		var item = $(this);
		var pinContainer = item.parent(0);
		var pin = $(".pin", pinContainer);
		var flag = $(".flag", pinContainer);
		pinContainer.css("z-index", "5");
	}
	
	//show full info start
	function showFullInfoStart()
	{
		expandFullInfo = true;
		var item = $(this);
		var pinContainer = item.parent(0);
		var pinInfo = pins[pinContainer.attr('id').substring(4)];
		var datesArr = pinInfo[4].split(";");
		var datesStr = "";
		for(i = 0, size = datesArr.length; i < size; i++)
		{
			var date = datesArr[i].split("*");
			datesStr += fullInfoDates.replace(/{date}/i, date[0]).replace(/{link}/i, date[1]).replace(/{doors_open}/i, date[2]).replace(/{showtime}/i, date[3]);
		}
		fullInfo.html(fullInfoHtml.replace(/{title}/i, pinInfo[2]).replace(/{information}/i, pinInfo[3]).replace(/{description}/i, pinInfo[5]).replace(/{dates}/i, datesStr));
		
		$(".back_to_map").click(function(){
			hideFullInfo();
		});
		fullInfo.animate({top: "0px", opacity: "0.9"}, 400, "linear", showFullInfoStop);
	}
	
	//show full info stop
	function showFullInfoStop()
	{
		resetPinAndFlag();
	}
	
	//hide full info
	function hideFullInfo()
	{
		expandFullInfo = false;
		//fullInfo.animate({top: "272px", opacity: "1"}, 10, "linear");
		fullInfo.css({top: "272px"});
	}
	
	//reset pin
	function resetPinAndFlag()
	{
		var pins = $(".pin");
		var flags = $(".flag");
		pins.css({width: "15px", height: "25px", marginTop: "0px", marginLeft: "0px"});
		flags.css({width: "0px"});
	}
	
	//init all the things
	init();
});