// script_global.js






$.fx.speeds['attackSpeed'] = 200;
$.fx.speeds['decaySpeed'] = 800;
$.fx.speeds['crossfadeSpeed'] = 300;

// Fade to Hot
var fadeToHot = function() {
	var t = $(this);
	t.find('.normal').stop(true).fadeTo('attackSpeed', 0);
	t.find('.hot').stop(true).fadeTo('attackSpeed', 1);
}
	
// Fade to Normal
var fadeToNormal = function() {
	var t = $(this);
	t.find('.normal').stop(true).fadeTo('decaySpeed', 1);
	t.find('.hot').stop(true).fadeTo('decaySpeed', 0);
}
	


$( function() { // ready handler
	// DOM is loaded...

	// Logo, Main Nav, Works Nav, Footer Nav ————————————————————————————————————————————————————————————————————————————
	$('#logo a, .main-nav a, .works-nav a, .footer-nav a' )
		.addClass('animate')
		.prepend(  $('<span class="hot"/>' ).fadeTo(0,0) ) // .hot layer
		.prepend(  $('<span class="normal"/>' ).fadeTo(0,1) ) // .normal layer
		.hover( fadeToHot, fadeToNormal ) // bind hover handler
		.click( fadeToNormal ) ; // leave page in normal state

	// Bonbons ——————————————————————————————————————————————————————————————————————————————————————————————————————————
	$('div.bonbon a, ul.bonbons li a' )
		.addClass('animate')
		.prepend(  $('<span class="hot"/>' ).fadeTo(0,0) ) // .hot layer
		.hover(  // bind hover handler
			function() { $(this).find('.hot').stop(true).fadeTo('attackSpeed', 1.00); },
			function() { $(this).find('.hot').stop(true).fadeTo('decaySpeed', 0.00); } )
		.click( fadeToNormal ) ; // leave page in normal state

	// Link Areas ———————————————————————————————————————————————————————————————————————————————————————————————————————
	// The links inside .links are assigned the .bullet class
	$('.links a').addClass('bullet');

	// Bullet Links —————————————————————————————————————————————————————————————————————————————————————————————————————
	// They are animated by adding two superimposed layers (.normal, .hot) and binding a hover handler.
	$('a.bullet').each( function() {
		var origContents = $(this).contents();
		$(this)
			.addClass('animate')
			.append(  $('<span class="hot"/>' ).append( origContents ).fadeTo(0,0) ) // .hot layer
			.append(  $('<span class="normal"/>' ).append( origContents.clone() ).fadeTo(0,1) ) // .normal layer
			.append(  $('<span class="placeholder"/>' ).append( origContents.clone() ).fadeTo(0,0) ) // .placeholder layer (needed to hold open <a> because other layers are position:absolute)
			.hover( fadeToHot, fadeToNormal ) // bind hover handler
			.click( fadeToNormal ) ; // leave page in normal state

	});

	// Top-of-Page Link ————————————————————————————————————————————————————————————————————————————————————————————————
	var $thePage = $('.page');
	if ( $thePage.offset().top + $thePage.outerHeight() - 18 > $(window).height() ) {
		// the page is taller than the viewport, so reveal ^TOP in footer
		$('#footer-nav-top')
			.css('display', 'block')
			.find( 'a' )
				.removeAttr( 'href' )
				.click( function() {
					// scroll smoothly to top
					$('html, body').animate( { scrollTop: 0 }, { duration: 'crossfadeSpeed' } );
					} );
	}


	// Works page: make text areas active ——————————————————————————————————————————————————————————————————————————————

	$('.works .work .lede')
			.css('cursor', 'pointer')
			.mouseenter( function() {
					$(this).closest('.work').find('.bonbon a').trigger('mouseenter');

				} )
			.mouseleave( function() {
					$(this).closest('.work').find('.bonbon a').trigger('mouseleave');
				} )
			.click( function() {
					$a = $(this).closest('.work').find('.bonbon a');
					$a.trigger('click');
					window.location.href = $a.attr('href'); // go to 
				});

	// Slideshow ——————————————————————————————————————————————————————————————————————————————————————————————————————
	//
	// Events used by Slideshow...
	var showSlideEvent = $.Event('showSlide');
	var nextSlideEvent = $.Event('nextSlide');
	var nextSlideEvent = $.Event('prevSlide');
	var fadeInSlideEvent = $.Event('fadeInSlide');
	var fadeOutSlideEvent = $.Event('fadeOutSlide');
	//
	// Construct Slideshow
	$('.slideshow').each( function() {
		// for each .slideshow...
		var $slideshow = $(this); // this slideshow
		var $slides = $slideshow.find('.slide'); // all the slides in this slideshow
		var slideshowHeight = 0; // for calculating the height of .slideshow 
		// for keeping track of what slide to show...
		$slideshow.data( 'currentSlideNumber', 0 );
		$slideshow.data( 'numberOfSlides', $slides.length );
		//
		// HANDLERS for .slideshow
		//
		// Handler: Show Slide (by slide number)
		$slideshow
			.bind('showSlide', function(event, newSlideNumber) {
			var currentSlideNumber = $slideshow.data('currentSlideNumber');
			if ( newSlideNumber != currentSlideNumber ) {
				// fade out current slide
				$slides.eq( currentSlideNumber ).trigger('fadeOutSlide');
				// fade in next slide
				$slides.eq( newSlideNumber ).trigger('fadeInSlide');
				$slideshow.data( 'currentSlideNumber', newSlideNumber );
			}
			})
			.bind('nextSlide', function() {
				$(this).trigger('showSlide', ($slideshow.data( 'currentSlideNumber') + 1) % $slides.length );
			})
			.bind('prevSlide', function() {
				$(this).trigger('showSlide', ($slideshow.data( 'currentSlideNumber') - 1 + $slides.length) % $slides.length );
			});
		//
		// Construct individual slides (as .slide)
		//
		$slides.each( function( slideNumber ) {
			var $slide = $(this);
			var $slideImg = $slide.find('img');
			// slide width adjusted to match img width
			$slide.css( 'width', $slideImg.outerWidth() );
 			// reserve enough height for this slide
 			slideshowHeight =  Math.max( $slide.innerHeight(), slideshowHeight );
			// initial states for slide...
			if( slideNumber == 0 ) {
				// first slide is current slide
				$slide.css('z-index', '2'); // on top
				$slide.fadeIn(0); 
				$slideshow.data( 'currentSlide', $slide );
			} else {
				// remainder of slides 
				$slide.css('z-index', '1'); // not on top
				$slide.fadeOut(0); // display: none for now
			}
			// make entire img area a hotspot for nextSlide
			$slideImg
				.css('cursor', 'pointer')
				.click( function(event) { 
						event.preventDefault();
						$(this).trigger('nextSlide');
					})
 				.hover( 
					function() { $slide.find('.nav .next').trigger('mouseenter'); },
					function() { $slide.find('.nav .next').trigger('mouseleave'); }
					);
			// bind handlers for this slide...
			$slide
				.bind('fadeOutSlide', function() {
					$slide.css('z-index', '1'); // not top slide now
					$slide.fadeOut('crossfadeSpeed'); 
				})
				.bind('fadeInSlide', function() {
					$slide.css('z-index', '2'); // top slide
					$slide.fadeIn('crossfadeSpeed'); 
				});
			//
			// Slide Nav
			//
			// each slide gets its own nav (for pretty cross-fades when image sizes differ)
			$slideNav = $( '<div class="nav" />' );
			$slide.prepend( $slideNav );
			// position at bottom of image
			$slideNav.css( 'top', $slide.find('img').outerHeight() - $slideNav.outerHeight() );
			// One dot for each slide in the slideshow...
			$slides.each( function( dotNumber ) {
				var $dotButton = $('<div class="dot" />')
					.append(  $('<div class="hot"/>' ).fadeTo(0,0) ) // .hot layer
					.append(  $('<div class="normal"/>' ).fadeTo(0,1) ) // .normal layer
					.click( function() { $slide.trigger('showSlide', dotNumber ); } )
					.hover( fadeToHot, fadeToNormal ) ;
				// if this dot belongs to this slide, add .here
				if( dotNumber == slideNumber ) { $dotButton.addClass('here'); }
				$slideNav.prepend( $dotButton );
			} );
			// arrows
			$slideNav
				.prepend( 
					// previous arrow
					$('<div class="prev" />')
						.append(  $('<div class="hot"/>' ).fadeTo(0,0) ) // .hot layer
						.append(  $('<div class="normal"/>' ).fadeTo(0,1) ) // .normal layer
						.click( function() { $slide.trigger('prevSlide'); } )
						.hover( fadeToHot, fadeToNormal ) )
				.prepend( 
					// next arrow
					$('<div class="next" />')
						.append(  $('<div class="hot"/>' ).fadeTo(0,0) ) // .hot layer
						.append(  $('<div class="normal"/>' ).fadeTo(0,1) ) // .normal layer
						.click( function() { $slide.trigger('nextSlide'); } )
						.hover( fadeToHot, fadeToNormal )
					);
		});
		// adjust the slideshow height
		$slideshow.css('height', slideshowHeight); 
	});

	
	// External links open in new window —————————————————————————————————————————————————————————————————————
	//
	$('a[href^="http"]').click( function() {
		window.open($(this).attr('href'));
		return false;
	}) 

	// Contact Form —————————————————————————————————————————————————————————————————————

	// focus on first field
	$('#field-from').focus();


	// checking ADD will uncheck REMOVE
	$('#checkbox-add').change( function() {
		if ( this.checked ) { $('#checkbox-remove').removeAttr('checked'); }
	});

	// checking REMOVE will uncheck ADD
	$('#checkbox-remove').change( function() {
		if ( this.checked ) { $('#checkbox-add').removeAttr('checked'); }
	});

	// send
	$('#button-send a').click( function() {
		// FUTURE: form validation
		//
		// request "send" (without this, the form submission will be ignored by the server)
		$('#hidden-request').attr('value', 'send');
		// submit the form
		$('#contact-form').submit();
		return false;
	});


}); // END ready handler