// initialize the jquery code
 jQuery(document).ready(function(){
	var mirandaOpen = false;
	var jenOpen = false;
	var haydenOpen = false;
	
	jQuery('.look-nav a.photo').click(function(e){
			// by calling sibling, we can use same div for all demos
		jQuery('.toggleContent').show();
		jQuery('.how-to').removeClass('shownPane');
		//jQuery('.see-how.toClose').click();
		
		
		jQuery('.see-how.activated').css('background-position','0 -14px').removeClass('activated');
		
		jQuery(jQuery(this).attr('href')).slideDown(300).addClass('shownPane');
		jQuery('.photo').removeClass('active');
		jQuery(this).parent('div').find('.photo').addClass('active');
		jQuery('.toggleContent .divider-h').show();
		
	
		if (jQuery(this).attr('href')=="#miranda") {
			if (mirandaOpen) {
				jQuery(jQuery(this).attr('href')).slideUp(300).removeClass('shownPane');
				jQuery('.see-how').css('background-position', '0 -14px');
				jQuery('.toggleContent').hide();
				jQuery('.photo').removeClass('active');
				jQuery('.toggleContent .divider-h').hide();
				mirandaOpen = false;
			}
			else {
				if (jenOpen) {
					jQuery('#jen').hide();
					jenOpen = false;
				}
				if (haydenOpen) {
					jQuery('#hayden').hide();
					haydenOpen = false;
				}
				jQuery('.caret').animate({
					left: '96px'
					},700);
				jQuery('#miranda-slide .see-how').css('background-position','0 -23px').addClass('activated');
				mirandaOpen = true;
			}
			

			
		}
		if (jQuery(this).attr('href')=="#jen") {
			if (jenOpen) {
				jQuery(jQuery(this).attr('href')).slideUp(300).removeClass('shownPane');
				jQuery('.see-how').css('background-position', '0 -14px');
				jQuery('.toggleContent').hide();
				jQuery('.photo').removeClass('active');
				jQuery('.toggleContent .divider-h').hide();
				jenOpen = false;
			}
			else {
				if (mirandaOpen) {
					jQuery('#miranda').hide();
					mirandaOpen = false;
				}
				if (haydenOpen) {
					jQuery('#hayden').hide();
					haydenOpen = false;
				}
				jQuery('.caret').animate({
					left: '363px'
				},700);
				jQuery('#jen-slide .see-how').css('background-position','0 -23px').addClass('activated');
				jenOpen = true;
			}
			
		}
		if (jQuery(this).attr('href')=="#hayden") {
			if (haydenOpen) {
				jQuery(jQuery(this).attr('href')).slideUp(300).removeClass('shownPane');
				jQuery('.see-how').css('background-position', '0 -14px');
				jQuery('.toggleContent').hide();
				jQuery('.photo').removeClass('active');
				jQuery('.toggleContent .divider-h').hide();
				haydenOpen = false;
			}
			else {
				if (jenOpen) {
					jQuery('#jen').hide();
					jenOpen = false;
				}
				if (mirandaOpen) {
					jQuery('#miranda').hide();
					mirandaOpen = false;
				}
				jQuery('.caret').animate({
					left: '613px'
				},700);
				jQuery('#hayden-slide .see-how').css('background-position','0 -23px').addClass('activated');
				haydenOpen = true;
			}
		
		}

		e.preventDefault();
	})
	
	jQuery('.look-nav .container a.see-how').click(function (e){
		// by calling sibling, we can use same div for all demos
		jQuery('.toggleContent').show();
		jQuery('.how-to').removeClass('shownPane');
		//jQuery('.see-how.toClose').click();
		
		
		jQuery('.see-how.activated').css('background-position','0 -14px').removeClass('activated');
		
		jQuery(jQuery(this).attr('href')).slideDown(300).addClass('shownPane');
		jQuery('.photo').removeClass('active');
		jQuery(this).parent('div').find('.photo').addClass('active');
		jQuery('.toggleContent .divider-h').show();
		
	
		if (jQuery(this).attr('href')=="#miranda") {
			if (mirandaOpen) {
				jQuery(jQuery(this).attr('href')).slideUp(300).removeClass('shownPane');
				jQuery('.see-how').css('background-position', '0 -14px');
				jQuery('.toggleContent').hide();
				jQuery('.photo').removeClass('active');
				jQuery('.toggleContent .divider-h').hide();
				mirandaOpen = false;
			}
			else {
				if (jenOpen) {
					jQuery('#jen').hide();
					jenOpen = false;
				}
				if (haydenOpen) {
					jQuery('#hayden').hide();
					haydenOpen = false;
				}
				jQuery('.caret').animate({
					left: '96px'
				},700);
				jQuery('#miranda-slide .see-how').css('background-position','0 -23px').addClass('activated');
				mirandaOpen = true;
			}
			
		
			
		}
		if (jQuery(this).attr('href')=="#jen") {
			if (jenOpen) {
				jQuery(jQuery(this).attr('href')).slideUp(300).removeClass('shownPane');
				jQuery('.see-how').css('background-position', '0 -14px');
				jQuery('.toggleContent').hide();
				jQuery('.photo').removeClass('active');
				jQuery('.toggleContent .divider-h').hide();
				jenOpen = false;
			}
			else {
				if (mirandaOpen) {
					jQuery('#miranda').hide();
					mirandaOpen = false;
				}
				if (haydenOpen) {
					jQuery('#hayden').hide();
					haydenOpen = false;
				}
				jQuery('.caret').animate({
					left: '363px'
				},700);
				jQuery('#jen-slide .see-how').css('background-position','0 -23px').addClass('activated');
				jenOpen = true;
			}

		}
		if (jQuery(this).attr('href')=="#hayden") {
			if (haydenOpen) {
				jQuery(jQuery(this).attr('href')).slideUp(300).removeClass('shownPane');
				jQuery('.see-how').css('background-position', '0 -14px');
				jQuery('.toggleContent').hide();
				jQuery('.photo').removeClass('active');
				jQuery('.toggleContent .divider-h').hide();
				haydenOpen = false;
			}
			else {
				if (jenOpen) {
					jQuery('#jen').hide();
					jenOpen = false;
				}
				if (mirandaOpen) {
					jQuery('#miranda').hide();
					mirandaOpen = false;
				}
				jQuery('.caret').animate({
					left: '613px'
				},700);
				jQuery('#hayden-slide .see-how').css('background-position','0 -23px').addClass('activated');
				haydenOpen = true;
			}
		
		}

		e.preventDefault();
		
	})
	
	jQuery('.how-to .close').click( function(e){
		
		jQuery('.how-to').hide();
		jQuery('.toggleContent').hide();
		jQuery('.see-how').css('background-position', '0 -14px');
		if (jQuery(this).hasClass('mirandaClose')) mirandaOpen = false;
		if (jQuery(this).hasClass('jenClose')) jenOpen = false;
		if (jQuery(this).hasClass('haydenClose')) haydenOpen = false;
		e.preventDefault();
	});
	
	// switch video
	jQuery('.thumbs li a').click( function(e){
		// by calling sibling, we can use same div for all demos
		jQuery('.flashMain').hide();
		jQuery('.flashDiv').hide().show();
		jQuery(jQuery(this).attr('href')).show().children('.playVideo').show();
		jQuery(jQuery(this).attr('href')).children('.flashDiv').hide();
		jQuery('.image').removeClass('active');
		jQuery(this).parent('li').find('.image').addClass('active');									
		e.preventDefault();
	});
	
	jQuery('a.playVideo').click( function(e){
		// by calling sibling, we can use same div for all demos
		jQuery(this).hide();
		jQuery(jQuery(this).attr('href')).show();
	});

});