/**
 *  create by : Ben Wu
 *  create at : 04/01/2009
 *  pop up 
 *  use javascript to fire pop up box 
 *  param int fieldid (id of the button)
 *  param option array of options
 *  onClose : function(FadeBox)
 *  it use ajax post if we put url in fieldid
 *
 *  modify by Huey Hu
 *  modify at 04/12/2009
 *  Add track function
 *  
**/
var FadeBox = Class.create({
     initialize: function(fieldid, options){
        this.remove = false; 
        this.options = options || {} ; 
        this.options.tracker = this.options.tracker || null;
        this.element = $(fieldid); 
        if(Object.isElement(this.element)){
            this.element = this.element.clone();
        }
        else{
            //assume user input url then we can call for ajax
            this.element = new Element('div',
                { 
                    'id': 'fadebox_loading', 
                    'class' : 'fadebox-loading' 
                }
            );
            var message = 'Loading ...'
            if(this.options.name){
                message = 'Loading '+this.options.name.capitalize()+' ...'; 
            }
            this.element.update('<img class="img" src="images/spacer.gif"/><span>'+message+'</span>');
            this.callajax(fieldid); 
        }
        
        this.content = new Element('div', {
            'id' : 'fadebox_content' 
            });
        this.mask = new Element('div', {
            'id' : 'fadebox_mash' 
            });
        /*this.iframe = new Element('iframe', {
            'id' : 'fadebox_iframe'
            });*/
        this.closeElement = this.element.getElementsBySelector(
            '[action="fadebox_close"]'
        ); 
            
        this._bindClosefunction();
        
        
        var body = $(document.body);
        
        body.insert(this.mask);
        //body.insert(this.iframe);
        body.insert(this.content);
        
        this.content.insert(this.element); 
        
        if(Prototype.Browser.IE){
            new Insertion.After(this.mask, 
                  '<iframe id="fadebox_iframe" '+
                  'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
                  'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
            this.iframe =   $('fadebox_iframe'); 
        }
        this.setStyle(); 
        this.element.show(); 
        this.track(this.element.id + 'open');
//      Event.observe(document.onresize ? document : window, 
//                      "resize", this.resizeFadebox.bind(this) );
        
        //body.scrollTo(); 
        
     },
     track : function(item) {
         // Track using tracker if available.
        if (this.options.tracker) {
            this.options.tracker.track(item);
        }
     },
     setStyle : function(){
        var top = document.viewport.getScrollOffsets().top + 80;
        this.content.setStyle({
            'position' : 'absolute', 
            'top' : top+'px',
            'width' : '100%',
            zIndex : '1003'
        }); 
        this.element.setStyle({
            zIndex : '1003',
            'position' : 'relative',
            'top' : 'auto',
            'left' : '0', 
            'right' : 'auto', 
            'margin' : '0 auto'
        });
        var size = this.getPageSize(); 
        this.mask.setStyle({
            'height' : size.height+'px',
            'width' : '100%',
            'left': '0',
            'top' : '0',
            'position':'absolute',
            backgroundColor : '#7a7a7a', 
            'opacity' : '0.65',
            zIndex : '1002'
        }); 
        if(Prototype.Browser.IE){
            Position.clone(this.mask, this.iframe);
            //this.iframe.style.zIndex = 1001;
            this.iframe.show();
        }
     },
     closeFadebox : function(event) {
        this.remove = true;
        event = event || window.event; 
        if( this.options.onClose){
            this.options.onClose(this, event);
            this.track(this.element.id + 'close');
            return; 
        }
        
        if(Prototype.Browser.IE){
            this.iframe.remove();
        } 
        
        this.mask.remove(); 
        this.content.remove();
        FadeBoxStatic.fadebox = null;
        if (typeof event == 'object' ){
            Event.stop(event);
        }
        this.track(this.element.id + 'close');
     },
     track : function (item) {
        if (this.options.tracker)
        {
            this.options.tracker.track(item);
        }
     },
     getPageSize: function() {
            
         var xScroll, yScroll;
        
        if (window.innerHeight && window.scrollMaxY) {  
            xScroll = window.innerWidth + window.scrollMaxX;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){ 
            // all but Explorer Mac
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { 
            // Explorer Mac...would also work in Explorer 6 Strict, 
            // Mozilla and Safari
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
        
        var windowWidth, windowHeight;
        
        if (self.innerHeight) { // all except Explorer
            if(document.documentElement.clientWidth){
                windowWidth = document.documentElement.clientWidth; 
            } else {
                windowWidth = self.innerWidth;
            }
            windowHeight = self.innerHeight;
        } else if (
            document.documentElement 
            && document.documentElement.clientHeight
        ) { 
            // Explorer 6 Strict Mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }   
        
        // for small pages with total height less then height of the viewport
        if(yScroll < windowHeight){
            pageHeight = windowHeight;
        } else { 
            pageHeight = yScroll;
        }
    
        // for small pages with total width less then width of the viewport
        if(xScroll < windowWidth){  
            pageWidth = xScroll;        
        } else {
            pageWidth = windowWidth;
        }

        return {width : pageWidth, height : pageHeight};
    },
    _bindClosefunction : function (){
        this.bindcloseFadebox = this.closeFadebox.bind(this); 
        if(this.closeElement && this.closeElement.length > 0){
            for(var i = 0; i < this.closeElement.length; i++){
                Event.observe(
                    this.closeElement[i], 'click', this.bindcloseFadebox
                );
            }
        }
        else{  
            Event.observe(
                this.mask, 'click', this.bindcloseFadebox
            );
            Event.observe(
                this.content, 'click', this.bindcloseFadebox
            );
        }
    },
    _unbindClosefunction : function(){
        if(this.closeElement && this.closeElement.length > 0){
            for(var i = 0; i < this.closeElement.length; i++){
                Event.stopObserving(
                    this.closeElement[i], 'click', this.bindcloseFadebox
                );
            }
        }
        else{  
            Event.stopObserving(
                this.mask, 'click', this.bindcloseFadebox
            );
            Event.stopObserving(
                this.content, 'click', this.bindcloseFadebox
            );
        }
    },
    callajax : function (url){
        var params = '';
        if(this.options.paramNames){
            for (var i = 0; i < this.options.paramNames.length; i++ ){
                var input = $(this.options.paramNames[i]); 
                var input_value = $F(input);  
                if(input_value != null){
                    if(params.blank()){
                        params += encodeURIComponent(this.options.paramNames[i])+'='
                            +encodeURIComponent(input_value);
                        
                    }
                    else{
                        params += '&'+encodeURIComponent(this.options.paramNames[i])+'='
                            +encodeURIComponent(input_value);
                    }
                }
            }
        }
        
        if(this.options.form){
            var formElements = Form.getElements(this.options.form);
            formElements.each(
                function(fe){
                    var input_value = $F(fe);
                    if(input_value != null){ 
                        if(params.blank()){
                            params += encodeURIComponent(fe.name)+'='
                                +encodeURIComponent(input_value);
                        }
                        else{
                            params += '&'+encodeURIComponent(fe.name)+'='
                                +encodeURIComponent(input_value);
                        }
                    }
                }
            );
        }
        
        var method = 'post';
        if (this.options.method)
        {
        	method = this.options.method;
        }
        new Ajax.Request
        (
            url, 
            {
                method : method,    parameters : params,
                onSuccess: function(transport){
                    var response = transport.responseText;
                    if(!response.blank() && !this.remove){
                        this._unbindClosefunction();
                        var temp  = new Element('div'); 
                        temp.update(response);
                        
                        this.element.remove(); 
                        
                        this.element = temp.down();
                        this.closeElement = this.element.getElementsBySelector(
                            '[action="fadebox_close"]'
                        ); 
                        this.setStyle();
                        this.content.insert(this.element);
                        this.element.show();
                        
                        this._bindClosefunction();  
                    }
                }.bind(this)
            }
        );
        
         
    }
});
/**
 *
 *  Create By : Ben Wu
 *  Create At : 04/02/2009
 * 
 *  static function for Fadebox
 *  use we need to close the fadebox 
 *  from some DOM object
 *  it required to use FadeBoxStatic.open to 
 *  open the pop up otherwise FadeBoxStatic.close 
 *  won't work. 
 *  
**/
var FadeBoxStatic = {}; 
FadeBoxStatic.fadebox = null;
//var FadeBoxStaticfadebox = null;
FadeBoxStatic.open = function (fieldid, options){
    options = options || {} ; 
    FadeBoxStatic.fadebox = new FadeBox(fieldid, options); 
}
FadeBoxStatic.close = function(event){
    if(FadeBoxStatic.fadebox != null){
        event = event || window.event; 
        FadeBoxStatic.fadebox.closeFadebox(event);
    }
}
window["FadeBoxStatic"] = FadeBoxStatic;
window["FadeBox"] = FadeBox;