$(document).ready(function() {
	//globals
//	$f().load();
	var lens = 0;
	var vidPlay = false;
	
	//init page set up
	$("#rotary1-area .flip").show();
	$("#rotary2-area").css({background:'url(images/custom/bg_rotary2_sml.png) no-repeat 0 100%',height:'60px'}).children('div.rotary-title').css({left:'60px', top:'12px'});
	$("#rotary3-area").css({background:'url(images/custom/bg_rotary3_sml.png) no-repeat 0 100%',height:'60px'}).children('div.rotary-title').css({left:'60px', top:'12px'});
	$("#rotary4-area").css({background:'url(images/custom/bg_rotary4_sml.png) no-repeat 0 100%',height:'60px'}).children('div.rotary-title').css({left:'60px', top:'12px'});
	$("#rotary5-area").css({background:'url(images/custom/bg_rotary5_sml.png) no-repeat 0 100%',height:'60px'}).children('div.rotary-title').css({left:'60px', top:'12px'});
	$("#rotary6-area").css({background:'url(images/custom/bg_rotary6_sml.png) no-repeat 0 100%',height:'60px'}).children('div.rotary-title').css({left:'60px', top:'12px'});
	
	function bgSwitch(bg, direction, size) {
		var bgRotaryId = bg.attr('id');
		var bgRotary = bgRotaryId.substring(0,7);
		if(size == 'small'){
			if(direction == 'down') {
				var bgImageName = "url(images/custom/bg_" + bgRotary + "_sml.png) no-repeat 0 0";
			} else {
				var bgImageName = "url(images/custom/bg_" + bgRotary + "_sml.png) no-repeat 0 100%";
			}
			var cssObj = {'background':	bgImageName};
			$(".active").css(cssObj);
		} else {
			if(direction == 'down'){
				var bgImageName = "url(images/custom/bg_" + bgRotary + ".png) no-repeat 0 0";
			} else {
				var bgImageName = "url(images/custom/bg_" + bgRotary + ".png) no-repeat 0 100%";
			}
			var cssObj = {'background':	bgImageName};
			$(".active").css(cssObj);
		}
	}
	function rotateDown() {
		if(lens != -300)  {
			lens = lens - 60;
			/*
			$("#player").fadeOut(function() {
				$f().stop();
			});
			*/
			$("#lens").animate({top: lens+"px"}).dequeue();
			var prevActive = $(".active");
			$(".active .flip").hide();
			$(".active .rotary-copy").hide();
			var prevOn = $("#rotary-items li.on");
			$("#rotary-items li.on").removeClass('on');
			$(".active div.rotary-title").animate({left:'60px',top:'13px'}, 200);
			$(".active").animate({height:'60px'}, 300, 'linear', bgSwitch($(".active"), 'down', 'small')).removeClass('active').dequeue();
			prevActive.next().addClass('active');
			prevOn.next().addClass('on');
			$(".active").animate({height:'200px'}, 300, 'linear', bgSwitch($(".active"), 'down')).dequeue();
			$(".active .flip").fadeIn();
			$(".active div.rotary-title").animate({left:'20px',top:'39px'});
			var currOn = $(prevOn).attr('id').substring(0,7);
			var rotCopy = '#' + currOn + '-copy';
			var rotArea = '#' + currOn + '-area';
			var imageString = 'url(.\/images\/custom\/bg_' + currOn + '_sml.png) no-repeat 0 100%';
			var titleString = ".rotary-title img[src*='" + currOn + "']";
			$(rotCopy).hide();
			$(rotArea).css({background:imageString});
			$(titleString).show();
		}
	}
	function rotateUp() {
		if(lens != 0) {
			/*
			$("#player").fadeOut(function() {
				$f().stop();
			});
			*/
			lens = lens + 60;
			$("#lens").animate({top: lens+"px"}).dequeue();
			var prevActive = $(".active");
			$(".active .flip").hide();
			var prevOn = $("#rotary-items li.on");
			$("#rotary-items li.on").removeClass('on');
			$(".active div.rotary-title").animate({left:'60px',top:'13px'}, 200);
			$(".active").animate({height:'60px'}, 300, bgSwitch($(".active"),'','small')).removeClass('active').dequeue();
			prevActive.prev().addClass('active');
			prevOn.prev().addClass('on');
			$(".active").animate({height:'200px'}, 300, bgSwitch($(".active"))).dequeue();
			$(".active .flip").fadeIn();
			$(".active .rotary-copy").fadeIn();
			$(".active div.rotary-title").animate({left:'20px',top:'39px'});
			var currOn = $(prevOn).attr('id').substring(0,7);
			var rotCopy = '#' + currOn + '-copy';
			var rotArea = '#' + currOn + '-area';
			var imageString = 'url(.\/images\/custom\/bg_' + currOn + '_sml.png) no-repeat 0 100%';
			var titleString = ".rotary-title img[src*='" + currOn + "']";
			$(rotCopy).hide();
			$(rotArea).css({background:imageString});
			$(titleString).show();
		}
	}
	
	// Rotary Controls
	$("#rotary-up").click(function(){
		rotateUp();
	});
	$("#rotary-down").click(function(){
		rotateDown();
	});
	$(".rotary-title").live('click',function() {
		var offset = $(this).offset();
		if (offset.top < 425) {
			rotateUp();
		} else if (offset.top > 425) {
			rotateDown();
		}
	});
	
	$("#rotary-items li").click(function() {
		$(".rotary-title").hide();
		var prevOn = $(this).parent('ul').children('li.on').attr('id');
		var prevNum = prevOn.substring(6,7);
		var currOn = $(this).attr('id');
		var currNum = currOn.substring(6,7);
		if (prevNum == currNum) {
		} else if (prevNum > currNum) {
			for(var i = 0; i < prevNum - currNum; i++){
				rotateUp();
			}
		} else {
			for(var i = 0; i < currNum - prevNum; i++) {
			rotateDown();
			}
		}
		$(".rotary-title").fadeIn(); // need to fix the timing on this, but it works for now
	});
	
	$(".flip").click( function() {
		var currOn = $(this).parent().attr('id').substring(0,7);
		var imageString = 'url(.\/images\/custom\/bg_' + currOn + '_overlay.png) no-repeat';
		var copyString = '#' + currOn + '-copy';
		var titleString = ".rotary-title img[src*='" + currOn + "']";
		$(titleString).hide();
		$(".rotary-copy").hide();
		$(".flip").hide();
		$(".active").css("background", imageString);
		$(copyString).fadeIn('slow');
		/*
		$("#player").fadeIn(function() {
			$f().play(clip);
		});
		*/
	});

	$(".flip-back").click( function() {
		var currOn = $(this).parent().attr('id').substring(0,7);
		var imageString = 'url(.\/images\/custom\/bg_' + currOn + '.png) no-repeat';
		var copyString = '#' + currOn + '-copy';
		var titleString = ".rotary-title img[src*='" + currOn + "']";
		$(titleString).fadeIn();
		$(".rotary-copy").fadeIn();
		$(".active .flip").fadeIn();
		$(".active").css("background", imageString);
		$(copyString).hide();
	});
	
});


/*
	To cheat the stretchy background... do the following
	<div id="background">
		<img src="img.jpg" class="stretch" alt="" />
	</div>	
	
	and then use this for css
	
	#background {
		width: 100%; 
		height: 100%; 
		position: absolute; 
		left: 0px; 
		top: 0px; 
		z-index: 0;
	}

	.stretch {
		width:100%;
		height:100%;
	}

*/