/* THIS FILE IS AUTOMATICALLY GENERATED */

$(function () {

	var layoutIndex = 0;

	$('.expander').each(function () {

		var container    = this;
		var images       = $(container).find('.image');
		var thumbWidth   = images.find('.thumb:first').attr('width');
		var thumbHeight  = images.find('.thumb:first').attr('height');
		var fullWidth    = images.find('.full:first').attr('width');
		var fullHeight   = images.find('.full:first').attr('height');
		var speed        = 250;
		var easing       = 'swing';
		var alwaysExpand = true; // Always keep images expanded
		
		// Add corners
		$(container).append('<div class="corner c1"></div><div class="corner c2"></div><div class="corner c3"></div><div class="corner c4"></div>');
		
		// Alternate start layouts
		var layout = ['right', 'left'][layoutIndex++ % 2];

		// Setup styles
		$(container).css({height: thumbHeight, overflow: 'hidden'});
		
		// Setup images
		var clickBind = function () {
			show(this);
		}
		images.each(function () {
			this.fullURL  = $(this).find('img.full').attr('src');
			this.thumbURL = $(this).find('img.thumb').attr('src');
			this.expanded = false;
			$(this).click(clickBind);
		});

		// Expand image
		function expand (image) {
			$(image).find('img.thumb').animate({
				width:   fullWidth,
				height:  fullHeight,
				opacity: 1.0
			}, speed, easing, function () {
				$(this).attr('src', image.fullURL);
				image.expanded = true;
			});
		}
		
		// Contact image
		function contract (image) {
			$(image).find('img.thumb').animate({
				width:   thumbWidth,
				height:  thumbHeight,
				opacity: 0.6
			}, speed, easing, function () {
				$(this).attr('src', image.thumbURL);
				image.expanded = false;
			});
		}
		
		// Show an image
		function show(image) {
			if(image.expanded) {
				if (alwaysExpand) {
					return false;
				} else {
					$(container).animate({height: thumbHeight}, speed, easing);
					contract(image);
					images.find('img.thumb').css({opacity: 1.0});
				}
			} else {
				images.css({'margin-top': 0});
				$(container).animate({height: fullHeight}, speed, easing);

				// Adjust images according to layout
				if (layout == 'right') {
					$(container).prepend(image);
					layout = 'left';
					$(container).removeClass('layoutRight').addClass('layoutLeft');
				} else if (layout == 'left') {
					$(image).remove();
					$(container).find('.image:first').after(image);
					$(image).click(clickBind);
					layout = 'right';
					$(container).removeClass('layoutLeft').addClass('layoutRight');
				}

				// Contract the other images
				images.each(function () {
					if (image != this) {
						//$(this).find('img.thumb').css({opacity: 0.6});
						contract(this);
					}
				});

				// Make the last image appear from below
				var lastImage = $(container).find('.image:last');
				if (layout == 'right') {
					lastImage.css({
						'margin-top': 0,
						'opacity': 1.0
					}).animate({
						'margin-top': thumbHeight * 2,
						'opacity': 0.0
					}, (speed/2), easing).animate({
						'margin-top': (0-(thumbHeight)),
						'opacity': 1.0
					}, (speed/2), easing);
				} else if (layout == 'left') {
					lastImage.css({
						'margin-top': thumbHeight * 2,
						'opacity': 0
					}).animate({
						'margin-top': 0,
						'opacity': 1.0
					}, speed, easing);
				}

				expand(image);
			}
		}

		// Open the first image if alwaysExpand is on
		if (alwaysExpand) {
			show(images.get(0));
		}

	});
	
});