// JavaScript Document
$(function() {
$('#thumbnails').before('<div class="navContainer"><ul id="nav">').cycle({ 
    fx:     'zoom', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav',
	after:   onAfter, 
     
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="60" height="45" alt="Click for a larger view" /></a></li>'; 
		
    } 
});
});

function onAfter() { 
$('#output').html(this.alt); 
}

$(document).ready(function(){
						   
	var stage = 1;
						   
	$("#left").css("visibility","hidden");						   
	
	$("#right").click(function(){
		if (stage == 1) {					   
			$("#nav").animate({"left": "-558px"}, "1000");
			//$("#left").animate({"opacity": "1"}, "1000");
			//$("#right").animate({"opacity": "0"}, "1000");
			$("#left").css("visibility","visible");
			stage = 2;
		} else {
			$("#nav").animate({"left": "-1055px"}, "1000");
			//$("#left").animate({"opacity": "1"}, "1000");
			//$("#right").animate({"opacity": "0"}, "1000");
			$("#left").css("visibility","visible");
			$("#right").css("visibility","hidden");
			stage = 3;
		}
			
	});
	
	$("#left").click(function(){
		if (stage == 2) {	
			$("#nav").animate({"left": "0px"}, "1000");			
			$("#left").css("visibility","hidden");
			stage = 1;
		} else if (stage == 3) {	
			$("#nav").animate({"left": "-558px"}, "1000");
			$("#left").css("visibility","visible");	
			$("#right").css("visibility","visible");
			stage = 2;
		}
	});

});