GROU.

PS Layout ­ Draft ­ 
Grou.ps uses Smarty Templating Engine (http://smarty.php.net)
Pages are composed of 10 absolute div's:
1. #ajax_popup
Features: floating, not draggable
This is the floating dialog box of operations
2. #busy_popup
Features: floating, not draggable
Consists of a img that shows the busy status during AJAX interactions.
3. #bg_differentiation
Features: floating, not draggable
is a background for #ajax_popup, makes transparency effect
4. #theHelp
Features: static, not draggable
Hidden per default. Appears when Help Mode turned on. Gives information about current 
module.
5. #theCrop
Features: floating, not draggable
Created for People Module only, to be used in picture cropping process. 
6. #ad_area
Features: static, not draggable
Space for ads. Intentionally left empty for now.
7. #chatScreen
Features: floating, draggable
Draggable chat layer.
8. #topbar
Features: static
Site­wide used topbar that shows user and grou.p status and operations
9. #layout
Features: static
Main content area
10. #title2note
Features: dynamically generated
Dynamic help about page elements (on hover)
The picture below represents: #layout, #topbar, #chatScreen, #ad_area

The picture below represents: #layout, #theHelp, #topbar
The picture below represents #ajax_popup, #bg_differentiation.
Note that #bg_differentiation covers everything on the page with a white semi­transparent layer.

#title2note is dynamically created (currently in the right bottom part of the page)
#theCrop is only used in People module
#layout Unleashed
#content Unleashed
#content is generated on the fly by a class named includes/PageGenerator.class.php
A #content may have 3 column layouts:
1. Equal Columns (no such example yet, planned for future Home module) (consists of 2 blocks of 
equal width)
2. With Sidebar (example: People, Blogs...) (consists of 1 sidebar and 1 wider column)
3. Full Column (example: Map, Wiki...) (consists of a single column)

In a column, there may be 4 types of blocks:
1. Operational (has no header)
2. Promotional (has no header either, temporary – disappears in 10 seconds) (example: 
promotional block in Blogs module)
3. Ordinary (header is optional)
4. Hidden (required in some special cases)

Here's a sample block skeleton:
● IF (Hidden): { #hidden_block_X (X is equal to [1­9][0­9]* in regexp) END }
● #top_block_no_X
● IF  (not Operational AND not Promotional): { .box
● If (has header): .box_top END
● .box_mid
● .content
● .box_bottom
● .box_bottom_left
● .box_bottom_right
● } ELSE: { .box_mid_ops OR .box_mid_promo
● .content
● .box_bottom_ops END }