var Casal = new Class({
    Implements: [Options, Events],
    options: {
        casal: null,
        fgl: null,
        fgr: null,
        bgl: null,
        bgr: null,
        casalHeight: null,
        casalWidth: null,
        blockHeight: null,
        blockWidth: null,
        teaseTextHeight: null,
        teaseTextBackgroundColor: '#000',
        teaseTextColor: '#fff'
        //TweenFGL: null
    },
    initialize: function(options){
        this.status = 0;
        this.setOptions(options);
        this.casal = this.options.casal;
        this.fgl = this.options.fgl;
        this.fgr = this.options.fgr;
        this.bgl = this.options.bgl;
        this.bgr = this.options.bgr;
        this.casalHeight = this.options.casalHeight;
        this.casalWidth = this.options.casalWidth;
        this.blockHeight = this.options.blockHeight;
        this.blockWidth = this.options.blockWidth;
        this.teaseTextHeight = this.options.teaseTextHeight;
        this.teaseTextBackgroundColor = this.options.teaseTextBackgroundColor;
        this.teaseTextColor = this.options.teaseTextColor;
        
        
        this.goUrl = null;
        this.target = null;
       
        //alert(this.fgl.getElement('img').getProperty('src'));
              
        this.fgl.setStyle('visibility','hidden');
        this.fgr.setStyle('visibility','hidden');
        this.bgl.setStyle('visibility','hidden');
        this.bgr.setStyle('visibility','hidden');

        this.casal.setStyles({
            'width': this.casalWidth+'px',
            'height': this.casalHeight+'px',
            'position': 'relative',
            'top':0,
            'left': 0
        });
        
        //alert(this.casal.get('html'));

        this.fgl.setStyles({
            'width': this.blockWidth+'px',
            'height': this.blockHeight+'px',
            'position': 'absolute',
            'top':0,
            'left': 0
        });

        this.fgr.setStyles({
            'width': this.blockWidth+'px',
            'height': this.blockHeight+'px',
            'position': 'absolute',
            'top':0,
            'left': (this.casalWidth-this.blockWidth)+'px'
        });

        this.bgl.setStyles({
            'width': (this.blockWidth-6)+'px',
            'height': this.blockHeight+'px',
            'position': 'absolute',
            'top':0,
            'left': '3px',
            'margin-right': '3px'
        });
        this.bgr.setStyles({
            'width': (this.blockWidth-6)+'px',
            'height': this.blockHeight+'px',
            'position': 'absolute',
            'top':0,
            'left': (this.casalWidth-this.blockWidth+3)+'px',
            'margin-right': '3px'
        });

        this.fglContent = this.fgl.getElement('img').getProperty('alt');
        this.fgrContent = this.fgr.getElement('img').getProperty('alt');
        
        fglBackgroundImage = this.fgl.getElement('img').getProperty('src');
        fgrBackgroundImage = this.fgr.getElement('img').getProperty('src');
        
        this.fglUrl = this.fgl.getElement('a');
        this.fgrUrl = this.fgr.getElement('a');
        this.fglUrlTarget = this.fglUrl.getProperty('target');
        this.fgrUrlTarget = this.fgrUrl.getProperty('target');
      
        this.fgl.empty();
        this.fgr.empty();

        this.fgl.setStyle('background-image','url('+fglBackgroundImage+')');
        this.fgr.setStyle('background-image','url('+fgrBackgroundImage+')');
        
        this.myDivL = new Element('div', {'class' : 'fglTeaseText'}); // Create.
        this.myDivL.set('html', this.fglContent); // Set.
        this.myDivL.inject(this.fgl, 'bottom'); // Inject.
        this.myDivR = new Element('div', {'class' : 'fgrTeaseText'}); // Create.
        this.myDivR.set('html', this.fgrContent); // Set.
        this.myDivR.inject(this.fgr, 'bottom'); // Inject.

        this.myDivL.setStyles({
            'width': this.blockWidth+'px',
            'height': this.teaseTextHeight+'px',
            'line-height': this.teaseTextHeight+'px',
            'position': 'relative',
            'top':(this.blockHeight-this.teaseTextHeight)+'px',
            'left': 0,
            'color': this.teaseTextColor,
            'background-color': this.teaseTextBackgroundColor
        });
        
        this.myDivR.setStyles({
            'width': this.blockWidth+'px',
            'height': this.teaseTextHeight+'px',
            'line-height': this.teaseTextHeight+'px',
            'position': 'relative',
            'top':(this.blockHeight-this.teaseTextHeight)+'px',
            'left': 0,
            'color': this.teaseTextColor,
            'background-color': this.teaseTextBackgroundColor
        });

        this.fgl.setStyle('visibility','visible');
        this.fgr.setStyle('visibility','visible');
        this.bgl.setStyle('visibility','visible');
        this.bgr.setStyle('visibility','visible');
        
        this.casalForm = new Element('form', {
            'method': 'get',
            'class': 'myCasalForm',
            'styles': {
                'border': '0'
            },
            'events': {
                'submit': function(event){
                    event.stop(); //Prevents the browser from following the link.
                    (function(){
                        var callme = unescape(this.action.trim()).substr(11);
                        //alert(callme);
                        eval(callme);
                    }).delay(100, this);
                }
            }
        });
        
        this.casal.grab(this.casalForm);
       
        this.TweenFGL = new Fx.Tween(this.fgl, {
            link: 'cancel',
            transition: Fx.Transitions.Quad.easeIn,
            //duration: 'short',
            onStart: this.TweenFGLonStart.bind(this)
            //onStart: function(passes_tween_element){
            //    passes_tween_element.fade(0);
            //}
        });
     
        this.TweenFGR = new Fx.Tween(this.fgr, {
            link: 'cancel',
            transition: Fx.Transitions.Quad.easeIn,
            //duration: 'short',
            onStart: this.TweenFGRonStart.bind(this)
            //onStart: function(passes_tween_element){
            //    passes_tween_element.fade(0);
            //}
        });
       
        this.TweenMyDivL = new Fx.Tween(this.myDivL, {
            link: 'cancel',
            transition: Fx.Transitions.Quad.easeIn,
            duration: 'long',
            //onStart: this.TweenMyDivLonStart.bind(this),
            onStart: function(passes_tween_element){
                passes_tween_element.fade(0.1);
            },
            onComplete: this.TweenMyDivLonComplete.bind(this)
            //onComplete: function(passes_tween_element){
            //    passes_tween_element.fade(1);
            //}	
        });
     
        this.TweenMyDivR = new Fx.Tween(this.myDivR, {
            link: 'cancel',
            transition: Fx.Transitions.Quad.easeIn,
            duration: 'long',
            //onStart: this.TweenMyDivRonStart.bind(this),
            onStart: function(passes_tween_element){
                passes_tween_element.fade(0.1);
            },	
            onComplete: this.TweenMyDivRonComplete.bind(this)
            //onComplete: function(passes_tween_element){
            //    passes_tween_element.fade(1);
            //}	
        });

        this.fgl.addEvent('mouseenter', this.enterFGL.bind(this));
        this.fgr.addEvent('mouseenter', this.enterFGR.bind(this));
        this.casal.addEvent('mouseleave', this.leaveCasal.bind(this));

        if(Browser.Engine.trident) { // ie precisa disso
            this.fgl.fireEvent('mouseenter');
            this.casal.fireEvent('mouseleave');
            this.fgr.fireEvent('mouseenter');
            this.casal.fireEvent('mouseleave');
        }
    },
    
    //TweenMyDivRonStart: function () {
    //    this.myDivR.fade(0.1);
    //},
    
    TweenMyDivRonComplete: function () {
        this.myDivR.fade(1);
        if(this.myDivR.getStyle('top')=='0px') // as vezes ie precisa disso
        {
            this.myDivL.fade(0);
        }
    },
    
    //TweenMyDivLonStart: function () {
    //    this.myDivL.fade(0.1);
    //},
    
    TweenMyDivLonComplete: function () {
        this.myDivL.fade(1);
        if(this.myDivL.getStyle('top')=='0px') // as vezes ie precisa disso
        {
            this.myDivR.fade(0);
        }
    },
    
    TweenFGRonStart: function () {
        this.myDivR.fade(0);
    },
    
    TweenFGLonStart: function () {
        this.myDivL.fade(0);
    },
    
    goClickFGL: function (e) {
        e.stop(); 
        if ($chk(this.fglUrl))
        {
            //alert(unescape(this.casalForm.action));
            if (this.casalForm.action.trim().contains('javascript:'))
            {
                this.casalForm.fireEvent('submit',e);
            }
            else
            {
                this.casalForm.submit();
            }  
        }
    },
    
    goClickFGR: function (e) {
        e.stop(); 
        if ($chk(this.fgrUrl))
        {
            if (this.casalForm.action.trim().contains('javascript:'))
            {
                this.casalForm.fireEvent('submit',e);
            }
            else
            {
                this.casalForm.submit();
            }  
        }
    },
    
    enterFGL: function () {
        if (this.status==0)
        {
            this.status = 1;
            this.TweenFGR.start('background-position', this.blockWidth+'px 0');
            this.TweenMyDivL.start('top',0);
            this.casal.addEvent('click', this.goClickFGL.bind(this));
            if ($chk(this.fglUrl))
            {
                this.casal.setStyle('cursor','help');
                this.casalForm.set('action',this.fglUrl);
                this.casalForm.set('target',this.fglUrl.getProperty('target'));
            }
        }
    },
    
    enterFGR: function () {
        if (this.status==0)
        {
            this.status = 2;
            this.TweenFGL.start('background-position', -this.blockWidth+'px 0');
            this.TweenMyDivR.start('top',0);
            this.casal.addEvent('click', this.goClickFGR.bind(this));
            if ($chk(this.fgrUrl))
            {
                this.casal.setStyle('cursor','help');
                this.casalForm.set('action',this.fgrUrl);
                this.casalForm.set('target',this.fgrUrl.getProperty('target'));
            }
        }
    },
         
    leaveCasal: function() {
        if (this.status != 0)
        {
            if (this.status == 1) {
                //alert(this.blockHeight-this.teaseTextHeight);
                this.TweenMyDivL.start('top',this.blockHeight-this.teaseTextHeight);
                this.TweenFGR.start('background-position', '0 0');
                this.myDivR.fade(1);
            } else {
                this.TweenMyDivR.start('top',this.blockHeight-this.teaseTextHeight);
                this.TweenFGL.start('background-position', '0 0');
                this.myDivL.fade(1);
            }
            this.status = 0;
        }
        this.casal.removeEvents('click');
        this.casal.setStyle('cursor','default');
    }
});

var Casadinho = new Class({
    Implements: [Options, Events],
    options: {
        casais: [],
        casalHeight: null,
        casalWidth: null,
        blockHeight: null,
        blockWidth: null,
        teaseTextHeight: null,
        teaseTextBackgroundColor: '#000',
        teaseTextColor: '#fff'
    },
    initialize: function(options){
        this.setOptions(options);
        this.addCasais(this.options.casais);
        this.casalHeight = this.options.casalHeight;
        this.casalWidth = this.options.casalWidth;
        this.blockHeight = this.options.blockHeight;
        this.blockWidth = this.options.blockWidth;
        this.teaseTextHeight = this.options.teaseTextHeight;
        this.teaseTextBackgroundColor = this.options.teaseTextBackgroundColor;
        this.teaseTextColor = this.options.teaseTextColor;
    },
    casais: [],
    addCasais: function(casais){
        $$(casais).each(function(casal){
            //this.casais.include($(casal));
            new Casal ({
                casal: $(casal),
                fgl: $(casal).getElement('.box-fgl'),
                fgr: $(casal).getElement('.box-fgr'),
                bgl: $(casal).getElement('.box-bgl'),
                bgr: $(casal).getElement('.box-bgr'),
                casalHeight: this.options.casalHeight,
                casalWidth: this.options.casalWidth,
                blockHeight: this.options.blockHeight,
                blockWidth: this.options.blockWidth,
                teaseTextHeight: this.options.teaseTextHeight,
                teaseTextBackgroundColor: this.options.teaseTextBackgroundColor,
                teaseTextColor: this.options.teaseTextColor
            });
        }, this);
    },   
    addCasal: function(casal){
        this.addCasais($splat($(casal)));
    }
});