$(function() {
	var resolveImage = function (el) {
		var $el = $(el);
		return $el.is('img') ? $el : $el.find('img');
	}
	
	//$('.album').before('<ul id="nav"></ul>').cycle({
	$('.album').cycle({
        	fx:     'fade',
	        speed:  'fast',
	        timeout: 0,
	        pager:  '#nav',
			next:   '#next2', 
			prev:   '#prev2',
	       	pagerAnchorBuilder: function(idx, slide) {
				
				/***alexph: new image code***/
				
				/*
				 * Example:
				 * 
				 * Any classes within the thumbnail[] class will be transfered
				 * to the thumbnail LI
				 * 
				 * <img /../ class="mediumpic thumbnail[thumb128 redBorder]" />
				 * 
				 * 
				 * You can override the default thumbnail by adding a 'thumb-src'
				 * to the IMG tag
				 * 
				 * <img /../ thumb-src="image.jpg" />
				 */
				
				var img = resolveImage(slide);        //find image in album
				var imgclass = $(img).attr('class');     //read classes in original image
				var thumb = $(img).attr('thumb-src'); //read classes in original image
				var thumbclass = '';                  //set thumbnail classes default
				
				if(thumb == undefined)
				{
					thumb = img.attr('src');
				}
				
				//if classes found
				if (imgclass) {
					//regular expression to search the class for a thumnail[] class
					var regex = imgclass.match(/thumbnail\[(.*?)\]/);
					
					//regex successful
					if(regex != null && regex.length > 0) thumbclass = regex[1];
				}
				
				//output, thumbclass is on the parent so that the a and img can also be styled at once
				return '<li class="' + thumbclass + '"><a href="#"><img src="' + thumb + '" /></a></li>';
				
				/***end new ***/
			},
			
	        before: function(el) {
		        resolveImage(el).fullsize({
					destroy: true
	            });
        	},
			
	        after: function (curr, prev) {
				var img = resolveImage(prev);
				
				img.fullsize({
					useParentAsHandler: true
				});
	        }
	});
});