var heights = new Array;
var personImages = null;
var personTimer = null;
var personDuration = 5000;
var totalDuration = null;
var personFadeDuration = 1000;
var personImageTimer = null;
var personImageDuration = null;
var personImageFadeDuration = 50;

$(document).ready(function() {
	setBrandSearchOptions();
});

function setupPeople(add) {
	totalDuration = add ? personDuration * 2 : personDuration;

	clearTimeout(personTimer);
	personTimer = setTimeout('rotatePeople()', totalDuration);
}

function pausePeople() {
	clearTimeout(personTimer);
}

function resumePeople() {
	rotatePeople();
}

function rotatePeople() {
	
	if (personImages.hasClass('paused')) return false;
	
	if ($('.active', personImages).length == 0 || $('.active', personImages).parents('li').index() == ($('.person', personImages).length - 1)) {
		$('.pager li:first a', personImages).trigger('click');
	}
	else {
		$('.pager li a.active', personImages).parents('li').next().find('a').trigger('click');
	}

	var add = $('.person:eq(' + $('.pager li a.active', personImages).parents('li').index() + ')').children('img').length > 1 ? true : false;
	setupPeople(add);
}

function setupPeopleImages() {

	clearTimeout(personImageTimer);
	personImageTimer = setTimeout('rotatePeopleImages()', personImageDuration);
}

function rotatePeopleImages() {

	if (!$('.person:visible img:eq(0)', personImages).is(':visible')) {

		$('.person:visible img:visible', personImages).fadeOut(personImageFadeDuration).prev().fadeIn(personImageFadeDuration);
		setupPeopleImages();
	}
}

$(function() {
	
	// pause/resume people slide animation
	$('#brand-canvas .buttons, #brand-canvas .pager')
		.hover(
			function(){
				personImages.addClass('paused');
				pausePeople();
			},
			function(){
				personImages.removeClass('paused');
				resumePeople();
			});

	personImages = $('#brand-canvas .people');

	if (personImages.length > 0) {

		$('.pager li a', personImages).click(
			function() {

				if ($(this).hasClass('active')) return false;
				
				$('.person:animated').each(function() {
					$(this).fadeOut(personFadeDuration);
				});
				
				clearTimeout(personImageTimer);
				
				var add = $('.person:eq(' + $(this).parent('li').index() + ')').children('img').length > 1 ? true : false;
				setupPeople(add);
				
				$('.pager li a.active').removeClass('active');
				$('.person:visible', personImages).fadeOut(
					personFadeDuration,
					function() {
				
						var index = $(this).closest('li').index();
						
						$('.pager :eq(' + index + ')', personImages).removeClass('active');
				
						if ($('img', $(this)).length > 1 && !personImages.hasClass('paused')) {
				
							$('img:not(:last)', $(this)).hide(0);
							$('img:last', $(this)).show(0);
						}
					}
				);

				var index = $(this).parents('li').index();

				$('.person:eq(' + index + ')', personImages).fadeIn(
					personFadeDuration,
					function() {

						if ($('img', $(this)).length > 1 && !personImages.hasClass('paused')) {

							$('img:not(:last)', $(this)).hide(0);
							$('img:last', $(this)).show(0);

							personImageDuration = Math.floor((totalDuration - (personFadeDuration * 2)) / $('img', $(this)).length);
							setupPeopleImages();
						}
					}
				);

				$(this).addClass('active');

				return false;
			}
		);

		rotatePeople();
	}

	// store the heights of each flyout and set the height to 0 so they can grow
	$('.buttons > div').each(function() {
		var id = $(this).attr('id'),
		flyout = $('.flyout', this),
		height = flyout.height();

		heights[id] = height;

		flyout.css({height: 0});
	});

	// show the suggested frames form after the height calculations are complete
	$('#suggested-frames').show();

	// set up the selected items in the face shape flyout
	var preselect = $('#select-shape li:first').attr('class');
	$('#select-shape li.' + preselect).addClass('selected');
	$('#' + preselect).addClass('active').show();

	// populate the hidden frame shape input with the first selected shape 
	$('#frame-shape').val(preselect);
	
	// events for mouse hover
	$('.buttons > div').hover(
		function() {
			
			var flyout = $('.flyout', this),
			id = $(this).attr('id'),
			buttonsWidth = $('#bttn-brands').outerWidth() + $('#bttn-shape').outerWidth() + $('#bttn-style').outerWidth(),
			bttnBrandsWidth = $('#bttn-brands').outerWidth();

			// Make the face shape flyout full width
			if (id == 'bttn-shape') {
				$(this).children('.flyout').css({
					'width' : buttonsWidth + 'px'
				});
			}

			// make the flyout expand up
			$('.flyout', this).show().stop().animate({
				height: heights[id]
				}, 'fast');

		},
		function () {
						
			// make the flyout shrink
			$('.flyout', this).stop().animate({
				height: 0
			}, 'fast', function() {
				$(this).hide();
			});

	});

	// highlight the face shape icon and fade in the pertinent face shape info panel
	$('#select-shape li').click(function(){

		// if this shape is already selected, don't do anything
		if ($(this).hasClass('selected')) return false; 

		var shape = $(this).attr('class');
		var currentShapes = eval('faceShapes.' + shape);
		var suggested = $('#suggested-frames');
		var suggestList = 'list';

		if (currentShapes.length <= 3) {
			suggestList = 'visual';
		}

		$('ul:visible', suggested).fadeOut(
			'fast',
			function() {

				$('#' + suggestList + ' li', suggested).css({ 'display': 'none' }).each(
					function() {
						if ($.inArray(($(this).attr('class')).replace('cateye','cat_eye'), currentShapes) != -1) {
							$(this).css({ 'display': 'block' });
						}
					}
				);

				$('#' + suggestList, suggested).fadeIn('fast');
			}
		);

		// deselect the last selected item and select this one
		$('li.selected').removeClass('selected');
		$(this).addClass('selected');

		// update the face shape hidden field 
		$('#face-shape').val(shape);

		// fade in the pertinent face shape info panel once the previous one has faded out
		$('#face-shape-info .active').removeClass('active').fadeOut('fast', function(){
			$('#' + shape).fadeIn('fast').addClass('active');
			$('#face-shape').val(shape);
		});
	});

	$('.open-modal').fancybox({
		overlayOpacity: 0.6,
		overlayColor: '#000000',
		titlePosition: 'inside',
		padding: 20,
		scrolling: 'no'
	});

});

function setBrandSearchOptions() {

	$('span.brand-gender-radio').click(function() {
		$('div.brand-list').css( 'display', 'none' );
		var cnt = new String( $(this).attr( 'id' ) );
		$('#list-'+cnt.replace( /^(.*)-[a-zA-Z]+$/, "$1" )).css( 'display', 'block' );
	});
}