/*

jQuery Slideshow with hot <canvas> pie chart action

Degrades nicely if the user is using a non-canvas-supporting browser (IE, I'm looking at you)


	Known issues:
	- If the user mouses over the #banner while the pie graph is fading out, it will animate to .7 opacity. This is hard to replicate.

*/

// Smash those IE errors.
//if(!window.console){var console=new Object();console.log = function(data){return;}}

$(document).ready(function(){

// VARIABLES
	settings = {
		duration: '8',
		debug: true,
		radius: '6',
		canvasXY: '12',
		fps: '15',
		pos_offset: '24'
	}
	
	var pbListLength = $("ul#slideshow").children("li").length;
//	console.log(pbListLength);

	// Is there more than one list item?
	if( pbListLength > 1 ) { // Yep.

		var z = 1;
		$("ul#slideshow")
			.after("<div id='bottom-bar'><div id='dot-list'><ul></ul></div><div id='slide-dropdown'><ul></ul></div></div>")
			.children("li")
				.each(function() {
					var titleText = $(this).attr("title");
					$("#dot-list ul").append( "<li class='switch select"+z+"'><a href='#'>"+titleText+"</a></li>" );
					$("#slide-dropdown ul").append( "<li class='select"+z+"'><a href='#'>"+titleText+"</a></li>" );
					$(this).css('z-index', 100-z).addClass("slide slide"+z).hide();
					z++;
				});

		var pbCurrent = 1;
		var isAnimating = false;

		var ctxDegrees = 1;
		var degreesIncrement = (360/settings.duration)/settings.fps;
		var heightIncrement = (12/settings.duration)/settings.fps;
		var circleHeight = 0;
		var ctx;

		// Is <canvas> supported?
		var ddTimer = document.createElement('canvas');
		var hasCanvas = false;

		if( ddTimer.getContext ) {
			hasCanvas = true;
			ddTimer.width = ddTimer.height = settings.canvasXY;
			ctx = ddTimer.getContext('2d');
			ctx.lineWidth = settings.radius;
			ctx.strokeStyle = "#9E9E9E";
		} else {
			// No canvas
			$("#banner").addClass("no-canvas");
			ddTimer = $("<div id='countdown'></div>");
		}

		// Append countdown timer/canvas pie thing to #dot-list
		$("#dot-list").append(ddTimer);

		// FUNCTIONS

		function timerIncrement() {
			if( hasCanvas ) {
				if( ctxDegrees > ( 360 + degreesIncrement ) ) {
					pbNextLI();
				} else {
					ctx.clearRect(0,0,Math.ceil(settings.canvasXY)*2,Math.ceil(settings.canvasXY)*2);
				}

				// The heart of the hot <canvas> action
				ctx.beginPath();
				ctx.arc( settings.canvasXY/2, settings.canvasXY/2, settings.radius/2, (Math.PI/180)*(ctxDegrees), (Math.PI/180), true );
				ctx.stroke(); // Draw stroke
				ctxDegrees += degreesIncrement;
			} else {
				if( circleHeight >= 12 ) {
					pbNextLI();
				} else {
					circleHeight += heightIncrement;
					i = Math.ceil(circleHeight);
					$(ddTimer).css({"height":i+1});
				}
			}
		}

		function timerStop(){
			if( isAnimating )
				clearInterval(isAnimating);
			isAnimating = false;
		}

		function timerStart(){
			if( !isAnimating ) isAnimating = setInterval( timerIncrement, 1000/settings.fps );
		}
		
		function timerReset() {
			if( hasCanvas ) {
				// Clean slate
				ctx.clearRect(0,0,Math.ceil(settings.canvasXY)*2,Math.ceil(settings.canvasXY)*2);
				// Reset the degrees to 1
				ctxDegrees = 1;
			} else {
				// Reset the timer to the set duration (counting down, not up)
				circleHeight = 0;
				$(ddTimer).css({"height":Math.floor(circleHeight)});
			}
		}

		function pbNextLI(switchTo) {
//			console.log( "Switching from slide " + pbCurrent + "..." );
			timerStop();

//			$(ddTimer).fadeOut(300,function(){
				timerReset();

				// Remember where we came from
				pbPrev = pbCurrent;

				// Set the new current ID value
				if( !switchTo ) {
					if( pbCurrent < pbListLength ) {
						pbCurrent++;
					} else {
						pbCurrent = 1;
					}
				} else {
					pbCurrent = switchTo;
				}
				
//				console.log( "Switching to slide " + pbCurrent );

				if( pbCurrent == "1" ) {
					// Fix the z-index problem
					$("#slideshow .slide"+pbCurrent).fadeIn(function(){
						$("#slideshow .slide"+pbPrev).hide();
					});
				} else {
					$("#slideshow .slide"+pbCurrent).show();
					$("#slideshow .slide"+pbPrev).fadeOut();					
				}

				$("#slide-dropdown ul").animate({"top":(pbCurrent-1)*-44});
				$(ddTimer).css({"left":pbCurrent*24}).show();
				timerStart();
				liClicked = false;
				switchTo = false;	
//			});
		}

		// MISC EVENTS

		// Click event if someone clicks the dropdown
		function ddLiClick(){
			$("#slide-dropdown").removeClass("dropdown");
			i = parseInt( $(this).parent().attr("class").split("select").slice("1") );
//			console.log( $(this).parent().attr("class") );
			if( i != pbCurrent )
				pbNextLI( i );
			return false;
		}

		// Click event for when the user clicks the dots.
		$("#dot-list ul li a").click(ddLiClick);
		$("#slide-dropdown ul li a").click(ddLiClick);

		// Dropdown clickie-clickie
		$("#slide-dropdown ul").hover(
			function(){
				timerStop();
				$("#slide-dropdown").addClass("dropdown");
			},
			function(){
				timerStart();
				$("#slide-dropdown").removeClass("dropdown");
			}
		);

		// Hover event for the banner
		$("ul#slideshow").hover(
			function(){
				timerStop();
				$(ddTimer).stop().animate({"opacity":".7"},300);
			},
			function() {
				$(ddTimer).stop().animate({"opacity":"1"},400);
				timerStart();
			}
		);

		// DO IT
		$("#slideshow .slide1").fadeIn();
		timerStart();
	}
});
/* END jquery.feature-banner */