var h5		= {
	bar			: "",
	body		: "",
	logo		: "",
	shadow		: "",
	active		: null,
	locations	: [
		{
			name		: "University District",
			url			: "http://universitydistrict.org/", //"http://udhi5.quicksquare.com/",
			background	: "portal-background-university.jpg",
			description	: "<p class='h5DescHeader'>University District</p><p>Eclectic. Ethnic. Music. Books. Campus. Late Night.</p>",
			links		: [
				{
					name	: "Wexner Center for the Arts",
					url		: "http://www.wexarts.org/",
					logo	: "logo-wexner.png"
				},
				{
					name	: "South Campus Gateway",
					url		: "http://southcampusgateway.com/",
					logo	: "logo-south-campus.png"
				}
			],
			events		: [],
			icon		: {
				on		: [0, -75],
				off		: [0, 0],
				width	: 75
			}
		},
		{
			name		: "The Short North",
			url			: "http://shortnorth.org/", //"http://snhi5.quicksquare.com/",
			background	: "portal-background-shortNorth.jpg",
			description	: "<p class='h5DescHeader'>The Short North</p><p>Bohemian. Art. Boutiques. Restaurants. Gallery Hop.",
			links		: [
				{
					name	: "Greater Columbus Convention Center",
					url		: "http://www.columbusconventions.com/", //"http://cchi5.quicksquare.com/",
					logo	: "logo-conventionCenter.png"
				},
				{
					name	: "North Market",
					url		: "http://www.northmarket.com/", //"http://nmhi5.quicksquare.com/",
					logo	: "logo-northMarket.png"
				}
			],
			events		: [],
			icon		: {
				on		: [-70, -75],
				off		: [-70, 0],
				width	: 140
			}
		},
		{
			name		: "The Arena District",
			url			: "http://arenadistrict.com/", //"http://adhi5.quicksquare.com/",
			background	: "portal-background-arena.jpg",
			description	: "<p class='h5DescHeader'>The Arena District</p><p>Sports. Restaurants. Live Music. Nightlife.</p>",
			links		: [
				{
					name	: "Greater Columbus Convention Center",
					url		: "http://www.columbusconventions.com/", //"http://cchi5.quicksquare.com/",
					logo	: "logo-conventionCenter.png"
				},
				{
					name	: "North Market",
					url		: "http://www.northmarket.com/", //"http://nmhi5.quicksquare.com/",
					logo	: "logo-northMarket.png"
				}
			],
			events		: [
				/*
				{
					name	: "Halloween",
					month	: "Oct",
					day		: "31",
					year	: "2009"
				},
				{
					name	: "Thanksgiving",
					month	: "Nov",
					day		: "26",
					year	: "2009"
				}
				*/
			],
			icon		: {
				on		: [-210, -75],
				off		: [-210, 0],
				width	: 115
			}
		},
		{
			name		: "Downtown",
			url			: "http://www.downtowncolumbus.com/", //"http://dthi5.quicksquare.com/",
			background	: "portal-background-downtown.jpg",
			description	: "<p class='h5DescHeader'>Downtown</p><p>State Capitol. Historic Theatres. Hotels. Riverfront.<br /><span class='h5PhotoCredit'>Photo Credit: D.R. Goff</span></p>",
			links		: [
				{
					name	: "Greater Columbus Convention Center",
					url		: "http://www.columbusconventions.com/", //"http://cchi5.quicksquare.com/",
					logo	: "logo-conventionCenter.png"
				},
				{
					name	: "North Market",
					url		: "http://www.northmarket.com/", //"http://nmhi5.quicksquare.com/",
					logo	: "logo-northMarket.png"
				}
			],
			events		: [],
			icon		: {
				on		: [-325, -75],
				off		: [-325, 0],
				width	: 120
			}
		},
		{
			name		: "German Village",
			url			: "http://germanvillage.com/", //"http://gvhi5.quicksquare.com/",
			background	: "portal-background-germanVillage.jpg",
			description	: "<p class='h5DescHeader'>German Village</p><p>Historic Architecture. Brick Streets. Restaurants. Boutiques. Shop. Dine. Stroll.</p>",
			links		: [],
			events		: [],
			icon		: {
				on		: [-445, -75],
				off		: [-445, 0],
				width	: 69
			}
		}
	],
	description		: "<p><span id='hi5Welcome'>Five miles that connect countless experiences on Columbus' historic High Street.</span><ul id='hi5TopHighlights'><li>Historic architecture.</li><li>Culinary adventure.</li><li>High art mixed with street culture.</li><li>Professional sports.</li><li>Community events.</li></ul><br /><span id='hi5Fives'>Five miles. Five districts. Countless encounters.</span><br /><span id='hi5Hip'>(If it's hip, it's here.)</span><br /><br /><br /><br /><br /><span class='h5PhotoCredit h5Lite'>Strategy &amp; Web Design by: <br /><a href='http://quicksquareconsulting.com/' target='_blank' id='h5QS'>Quick Square Consulting</a></span></p>",
	//description		:"<ul id='hi5TopHighlights'><li><strong><span>150</span> Places to Wine &amp; Dine</strong><br />(White linen or paper napkin?)</li><li><strong><span>4,000</span> Hotel Rooms</strong><br />(You're going to need a place to rest your head.)</li><li><strong><span>200</span> Stores &amp; Boutiques</strong><br />(Window Shop&mdash;couture or kitsch.)</li><li><strong><span>100</span> Annual Events</strong><br />(Bodybuilders, artists, runners and gay pride.)</li><li><strong><span>40</span> Art Galleries</strong><br />(Head-to-toe black outfit optional.)</li><li><strong><span>50</span> Venues</strong><br />(Hosting slap shots, guitar solos and soliloquies. Movie screens, stages, and dance floors, too.)</li></ul>",
	locationIcons	: "",
	sidebar			: "",
	overlay			: {
		on			: false,
		element		: ""
	},
	map				: ""
};



$(document).ready(function() {
	h5.body				= $("body");
	h5.body.css({
		marginBottom	: 80
	});
	h5Init();
	h5Binding();
});



function h5FlashEmbed() {
	var so = new SWFObject("/swf/hi_5_vs_5.swf", "hi5EmbedMap", "100%", "100%", "8", "#000000");
		so.addParam("scale", "noscale");
		so.addParam("wmode", "transparent");
		so.write("hi5Map");
	return false;
}



function h5Init() {
	var randomImageNumber 	= (Math.round(Math.random() * (h5.locations.length - 1)));
	//h5.body.css("backgroundImage", "url(img/" + h5.locations[randomImageNumber].background + ")");
	h5FlashEmbed();

	var content	 = "";

	content		+= '<div id="h5Bar">';
	content			+= '<div id="h5Logo"><a href="http://columbushighfive.com/"><img src="img/logo.jpg" alt="High Five Columbus"/></a></div>';
	content			+= '<div id="h5Venue"></div>';

	if (h5.locations.length > 0) {
		content		+= '<div id="h5Locations">';
		content		+= '<div>';
		for (var i = 0; i < h5.locations.length; i++) {
			content	+= '<a href="' + h5.locations[i].url + '?hi5">' + h5.locations[i].name + '</a>';
		}
		content		+= '</div>';
		content		+= '</div>';
	}

	content		+= '</div>';
	content		+= '<div id="h5Sidebar"><div id="h5Description">' + h5.description + '</div></div>';
	content		+= '<div id="h5Shadow"></div>';
	content		+= '<div id="h5Dark"></div>';

	h5.body.prepend(content);

	h5.bar				= $("#h5Bar");
	h5.logo				= $("#h5Logo a");
	h5.shadow			= $("#h5Shadow");
	h5.overlay.element	= $("#h5Dark");
	h5.locationIcons	= $("#h5Locations div a");
	h5.sidebar			= $("#h5Sidebar");
	h5.map				= $("#hi5Map");

	h5ResetButtons();

	if (h5.locations.length > 0) {
		for (var i = 0; i < h5.locations.length; i++) {
			$.preloadImages("img/" + h5.locations[i].background);
		}
	}

	h5.sidebar.animate({
		opacity	: .80
	}, 1500);
}



function h5Binding() {
	h5.overlay.element.css("opacity", 0);

	h5.locationIcons.each(function(i) {
		$(this).bind("mouseenter", {index:i}, function(e) {
			$(this).css({
				backgroundPosition	: h5.locations[e.data.index].icon.on[0] + "px" + " " + h5.locations[e.data.index].icon.on[1] + "px",
				width				: h5.locations[e.data.index].icon.width
			});
			document.getElementById("h5Venue").innerHTML	= h5.locations[e.data.index].name;
			return false;
		});

		$(this).bind("mouseleave", {index:i}, function(e) {
			$(this).css({
				backgroundPosition	: h5.locations[e.data.index].icon.off[0] + "px" + " " + h5.locations[e.data.index].icon.off[1] + "px",
				width				: h5.locations[e.data.index].icon.width
			});
			if (h5.active != null) {
				document.getElementById("h5Venue").innerHTML	= h5.locations[h5.active].name;
			}
			else {
				document.getElementById("h5Venue").innerHTML	= "";
			}
			h5ResetButtons();
			return false;
		});

		$(this).bind("click", {index:i}, function(e) {
			h5.map.hide();
			var locationContent	=  "";

				locationContent	+= "<div id='h5Description'>";
				locationContent	+= h5.locations[e.data.index].description;
				//locationContent	+= "<p><a class=\"h5Link\" href=\"" + h5.locations[e.data.index].url + "?hi5\"><img src='/img/button.png' alt='' /></a></p>";
				locationContent	+= "<p><a class=\"h5Link\" href=\"" + h5.locations[e.data.index].url + "?hi5\" target='_blank'><img src='/img/button.png' alt='' /></a></p>";
				locationContent	+= "</div>";

			if (h5.locations[e.data.index].events.length > 0) {
				locationContent	+= "<div id='h5EventsBar'><img src='/img/bar-events.png' alt='' /</div>";
				locationContent	+= "<div id=\"h5Events\">";
				for (var events = 0; events < h5.locations[e.data.index].events.length; events++) {
					locationContent	+= "<div class=\"h5Event\">";
					locationContent	+= "<div class=\"h5EventMonth\">" + h5.locations[e.data.index].events[events].month + "</strong></div>";
					locationContent	+= "<div class=\"h5EventDay\">" + h5.locations[e.data.index].events[events].day + "</strong></div>";
					locationContent	+= "<div class=\"h5EventInfo\">" + h5.locations[e.data.index].events[events].name + "</div>";
					locationContent	+= "</div>";
				}
				locationContent	+= "</div>";
			}

			if (h5.locations[e.data.index].links.length > 0) {
				locationContent	+= "<div id='h5LinksBar'><img src='/img/bar-featured.png' alt='' /</div>";
				locationContent	+= "<div id=\"h5Links\">";
				for (var links = 0; links < h5.locations[e.data.index].links.length; links++) {
					locationContent	+= "<div><a class=\"h5Link\" href=\"" + h5.locations[e.data.index].links[links].url + "?hi5\"><img src='/img/" + h5.locations[e.data.index].links[links].logo + "' alt='" + h5.locations[e.data.index].links[links].name + "' /></a></div>";
					//locationContent	+= "<div><a class=\"h5Link\" href=\"" + h5.locations[e.data.index].links[links].url + "?hi5\" target='_blank'><img src='/img/" + h5.locations[e.data.index].links[links].logo + "' alt='" + h5.locations[e.data.index].links[links].name + "' /></a></div>";
				}
				locationContent	+= "</div>";
			}

			h5.sidebar.html(locationContent);
			$("body").css("backgroundImage", "url(img/" + h5.locations[e.data.index].background + ")");
			h5.active	= e.data.index;
			return false;
		});
	});

	$(".h5Link").live("click", function() {
		h5MoveBarDown($(this).attr("href"));
		return false;
	});
}



function h5FlashChange(buttonIndex) {
	$("#h5Locations div a:eq(" + buttonIndex + ")").click();
	h5.active	= buttonIndex;
	document.getElementById("h5Venue").innerHTML	= h5.locations[h5.active].name;
	$("#h5Locations div a:eq(" + buttonIndex + ")").css({
		backgroundPosition	: h5.locations[buttonIndex].icon.on[0] + "px" + " " + h5.locations[buttonIndex].icon.on[1] + "px",
		width				: h5.locations[buttonIndex].icon.width
	});
}



function h5MoveBarDown(forward) {
	h5.body.css("overflow", "hidden");
	h5.shadow.animate({
		height: 0
	}, 250, function() {
		h5.bar.animate({
			height	: $(window).height() + 150
		}, 600, function() {
			window.location	= forward;
		});
	});
}



function h5ResetButtons() {
	h5.locationIcons.each(function(index, item) {
		$(item).css({
			backgroundPosition	: h5.locations[index].icon.off[0] + "px" + " " + h5.locations[index].icon.off[1] + "px",
			width				: h5.locations[index].icon.width
		});
	});
	if (h5.active != null) {
		h5.locationIcons.eq(h5.active).css({
			backgroundPosition	: h5.locations[h5.active].icon.on[0] + "px" + " " + h5.locations[h5.active].icon.on[1] + "px",
			width				: h5.locations[h5.active].icon.width
		});
	}
}



$.preloadImages = function() {
	for (var i = 0; i<arguments.length; i++) {
		img		= new Image();
		img.src	= arguments[i];
	}
}