$(function(){	

	// variables
	var nSyncIndex=0,
		elmCounter=0,
		elmsNo=$(".showcaseContent").length,														// the number of stories to show
		eTimerDiv=$('#timerDiv'),
		nCounter=0,
		bState=1,
		fShowCase = {},
		fTimeout,
		rootID = "showcase",
		elmClass = "showcaseContent", 																// the story's class
		partID = "story",																			// the story's partial ID (is followed by a number)
		liPartID = "showcaseNav_",
		sTimerTitlePause = "Pause Showcase",
		sTimerTitlePlay = "Play Showcase",
		sControlsTitle = "Jump to this story",
		aBgStates	= ['270','240','210','180','150','120','90','60','30'],

		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(partID+i);
		ctrls.push(liPartID+i);
	};

	// define functions
	fShowCase.init = function(){
		eTimerDiv.attr('title',sTimerTitlePause);
		$('#'+elms[0]).addClass('currentStory').show();
		$('#'+ctrls[0]).addClass('selected');	
		for (var i=1;i<=elmsNo;i++) {
			$('#'+ctrls[i]).attr('title',sControlsTitle);
		};		
	};
	fShowCase.cycle = function(){
		eTimerDiv.css('background-position',+aBgStates[nCounter]+'px 0px').attr('title',sTimerTitlePause);
		nCounter=nCounter>6?0:nCounter+1;
		nSyncIndex=nCounter==0?1:0;
		if (elmsNo > 1 && nSyncIndex > 0){fShowCase.showNext()};
		bState=1;
		fTimeout=setTimeout(fShowCase.cycle,1000);
	};
	fShowCase.pause = function(){
		eTimerDiv.css('background-position',+aBgStates[8]+'px 0px')
					.attr('title',sTimerTitlePlay);
		clearTimeout(fTimeout);
		nCounter=0;
		bState=0;
	};
	fShowCase.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');
	}

	// event handlers
	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(liPartID.length);											// the index of the clicked control
				$('#'+rootID).find('.currentStory').hide().removeClass('currentStory');
				$('#'+elms[elmID-1]).addClass('currentStory').fadeIn();
				$('#'+rootID).find('.selected').removeClass('selected');
				$('#'+ctrls[elmID-1]).addClass('selected');
				elmCounter = elmID-1;																
				fShowCase.pause();																	// pause the ShowCase
			} 
			return false;
		});
	};
	eTimerDiv.click(function(){
		// if the showcase is playing pause it, othw play it
		if(bState){
			fShowCase.pause();
		} else {
			fShowCase.cycle();
		};
	});

	// init
	fShowCase.init();
	fShowCase.cycle();

});