/***
 *
 *@class Balloon
 *
 * This singleton module represents the on the fly popup balloon
 **/

Comoditas.Balloon = function()
{
   // shortcuts
    var     ColorAnim = YAHOO.util.ColorAnim,
            Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event,
            Lang = YAHOO.lang,
            Selector = YAHOO.util.Selector,
            Widget = YAHOO.widget;

    // constants
    WRAPPER_ID = 'balloon';
    TEXT_ID = 'balloon-text';
    HD_CONTENT_ID = 'balloon-hd-content';
    BD_CONTENT_ID = 'balloon-bd-content';
    FT_CONTENT_ID = 'balloon-ft-content';
    HD_INFORMATION = "Informatie";
    HD_WARNING = "Opmerking";
    
    MAX_WIDTH = 350;
    OFFSET_LEFT = 420; // arbitrary number to align balloon right
    OFFSET_TOP = 10;
    
    // pointer left
    POINTER_LEFT = 1;
    POINTER_LEFT_CLASS = 'pointer-left';
    POINTER_LEFT_OFFSET_LEFT = -38;
    POINTER_LEFT_OFFSET_TOP = 20;
    // pointer up
    POINTER_UP = 2;
    POINTER_UP_CLASS = 'pointer-up';
    POINTER_UP_OFFSET_RIGHT = -90;
    POINTER_UP_OFFSET_TOP = 60;
    
    
   // members   
   /**
    *@var class properties
    **/   
   var cfg =
   {
      helpText:"",
      errorText:""
   };
   
   /**
   *@var YAHOO.widget.Overlay used as container
   **/
   var container = null;
   
   /**
   *@var int constant pointDirection
   **/      
   var pointDirection = POINTER_LEFT;
   
   
   /**
    *@var DOM object element to which the balloon points to
    **/
   var pointedElement = null;

   /**
    * @var DOM object header content
    **/
   var header = null;
   
   /**
    * @var DOM object element the body content
    **/
   var body = null;

   /**
    * @var DOM object text content
    **/
   var text = null;
   
   /**
    * @var DOM object footer content
    **/
   var footer = null;   
   
   /**
    *@var DOM object pointer
    **/
   var pointer = null;
   
   /**
    *@var YAHOO.Dom.Region region the absolute position of the pointed element
    **/
   var region = null;
   
   /**
    *@ boolean if balloon is shown
    **/
   var visible = false;
   
   /**
   *@var int width of balloon
   **/
   var width = null;
   
   /**
    *@var boolean is initialized (func: init)
    **/
   var initialized = false;
   
   /**
    *@var boolean hasWarningMessage
    **/
   var hasWarningMessage = false;
   
    /**
    *@var boolean hasInformationMessage
    **/
   var hasInformationMessage = false;
   
   //public
   return {
    
         init : function(direction)
         {
            container = new Widget.Overlay(WRAPPER_ID, { visible:false } );
            pointer = Selector.query('.pointer');
            
            header = Dom.get(HD_CONTENT_ID);
            body = Dom.get(BD_CONTENT_ID);
            text = Dom.get(TEXT_ID);
            footer = Dom.get(FT_CONTENT_ID);
            
            pointDirection =direction;
            
            initialized = true;
         },
         
         setWarningMessage : function (msg)
         {
            cfg.errorText = msg;
            
            // warning message has priority nr 1, thus set header as warning
            header.innerHTML = "<h2 class=\"warning\">Opmerking</h2>";
            text.innerHTML = cfg.errorText;
            if(cfg.helpText != "")
            {
                text.innerHTML += "<hr /><h2 class=\"information\">" + cfg.helpText;
            }
                        
            hasWarningMessage = true;
            
         },
         
         setInformationMessage : function(msg)
         {
            cfg.helpText = msg;
            
            if(cfg.errorText != "")
            {
                header.innerHTML = "<h2 class=\"warning\">Opmerking</h2>";
                text.innerHTML = cfg.errorText+"<hr /><h2 class=\"information\">Informatie</h2>"+cfg.helpText;
            }
            else
            {
                header.innerHTML = "<h2 class=\"information\">Informatie</h2>";
                text.innerHTML = cfg.helpText;
            }
            
            hasInformationMessage = true; 
         },
         
         unsetWarningMessage : function()
         {
            cfg.errorText = "";
            
            if(cfg.helpText != "")
            {
                header.innerHTML = "<h2 class=\"information\">Informatie</h2>";
                text.innerHTML = cfg.helpText;
            }
            else
            {
                header.innerHTML ="";
                text.innerHTML="";
            }
            
            hasWarningMessage = false;
            
            if(!hasWarningMessage && !hasInformationMessage)
                this.hide();
            
         },
         
         unsetInformationMessage : function()
         {
            cfg.helpText = "";
            
            if(cfg.errorText != "")
            {
                header.innerHTML = "<h2 class=\"information\">Opmerking</h2>";
                text.innerHTML = cfg.errorText;
            }
            else
            {
                header.innerHTML ="";
                text.innerHTML="";
            }
            
            hasInformationText = false;

            if(!hasWarningMessage && !hasInformationMessage)
                this.hide();            
         },
         
         /***
          * shows and points the balloon to a particular element
          *
          * @param DOM object element the element to point to
          * @param DOM object wrapper (OPTIONAL) if set it determines the position based on the content of the whole wrapper in stead of one element
          **/
         
         point : function(element, options)
         {
            /*pointedElement = element;
            
            var nExtraOffsetTop = 0; */
            
            // set a fixed x position (before it was relatively positioned by the input element)
            if(!options.wrapper) {
                
                if(Lang.isDefined(Console.Log)) {
                    
                    console.log('ERROR: No DOM Element wrapper available for the BALLOON class');
                    console.log(element);
                    console.log(options);                    
                }
                
                return;
            }
            
            // set position for container
            var wrapperRegion = Dom.getRegion(options.wrapper);
            var pos_x = wrapperRegion.left + OFFSET_LEFT;
            var pos_y = wrapperRegion.top + OFFSET_TOP;
            
            container.cfg.setProperty("xy",  [pos_x, pos_y ] );
            
            // set position for pointer
            Dom.setXY( pointer, [pos_x+POINTER_LEFT_OFFSET_LEFT, pos_y+POINTER_LEFT_OFFSET_TOP]);
            
            
            // calculate width
            var width = 0;
    
            /**  set all elements' width of the balloon equal to the element (header,body,footer) with the greatest width ***/
            
            var aWidth =
            [
                header.offsetWidth,
                body.offsetWidth,
                footer.offsetWidth
            ];
            
            for(i = 0; i < 3; i++)
            {
                if(aWidth[i] > width)
                    width = aWidth[i];
            }
            if(width > MAX_WIDTH) 
            {
                container.cfg.setProperty("width", MAX_WIDTH+"px");
                width = MAX_WIDTH;
            }
            
            // the left and right corner images are each 24 pixels wide, so concat 48 px of width
            Dom.setStyle(HD_CONTENT_ID,  'width', (width-48)+"px");
            Dom.setStyle(FT_CONTENT_ID,  'width', (width-48)+"px");
            
            container.show();
            Dom.setStyle(pointer, "visibility", "visible");
            visible = true;
            
         },
         
         hide : function()
         {
            container.hide();
            Dom.setStyle(pointer, "visibility", "hidden");
            visible = false;
         },
         
         isVisible : function()
         {
            return visible;
         },
         
         isInitialized : function()
         {
            return initialized;
         },
         
         setPointDirectionToLeft : function()
         {
            pointDirection = POINTER_LEFT;
         },
         
         setPointDirectionToUp : function()
         {
            pointDirection = POINTER_UP;
         },
         
         clearText : function()
         {
            this.unsetWarningMessage();
            this.unsetInformationMessage();
         },
         
         //some static properties
         POINT_LEFT : POINTER_LEFT,
         POINT_UP : POINTER_UP

   };
   
   
}();