var RateFinder;
window.addEvent('domready',function(){
    RateFinder = new zxRateFinder( );
});

var zxRateFinder = new Class({
    options : {
        select:'rate-finder-select',
        btnGo:'rate-finder-btn',
        rateBox:'rate-finder-box-right',
        rateBoxWidth: 440,
        tableId: 'rate-table',
        extraWidth: 10,
        btnClose:'rate-finder-closebtn',
        content: 'rate-finder-content',
        url: '/findrate.php?country=',
        classClosed:'closed',
        classOpened:'opened'
    },

    setOptions:function(options){
        this.options = Object.extend(this.options, options || {} );
    },

    initialize:function(options){
        this.setOptions(options);
        if ( !$(this.options.btnGo) || !$(this.options.content) || !$(this.options.rateBox) ) return false;
        this.bindBtns();
    },

    bindBtns:function(){
        if ( $(this.options.btnGo) && $(this.options.select) ){
            $(this.options.btnGo).addEvent('click',this.sendRequest.bind(this));
        }

        if ( $(this.options.btnClose) && $(this.options.rateBox) ){
            $(this.options.btnClose).addEvent('click',this.slideInBox.bind(this));
        }
    },

    sendRequest:function(){
        var country = $(this.options.select).value;
        var content = $(this.options.content);
        if ( country == 0 || country == content.getProperty('rel')) return false;

        content.setProperty('rel', country);

        var aj = new Ajax(this.options.url+$(this.options.select).value, {
            method: 'post',
            onRequest:  this.fadeOutContent.bind(this),
            onComplete: this.fadeInContent.bind(this)
        }).request();
    },

    fadeOutContent:function(){
        if ( $(this.options.rateBox).hasClass(this.options.classOpened) ){
            new Fx.Styles( $(this.options.content), { duration:500 }).start({'opacity':[1,0]});
        }
    },

    fadeInContent:function(content){
        $(this.options.content).setHTML(content);
        if ( $(this.options.rateBox).hasClass(this.options.classClosed) ){
            this.slideOutBox();
        }else{
            var width = ( $(this.options.tableId) && $(this.options.tableId).getSize().size.x )?$(this.options.tableId).getSize().size.x + this.options.extraWidth : this.options.rateBoxWidth;
            var boxWidth = ( $(this.options.rateBox) && $(this.options.rateBox).getSize().size.x)?$(this.options.rateBox).getSize().size.x : this.options.rateBoxWidth;
            new Fx.Styles( $(this.options.content), {duration:1000}).start({'opacity':[0,1]});
            if ( width != boxWidth ){
                new Fx.Styles( $(this.options.rateBox), {duration:1000}).start({'width':[boxWidth,width]});
            }
        }
    },

    slideOutBox:function(){
        var box = $(this.options.rateBox);
        box.removeClass(this.options.classClosed).setStyle('width','0px');
        var width = ( $(this.options.tableId) && $(this.options.tableId).getSize().size.x )?$(this.options.tableId).getSize().size.x + this.options.extraWidth:this.options.rateBoxWidth;
        new Fx.Styles(box, {
            duration:1000,
            onComplete: function(){ box.addClass(this.options.classOpened) }.bind(this)
        }).start({'opacity':[0,1],'width':[0,width]});
    },

    slideInBox:function(){
        var box = $(this.options.rateBox);
        box.removeClass(this.options.classOpened);
        new Fx.Styles(box, {
            duration:1000,
            onComplete: function(){ box.addClass(this.options.classClosed); $(this.options.content).setProperty('rel',''); }.bind(this)
        }).start({'opacity':[1,0],'width':[box.getSize().size.x,0]});
    }

});