/* 
* Script based on Sitepoint page turning script by Alex Walker
* http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/
*/

/* Default values */ 
var $pageheight = 508; // our page height 
var $pagewidth = 400; // our page width 
var $pageYpos = 0;  // pages Y position
var $leftpageX = 0; // starting Left X pos
var $rightpageX = $pagewidth; // starting Right X pos
var $timedelay = 300 //  1/1000th of a second
var $pagenum = 10;
var $pagecounter = 0;

/* Pages */
$mypagesimg = [
'images/synergy.jpg',
'images/psychology_plus.jpg',
'images/fcpp.jpg',
'images/lexi.jpg',
'images/cfstp.jpg',
'images/ucsc.jpg',
'images/vegas.jpg',
'images/andersen.jpg',
'images/acnet.jpg',
'images/arcsys.jpg',
'images/outsider.jpg'
];
$mypageshref = [
"<a href='http://www.synergyartstudios.com/' class='external' target='_blanc'>Link to site</a>",
"<a href='http://www.psychologyplus.ca' class='external' target='_blanc'>Link to site</a>",
"<a href='http://www.fcpp.org' class='external' target='_blanc'>Link to site</a>",
"<a href='http://lexicom.ca' class='external' target='_blanc'>Link to site</a>",
"<a href='http://www.cfstp.com' class='external' target='_blanc'>Link to site</a>",
"<a href='http://www.calgaryswimming.com/' class='external' target='_blanc'>Link to site</a>",
"<a href='http://www.visitlasvegas.com' class='external' target='_blanc'>Link to site</a>",
"<a href='http://www.andersenwindows.com' class='external' target='_blanc'>Link to site</a>",
"<a href='http://www.acn.artsandcraftsnet.com' class='external' target='_blanc'>Link to site</a>",
"<a href='http://www.arcsys.biz' class='external' target='_blanc'>Link to site</a>",
"<a href='http://www.outsiderinside.com' class='external' target='_blanc'>Link to site</a>"
];

$(document).ready(function() {
    // book builder   
    $("div#book").css("overflow", "visible");
    $("div#book").prepend("<h2>Click to turn a page</h2>");
    $("div#book img").after("<div id=\"fliper\"> </div>");
    $("div#fliper").after("<div id=\"leftpage\"> </div>");
    $("div#leftpage").after("<div id=\"rightpage\"> </div>");
    $("div#leftpage").prepend("<div  id=\"curll\"></div>");
    $("div#rightpage").prepend("<div  id=\"curlr\"></div>");
    
    // clip out original img
    $("div#book img").remove();     
    
    // left page turner
    $('#curll').click(function() {
        $pageYpos = $pageYpos + $pageheight; // calculate new page position 
        $('#leftpage').css('background-position', '0 ' + $pageYpos + 'px'); // change left page position 
        $pagecounter = ($pagecounter==$pagenum)?0:$pagecounter+1;
        $('a.sitelink').attr({
            href: $mypagesimg[$pagecounter],
            title: $mypageshref[$pagecounter]
        });
        
        $('#fliper').css('background-position', 'top right') // show flipping page 
            setTimeout (function() { // delay for a moment
                $("#fliper").css("background-position", "top center"); // return to middle after brief delay 
                $("#rightpage").css("margin-left", "-4px").css("margin-right", "4px").css("background-position", $pagewidth+"px "+$pageYpos+"px").animate({marginRight:0,marginLeft:0},$timedelay,"linear") // change right hand page position after delay 
            }, $timedelay)
    });
	
	// right page turner
	$('#curlr').click(function() {
		$pageYpos = $pageYpos - $pageheight; // calculate new page position
		$('#rightpage').css('background-position', $pagewidth + 'px ' + $pageYpos + 'px') // change right page position 
        $pagecounter = (Math.abs($pagecounter)==$pagenum)?0:$pagecounter-1;
        $('a.sitelink').attr({
            href: $mypagesimg[$pagenum+1+$pagecounter],
            title: $mypageshref[$pagenum+1+$pagecounter]
        });
		
		$('#fliper').css('background-position', 'top left') // show flipping page 
			setTimeout (function() { // deleay for a moment
				$('#fliper').css('background-position', 'top center') // return to middle after brief deleay
				$('#leftpage').css('margin-left', '2px').css('margin-right', '-2px').css('background-position', '0px ' + $pageYpos + 'px').animate({marginRight:0,marginLeft:0},$timedelay,'linear') // change left hand page position after delay 
			}, $timedelay)
	});
    
    //lightbox
    $('a.sitelink').lightBox({imageBtnClose: 'images/close.png',});
    
    // open external link in a new window 
    $("a.external").click(function(event) {
        event.preventDefault();
        open(this.href,'pop','menubar=yes,location=yes,toolbar=yes,status=yes,scrollbars=yes,width=830,height=600,left=40,top=20,resizable=yes');
    });
    
});