(function ($)
{
	$.fn.portofolio = function ()
	{
		var obj = $( this );
		
		var opts =
		{
		//    opacity:    0.6,
		//    duration:   500
		}
		
		return this.each( function()
		{
			//--------------------------------------------------------------
			// init
			//--------------------------------------------------------------
			
			function init()
			{
				// set start image
				setStageImg( 0 );
				
				$('#stage-left').attr('class', 'left-inactive');
				
				
				// stage buttons
				$( '#stage-left' ).click( function()
				{
					deHighlight( cur );
					
					cur--;
					
					if( cur < 0 )
						cur = 0;
					
					setStageImg();
					
					$(this).focus();
					
				});
				
				$( '#stage-right' ).click( function()
				{
					deHighlight( cur );
					
					cur++;
					
					if( cur == total )
						cur = total - 1;
					
					setStageImg();
						
					$(this).focus();
										
				});
			}
			
			function setStageImg()
			{
				$( '#stage' ).html( '<img src="' + im.large[cur] + '" />' );
				$( '.imgtitel' ).html( im.title[cur] );
				
				$( im.elem[cur] ).addClass('active');
				
				// pfeile
				if(cur == 0)
					$('#stage-left').attr('class', 'left-inactive');
				else
					$('#stage-left').attr('class', '');
					
				if(cur == total-1)
					$('#stage-right').attr('class', 'right-inactive');
				else
					$('#stage-right').attr('class', '');
			}
			function deHighlight( imgNr )
			{
				$( im.elem[imgNr] ).removeClass('active');
			}
			
			//--------------------------------------------------------------
			// inital setup
			//--------------------------------------------------------------
			
			var im = {
			    thumb: [],
			    title: [],
			    large: [],
			    elem: []
			};
						
			// zähler & indizies
			var cur = 0;
			var total = 0;
			
			// cache
			var cache = [];
			
			// load images
			obj.find( 'li' ).each( function( i )
			{
				im.thumb[i] = $( this ).find( 'img' ).attr( 'src' );	// thumb url
				im.title[i] = $( this ).find( 'img' ).attr( 'alt' );	// title
				im.large[i] = $( this ).find( 'a' ).attr( 'href' );		// image url
				im.elem[i] = $( this );
				
				$( this ).find( 'a' ).removeAttr( 'href', '' ).css( { cursor: 'pointer' } ).click( function()
				{
					deHighlight(cur);
					cur = i;
					setStageImg();
				});
				
				total++;
				
				// preload images
				var cacheImage = document.createElement('img');
				cacheImage.src = im.large[i];
				cache.push(cacheImage);
            });
            
            init();
		});
	};
})(jQuery);