var positions = new Array(); 			// pos, top||left [px]
positions[0] = new Array();				// pos1
positions[0][0] = 15;					// top [px]
positions[0][1] = 190;					// left [px]
positions[1] = new Array();				// pos2
positions[1][0] = 150;					// top [px]
positions[1][1] = 100;					// left [px]
positions[2] = new Array();				// pos3
positions[2][0] = 150;					// top [px]
positions[2][1] = 283;					// left [px]


function showCategory( category ) {
	// current position
	var left = $( "div#" + category + "design" ).position().left;
	var top = $( "div#" + category + "design" ).position().top;
	//alert( "position: " + top + ", " + left );
	// moving direction
	var curPos = 0;
	if( left < positions[0][1] ) curPos = 2;
	else if( left > positions[0][1] ) curPos = 3;
	else curPos = 1;
	//alert( "pos: " + curPos );
	if( curPos > 1 ) {
		if( curPos == 2 ) {
			// clockwise
			// 2 -> 1
			$( "div.pos2" ).animate( { "left":positions[0][1]+"px", "top":positions[0][0]+"px" }, "slow", "", function() { $( "div.pos1" ).css( 'color', 'rgb( 130, 153, 189)' ); } );			
			// 1 -> 3
			$( "div.pos1" ).css( 'color', 'white' ); 
			$( "div.pos1" ).animate( { "left":positions[2][1]+"px", "top":positions[2][0]+"px" }, "slow" );			
			// 3 -> 2
			$( "div.pos3" ).css( 'color', 'white' ); 
			$( "div.pos3" ).animate( { "left":positions[1][1]+"px" }, "slow" );			
			// change css classes
			$( "div.pos2" ).addClass( "t_pos2" );
			$( "div.pos2" ).removeClass( "pos2" );
			$( "div.pos1" ).addClass( "t_pos1" );
			$( "div.pos1" ).removeClass( "pos1" );
			$( "div.pos3" ).addClass( "t_pos3" );
			$( "div.pos3" ).removeClass( "pos3" );
			$( "div.t_pos2" ).addClass( "pos1" );
			$( "div.t_pos2" ).removeClass( "t_pos2" );
			$( "div.t_pos1" ).addClass( "pos3" );
			$( "div.t_pos1" ).removeClass( "t_pos1" );
			$( "div.t_pos3" ).addClass( "pos2" );
			$( "div.t_pos3" ).removeClass( "t_pos3" );			
		} else {
			// counterclockwise
			// 2 -> 3
			$( "div.pos2" ).css( 'color', 'white' ); 
			$( "div.pos2" ).animate( { "left":positions[2][1]+"px" }, "slow" );
			// 1 -> 2
			$( "div.pos1" ).css( 'color', 'white' ); 
			$( "div.pos1" ).animate( { "left":positions[1][1]+"px", "top":positions[1][0]+"px" }, "slow" );			
			// 3 -> 1
			$( "div.pos3" ).animate( { "left":positions[0][1]+"px", "top":positions[0][0]+"px" }, "slow", "", function() { $( "div.pos1" ).css( 'color', 'rgb( 130, 153, 189)' ); } );			
			// change css classes
			$( "div.pos2" ).addClass( "t_pos2" );
			$( "div.pos2" ).removeClass( "pos2" );
			$( "div.pos1" ).addClass( "t_pos1" );
			$( "div.pos1" ).removeClass( "pos1" );
			$( "div.pos3" ).addClass( "t_pos3" );
			$( "div.pos3" ).removeClass( "pos3" );
			$( "div.t_pos2" ).addClass( "pos3" );
			$( "div.t_pos2" ).removeClass( "t_pos2" );
			$( "div.t_pos1" ).addClass( "pos2" );
			$( "div.t_pos1" ).removeClass( "t_pos1" );
			$( "div.t_pos3" ).addClass( "pos1" );
			$( "div.t_pos3" ).removeClass( "t_pos3" );
		}		
		// info
		$( "div#grafikdesign_info" ).fadeOut( 0 );
		$( "div#tvdesign_info" ).fadeOut( 0 );
		$( "div#interfacedesign_info" ).fadeOut( 0 );
		$( "div#" + category + "design_info" ).fadeIn( 500 );
	}
}