// 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>' +
					   '<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/"},
					
					{title: "synerG in the City",
					 content: "Greensboro is home to an active and diverse arts community. Each year, synerG in the City partners with local arts organizations to highlight the many arts opportunities for young professionals.",
					 image: "/custom/images_content/mini_inthecity.gif",
					 link: "/index.php/initiatives/synerg_in_the_city/"}
				  ];
	
	// 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);
	
});