Changeset 4044

Timestamp:

08/17/10 13:00:24 (18 months ago)

Author:

mszopinski

Message:

calendar, simple month display

Location:

ssme/trunk

Files:

• flex/Calendar/src/Calendar.mxml (modified) (13 diffs)
• flex/Calendar/src/com/kh/ssme/components/DayCanvas.as (modified) (3 diffs)
• flex/Calendar/src/com/kh/ssme/components/DayEventsField.as (added)
• flex/Calendar/src/com/kh/ssme/components/MonthCanvas.as (added)
• flex/Calendar/src/com/kh/ssme/util (added)
• flex/Calendar/src/com/kh/ssme/util/DayEventsFieldTypeEnum.as (added)
• flex/Common/src/com/kh/ssme/components/GridCanvas.as (modified) (3 diffs)
• flex/Common/src/com/kh/ssme/components/RoundedCornerContainer.as (modified) (1 diff)
• flex/Common/src/com/kh/ssme/util/DateUtil.as (modified) (2 diffs)
• web/calendar.jsp (modified) (1 diff)
• web/css/ssme.css (modified) (1 diff)
• web/flex/Calendar.swf (modified) (previous)
• web/flex/Group.swf (modified) (previous)
• web/flex/LogUserIn.swf (modified) (previous)
• web/flex/User.swf (modified) (previous)
• web/flex/UserRegister.swf (modified) (previous)
• web/script/facebox.js (modified) (1 diff)
• web/script/util.js (modified) (1 diff)
• web/WEB-INF/tags/flexContainer.tag (modified) (1 diff)
• web/WEB-INF/tags/page.tag (modified) (2 diffs)
• web/WEB-INF/web.xml (modified) (1 diff)

ssme/trunk/flex/Calendar/src/Calendar.mxml

@@ -67 +67 @@
     <mx:Fade id="fadeOut" duration="300" alphaFrom="1.0" alphaTo="0" />
     <!-- ========================================================= -->
-    <mx:DateFormatter id="dateFormatter" formatString="DD.MM.YYYY" />
+    <mx:DateFormatter id="dayDateFormatter" formatString="DD.MM.YYYY" />
+    <mx:DateFormatter id="monthDateFormatter" formatString="MMMM YYYY" />    
     <!-- ========================================================= -->
     <mx:Style source="assets/calendar.css" />
@@ -80 +81 @@
             >
 
-        <mx:HBox width="100%" id="select" height="35" backgroundColor="red" verticalAlign="middle">
+        <mx:HBox width="100%" id="select" height="30" verticalAlign="middle">
             
             <mx:ComboBox id="calendarCombo" dataProvider="{ calendarsList }" labelField="name" />
@@ -118 +119 @@
                 horizontalScrollPolicy="off" verticalScrollPolicy="off">
             
-            <mx:HBox id="dayBox" width="100%" height="{ canvasContainer.height }" maxHeight="{ canvasContainer.height }" paddingTop="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
+            <mx:HBox id="dayBox" width="100%" height="{ canvasContainer.height }" maxHeight="{ canvasContainer.height }"
+                 paddingTop="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
+                
                 <mx:VBox id="dayBox0" width="50" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
                     <mx:Label height="20" id="labelCanvas0" width="100%" textAlign="center" />
@@ -225 +228 @@
 
             <mx:HBox id="monthBox" width="100%" height="0" maxHeight="{ canvasContainer.height }"
-                    horizontalScrollPolicy="off" verticalScrollPolicy="off"                     
-                    paddingTop="10" paddingBottom="10">
-
-                <mx:Canvas backgroundColor="0xffff00" width="100%" height="100%" />
-
+                    paddingTop="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
+                <mx:VBox id="monthCanvasBox" width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0" verticalGap="0">
+                    <mx:Label height="20" id="labelMonthCanvas" width="100%" textAlign="center" />                    
+                    <components:MonthCanvas id="monthCanvas"
+                            backgroundColor="0xFFFFFF" backgroundAlpha="0.3" cornerRadius="20" 
+                            verticalMargin="0" leftHorizontalMargin="0"
+                            width="100%" height="100%"
+                            outerBorderColor="0x000000" outerBorderAlpha="0.0" outerBorderThickness="0"
+                            innerBorderColors="[ 0x888888 ]" innerBorderAlphas="[ 0.0 ]" innerBorderThicknesses="[ 4 ]"
+                            rows="[ 6 ]" columns="[ 7 ]"
+                            showEffect="{ fadeIn }" hideEffect="{ fadeOut }"
+                            />
+                </mx:VBox>
             </mx:HBox>
         </mx:Box>
@@ -274 +285 @@
             calendarConnector.addEventListener(BasicQueuedConnector.EVENT_FAULT, onCalendarGetResponse);
 
-            if(!userEntityLoaded) addEventListener("ssme_userLoaded", prepareCalendarList)
+            if (!userEntityLoaded) addEventListener("ssme_userLoaded", prepareCalendarList)
 
             currentState = "day";
@@ -285 +296 @@
         private const WEEK:int = 1;
         private const MONTH:int = 2;
+
         private function toggleClicked(event:Event):void {
-//            setDates();
-//            switch( state.selectedIndex ){
-//                case DAY:   currentState = DAY_STATE; break;
-//                case WEEK:  currentState = WEEK_STATE; break;
-//                case MONTH: currentState = MONTH_STATE; break;
-//            }
-            loadEvents(event);         
+            //            setDates();
+            //            switch( state.selectedIndex ){
+            //                case DAY:   currentState = DAY_STATE; break;
+            //                case WEEK:  currentState = WEEK_STATE; break;
+            //                case MONTH: currentState = MONTH_STATE; break;
+            //            }
+            loadEvents(event);
         }
 
         private function prepareCalendarList(event:Event):void {
             calendarsList = [];
-            for (var key:String in loggedUserEntity.calendarsNames){
-                calendarsList.push( { uuid:key, name:loggedUserEntity.calendarsNames[key] } );
-            }
-            calendarsList.sort( sortCalendars );
-            calendarsList.push( { uuid:null, name: "All" } );
+            for (var key:String in loggedUserEntity.calendarsNames) {
+                calendarsList.push({ uuid:key, name:loggedUserEntity.calendarsNames[key] });
+            }
+            calendarsList.sort(sortCalendars);
+            calendarsList.push({ uuid:null, name: "All" });
             calendarCombo.selectedIndex = -1;
         }
+
         private function sortCalendars(a:Object, b:Object):int {
             return ( a.name < b.name ) ? -1 : (( a.name > b.name ) ? 1 : 0 );
         }
+
         private function setDates():void {
             currentDay = chosenDate.selectedDate;
-            weekBeginDay = (new DateUtil( currentDay )).weekBegin( 1 ).date;
-            monthBeginDay = (new DateUtil( currentDay )).monthBegin().date;
+            weekBeginDay = (new DateUtil(currentDay)).weekBegin(1).date;
+            monthBeginDay = (new DateUtil(currentDay)).monthBegin().date;
             dayOfTheWeek = (currentDay.getDay() - weekBeginDay.getDay() + 7 ) % 7;
-            Logger.debug( "currentDay:["+currentDay+"] weekBeginDay:"+weekBeginDay+" monthBeginDay:"+monthBeginDay+" dayOfTheWeek:"+dayOfTheWeek
-                    +" ("+currentDay.getDay()+":"+weekBeginDay.getDay()+")" );
-        }        
+            Logger.debug("currentDay:[" + currentDay + "] weekBeginDay:" + weekBeginDay + " monthBeginDay:" + monthBeginDay + " dayOfTheWeek:" + dayOfTheWeek
+                    + " (" + currentDay.getDay() + ":" + weekBeginDay.getDay() + ")");
+        }
 
         private const EVENTS_RECURSION:int = 1;
+
         private function loadEvents(event:Event):void {
 
-            if(calendarCombo.selectedItem               // calendar chosen
+            if (calendarCombo.selectedItem               // calendar chosen
                     && chosenDate.selectedDate          // date chosen
-                    && state.selectedIndex>=0){         // state chosen
+                    && state.selectedIndex >= 0) {         // state chosen
 
                 setDates();
@@ -327 +342 @@
                 var date:Date = chosenDate.selectedDate;   // get chosen date
                 var begin:Number, end:Number;
-                switch( state.selectedIndex ){  // determine time range
+                switch (state.selectedIndex) {  // determine time range
                     case DAY: {
-                            begin = DateUtil.dayBegin(date).timestamp;
-                            end = DateUtil.dayEnd(date).timestamp;
-                            currentState = DAY_STATE;
-                            onDayStateEnter();
-
-                            // reset previous display
-                            showDayEvents( true );
-                            break;                        
-                        }
+                        begin = DateUtil.dayBegin(date).timestamp;
+                        end = DateUtil.dayEnd(date).timestamp;
+                        currentState = DAY_STATE;
+                        onDayStateEnter();
+
+                        // reset previous display
+                        showDayEvents(true);
+                        break;
+                    }
                     case WEEK: {
-                            begin = DateUtil.weekBegin(1, date).timestamp;
-                            end = DateUtil.weekEnd(1, date).timestamp;
-                            currentState = WEEK_STATE;
-                            onWeekStateEnter();
-                        
-                            // reset previous display
-                            showWeekEvents( true );                        
-                            break;
-                        }
+                        begin = DateUtil.weekBegin(1, date).timestamp;
+                        end = DateUtil.weekEnd(1, date).timestamp;
+                        currentState = WEEK_STATE;
+                        onWeekStateEnter();
+
+                        // reset previous display
+                        showWeekEvents(true);
+                        break;
+                    }
                     case MONTH: {
-                            begin = DateUtil.monthBegin(date).timestamp;
-                            end = DateUtil.monthEnd(date).timestamp;
-                            currentState = MONTH_STATE;                        
-                            break;
-                        }
+                        begin = DateUtil.monthBegin(date).timestamp;
+                        end = DateUtil.monthEnd(date).timestamp;
+                        currentState = MONTH_STATE;
+
+                        // reset previous display
+                        showMonthEvents(true);
+                        break;
+                    }
 
                 }
 
-                ModalSpinner.instance.showSpinner("Loading events for calendar '"+(calendarCombo.selectedItem.name)+"'...", 0x269926, panel, 0.2);
+                ModalSpinner.instance.showSpinner("Loading events for calendar '" + (calendarCombo.selectedItem.name) + "'...", 0x269926, panel, 0.2);
                 errorLabel.text = "";
                 var params:Object = {};
-                if(calendarCombo.selectedItem.uuid){
+                if (calendarCombo.selectedItem.uuid) {
                     params[Params.DATA_RECURSION] = EVENTS_RECURSION;
-                    calendarConnector.getCalendarRange( calendarCombo.selectedItem.uuid, begin, end, params );
+                    calendarConnector.getCalendarRange(calendarCombo.selectedItem.uuid, begin, end, params);
                 } else {
                     params[Params.DATA_RECURSION] = EVENTS_RECURSION;
-                    calendarConnector.getCalendarAll( begin, end, params );
+                    calendarConnector.getCalendarAll(begin, end, params);
                 }
-            }           
+            }
         }
 
@@ -380 +398 @@
         private var dayOfTheWeek:int = 0;
         [Bindable]
-        [ArrayElementType("DayCanvas")]        
+        [ArrayElementType("DayCanvas")]
         private var dayCanvas:Array;
         [Bindable]
-        [ArrayElementType("Label")]        
+        [ArrayElementType("Label")]
         private var dayCanvasLabels:Array;
         [ArrayElementType("VBox")]
-        private var dayCanvasBoxes:Array;                
+        private var dayCanvasBoxes:Array;
+
         private function onCalendarGetResponse(event:Event):void {
             var result:ConnectorResult = (event as SsmeEvent).eventProperties['result'];
@@ -393 +412 @@
                 // success
                 if (result.resultType == ConnectorResult.SUCCESS) {
-                    Logger.debug( result.lastResult as String, LoggingComponentsEnum.CAL );
-                    calendarEntity = (new CalendarEntity()).parseJSONString( result.lastResult as String, EVENTS_RECURSION );                 
-                    switch( state.selectedIndex ){  // determine time range
+                    Logger.debug(result.lastResult as String, LoggingComponentsEnum.CAL);
+                    calendarEntity = (new CalendarEntity()).parseJSONString(result.lastResult as String, EVENTS_RECURSION);
+                    switch (state.selectedIndex) {  // determine time range
                         case DAY: {
-                                showDayEvents();
-                                //currentState = DAY_STATE;
-                                break;
-                            }
+                            showDayEvents();
+                            //currentState = DAY_STATE;
+                            break;
+                        }
                         case WEEK: {
-                                showWeekEvents();
-                                //currentState = WEEK_STATE;
-                                break;
-                            }
-//                        case MONTH: {
-//                                showMonthEvents();
-//                                currentState = MONTH_STATE;
-//                                break;
-//                       }
-                    }                
+                            showWeekEvents();
+                            //currentState = WEEK_STATE;
+                            break;
+                        }
+                        case MONTH: {
+                            showMonthEvents();
+                            //currentState = MONTH_STATE;
+                            break;
+                        }
+                    }
                 }
                 // error
                 else if (result.resultType == ConnectorResult.ERROR) {
-                    var json:ErrorMessageEntity = (new ErrorMessageEntity()).parseJSONString( result.lastResult as String );
+                    var json:ErrorMessageEntity = (new ErrorMessageEntity()).parseJSONString(result.lastResult as String);
                     errorLabel.text = json.errorMessage;
                 }
@@ -430 +449 @@
             dayCanvas[ dayOfTheWeek ].currentDay = (reset) ? new Date(-1) : currentDay;
             dayCanvas[ dayOfTheWeek ].dataProvider = (reset) ? new HashArray() : calendarEntity.timeFramesEntitites;
-            dayCanvas[ dayOfTheWeek ].setStyle("backgroundAlpha", (reset) ? 0 : 0.3);            
-            dayCanvasLabels[ dayOfTheWeek ].text = (reset) ? "" : dateFormatter.format( currentDay );
+            dayCanvas[ dayOfTheWeek ].setStyle("backgroundAlpha", (reset) ? 0 : 0.3);
+            dayCanvasLabels[ dayOfTheWeek ].text = (reset) ? "" : dayDateFormatter.format(currentDay);
         }
 
         private function showWeekEvents(reset:Boolean = false):void {
 
-            if(!reset){
+            if (!reset) {
                 // create data structure
                 var dataProviders:Array = [  ], i:int, timeFrame:TimeFrameEntity;
-                for(i=0; i<7; i++)  dataProviders.push( new HashArray() );
+                for (i = 0; i < 7; i++)  dataProviders.push(new HashArray());
 
                 // divide events among days
                 var fromDay:int, toDay:int;
-                for each( timeFrame in calendarEntity.timeFramesEntitites ){
-                    fromDay = (timeFrame.from.getDay() + 6)%7;
-                    toDay = (timeFrame.to.getDay() + 6)%7;
-                    if( fromDay == toDay ){
+                for each(timeFrame in calendarEntity.timeFramesEntitites) {
+                    fromDay = (timeFrame.from.getDay() + 6) % 7;
+                    toDay = (timeFrame.to.getDay() + 6) % 7;
+                    if (fromDay == toDay) {
                         // starts and ends in the same day
-                        dataProviders[ fromDay ].put( timeFrame.UUID, timeFrame );
+                        dataProviders[ fromDay ].put(timeFrame.UUID, timeFrame);
                     } else {
                         // splitted over more than one days, so add it to all of them
-                        for(i=fromDay; i<=toDay;i++){
-                            dataProviders[ i ].put( timeFrame.UUID, timeFrame );
+                        for (i = fromDay; i <= toDay; i++) {
+                            dataProviders[ i ].put(timeFrame.UUID, timeFrame);
                         }
                     }
@@ -459 +478 @@
 
             // set dataProviders
-            var weekBegin:DateUtil = new DateUtil( weekBeginDay );
-            for(i=0; i<7; i++){
+            var weekBegin:DateUtil = new DateUtil(weekBeginDay);
+            for (i = 0; i < 7; i++) {
                 dayCanvas[ i ].currentDay = (reset) ? new Date(-1) : weekBegin.date;
                 dayCanvas[ i ].dataProvider = (reset) ? new HashArray() : dataProviders[ i ];
                 dayCanvas[ i ].setStyle("backgroundAlpha", 0);
-                dayCanvasLabels[ i ].text = (reset) ? "" : dateFormatter.format( weekBegin.date );
-                weekBegin.add( DateProperty.DATE, 1 );
+                dayCanvasLabels[ i ].text = (reset) ? "" : dayDateFormatter.format(weekBegin.date);
+                weekBegin.add(DateProperty.DATE, 1);
             }
             dayCanvas[ dayOfTheWeek ].setStyle("backgroundAlpha", (reset) ? 0 : 0.3);
@@ -471 +490 @@
         }
 
+        private function showMonthEvents(reset:Boolean = false):void {
+            monthCanvas.currentDay = (reset) ? new Date(-1) : currentDay;
+            monthCanvas.dataProvider = (reset) ? new HashArray() : calendarEntity.timeFramesEntitites;
+            labelMonthCanvas.text = (reset) ? "" : monthDateFormatter.format(currentDay);
+        }
+
         private function onTimeFrameGetResponse(event:Event):void {
-//            var result:ConnectorResult = (event as SsmeEvent).eventProperties['result'];
-//            var json:Object = JSONObject.decode(result.lastResult as String);
-//            loadUser(json);
-//            ModalSpinner.instance.hideSpinner();
+            //            var result:ConnectorResult = (event as SsmeEvent).eventProperties['result'];
+            //            var json:Object = JSONObject.decode(result.lastResult as String);
+            //            loadUser(json);
+            //            ModalSpinner.instance.hideSpinner();
         }
 
@@ -484 +509 @@
         private const WEEK_STATE:String = "week";
         private const MONTH_STATE:String = "month";
+
         private function onDayStateEnter():void {
             var i:int;
-            for(i=0; i<7; i++){
+            for (i = 0; i < 7; i++) {
                 dayCanvasBoxes[ i ].visible = dayCanvasBoxes[ i ].includeInLayout = (i == dayOfTheWeek);
             }
         }
+
         private function onWeekStateEnter():void {
             var i:int;
-            for(i=0; i<7; i++){
-                dayCanvasBoxes[ i ].visible = dayCanvasBoxes[ i ].includeInLayout = true;         
-            }
-        }        
+            for (i = 0; i < 7; i++) {
+                dayCanvasBoxes[ i ].visible = dayCanvasBoxes[ i ].includeInLayout = true;
+            }
+        }
+
         private function onStateChanged(event:Event):void {
 
-//            if(currentState == DAY_STATE){
-//
-//            } else if(currentState == WEEK_STATE){
-//
-//            } else if(currentState == MONTH_STATE){
-//
-//            }
-        }
+            //            if(currentState == DAY_STATE){
+            //
+            //            } else if(currentState == WEEK_STATE){
+            //
+            //            } else if(currentState == MONTH_STATE){
+            //
+            //            }
+        }
+
         //-----------------------------------------------------
 

ssme/trunk/flex/Calendar/src/com/kh/ssme/components/DayCanvas.as

@@ -27 +27 @@
     import com.kh.ssme.util.HashArray;
 
-import com.kh.ssme.util.Logger;
-import com.kh.ssme.util.Logger;
+    import com.kh.ssme.util.Logger;
 
     public class DayCanvas extends GridCanvas {
@@ -34 +33 @@
         public function DayCanvas() {
             super();
+            verticalScrollPolicy = "off";
+            horizontalScrollPolicy = "off";
         }
 
@@ -47 +48 @@
 
                 // call repaint only if dimensions were changed
-                if((unscaledWidth+unscaledHeight) - (oldWidth+oldHeight)){
+                if((unscaledWidth - oldWidth) != 0 || (unscaledHeight - oldHeight) != 0){
+                    //there was change in width or height since last call
+
                     oldWidth = unscaledWidth;
                     oldHeight = unscaledHeight;

ssme/trunk/flex/Common/src/com/kh/ssme/components/GridCanvas.as

@@ -22 +22 @@
 
 package com.kh.ssme.components {
-    import flash.display.CapsStyle;
+import com.kh.ssme.util.Logger;
+
+import flash.display.CapsStyle;
     import flash.display.LineScaleMode;
 
@@ -193 +195 @@
 
             // inner border
-            var inBorderThickness:int, xTempPos:int, yTempPos:int;
+            var inBorderThickness:int, xTempPos:Number, yTempPos:Number;
             columnsPosition = [];
             rowsPosition = [];
@@ -237 +239 @@
                             graphics.moveTo(outBorderThickness + leftHorizontalMargin, yTempPos);
                             graphics.lineTo(unscaledWidth - outBorderThickness - rightHorizontalMargin, yTempPos);
-                            tempRowsPos.push( yTempPos );                            
+                            tempRowsPos.push( yTempPos );
                         }
                         // bottom border position

ssme/trunk/flex/Common/src/com/kh/ssme/components/RoundedCornerContainer.as

@@ -89 +89 @@
                                    CapsStyle.NONE);
                 graphics.beginFill(this.getStyle("backgroundColor"), this.getStyle("backgroundAlpha"));
-                graphics.drawRoundRect(borderThickness*0.5, borderThickness*0.5, unscaledWidth-borderThickness, unscaledHeight-borderThickness, cornerRadius, cornerRadius);
+                graphics.drawRoundRect(borderThickness*0.5, borderThickness*0.5, unscaledWidth-borderThickness, unscaledHeight-borderThickness, cornerRadius, cornerRadius);                
                 graphics.endFill();
             }

ssme/trunk/flex/Common/src/com/kh/ssme/util/DateUtil.as

@@ -32 +32 @@
 
         private var date_:Date;
+        public static const MILLISECOND_PER_SECOND:int = 1000;
+        public static const MILLISECOND_PER_MINUTE:int = 1000 * 60;
+        public static const MILLISECOND_PER_HOUR:int   = 1000 * 60 * 60;
+        public static const MILLISECOND_PER_DAY:int    = 1000 * 60 * 60 * 24;        
+
 
         public function DateUtil(date:Date) {
@@ -61 +66 @@
             date_[field.property] -= value;
             return this;
+        }
+
+        /**
+         * Returns the difference between this object and given one in provided units
+         * Difference is calculated as FLOOR(this - dateUtil)
+         * @param dateUtil - DateUtil instance to be compared
+         * @param units - Type of unit to be used while calculation, one of MILLISECONDS, SECONDS, MINUTES, HOURS, DAY/DATE
+         * @return
+         */
+        public function diff(dateUtil:DateUtil, units:DateProperty):Number{
+            var difference:Number = this.date_.time - dateUtil.timestamp;
+            if(DateProperty.MILLISECONDS.equals(units)){
+                return difference;
+            } else if(DateProperty.SECONDS.equals(units)){
+                return Math.floor( difference/MILLISECOND_PER_SECOND );
+            } else if(DateProperty.MINUTES.equals(units)){
+                return Math.floor( difference/MILLISECOND_PER_MINUTE );
+            } else if(DateProperty.HOURS.equals(units)){
+                return Math.floor( difference/MILLISECOND_PER_HOUR );
+            } else if(DateProperty.DAY.equals(units) || DateProperty.DATE.equals(units)){
+                return Math.floor( difference/MILLISECOND_PER_DAY );
+            }
+            return 0;
         }
 

ssme/trunk/web/calendar.jsp

@@ -13 +13 @@
         <jsp:body>
         
-                <ssme:flexContainer animationName="Calendar" id="calendar" width="100%" height="90%" backgroundColor="#66FF66" />                                       
+                <ssme:flexContainer animationName="Calendar" id="calendar" width="100%" height="90%" />                                 
                 
         </jsp:body>

ssme/trunk/web/css/ssme.css

@@ -1 +1 @@
 @CHARSET "UTF-8";
 
-#page_body{
-                background-color: #bbbbff;
-        }
-
-#left_column{
-                float: left; 
-                width: 25%; 
-                text-align: left; 
-                background-color: #dd9999;              
-        }
-        
-#left_column_header{
-                padding-left: 5px;
-                padding-right: 5px;
-                padding-top: 5px;
-                padding-bottom: 10px;
-        }       
-        
-#logoutWrapper{
-                background-color: ff6666;
-        }
-        
-#right_column{
-                float: left; 
-                width: 0%; 
-                text-align: left; 
-                background-color: blue; 
-        }
-        
-#center_column{
-                float: left; 
-                width: 70%;             
-                text-align: left; 
-                background-color: #bbffbb;
-                padding: 10px;
-                padding-right: 20px;
-        }
-        
-#header{
-                background-color: yellow; 
-                height: 80px; 
-                text-align: center;
-                padding: 3px;
-        }
-        
-#content{
-                background-color: #66FF66; 
-                padding: 3px;           
-        }       
-        
-#footer{
-                background-color: orange; 
-                height: 40px; 
-                text-align: center;
-                padding: 3px;           
-        }       
-        
-#loggerContainer{
-                background-color: #dddddd;
-                padding: 0px;
-                clear: both;
-                width: 98%;
-                border: 1px solid black;
-                overflow: auto;
-                visibility: visible;    
-                margin-top: 20px;       
-        }
-                
-#logger{
-                background-color: #dddddd;
-                padding: 5px;
-                height: 300px;
-                border: 1px solid black;
-                overflow: auto; 
-        }
-        
-.userForm, .groupForm {
-                margin-bottom: 10px;
-        }       
+#page_body {
+        background-color: #BBBBFF;
+}
+
+#left_column {
+        float: left;
+        width: 25%;
+        text-align: left;
+        padding: 10px;  
+}
+
+#left_column_header {
+        padding-left: 5px;
+        padding-right: 5px;
+        padding-top: 5px;
+        padding-bottom: 10px;
+        background-color: #ddbbb00;     
+}
+
+#logoutWrapper {
+        background-color: ff6666;
+}
+
+#right_column {
+        float: left;
+        width: 0%;
+        text-align: left;
+        background-color: blue;
+}
+
+#center_column {
+        float: left;
+        width: 70%;
+        text-align: left;
+        background-color: #BBBBFF;
+        padding: 10px;
+        padding-right: 20px;
+}
+
+#header {
+        background-color: yellow;
+        height: 80px;
+        text-align: center;
+        padding: 3px;
+}
+
+#content {
+        background-color: #BBBBFF;
+        /* padding: 3px; */
+}
+
+#footer {
+        background-color: orange;
+        height: 40px;
+        text-align: center;
+        padding: 3px;
+}
+
+#loggerContainer {
+        background-color: #dddddd;
+        padding: 0px;
+        clear: both;
+        width: 98%;
+        border: 1px solid black;
+        overflow: auto;
+        visibility: visible;
+        margin-top: 20px;
+}
+
+#logger {
+        background-color: #dddddd;
+        padding: 5px;
+        height: 300px;
+        border: 1px solid black;
+        overflow: auto;
+}
+
+#calendar_Calendar{
+        background-color: #BBBBFF;
+}
+
+
+.userForm,.groupForm {
+        margin-bottom: 10px;
+}
+
 .error {
-                color: red;
-                font-weight: bold;
-        }       
-        
-                
-
-        /**
-         *      form fields
-         */
-input{
-                border: 0px solid red;
-                background-color: transparent;                                  
-        }
-textarea{
-                border: 1px solid #bbffbb;
-                filter:alpha(opacity=60);
-                opacity:0.6     ;                               
-        }       
-        
-.disabledInput{
-                font-weight: bold;
-                font-color: #333333;
-        }       
-        
-.enabledInput{
-                border-bottom: 1px dotted #444444;
-                background-color: white;
-                filter:alpha(opacity=60);
-                opacity:0.6     ;
-                font-color: black;              
-        }       
-        
-        
-                
-        /**
-         * lists of
-         * users, groups, roles
-         */
-ul.groupList, ul.userList, ul.rolesList {
-                margin: 0px;
-                padding: 0px;
-                padding-top: 3px;
-                padding-bottom: 3px;
-                margin-bottom: 6px;                             
-        }       
-ul.groupList, ul.userList{       
-                list-style-type: none
-        }        
-ul.groupList li, ul.userList li{
-                padding: 3px;           
-        }
+        color: red;
+        font-weight: bold;
+}
+
+/**
+ *      form fields
+ */
+input {
+        border: 0px solid red;
+        background-color: transparent;
+}
+
+textarea {
+        border: 1px solid #bbffbb;
+        filter: alpha(opacity = 60);
+        opacity: 0.6;
+}
+
+.disabledInput {
+        font-weight: bold;
+        font-color: #333333;
+}
+
+.enabledInput {
+        border-bottom: 1px dotted #444444;
+        background-color: white;
+        filter: alpha(opacity = 60);
+        opacity: 0.6;
+        font-color: black;
+}
+
+/**
+ * lists of
+ * users, groups, roles
+ */
+ul.groupList,ul.userList,ul.rolesList {
+        margin: 0px;
+        padding: 0px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        margin-bottom: 6px;
+}
+
+ul.groupList,ul.userList {
+        list-style-type: none
+}
+
+ul.groupList li,ul.userList li {
+        padding: 3px;
+}
+
 .rolesListItem {
-                border: 1px dotted;
-                display: inline;
-                margin-right: 5px;
-        }       
-        
-        
-        /**
-         *      Wrappers
-         */     
-#user_wrapper, #groupDetails_wrapper, #newGroup_wrapper{
-                background-color: #66FF66;
-        }
-.excludedFromLayout{
-                visibility: hidden;
-                position: absolute; 
-        }
-span .container{
-                padding: 0px;
-                margin: 0px;
-                border: 0px;
-        }
-        
-        
-        
-        /**
-         * Toggle buttons
-         */
+        border: 1px dotted;
+        display: inline;
+        margin-right: 5px;
+}
+
+/**
+ *      Wrappers
+ */
+#user_wrapper,#groupDetails_wrapper,#newGroup_wrapper {
+        background-color: #BBBBFF;
+}
+
+.excludedFromLayout {
+        visibility: hidden;
+        position: absolute;
+}
+
+span .container {
+        padding: 0px;
+        margin: 0px;
+        border: 0px;
+}
+
+/**
+ * Toggle buttons
+ */
 .toggleButton {
-                border: 2px solid #bbffbb;
-                padding: 1px 3px 1px 3px;
-                margin-left: 2px;
-                margin-right: 2px;
-                cursor: pointer;
-        }        
-        
+        border: 2px solid #bbffbb;
+        padding: 1px 3px 1px 3px;
+        margin-left: 2px;
+        margin-right: 2px;
+        cursor: pointer;
+}
+
 .toggleOn {
-                border-style: inset;    
-        }
-        
+        border-style: inset;
+}
+
 .toggleOff {
-                border-style: outset;
-        }               
-        
-        
-        
-        /**
-         *      buttons
-         */     
+        border-style: outset;
+}
+
+/**
+ *      buttons
+ */
 .faceboxButton {
-                border:2px outset #bbffbb;
-                padding: 1px 3px 1px 3px;
-                cursor: pointer;                
-        }       
-.faceboxButton:hover{
-                border:1px outset #bbffbb;
-                padding: 2px 4px 2px 4px;
-        }
-        
-.faceboxButton:active{
-                border:1px inset #bbffbb;
-                padding: 2px 4px 2px 4px;
-        }
-        
-.button{
-                cursor: pointer;        
-                border:2px outset #bbffbb;
-                padding: 1px 3px 1px 3px;
-        }       
-
-.button:hover{
-                border:1px outset #bbffbb;
-                padding: 2px 4px 2px 4px;
-        }
-        
-.button:active{
-                border:1px inset #bbffbb;
-                padding: 2px 4px 2px 4px;
-        }               
-        
-        
-.flexContainer{
-                width: 100%;
-                height: 100%;           
-        }       
-
-        
-        
-        
+        border: 2px outset #bbffbb;
+        padding: 1px 3px 1px 3px;
+        cursor: pointer;
+}
+
+.faceboxButton:hover {
+        border: 1px outset #bbffbb;
+        padding: 2px 4px 2px 4px;
+}
+
+.faceboxButton:active {
+        border: 1px inset #bbffbb;
+        padding: 2px 4px 2px 4px;
+}
+
+.button {
+        cursor: pointer;
+        border: 2px outset #bbffbb;
+        padding: 1px 3px 1px 3px;
+}
+
+.button:hover {
+        border: 1px outset #bbffbb;
+        padding: 2px 4px 2px 4px;
+}
+
+.button:active {
+        border: 1px inset #bbffbb;
+        padding: 2px 4px 2px 4px;
+}
+
+.flexContainer {
+        width: 100%;
+        height: 100%;
+}

ssme/trunk/web/script/facebox.js

@@ -281 +281 @@
 var facebox;
 Event.observe(window, 'load', function(e){
-        $('logger').innerHTML += "facebox = new Facebox()" + "<br/>";
+        Logger.debug("facebox = new Facebox()");
         facebox = new Facebox();
 });

ssme/trunk/web/script/util.js

@@ -53 +53 @@
 //static
 Logger._print = function(message) {
-        $('logger').innerHTML += message + "<br/>";
+        try{
+                if( $('logger') ){
+                        $('logger').innerHTML += message + "<br/>";
+                }
+        } catch (e) {}
         //try {  console.debug(message); } catch (e) {};
 }

ssme/trunk/web/WEB-INF/tags/flexContainer.tag

@@ -5 +5 @@
 <%@ attribute name="width" type="java.lang.String" required="false" %>
 <%@ attribute name="height" type="java.lang.String" required="false" %>
-<%@ attribute name="backgroundColor" type="java.lang.String" required="false" %>
 
-<div id="${ id }_${ animationName }" class="flexContainer" style="width:${ width }; height:${ height }; background-color:${ backgroundColor };" />
+<div id="${ id }_${ animationName }" class="flexContainer" style="width:${ width }; height:${ height };" />

ssme/trunk/web/WEB-INF/tags/page.tag

@@ -79 +79 @@
                                 </c:if> 
                                 
+                                <!-- 
                                 <div id="loggerContainer">      
                                         <div style="padding: 5px 5px 5px 5px; border: 1px solid black;">
@@ -87 +88 @@
                                         <div id="logger" />     
                                 </div>
-                                
+                                 -->
 
                         </c:otherwise>

ssme/trunk/web/WEB-INF/web.xml

@@ -7 +7 @@
     <!-- session config -->
     <session-config>
-        <session-timeout>15</session-timeout>
+        <session-timeout>120</session-timeout>
     </session-config>
     <welcome-file-list>