$(function (){

/*
1. build an array of the links in the gallery
2. attach events to the #gallery-items links
3. that event should parse out the ID, then compile the filename and get that image.
4. also move the "selected" class on the #gallery-items

5. append previous/next arrows
6. attach event that moves to #gallery-items.selected +/- 1
6. observe where we are in the sequence, apply .disabled where needed
*/

$items = $('#gallery-items a');
current = $('#gallery-items a.selected');


$('#gallery-view').append('<a href="#next" id="gallery-next">next</a><a href="#previous" id="gallery-prev">prev</a><div id="gallery-overlay"><div></div></div>');

function getGalleryImage(idx) {
	
	imgPreloader = new Image();
	
	// we'll get in trouble if there are additional params on the URL... address that later!
	var $this = $($items.get(idx));
	var id = $this.attr('href').split('?')[1].split('=')[1];
	var img = 'http://www.hollywoodbowl.com' + photoRoot + 'image_'+ id +'_500.jpg'
	var caption = $('img',$this).attr('alt');
	
	$('#gallery-items a.selected').removeClass('selected');
	$this.addClass('selected');
	
	$('#gallery-overlay').fadeIn('fast', function(){
		imgPreloader.src = img;											 
	});

	imgPreloader.onload = function(){		
		imgPreloader.onload = null;
		var imageWidth = imgPreloader.width;
		var imageHeight = imgPreloader.height;
		$('#gallery-view img').attr({src:img, width:imageWidth, height:imageHeight});
		$('#gallery-view p').text(caption);
		
        // Removed to cycle photos continuously...
        /*
		// disable prev if we're at the start
		if ( idx-1 < 0 ) {
			//$('#gallery-prev').addClass('disabled');
		} else if ( idx+1 == $items.length ) {
			//$('#gallery-next').addClass('disabled');
		} else {
			$('#gallery-view a').removeClass('disabled');	
		}
        */
		
		$('#gallery-overlay').fadeOut('fast');
	}
	
}


function getGalleryImage2(idx) {
	
	imgPreloader = new Image();
	
	// we'll get in trouble if there are additional params on the URL... address that later!
	var $this = $($items.get(idx));
	var theimg = $('img',$this);
	var photUrl = theimg.attr('src');
	var photUrl = photUrl.replace('_100','_500');
	var id = $this.attr('href').split('?')[1].split('=')[1];
	var img = photUrl;
	var caption = $('img',$this).attr('alt');
	
	$('#gallery-items a.selected').removeClass('selected');
	$this.addClass('selected');
	
	$('#gallery-overlay').fadeIn('fast', function(){
		imgPreloader.src = img;											 
	});

	imgPreloader.onload = function(){		
		imgPreloader.onload = null;
		var imageWidth = imgPreloader.width;
		var imageHeight = imgPreloader.height;
		$('#gallery-view img').attr({src:img, width:imageWidth, height:imageHeight});
		$('#gallery-view p').text(caption);
		
        // Removed to cycle photos continuously...
        /*
		// disable prev if we're at the start
		if ( idx-1 < 0 ) {
			//$('#gallery-prev').addClass('disabled');
		} else if ( idx+1 == $items.length ) {
			//$('#gallery-next').addClass('disabled');
		} else {
			$('#gallery-view a').removeClass('disabled');	
		}
        */
		
		$('#gallery-overlay').fadeOut('fast');
	}
	
}




$('#gallery-items a').click(function(){
	if ( $(this).hasClass('selected') == false ) {
		var idx = $items.index(this);
		getGalleryImage2(idx);
	}
	$(this).blur();
	return false;
});

$('#gallery-prev').click(function(){
	if ( $(this).hasClass('disabled') == false ) {
		var idx = $items.index( $('a.selected') );
		getGalleryImage2((idx == 0 ? $items.length : idx)-1);
	}
	$(this).blur();
	return false;
});
$('#gallery-next').click(function(){
	if ( $(this).hasClass('disabled') == false ) {
		var idx = $items.index( $('a.selected') );
        // Cycle to first image if we're at the last.
		getGalleryImage2((idx + 1 == $items.length ? 0 : idx  + 1));
	}
	$(this).blur();
	return false;
});

});