var g_width = 900 ;
var book ;

function InitSlideshow(){
	//load the first section
	$.getJSON('gallery/'+book+'/include.php', startSlideshow);

	function startSlideshow(slides){
	  /* server returns an array of slides which looks like this:
	  {"images":
			[
				{"path":"gallery/BOOKNAME/1.jpg","width":"IMG WIDTH","height":"IMG HEIGHT","title":"IMG TITLE","caption":"IMG CAPTION"},
				{"path":"gallery/BOOKNAME/2.jpg","width":"IMG WIDTH","height":"IMG HEIGHT","title":"IMG TITLE","caption":"IMG CAPTION"},
				{"path":"gallery/BOOKNAME/3.jpg","width":"IMG WIDTH","height":"IMG HEIGHT","title":"IMG TITLE","caption":"IMG CAPTION"},
				...
		  ]
		}*/
		
		//display the total number of images and reset the current image
    var totalSlideCount = slides.images.length;
    $('div.book_count span.total').text(totalSlideCount);
    $('div.book_count span.curr').text('1');
    
    //clear out the slideshow and load the first image
    var firstSlide = slides.images.shift();
    var firstSlideNum = firstSlide['path'].split('/').pop().split('.');
    $('.inner_image_container').html('<div class="slideshow"><img src="'+firstSlide['path']+'" width="'+firstSlide['width']+'" height="'+firstSlide['height']+'" alt="'+firstSlideNum[0]+'" /></div><!-- /#slideshow -->');

    var $slideshow = $('.slideshow');

    // markup now contains only a single slide; before starting the slideshow we append one slide and prepend one slide (to account for prev/next behavior)
    var preSlide = slides.images.pop();
    var appSlide = slides.images.shift();
    var preSlideNum = preSlide['path'].split('/').pop().split('.');
    var appSlideNum = appSlide['path'].split('/').pop().split('.');
    
    $slideshow.prepend('<img src="'+preSlide['path']+'" width="'+preSlide['width']+'" height="'+preSlide['height']+'" alt="'+preSlideNum[0]+'" />');
    $slideshow.append('<img src="'+appSlide['path']+'" width="'+appSlide['width']+'" height="'+appSlide['height']+'" alt="'+appSlideNum[0]+'" />');

    // start slideshow
    $('.slideshow').cycle({
      fx: 'fade',
      startingSlide: 1, //start on the slide that was in the markup 
      timeout:  0,
      speed:    500,
      after: UpdateCurr,
      prev:    '.prev',
      next:    '.next',
      before:   onBefore
    });

    function onBefore(curr, next, opts, fwd){
      // on Before arguments:
      //  curr == DOM element for the slide that is currently being displayed
      //  next == DOM element for the slide that is about to be displayed
      //  opts == slideshow options
      //  fwd  == true if cycling forward, false if cycling backward

      // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
      if (!opts.addSlide)
          return;

      // have we added all our slides?
      if (opts.slideCount == totalSlideCount)
          return;

      // shift or pop from our slide array
      var nextSlideSrc = fwd ? slides.images.shift() : slides.images.pop();
      var nextSlideNum = nextSlideSrc['path'].split('/').pop().split('.');

      // add our next slide
      opts.addSlide('<img src="'+nextSlideSrc['path']+'" width="'+nextSlideSrc['width']+'" height="'+nextSlideSrc['height']+'" alt="'+nextSlideNum[0]+'" />', fwd == false);
    };
  };
}

function UpdateCurr(){
	//update current image number
	var curr = $('.slideshow img:visible').attr('alt');
	$('div.book_count span.curr').text(curr);
	//resize navigation buttons
	var imgHeight = $('.slideshow img:visible').height();
	var imgTop = -1 * imgHeight + "px";
	
	$('.slideshow_control .prev, .slideshow_control .next').height(imgHeight).css('top',imgTop)
}

$(document).ready(function(){
	
	//find the first book to load
	book = $('div.nav dl dd li:first a').attr('rel');
	
	InitSlideshow();
	
	//change book in a section
	$('div.nav dl dd li a').click(function(){
		$('div.nav dl dd li a').removeClass('current');
		$(this).addClass('current');

		if($(this).attr('rel')){
			book = $(this).attr('rel');
			InitSlideshow();
		}
		return false ;
	});

	//show the new work section and hide portfolio
	$('dl.newwork dt a').click(function(){
		$('dl.portfolio dd').animate({
			opacity: "hide",
			left: -100
		},{
			duration: 1100,
			easing: "easeOutElastic"
		});
		$('dl.newwork dd').animate({
			opacity: "show",
			left: 90
		},{
			duration: 900,
			easing: "easeOutElastic"
		});
		
		return false ;
	});
	
	//show the portfolio section and hide new work
	$('dl.portfolio dt a').click(function(){
		$('dl.newwork dd').animate({
			opacity: "hide",
			left: -100
		},{
			duration: 1100,
			easing: "easeOutElastic"
		});
		$('dl.portfolio dd').animate({
			opacity: "show",
			left: 90
		},{
			duration: 900,
			easing: "easeOutElastic"
		});
		
		return false ;
	});

	//open new work by default
	$('dl.newwork dd').animate({
		opacity: "show",
		left: 90
	},{
		duration: 900,
		easing: "easeOutElastic"
	});

	/**/
});