$jq( document ).ready( function( $ ) {
	var separatorWidth = 2;

	$( ".tabMenu" ).each( function( index ) {
		var self = $( this );
	
		var items = self.children( ".tabMenuItem, .tabMenuItemSelected" );
		
		var itemCount = items.size();
	
		var itemWidth = ( self.innerWidth() - 7 - ( separatorWidth * ( itemCount - 1 ) ) ) / itemCount;
	
		items.each( function( index ) {
			var self = $( this );
			
			self.css( "width", itemWidth );
			self.html( ( index + 1 ).toString() + ". " + self.html() );
			
			if ( index != itemCount - 1 ) {
				var separator = $( document.createElement( "div" ) );
				separator.attr( "class", "tabMenuSeparator" );
				separator.css( "width", separatorWidth );
				separator.append( " " );
				self.after( separator );
			}
		} );
	} );
	
	var getClass = function( base, isSelected, isFirst, isLast ) {
		if ( isFirst )
			base += "First";
		else if ( isLast )
			base += "Last";
	
		if ( isSelected )
			base += "Selected";
			
		return base;
	}
	
	$( ".tabControl" ).each( function( index ) {
		var tabControl = $( this );
		var tabPages = tabControl.children( ".tabPage" );
		
		var tabPageCount = tabPages.size();
		if ( tabPageCount <= 0 )
			return;
		
		var tabMenuItemWidth = ( tabControl.innerWidth() - ( separatorWidth * ( tabPageCount - 1 ) ) ) / tabPageCount;
		
		var tabMenu = $( document.createElement( "div" ) );
		tabMenu.attr( "class", "tabMenu" );
		
		tabPages.first().before( tabMenu );
		
		tabPages.each( function( index ) {
			var isFirst = index == 0;	
			var isLast = index == tabPageCount - 1;
		
			var content = $( this );
			var title = content.attr( "title" );
			
			content.attr( "title", "" );
		
			/* menu item */
			var tabMenuItem = $( document.createElement( "div" ) );
			tabMenuItem.attr( "class", getClass( "tabMenuItem", isFirst, isFirst, isLast ) );
			tabMenuItem.css( "width", tabMenuItemWidth );
				
			tabMenuItem.click( function() {	
				tabMenu.children( ".tabMenuItem, .tabMenuItemFirst, .tabMenuItemLast, .tabMenuItemSelected, .tabMenuItemFirstSelected, .tabMenuItemLastSelected" ).each( function( index ) {
					var isFirst = index == 0;	
					var isLast = index == tabPageCount - 1;
					var isSelected = tabMenuItem.context == this;
					
					$( this ).attr( "class", getClass( "tabMenuItem", isSelected, isFirst, isLast ) );
				} );
			
				tabPages.each( function( index ) {
					var self = $( this );
					
					if ( this == content.context ) {
						window.location.hash = title;
						self.show();
					} else				
						self.hide();
				} );		
			} );
				
			tabMenuItem.append( title );
			tabMenu.append( tabMenuItem );			
			
			/* menu separator */
			
			if ( !isLast ) {
				var separator = $( document.createElement( "div" ) );
				separator.attr( "class", "tabMenuSeparator" );
				separator.css( "width", separatorWidth + "px" );
				separator.append( "&nbsp;" );
				tabMenuItem.after( separator );
			}
			
			/* content */
			if ( isFirst )
				content.show();
			else
				content.hide();
		} );
		
		var hash = window.location.hash.substring( 1 );
		tabMenu.children( ".tabMenuItem, .tabMenuItemFirst, .tabMenuItemLast, .tabMenuItemSelected, .tabMenuItemFirstSelected, .tabMenuItemLastSelected" ).each( function( index ) {
			var self = $( this );
			var title = self.html();

			if ( hash == title ) {
				self.click();
				return false;
			}
		} );
	} );	
} );