/*global jQuery, $, window, document */

var events = {"event": [
	{
		"id":"0",
		"title":"Cheboygan",
		"desc":"Boating, fishing, dining, shopping, lodging, hiking, biking, cross country skiing, snowmobiling and hunting; you'll find it all in Cheboygan!",
		"background":"http://www.monarchmotel.com/storage/2009-2010-files/img/events/cheboygan.jpg",
		"link":"http://www.cheboygan.org"
	},
	{
		"id":"1",
		"title":"The Great Lakes",
		"desc":"The Great Lakes -- Superior, Michigan, Huron, Erie and Ontario -- and their connecting channels form the largest fresh surface water system on earth.",
		"background":"http://www.monarchmotel.com/storage/2009-2010-files/img/events/great-lakes.jpg",
		"link":"http://www.great-lakes.net/lakes/"
	},
	{
		"id":"2",
		"title":"Mackinaw Island",
		"desc":"Waking to the sound of horse hooves on silent streets, the fail-safe plot you dreamed begins with the daylight.",
		"background":"http://www.monarchmotel.com/storage/2009-2010-files/img/events/mackinawisland.jpg",
		"link":"http://www.mackinacisland.org/"
	},
	{
		"id":"3",
		"title":"Mackinaw Bridge",
		"desc":"Description Goes Here",
		"background":"http://www.monarchmotel.com/storage/2009-2010-files/img/events/mackinawbridge.jpg",
		"link":"http://www.mackinacbridge.org/"
	},
	{
		"id":"4",
		"title":"Mulligans Bar & Grill",
		"desc":"Description Goes Here",
		"background":"http://www.monarchmotel.com/storage/2009-2010-files/img/events/mulligans.jpg",
		"link":"http://www.goodfoodbadshots.com/"
	}
]};



var $cloned = '';
var $cloned2 = '';


$(function(){
	
	/*********************************************
		initialize the scrollerBlock and it's sections
	**********************************************/
	
	
	
	
	
	
	
	
	var $scrollerBlockOverlay = $("#scrollerBlockOverlay");
	var $scrollerBlockMenu = $("#scrollerBlockMenu");
	var $scrollerBlockOverlayTitle = $("#scrollerBlockTitle");
	var $scrollerBlockOverlayDesc2 = $("#scrollerBlockDesc");
	
	// initialize the scrollerBlock and it's sections
	$.each(events.event,function(){
		$scrollerBlockOverlay
			.before('<li class="eventBlock" title="'+this.title+'"></li>');
		
		$("#scrollerBlock li[title="+this.title+"]").css({
			backgroundImage:"url("+this.background+")",
			backgroundPosition: "center center",
			backgroundRepeat: "no-repeat"
		});
		
		$scrollerBlockMenu
			.append('<span>'+this.title+'</span>');
	});
	
	var button_title = events.event[0].title;
	var description = events.event[0].desc;
	var link = events.event[0].link;
	
	$scrollerBlockOverlayTitle
		.html(button_title);
	
	$scrollerBlockOverlayDesc2
		.html(description)
			.append("<br/><span>[ <a target=\"_BLANK\" href=\""+link+"\">Go to Website</a> ]</span>");
	
	$("#scrollerBlock li")
		.not("#scrollerBlockMenu, #scrollerBlockOverlay, #scrollerBlockLeftAd")
		.hide();
	
	$("#scrollerBlock li")
		.eq(0)
		.show();
	
	$("#scrollerBlockMenu span")
		.eq(0)
		.addClass("underline");
	
	
	$("#scrollerBlock")
		.show();
	
	$("#canvasWrapper")
		.css({backgroundPosition:"center 410px"});
	
	
	$("#scrollerBlockMenu span")
		.click(function(){
			
			var indx = $("#scrollerBlockMenu span")
				.index(this);
			
			if (button_title == events.event[indx].title) {
				return false; 
			} else {
				button_title = events.event[indx].title;
				description = events.event[indx].desc;
				link = events.event[indx].link;
				
				$("span.underline")
					.removeClass("underline");
				
				$(this)
					.addClass("underline");
				
				$cloned = $("#scrollerBlock li")
					.eq(0)
					.clone();
				
				$("#scrollerBlockTitle")
					.stop()
					.fadeTo(200,0);
				
				$("#scrollerBlockDescription")
					.stop()
					.fadeTo(200,0);
				
				
				$("#scrollerBlock li")
					.eq(0)
					.stop()
					.fadeTo(200,0,function(){
						$(window).scroll(0,0);
						
						$("#scrollerBlockOverlay")
							.before($cloned.hide());
						
						$(this)
							.remove();
						
						$cloned2 = $("#scrollerBlock li[title='"+button_title+"']").clone();
						
						$("#scrollerBlock li[title='"+button_title+"']")
							.remove();
						
						$("#scrollerBlock")
							.prepend($cloned2.hide());
						
						$("#scrollerBlockTitle")
							.html(button_title)
							.stop()
							.fadeTo(500,1);
						
						$("#scrollerBlockDescription span")
							.html(description)
							.append("<br/><span>[ <a target=\"_BLANK\" href=\""+link+"\">Go to Website</a> ]</span>");
						
						$("#scrollerBlockDescription")
							.css({
								bottom: 0 - $("#scrollerBlockDescription").height(),
								opacity: 0
							})
							.stop()
							.animate({
								bottom: 0,
								opacity: 1
							},{ "duration": 500, "easing": "easeOutCirc" });
						
						
						$("#scrollerBlock li[title='"+button_title+"']")
							.stop()
							.fadeIn(500,function(){
								$(this)
									.css({opacity:1});
						
						
						
						
						
						
					});
				});
			}
		});
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
});