// JavaScript Document

$(document).ready(function(){
	
	// fade in fade out

	$("#sidebar").css("display", "none");
    $("#sidebar").fadeIn(1000);	
	$("#main").css("display", "none");
    $("#main").fadeIn(1000);	
	$("#mainwide").css("display", "none");
    $("#mainwide").fadeIn(1000);	

	// turn black&white into color on hover
	// http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
	
	$("img.bw").hover(
		function() {
			$(this).stop().animate({"opacity": "0"}, "slow");
		},
		function() {
			$(this).stop().animate({"opacity": "1"}, "slow");
		});

	// cycle a sequence of images
			
    $('#sidebarslides').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});

    $('.slides').cycle({
		fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		pager: '#sidebar',

		// callback fn that creates a thumbnail to use as pager anchor 
    	pagerAnchorBuilder: function(idx, slide) { 
        return '<div class="thumb"><a href="#"><img src="' + slide.src + '" width="68" height="42" /></a></div>'; 
    	} 		
	});
		
    $("a.lightbox").fancybox({
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic'
	});
	
	$('#myPageFlip1').jPageFlip({
		width: 382,
		height: 427,
		top: 0,
		left: 0,
		startPage: 1,
		shadowWidth : 20,
		animationSpeed: 30,
		animationDynamic: 30
	});

	$('#myPageFlip2').jPageFlip({
		width: 365,
		height: 426,
		top: 0,
		left: 0,
		startPage: 1,
		shadowWidth : 20,
		shadowOpacity : 0.8,
		animationSpeed: 30,
		animationDynamic: 30
	});
		
});