//add 6 pictures inside a div called "picture-widget" and the script does the rest of the work

$(function () {
	$('div.picture-widget').each(function () {
		$(this).append('<div class="preview"></div><ul class="widget-nav"></ul>');
		$(this).find('img').each(function () {
			$(this).hide();
			$(this).closest('.picture-widget').find('ul.widget-nav').append('<li><a href="#"><img src="' + $(this).attr('src') + '" alt="" /></a></li>');
		});
		$(this).find('ul.widget-nav').append('<li class="instructions">Click on a photo to view a larger version of it.</li>');
		$(this).find('div.preview').append('<img src="' + $(this).find('img:first').attr('src') + '" alt="" />');
		$(this).find('ul.widget-nav li:first').addClass('active');
	});
	$('ul.widget-nav li a').click(function () {
		$(this).closest('ul').find('li').removeClass('active');
		$(this).closest('li').addClass('active'); ;
		$(this).closest('.picture-widget').find('div.preview').empty();
		$(this).closest('.picture-widget').find('div.preview').html('<img src="' + $(this).find('img').attr('src') + '" alt="" />')
		resizePreviewImages($('div.picture-widget'));
		return false;
	});

	$(window).load(function () {
		resizePreviewImages($('div.picture-widget'));
	});
});

function resizePreviewImages(element) {
	$(element).find('div.preview').find('img').each(function () {	//find('li.active').find('img').each(function() {
		var maxWidth = 238; //240 is the width set in kycenter-interior for: div.tab-content div.picture-widget div.preview...border is 1px on each side so maxWidht is 238
		var startWidth = 0;
		var startHeight = 0;
		var endWidth = 0;
		var endHeight = 0;
		var ratio;

		resizeImage($(this), maxWidth);
	});
}


function resizeImage(image, maxWidth) {
	$(image).animate({ width: maxWidth }, 0);
	//	var startWidth = parseInt($(image).attr('width'));
	//	var startHeight = parseInt($(image).attr('height'));
	//	if (startWidth > maxWidth && startWidth > 0 && startHeight > 0) {
	//		ratio = (startHeight / startWidth);
	//		endWidth = maxWidth;
	//		endHeight = Math.round(endWidth * ratio);
	//		$(image).width(endWidth).height(endHeight);
	//	}
}