// This automatically fades and switches the content for the home page "widget"

$(window).ready(function() {
	
	// Find commonly used elements and store references to them
	var container = $('#overview_widget');
	var imgContainer = $('#overview_widget .img-list');
	var contentContainer = $('#overview_widget .welcome-block .welcome-block-inner');
	var children = contentContainer.children();
	var nextLink = $('#overview_widget .welcome-block .next-link');
	
	// Other Vars
	var curImgIndex = 0;
	
	// Markup that only users with JS should see
	var imgListItems = '<li class="first"><a href="#"><img src="/custom/images_layout//widget_selected.gif" alt="" /></a></li>' +
					   '<li><a href="#"><img src="/custom/images_layout//widget_normal.gif" alt="" /></a></li>' +
					   '<li><a href="#"><img src="/custom/images_layout//widget_normal.gif" alt="" /></a></li>' +
					   '<li><a href="#"><img src="/custom/images_layout//widget_normal.gif" alt="" /></a></li>' +
					   '<li><a href="#"><img src="/custom/images_layout//widget_normal.gif" alt="" /></a></li>';						
	
	// Store the content for all the mini-pages
	var content = [ {title: "Welcome to synerG!",
					 content: "We are an organization of young people dedicated to attracting, engaging and connecting young professionals to Greensboro. We encourage you to latch on to the many opportunities we provide!",
				  	 image: "/custom/images_content/mini_welcome.gif",
					 link: "/index.php/about_us/"},
					
					{title: "Making Connections",
					 content: "Making Connections Around the Table is a bi-monthly dinner program, offering the unique opportunity to enjoy an evening of conversation and food while getting to know the inner workings of Greensboro.",
					 image: "/custom/images_content/mini_connections.gif",
					 link: "/index.php/initiatives/making_connections/"},
					
					{title: "synerG On Tap",
					 content: "Every month, synerG hosts synerG On Tap a free, informal social networking event to help connect young professionals within the Greensboro community. Learn more and check out where we will be this month!",
					 image: "/custom/images_content/mini_ontap.gif",
					 link: "/index.php/initiatives/synerg_on_tap/"},
					
					{title: "YP Sports",
					 content: "YP Sports offers a different outlet for young professionals to network and get active in Greensboro&rsquo;s various recreation opportunities. YP Sports offers a range of activities for all athletic abilities.",
					 image: "/custom/images_content/mini_ypsports.gif",
					 link: "/index.php/initiatives/yp_sports/"},
					
					{title: "Leadership Initiative",
					 content: "synerG's Leadership Initiative works to connect Greensboro young professionals with volunteer leadership opportunities with the City, County and non-profit organizations.",
					 image: "/custom/images_content/img2.gif",
					 link: "/index.php/initiatives/leadership_initiative/"}
				  ];
	
	// Add in the necessary markup
	nextLink.append('<a href="#" title="view next slide">next</a>');
	imgContainer.append(imgListItems);
	var imgList = $('#overview_widget .img-list li a img');
	
	// Set up the links for the widget
	jQuery.each(imgList, linkClickHandler);
	
	// When a link is clicked swap the proper images
	function linkClickHandler (event)
	{
		$(this).click(function()
		{
			imgList[curImgIndex].src = "/custom/images_layout/widget_normal.gif";
			imgList[event].src = "/custom/images_layout/widget_selected.gif";
			curImgIndex = event;
			
			if(intervalID) {
				clearInterval(intervalID);
				intervalID = 0;
			}
			
			swapContent();
		});
	}
		
	// Hide the content then swap it
	function hideContent()
	{
		contentContainer.fadeOut("slow", swapContent);
		nextLink.fadeOut("def");
	}
	
	// Replace the current content with the content from the clicked link
	function swapContent()
	{
		children[0].src = content[curImgIndex].image;
		children[1].innerHTML = content[curImgIndex].title;
		children[2].innerHTML = content[curImgIndex].content;
		children[3].firstChild.href = content[curImgIndex].link;
		
		//showContent();
	}
	
	// Switch the content then Fade the content back in
	function showContent()
	{
		contentContainer.fadeIn("slow");
		nextLink.fadeIn("slow");
	}
	
	// Change the display back to inline for text-wrapping
	function setDisplay(e) {
//		console.log(document.getElementsByTagName('img'))
	}
	
	
	// The next link should cycle the content as well
	nextLink.click(function()
	{
		if(intervalID) {
			clearInterval(intervalID);
			intervalID = 0;
		}
		showNextPage();
	});
	
	// Switches the active nav and swaps the content
	function showNextPage()
	{
		// Switch the image for the old nav item
		imgList[curImgIndex].src = "/custom/images_layout/widget_normal.gif";
		
		// Increment the index if were not at the end of the array
		if(curImgIndex != content.length - 1) {curImgIndex++;}else {
			curImgIndex = 0;
		}
		
		// Highlight the new nav item and switch the content
		imgList[curImgIndex].src="/custom/images_layout/widget_selected.gif";
		swapContent();
	}
	
	// Auto cycle through
	var intervalID = setInterval(showNextPage, 7000);
	
});