var featuringIndividual = false;
var initialDescription = '';
var initialImageTable = '';
var featuredPicInitialOffset = {};
var featuredPicName = '';
var $featuredPic = '';
var extraDescriptionText = '<p><span class="arrow">&larr;</span>Click to return to the gallery</p><p><span class="arrow">&darr;</span>Click thumbnails to see the full picture</p>';

$(document).ready(function() {
	
	if (jQuery.browser.msie == false) {
		initialDescription = $('#description').html();
		initialImageTable = $('#candle_images').html();
		
		initialImageTableLoad();
		
		$('#candle_images a').each(function() {
			bindClick($(this));	
		});
		
		$(window).resize(positionFeaturedImage);
	}
	
});

function initialImageTableLoad() {
	
	$('#candle_images img').each(function() {
		preloadImageWithThrobber($(this));
		/*
		var $img = $(this);
		var img_src = $img.attr('src');
		$img.attr({src: "Candles/throbber.gif"});
		var $preloaded_img = $('<img>').attr('src', img_src).load(function() {
			$img.replaceWith($preloaded_img);
		});
		*/
	});
	
}

function preloadImageWithThrobber($img) {
	var img_src = $img.attr('src');
	$img.attr({src: "Candles/throbber.gif"});
	var $preloaded_img = $('<img>').attr('src', img_src).load(function() {
		$img.replaceWith($preloaded_img);
	});
}

function loadFeaturedTable() {
	$('#candle_images').animate({
		opacity: 0	
	}, 500, 'swing', function() {
		$('#candle_images').load('Candles/candle_data.php?request=image_table&pic=' + featuredPicName, function() {
			$('#candle_images span').html($('<img src="Candles/throbber.gif" alt="loading..." />'));
			$('#candle_images').animate({
				opacity: 1	
			}, 500, 'swing', function() {
				initialImageTableLoad();
				//if scrollbar disappears, the viewport moves and the pic needs to be repositioned
				positionFeaturedImage();
				/*
				$('#candle_images span').each(function () {
					var $span = $(this);
					var spanID = $(this).attr('id');
					var img_path = 'Candles/Images/' + spanID.substr(0,spanID.length-5);
					var $preloaded_img = $('<img>').attr('src', img_path).load(function() {
						$span.html($preloaded_img);
					});
				});
				bindHover($('.candle_image'));
				bindClickforLargerPic();
				//if scrollbar disappears, the viewport moves and the pic needs to be repositioned
				positionFeaturedImage();
				*/
			});
		});
	});
}

function doShowAllCandles() {
	featuringIndividual = false;
	var $descr = $('#description');
	var $table = $('#candle_images');
	
	$descr.animate({
		opacity: 0
	}, 500, 'swing', function() {
		$descr.removeClass('description_individual').html(initialDescription);
		$table.animate({
			opacity: 0
		}, 500, 'swing', function() {
			$table.html(initialImageTable);
			$featuredPic.animate({
				top:featuredPicInitialOffset.top + 'px',
				left:featuredPicInitialOffset.left + 'px',
				width:'100px'
			}, 500, 'swing', function() {
				$descr.animate({opacity:1},500);
				$table.animate({opacity:1},500,'swing',function() {
					$featuredPic.remove();
					$('#candle_images a').each(function() {
						bindClick($(this));	
					});
				});
			});
		});
	});
}

function doFeaturePic($selectedPic) {
	
	featuringIndividual = true;
	var picOffset = $selectedPic.parent('a').parent('div').offset({padding: true});
	var contentOffset = $('#content').offset();
	var $descr = $('#description');
	var imgPath = $selectedPic.attr('src');
	var imgPathParts = imgPath.split('/');
	featuredPicName = imgPathParts[imgPathParts.length - 1];
	var imgWidth = $selectedPic.attr('width');

	$featuredPic = $('<img>').attr({src: imgPath}).css({
		position: 'absolute',
		left:picOffset.left + 'px',
		top:picOffset.top + 'px',
		width: imgWidth,
		padding: '10px'
	});
	$featuredPic.appendTo($('body'));
	//$selectedPic.css({opacity:0});
	$selectedPic.css({display:'none'});
	featuredPicInitialOffset = picOffset;
	
	$descr.animate({
		opacity: 0
	}, 500, 'swing', function() {
		$featuredPic.animate({
			left: contentOffset.left + 'px',
			top: contentOffset.top + 'px'
		}, 500).animate({
			width: '200px'
		}, 500, 'swing', function() {
			$descr.addClass('description_individual').load('Candles/candle_data.php?request=description&pic=' + featuredPicName, function() {
				$descr.animate({
					opacity: 1
				}, 500);
				loadFeaturedTable();
				bindHover($featuredPic);
				bindClick($featuredPic);
				$('<p><a class="direct_link" href="candles.php?featured=' + featuredPicName + '">Direct Link</a></p>').appendTo($descr);
				$(extraDescriptionText).appendTo($descr);
			});//end load
		});
	});
}

function bindHover($elm) {
	$elm.hover(
		function () {
			$(this).addClass('candle_image_clickable');
		},
		function () {
			$(this).removeClass('candle_image_clickable');
		}
	);
}

function bindClick($elm) {
	$elm.click(function(e) {
		e.preventDefault();
		if (featuringIndividual) {
			doShowAllCandles();
		} else {
			doFeaturePic($elm.children('img'));
		}
	});
}

function bindClickforLargerPic() {
	$('.candle_image').click(function() {
		var imgPath = $(this).children('span').children('img').attr('src');
		window.open(imgPath, 'Candle_Picture', 'location=0,toolbar=0');
	});
}

function positionFeaturedImage() {
	if (featuringIndividual) {
		var contentOffset = $('#content').offset();
		$featuredPic.css({left:contentOffset.left + 'px', top:contentOffset.top + 'px'});
	}
}