ark.namespace('widget.HelpBalloon');

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        CustomEvent = YAHOO.util.CustomEvent;

    ark.widget.HelpBalloon = function(to,id,options) {
        this.to  = to;
        this.toElt = Dom.get(to);
        this.id  = id;
        this.elt = Dom.get(id);

        this.ptr_w = 14;
        this.ptr_t = 24;

        this.bVisible = false;
        this.StartShowEvent    = new CustomEvent('StartShowEvent',this);  
        this.ShowEvent         = new CustomEvent('ShowEvent',this);  
        this.CloseClickedEvent = new CustomEvent('CloseClickedEvent',this);  
        this.StartClosedEvent  = new CustomEvent('StartClosedEvent',this);  
        this.ClosedEvent       = new CustomEvent('ClosedEvent',this);  
        
        this.close = function() {
            this._stopClose = false;
            this.StartClosedEvent.fire();
            if (!this._stopClose) { 
                this.hide();
                this.ClosedEvent.fire();
            }
        }

        this.closeClicked = function() {
            this.CloseClickedEvent.fire();
            this.close();
        }


        if( this.elt ) {
            // APPEND THIS ONE TO ROOT
            this.elt.parentNode.removeChild(this.elt);
            document.body.appendChild(this.elt);

           var a = Dom.getElementsByClassName('ft','div',this.id);
            var inner = a[0].firstChild;
  
            if( options && options['closable'] ) {
                var close = document.createElement('A');
                close.setAttribute('href','#');
                close.setAttribute('title','Close');
                close.setAttribute('id',this.id+'_close_button');
                if( options['closeText'] ) {
                    close.innerHTML = options['closeText'];
                } else {
                    close.innerHTML = 'Close';
                }
                inner.appendChild(close);
         //       var obj = this;
                Event.on(close,'click',this.closeClicked, this, true);
            }


        } else {
            // CREATE ONE
            this.elt = document.createElement('DIV');
            Dom.addClass(this.elt,'helpBalloon');
            this.elt.setAttribute('id',this.id);

            var ptr = document.createElement('DIV');
            ptr.setAttribute('id','helpBalloonPointer');
            this.elt.appendChild(ptr);

            var content = document.createElement('DIV');
            content.setAttribute('id','helpBalloonContent');

            var hd = document.createElement('DIV');
            Dom.addClass(hd,'hd');

            var inner = document.createElement('DIV');
            Dom.addClass(inner,'inner');

            hd.appendChild(inner);
            content.appendChild(hd);

            var bd = document.createElement('DIV');
            Dom.addClass(bd,'bd');

            inner = document.createElement('DIV');
            Dom.addClass(inner,'inner');

            bd.appendChild(inner);
            content.appendChild(bd);

            var ft = document.createElement('DIV');
            Dom.addClass(ft,'ft');

            inner = document.createElement('DIV');
            Dom.addClass(inner,'inner');

            ft.appendChild(inner);
            content.appendChild(ft);

            if( options && options['closable'] ) {
                var close = document.createElement('A');
                close.setAttribute('href','#');
                close.setAttribute('title','Close');
                close.setAttribute('id',this.id+'_close_button');
                if( options['closeText'] ) {
                    close.innerHTML = options['closeText'];
                } else {
                    close.innerHTML = 'Close';
                }
                inner.appendChild(close);
               // var obj = this;
                Event.on(close,'click',this.closeClicked, this, true);
            }
            
            if( options && options['scroller'] ) {
                this.bScroller = true;
                this.scrollerId = (options['scrollerId'])? options['scrollerId'] : this.id;
                this.Scroller  = ark.widget.Scroller;
                this.ScrollerDone = this.Scroller.EndScrollEvent;
            }

            this.elt.appendChild(content);
            document.body.appendChild(this.elt);
        }

        this.ptr = Dom.get('helpBalloonPointer');

        this.oBlind = null;
        this.bHighlight = false;
        this.bMask = false;

        this.load_blind = function() {
            if( ark.widget.Blind ) {
                this.bHighlight = true;
                this.oBlind = new ark.widget.Blind();

                if( this.bVisible ) {
                    // OH OH
                    if( this.oBlind && this.bHighlight ) {
                        this.oBlind.highlight(this.to, { noResize: true, mask: this.bMask });
                    }
                }
            } else {
                var obj = this;
                setTimeout( function() { obj.load_blind(); }, 200 );
            }
        }

        this.load_js = function() {
            var sStaticServer = '';
            var oHead = document.documentElement.getElementsByTagName("HEAD")[0];
            // DO WE NEED TO LOAD?
            var bLoadBlind = true;
            for(var i = 0; i < oHead.childNodes.length; i++ ) {
                var node = oHead.childNodes[i];
                if( node.tagName == 'SCRIPT' ) {
                    var aPath = node.src.split('/');
                    var revFile = aPath[aPath.length-1];
                    var aParts = revFile.split('?');
                    var file = aParts[0];
                    if( file == 'Blind.js' ) {
                        bLoadBlind = false;
                    } else if( file == 'HelpBalloon.js' ) {
                        // SELF, GET SERVER FROM THERE
                        sStaticServer = 'http://'+aPath[2]+'/';
                    }
                }
            }

            if( bLoadBlind ) {
                var oElt = document.createElement('SCRIPT');
                oElt.setAttribute('src',sStaticServer+'ark/js/widget/Blind.js');
                oElt.setAttribute('type','text/javascript');
                oHead.appendChild(oElt);
                var obj = this;
                setTimeout( function() { obj.load_blind(); }, 200 );
            } else {
                this.load_blind();
            }
        }

        if( options && options['highlight'] ) {
            this.load_js();
            if( options && options['mask'] ) {
                this.bMask = true;
            }
        }

        if( options && options['width'] ) {
            Dom.setStyle(this.elt,'width',options['width']);
        }

        if( options && options['position'] ) {
            this.iPosition = options['position'];
        }

        this.bAutoHide = false;
        if( options && options['autohide'] ) {
            this.bAutoHide = true;
            if( parseInt(options['autohide']) > 0 ) {
                this.iAutoHideTimeout = parseInt(options['autohide']);
            } else {
                this.iAutoHideTimeout = 10000;
            }
        }
        this.bOnce = false;
        this.iCounter = 0;
        if( options && options['once'] ) {
            this.bOnce = true;
        }
    
        this.show = function() {
            if( this.bScroller) {
                this.ScrollerDone.subscribe(this._show, this, true);
                var unSub = function() {  this.ScrollerDone.unsubscribe(this._show, this, true); };
                this.ShowEvent.subscribe(unSub);
                var e = { href: '#'+this.scrollerId };
                this.Scroller.anchorScroll(e); 
            } else {
                this._show();
            }
        } 


        this._show = function() {
            this.StartShowEvent.fire(); 
            if( this.bOnce && this.iCounter >= 1 ) {
                return;
            }
            this.iCounter++;
        
            if( this.oBlind && this.bHighlight ) {
                if( this.to ) {
                this.oBlind.highlight(this.to, { noResize: true, mask: this.bMask });
                } else {
                this.oBlind.show(null, {noResize: true, mask: this.bMask });
                }
            }
        
            Dom.setStyle(this.elt,'visibility','visible');
            Dom.setStyle(this.elt,'display','block');
            Dom.setStyle(this.elt,'position','absolute');
            this.position();

            if( this.bAutoHide ) {
                var obj = this;
                setTimeout(function() { obj.hide(); },this.iAutoHideTimeout);
            }
            this.bVisible = true;
            this.ShowEvent.fire(); 
        }

        this.hide = function() {
            if( this.oBlind && this.bHighlight ) {
                this.oBlind.hide();
            }
            Dom.setStyle(this.elt,'visibility','hidden');
            this.bVisible = false;
        }

        this.position = function() {
            if( !this.toElt ) {
                // center on screen
                var w = this.elt.offsetWidth;
                var h = this.elt.offsetHeight;

                var posX = (Dom.getViewportWidth() - w) / 2;
                var posY = Dom.getDocumentScrollTop() + (Dom.getViewportHeight() - h) / 2;

                Dom.setX(this.elt,posX);
                Dom.setY(this.elt,posY);
            } else {
                var x = Dom.getX(this.to);
                var y = Dom.getY(this.to);
                var w = this.toElt.offsetWidth;
                var h = this.toElt.offsetHeight;


                //Dom.setStyle(this.ptr,'class','');
                this.ptr['className'] = '';

                if( this.iPosition ) {
                    // PREFERRED
                } else {
                    // AUTOMATIC
                    // RIGHT LEFT TOP BOTTOM
                if(x+w+this.elt.offsetWidth < Dom.getViewportWidth()) {
                    // RIGHT
                    var posX = x + w + this.ptr_w;
                    Dom.addClass(this.ptr,'ptr-l');
                    if( this.toElt.offsetHeight < this.elt.offsetHeight ) {
                        var posY = y;
                        posY += (this.toElt.offsetHeight / 2);
                        posY -= (this.elt.offsetHeight / 2);
                        posY += this.ptr_w;
                        if(posY+this.elt.offsetHeight<Dom.getViewportHeight()) {
                            Dom.addClass(this.ptr,'ptr-lc');
                        } else {
                            posY -=  this.elt.offsetHeight / 2;
                            posY += this.ptr_w;
                            Dom.addClass(this.ptr,'ptr-lb');
                        }
                    } else {
                        var posY = y - this.ptr_t;
                        Dom.addClass(this.ptr,'ptr-lt');
                    }
                    Dom.setX(this.elt,posX);
                    Dom.setY(this.elt,posY);
                } else if( this.elt.offsetWidth + this.ptr_w < x ) {
                    var posX = x - this.elt.offsetWidth - this.ptr_w;
                    Dom.addClass(this.ptr,'ptr-r');
                    if( this.toElt.offsetHeight < this.elt.offsetHeight ) {
                        var posY = y;
                        posY += (this.toElt.offsetHeight / 2);
                        posY -= (this.elt.offsetHeight / 2);
                        posY += this.ptr_w;
                        if(posY+this.elt.offsetHeight<Dom.getViewportHeight()) {
                            Dom.addClass(this.ptr,'ptr-rc');
                        } else {
                            posY -=  this.elt.offsetHeight / 2;
                            posY += this.ptr_w;
                            Dom.addClass(this.ptr,'ptr-rb');
                        }
 
                    } else {
                        var posY = y;
                        Dom.addClass(this.ptr,'ptr-rt');
                    }

                    Dom.setX(this.elt,posX);
                    Dom.setY(this.elt,posY);
                } else if( this.elt.offsetHeight + this.ptr_w < y ) {
                    // TOP
                    var posX = x - this.ptr_w;
                    var posY = y - this.elt.offsetHeight - this.ptr_w;
                    Dom.setX(this.elt,posX);
                    Dom.setY(this.elt,posY);
                    Dom.addClass(this.ptr,'ptr-b');
                } else {
                    // BOTTOM
                    var posX = x - this.ptr_w;
                    var posY = y + h + this.ptr_w;
                    Dom.setX(this.elt,posX);
                    Dom.setY(this.elt,posY);
                    Dom.addClass(this.ptr,'ptr-t');
                }
            }
            }

        }

        this.setTarget = function(to) {
            this.to = to;
            this.toElt = Dom.get(to);
            this.position();
        }

        this.setBody = function(body) {
            var a = Dom.getElementsByClassName('bd','div',this.id);
            a[0].firstChild.innerHTML = body;
        }

        this.help_resize = function(e) {
            if (this.bVisible) {
                this.position();
                if( this.oBlind && this.bHighlight ) {
                    this.oBlind._resize(e);
                }
            }
        }

        this.scroll = -1;
        this.check_scroll = function() {
            var current = Dom.getDocumentScrollTop();
            if( this.scroll == -1 ) {
                this.scroll = current;
            } else if( this.scroll != current ) {
                this.help_resize(null);
                this.scroll = current;
            }
        }

        Event.on(window,'resize',this.help_resize,this,true);
        var obj = this;
        var fn = function () {
           obj.check_scroll(); 
        }
        setInterval(fn,500);


   }

    
 })();