Element.implement({
    'fadeHide': function() {
        var thisClass = this;
        this.fade('out').get('tween').chain(function() { thisClass.hide(); });
    },
    
    'fadeShow': function() {
        this.show();
        this.fade('in');
    },
    
    'defaultText': function() {
        var thisEl = this;
        
        thisEl.store('defaultText', thisEl.get('value'));
        this.addEvent('focus', function(e) {
            var thisVal = thisEl.get('value').trim();
            
            if (thisVal == thisEl.retrieve('defaultText')) {
                thisEl.set('value', '');
            }
        });
        
        this.addEvent('blur', function() {
            var thisVal = thisEl.get('value').trim();

            if (thisVal.length == 0) {
                thisEl.set('value', thisEl.retrieve('defaultText'));
            }
        });
    },
    
    'toJSON': function() {
        return this.toQueryString().parseQueryString();
    },

    'matchBodyHeight': function() {
        if (Browser.ie) {
            this.setStyle('height', $('middleContent').getSize().y + 'px');
        } else {
            this.setStyle('height', $('middleContent').getSize().y + 'px !important');
        }
    },
    
    'isMobileLayout': function() {
        return window.getSize().x <= 760;
    },
    
    'inViewport': function() {
        var elYPos = this.retrieve('inViewportY');
        if (elYPos === null) {
            elYPos = this.getPosition().y;
            elYPos += this.getSize().y;

            this.store('inViewportY', elYPos);
        }
        
        var windowYScroll = window.getScroll().y;

        if (elYPos < windowYScroll) {
            return false;
        }

        return true;
    },

    'isVisibleInScroll': function(scrollingElement) {
        scrollingElement = $(scrollingElement);
        var elYPos = this.getPosition().y;
        elYPos += this.getSize().y;
        
        var parentScrollPosY = scrollingElement.getScroll().y;

        if (elYPos < 0) {
            return false;
        }

        return true;
    },

    'isVisible': function(scrollingElement) {
        return this.inViewport() && this.isVisibleInScroll(scrollingElement);
    },

    'click': function(func) {
        /*if (func === undefined) {
            return this.fireEvent('click');
        }*/
        
        return this.addEvent('click', func);
    },

    'keypress': function(fn) {
        if (fn === undefined) {
            return this.fireEvent('keypress');
        }
        
        this.addEvent('keypress', fn);
    },
    
    'keyup': function(fn) {
        if (fn === undefined) {
            return this.fireEvent('keyup');
        }
        
        this.addEvent('keyup', fn);
    },

    /*'submit': function(fn) {
        /*if (fn === undefined) {
            return this.fireEvent('submit');
        }*

        return this.addEvent('submit', fn);
    },*/

    'checkStyle': function(checkedClass, uncheckedClass) {
        var label = this.getParent(),
            input = this;
        
        this.setStyle('visibility', 'hidden');

        label.addEvent('click', function(e) {
            e.preventDefault();
            
            if (!input.checked) {
                if (input.get('type') == 'radio') {
                    $$('input[name="'+input.get('name')+'"]').each(function(inputEach) {
                        inputEach.getParent().removeClass(checkedClass);
                        inputEach.getParent().addClass(uncheckedClass);
                        inputEach.checked = false;
                    });
                }
                label.removeClass(uncheckedClass);
                label.addClass(checkedClass);
                input.checked = true;
            } else {
                if (input.get('type') != 'radio') {
                    label.removeClass(checkedClass);
                    label.addClass(uncheckedClass);
                    input.checked = false;
                }
            }
        });
        
        if (this.checked) {
            label.addClass(checkedClass);
        } else {
            label.addClass(uncheckedClass);
        }
    }
});

var Modal = new Class({
    Implements: [Events],
    
    visible: false,
    
    initialize: function(element) {
        var thisClass = this;

        this._element = $(element);
        this._wrapper = new Element('div', { 'class': 'modalWrapper' });
        this._wrapper.wraps(this._element);
        this._Mask = new Mask($('body'));
        
        if (this._element) {
            this._closeBtn = new Element('img', {
                'src': '/img/closeBtn.png',
                'class': 'closeBtn'
            }).inject(thisClass._wrapper, 'after');
        
            this._closeBtn.addEvent('click', function() {
                thisClass.hide();
            });

            this._element.store('defaultHtml', this._element.get('html'));

            this._backLnk = this._element.getElement('.backLnk');
        }
        // if there is a back link, add a click event to close
        // the modal box.
        if (this._backLnk) {
            this._backLnk.addEvent('click', function(e) {
                e.preventDefault();
                thisClass.hide();
            });
        }
        
        window.addEvent('resize', function() {
            thisClass.positionModal();
        });
    },

    show: function() {
        /*if (Browser.Platform.android && this._element.isMobileLayout()) {
            this._element.setStyle('z-index', 'auto');
        } else {*/
            this._Mask.show();
        //}
        this._wrapper.addClass('visible');
        this._closeBtn.addClass('visible');
        this.positionModal();
 
        if (this._element.isMobileLayout()) {
            var fxScroll = new Fx.Scroll(window);
            //fxScroll.toTop();
            fxScroll.set(0,0);
        }
        
        this.visible = true;
    },

    positionModal: function() {
        // wrapped in try catch so ie doesn't freak out.
        try {
            if (!this._element.isMobileLayout()) {
                var elSize = this._wrapper.getSize(),
                closeBtnSize = this._closeBtn.getSize(),
                windowSize = window.getSize(),
                windowScroll = window.getScroll().y;

                var yPos = (windowSize.y/2) - (elSize.y/2); 
                
                if (!this._element.isMobileLayout()) {
                    yPos+=windowScroll;
                }

                if (yPos < 0) {
                    yPos = 20;
                }
                
                var elPos = {
                    'x': (windowSize.x/2) - (elSize.x/2),
                    'y': yPos
                };

                this._wrapper.setPosition(elPos);
            
                var imgPos = this._wrapper.getPosition();
            
                imgPos.x = imgPos.x - closeBtnSize.x*.6 + elSize.x;
                imgPos.y = imgPos.y - closeBtnSize.y*.4;

                this._closeBtn.setPosition(imgPos);
            }
        } catch(e) {}
    },

    hide: function() {
        this._Mask.hide();
        this._wrapper.removeClass('visible');
        this._closeBtn.removeClass('visible');
        this.fireEvent('afterHide');
        this.visible = false;
    },
    
    restoreToDefaultHtml: function() {
        this._element.set('html', this._element.retrieve('defaultHtml'));
    },
    
    isVisible: function() {
        return this.visible;
    }
});