jQuery.fn.photocase = function( options )
{

	this.each( function( i, o )
	{
		var $case = jQuery( o ),
			$iconList = jQuery( 'div.PhotoCaseIcons ul', $case ),
			$icons = jQuery( 'li', $iconList ),
			$image = jQuery( 'div.PhotoCaseImage img', $case ),
			$imLeftBackdrop = jQuery( '<span class="PhotoCaseLeftBackdrop"></span>' ).appendTo( $image.parent() ),
			$imRightBackdrop = jQuery( '<span class="PhotoCaseRightBackdrop"></span>' ).appendTo( $image.parent() ),
			$imLeft = jQuery( '<span class="PhotoCaseLeft"></span>' ).appendTo( $image.parent() ),
			$imRight = jQuery( '<span class="PhotoCaseRight"></span>' ).appendTo( $image.parent() ),
			$setLeftBackdrop = jQuery( '<span class="PhotoCaseLeftBackdrop"></span>' ).appendTo( $iconList.parent() ),
			$setRightBackdrop = jQuery( '<span class="PhotoCaseRightBackdrop"></span>' ).appendTo( $iconList.parent() ),
			$setLeft = jQuery( '<span class="PhotoCaseLeft"></span>' ).appendTo( $iconList.parent() ),
			$setRight = jQuery( '<span class="PhotoCaseRight"></span>' ).appendTo( $iconList.parent() ),
			$paging = jQuery( '<ul></ul>' ).appendTo( jQuery( '<div class="PhotoCasePaging"></div>' ).appendTo( $case ) ),
			iconsWidth = 0,
			iconsPerPage = 0,
			setOffset = parseInt( $icons.parent().css( 'paddingLeft' ) ) || 0,
			setWidth = $image.parent().outerWidth() - $setLeftBackdrop.outerWidth(true) * 2;
			pages = 0,
			page = 0,
			iconsPerPage = 0,
			index = 0,
			handle = {};
		
		// caluclate pages of icon-sets
		$icons.each( function( i, o ){ iconsWidth += jQuery(o).outerWidth(true); } );
		var exactPages = iconsWidth / setWidth;
		pages = Math.ceil( exactPages );
		iconsPerPage = Math.floor( Math.max($icons.length,1) / exactPages );
		
		// draw page icon
		for( var i=0; i < pages; i++ )
			jQuery( '<li class="PhotoCasePage"></li>' ).appendTo( $paging );
		
		var $pages = jQuery( 'li', $paging );
		
		// only show paging if there are multiple pages
		if( pages == 1 )
			$paging.parent().hide();
		else
			$pages.eq(0).addClass( 'active' );
			
		// select first icon
		$icons.eq(0).addClass( 'active' );

		function moveSet( direction )
		{
			page = jQuery.minmax( page + direction, 0, pages -1 );

			var to = {
				marginLeft: '-'+ (setWidth * page) +'px'
			};
			$iconList.animate( to, 700 );

			$pages.removeClass( 'active' ).eq( page ).addClass( 'active' );
		}
		
		function moveImage( direction )
		{
			index = jQuery.minmax( index + direction, 0, $icons.length -1 );
			$icons.eq( index ).trigger( 'click' );
		}

		handle.setLeft = function()
		{
			moveSet(-1);
		};
		handle.setRight = function()
		{
			moveSet(1);			
		};
		handle.icon = function( e )
		{
			$icons.removeClass( 'active' );
			jQuery(this).addClass( 'active' );
			index = $icons.index( jQuery(this) );
			
			var newPage = Math.floor( Math.max(index, 1) / iconsPerPage );
			if( newPage > page )
				moveSet( newPage - page );
			else if( newPage < page )
				moveSet( newPage - page );

			$image.startWaiting();
			var src = jQuery( 'img', jQuery(this)).attr('src').replace( /\/klein\//, '/gross/' ),
				$new = jQuery( '<img />' ).load( doneLoading );
				started = new Date();

			$new.attr( 'src', src ).hide().appendTo( document.body );

			function doneLoading()
			{
				var diff
				if( (diff = (new Date()).getTime() - started.getTime()) < 600 )
					return void( window.setTimeout( replaceImage, 600 - diff ) );
					
				replaceImage();
			}

			function replaceImage()
			{
				$image.attr('src', src );
				$image.stopWaiting();
				$new.remove();
			}
			
			e.stopPropagation();
			e.preventDefault();
		}
		handle.imageLeft = function()
		{
			moveImage( -1 );
		}
		handle.imageRight = function()
		{
			moveImage( 1 );			
		}

		// navi binding
		$setLeft.bind( 'click', handle.setLeft );
		$setRight.bind( 'click', handle.setRight );
		$icons.bind( 'click', handle.icon );
		
		// waiting for image load
		$imLeftBackdrop.bind( 'click', handle.imageLeft );
		$imLeft.bind( 'click', handle.imageLeft );
		$imRightBackdrop.bind( 'click', handle.imageRight );
		$imRight.bind( 'click', handle.imageRight );

	} );
};

jQuery( function(){
	
	jQuery( 'div.PhotoCase' ).photocase();
	
});