/*	New SlideShowCase Plug-in
Idea:
1) Show the first (little to do here) for 7 secs
2) Apply selected class to first number of showCase nav
3) Hide n-1 and show n (to do this, we need an array)
4) Remove selected from n-1 and apply it to n
5) When you get to the last, go back to the first
6) Cater for clicks on the numbers (click on different number must reset the timer)
*/

$(function(){	
	(function($) {
	var settings;
 	var itval;
	var elmsNo =  $(".showcaseContent").length;														// the number of stories to show
	$.fn.SlideShowCase = function(callerSettings) {
		settings = $.extend({
			rootID: "showcase",
			delay: "7000", 																			// the interval between every change
			elmClass: "showcaseContent", 															// the story's class
			partID: "story",																		// the story's partial ID (is followed by a number)
			liPartID: "showcaseNav_"																// the part ID of each numbered list-item
	},callerSettings||{});
	
	elms = new Array();																				// I want an array with all the stories' IDs
	ctrls = new Array();																			// and one with the list-items' ones
	for (var i=1;i<=elmsNo;i++) {
		elms.push(settings.partID+i);
		ctrls.push(settings.liPartID+i);
	};
	init();
	if (elmsNo > 1) { 																				// show me the first story
		itval = setInterval(showNext, settings.delay); 												// show every other story after set delay
	}
	for (var i=0;i<ctrls.length;i++){																// bind a click-handler to each control
		$('#'+ctrls[i]).click(function(){
			if(elmsNo > 1) {
				var elmID=this.id.charAt(settings.liPartID.length);									// the index of the clicked control
				$('#'+settings.rootID).find('.currentStory').hide().removeClass('currentStory');
				$('#'+elms[elmID-1]).addClass('currentStory').fadeIn();
				$('#'+settings.rootID).find('.selected').removeClass('selected');
				$('#'+ctrls[elmID-1]).addClass('selected');
				elmCounter = elmID-1;																// let showNext() take over where we clicked
				clearInterval(itval);												 
				itval = setInterval(showNext,settings.delay);
			} 
			return false;
		});
	};
	$('#next a').click(function(){												// next button
		if (elmsNo > 1) {showNext();}
		return false;
	});
	$('#previous a').click(function(){											// previous button
		if (elmsNo > 1) {showPrev();}
		return false;
	});
	this.hover(function(){														// pause slideshow on hover
			clearInterval(itval);
		},
		function(){
			if(elmsNo > 1) {																// restart on out
				clearInterval(itval);
				itval = setInterval(showNext,settings.delay);
			}
	});
	return this;																// gimme back the wrapped set (for chainability)
	}
	// dumping below here all utility functions
	var elmCounter=0;															// keep the elements' count
	var init=function(){
		$('#'+elms[0]).addClass('currentStory').show();
		$('#'+ctrls[0]).addClass('selected');			
	}
	var showNext=function(){													// show the next & update list-items' class
		$('#'+elms[elmCounter++]).hide().removeClass('currentStory');
		$('#'+ctrls[elmCounter-1]).removeClass('selected');	
		if(elmCounter > elmsNo-1){elmCounter = 0;}						// back to 1 after 6
		$('#'+elms[elmCounter]).addClass('currentStory').fadeIn();
		$('#'+ctrls[elmCounter]).addClass('selected');
	}
	var showPrev=function(){													// show the next & update list-items' class
		$('#'+elms[elmCounter--]).hide().removeClass('currentStory');
		$('#'+ctrls[elmCounter+1]).removeClass('selected');	
		if(elmCounter <= -1){elmCounter = elmsNo-1;}			
		$('#'+elms[elmCounter]).addClass('currentStory').fadeIn();
		$('#'+ctrls[elmCounter]).addClass('selected');
	}
}) (jQuery) 
});

// BoxOver Plug-in

$(function(){	
	(function($) {
		$.fn.boxover = function(callerSettings) {
			// positions hover box near the link being hovered over
			settings = $.extend({
				boxClass: 'boxover',
				containerID: '#showcaseNav',
				leftPos: '-2',
				bottomPos: '18',
				speed: 'fast'
			},
			callerSettings||{});
		
		var parentEl = $('body').find(settings.containerID);
	
		// when you hover over navigation, do this
		this.hover(function(event) {
			if (!$(this).hasClass('selected')) {			
				var linkID = $(this).attr("id"); 									// get the ID
				var linkIDNo = linkID.substring(12); 								// get the number within the ID (11 characters)
				var searchElement = $(this).parents().find('#story' + linkIDNo); 	// get parents of this area and filter down to story div
				var imgRef = $(searchElement).find(".imgContent a").html(); 		// find the code for the image & get html
				var headline = $(searchElement).find(".story h2").text(); 			// find the code for the headline & get text from headline
				$('<div>').css({
					position: 'absolute',
					bottom: parseInt(settings.bottomPos),
					left: parseInt(settings.leftPos),
					display: 'none'
				}).addClass(settings.boxClass).appendTo(parentEl).fadeIn();
					
				$("div." + settings.boxClass).html("<div class='inner'>" + imgRef + "<p>" + headline + "</p></div><div class='bottomDiv'></div>");
				}			
			}, 
		// on mouseOut
		function() { 
			$("div."+settings.boxClass).fadeOut().remove();		
		})
		// return wrapped set
		return this;
	}
}) (jQuery) 
	
	
	/* Call the BoxOver Plug-in */
	$('#showcase li.number,#showcase li.selected').boxover({
		boxClass: 'boxOverClass'
	})
	/* Call the SlideShow Plug-in */
	$('#showcase').SlideShowCase();
});