// ----------------------------------- thumbnails ----------------------------------- //
// section title onmouseenter
$( '#thumbnails ul li a' ).mouseenter( function (){
	// fade image
	$( this ).find( 'canvas' ).fadeOut();
	$( this ).siblings().stop().fadeTo( 100 , .7 );
	// section name 
	$( '#section' ).css({'margin-bottom':-20,'opacity':0}).stop().animate({'margin-bottom':0,'opacity':1},100).text( $( this ).attr( 'title' ) ).show();	
	void Cufon.replace( '#section' );
}).mouseleave( function (){
	// fade image
	$( this ).find( 'canvas' ).fadeIn();
	$( this ).siblings().stop().fadeTo( 100 , 1 );
	// section name 
	$( '#section' ).hide();
});

$( '#thumbnails ul li a img' ).each( function( index , element ){
	void bw( element );
});

function bw ( el ){
	if ( !document.createElement('canvas').getContext ) return;
	var element		= $( el ) || $( '#' + el );
	var img 		= new Image();
	img.src 		= element.attr( 'src' );
	
	img.onload = function (){
		var wrap 	= element.wrap( '<div class="bw" />' ).parent();	
		var canvas	= wrap.append( '<canvas height="'+this.height+'" width="'+this.width+'" />' ).find( 'canvas' );
		// make the bw
		var ctx = canvas.get(0).getContext('2d'),  
			img = element.get(0),
			imageData, px, length, i = 0,  
			grey;  
	
		ctx.drawImage(img, 0, 0);  
	
		imageData = ctx.getImageData(0, 0, this.width, this.height);  
		px = imageData.data;  
		length = px.length;  
	
		for ( ; i < length; i+= 4 ) {  
			grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;  
			px[i] = px[i+1] = px[i+2] = grey;  
		}  
	
		ctx.putImageData(imageData, 0, 0);		
	}
}

// ----------------------------------- slideshow ----------------------------------- //
$( window ).ready( function (){
	var images 	= $( '#slideshow li' );
	var index 	= 0;
	var length	= images.length;
	var delay	= 4000;
	
	images.first().nextAll().hide();
			
	function show (){
		var next = index + 1 > length - 1 ? 0 : index + 1;
		$( images.get( index ) ).fadeOut();
		$( images.get( next ) ).fadeIn();
		index = next;		
		setTimeout( show , delay );
	}
	
	setTimeout( show , delay );
});

// ----------------------------------- gallery ----------------------------------- //
// Slideshow animation
$( window ).ready( function (){
	var href = location.href.replace( /^[^#]+#/g , '#slide' );
	var page = $( '#pages .page[href="'+href+'"]' ).get(0);
	
	if ( page ){ 
		$.fx.off = true;
		void showSlide( page );
		$.fx.off = false;
	}
});

$( '#pages .page' ).bind( 'mouseenter' , function ( event ){
	void showSlide( this );
}).bind( 'click' , function ( event ){
	void event.preventDefault();
	void showSlide( this );
});

$( '#pages .prev' ).bind( 'click' , function ( event ){
	void event.preventDefault();
	var prev = $( '#pages .current' ).prev( '.page' ).get(0);
	void showSlide( prev );
});

$( '#pages .next' ).bind( 'click' , function ( event ){
	void event.preventDefault();
	var next = $( '#pages .current' ).next( '.page' ).get(0);
	void showSlide( next );
});

function showSlide ( page ){
	if ( !page ) return;
	
	$( page ).siblings().removeClass( 'current' );
	$( page ).addClass( 'current' );
	
	var id 			= page.getAttribute( 'href' , 2 );
	var slide		= $( id );
	var currentLeft	= parseInt( slide.parent().css( 'left' ) , 10 ) || 0;
	var totalWidth	= parseInt( slide.parent().width() , 10 );
	
	var left		= - slide.position().left;
	var speed		= 150; //Math.abs( currentLeft - left ) / totalWidth * 100;
	//location.href 	= id.replace( '#slide' , '#' );
	
	slide.parent().stop().animate( { 'left':left } , speed );	
}

// Details animation
$( '#gallery' ).on( 'mouseenter' , 'li' , function (){
	$( this ).find( '.info' ).css({'display':'block','bottom':-70,'opacity':0}).stop().animate({'bottom':0,'opacity':1},'fast');
}).on( 'mouseleave' , 'li' , function (){
	$( this ).find( '.info' ).stop().animate({'bottom':-70,'opacity':0},'fast');
});