var MatchUps = Class.create({
    matchupVote: "",
    homeButton: "",
    awayButton: "",
    homeHelmet: "",
    awayHelmet: "",
    _focused: "",
    _bottom: "", //_bottom: captcha box
    _step: "",   //_step: 1,2,3 based on which step in the process

    initialize: function() {
        this._focused = new Element("div");
        this._bottom = $('bottom');
        this._step = 1;

	    /*
	     * cache bound functions
	     */
	    this.enable = this.enable.bindAsEventListener(this);
	    this.disable = this.disable.bindAsEventListener(this);
	    this.highlightCaptcha = this.highlightCaptcha.bindAsEventListener(this);
	    this.fakeClick = this.fakeClick.bindAsEventListener(this);
	    this.selectRadio = this.selectRadio.bindAsEventListener(this);
	    this.highlightStep = this.highlightStep.bindAsEventListener(this);
	    this.incrementStep = this.incrementStep.bindAsEventListener(this);
	    this.over = this.over.bindAsEventListener(this);
	    this.out = this.out.bindAsEventListener(this);

        /*
         * hide and disable radio buttons
         */
        $$('.matchup-vote').invoke('hide');
        $$('.home-button').invoke('disable');
        $$('.away-button').invoke('disable');
        
        /*
         * disable verify selection box and button
         */
        this._bottom.addClassName('dimmed');
        $$('#submit input').invoke('disable');
        
	    /*
	     * highlight first step
	     */
	    this.highlightStep();

	    /*
	     * attach highlighting to each matchup
	     */
	    $('matchup-listing-i').observe('click', this.enable);
	    $('matchup-listing-i').observe('mouseover', this.over);
	    $('matchup-listing-i').observe('mouseout', this.out);
	    $('matchup-listing-i').observe('click', this.incrementStep);
    },
    
    enable: function(event) {
        event.stop();
        var el = Event.findElement(event, 'div.matchup');
        if(el) {
            $('matchup-listing-i').stopObserving('click', this.enable);
            $('matchup-listing-i').stopObserving('mouseover', this.over);
            $$('div.matchup').invoke('toggleClassName', 'dimmed');
            el.removeClassName('dimmed');
            
            matchupVote = el.down('.matchup-vote');
            homeButton = matchupVote.down('.home-button');
            awayButton = matchupVote.down('.away-button');
            homeHelmet = el.down('.home');
            awayHelmet = el.down('.away');
            matchupVote.toggle();
            
            homeButton.observe('click', this.fakeClick);
            homeButton.observe('focus', this.highlightCaptcha);
            //homeButton.observe('click', this.incrementStep);
            
            awayButton.observe('click', this.fakeClick);
            awayButton.observe('focus', this.highlightCaptcha);
            //awayButton.observe('click', this.incrementStep);
            
            homeHelmet.observe('click', this.selectRadio);
            //homeHelmet.observe('click', this.incrementStep);
            
            awayHelmet.observe('click', this.selectRadio);
            //awayHelmet.observe('click', this.incrementStep);
                      
            el.down('.home-button').enable();
            el.down('.away-button').enable();
            el.down('.cancel').observe('click', this.disable);
        }
    },
    
    disable: function(event) {
        event.stop();
        var el = Event.findElement(event, 'div.matchup');
        
        this._step = 1;
        this.highlightStep();
        
        awayButton = el.down('.away-button');
        awayButton.checked = false;
        awayButton.disable();
        
        homeButton = el.down('.home-button');
        homeButton.checked = false;
        homeButton.disable();
        
        el.down('.home').stopObserving('click', this.selectRadio);
        el.down('.away').stopObserving('click', this.selectRadio);
        
        el.down('.matchup-vote').toggle();
        $$('div.matchup').invoke('removeClassName', 'dimmed');
        $$('#submit input').invoke('disable');
        this._bottom.addClassName('dimmed');
        el.removeClassName('dimmed');
        this._focused = new Element("div"); // reset focused element
        $('matchup-listing-i').observe('click', this.enable);
        $('matchup-listing-i').observe('mouseover', this.over);
        $('matchup-listing-i').observe('click', this.incrementStep);
    },
    
    highlightCaptcha: function(event) {
        var el = event.element();
        if(this._focused.identify() != el.identify()) {
            if (this._bottom.hasClassName('dimmed')) { 
                $$('#submit input').invoke('enable');
                this._bottom.removeClassName('dimmed');
            } 
            this._focused = el;
        }
    },
    
    /* 
     * Workaround so focus() works in Safari
     * http://briancrescimanno.com/2008/05/14/javascript-event-event-method-bugs-and-workarounds/
     */ 
    fakeClick: function(event){
       var el = event.element();
       if(el.identify) { /* Filter out click() for FireFox */
          if(this._focused.identify() != el.identify()) {
             el.focus(); /* Throws the proper focus() for Safari */
          }
       }
    },
    
    /*
     * Select the radiobutton and highlight captcha area when helmet image clicked 
     */ 
    selectRadio: function(event) {
        var el = event.element();
        if (el.hasClassName('home')) el = el.next('.matchup-vote').down('.home-button'); 
        else el = el.next('.matchup-vote').down('.away-button');
        el.checked = true;
        if ($('bottom').hasClassName('dimmed')) { 
            $$('#submit input').invoke('enable');
            $('bottom').removeClassName('dimmed');
        }
    },
    
    incrementStep: function(event) {
        var el = event.element();
        if (this._step==1) this._step = 2;    
        else if (this._step==2) {
            if(el.hasClassName('home') || el.hasClassName('away')) { 
                this._step = 3;
                $('matchup-listing-i').stopObserving('click', this.incrementStep);
            }
        }     
        else if (this._step==3) this._step = 1;
        this.highlightStep();
    },   

    /*
     * Highlight steps in the matchup selection process 
     */
    highlightStep: function() {
        this.disableSteps();
        switch(this._step) {
            case 3:
                $('step3').setStyle({backgroundPosition: '-371px -23px' });
                break;    
            case 2:
                $('step2').setStyle({backgroundPosition: '-181px -23px' });
                break;
            default:
                $('step1').setStyle({backgroundPosition: '0 -23px' });
        }
    },
 
    disableSteps: function() {
        $('step1').setStyle({backgroundPosition: '0 0' });
        $('step2').setStyle({backgroundPosition: '-181px 0' });
        $('step3').setStyle({backgroundPosition: '-371px 0' });
    },
    
    /*
     * Just setting cursor style when user mouses over and out
     */
    over: function(event) {
        event.stop();
        var el = Event.findElement(event, 'div.matchup');
        if(el) el.setStyle({cursor: 'pointer'});
    },
    
    out: function(event) {
        event.stop();
        var el = Event.findElement(event, 'div.matchup');
        if(el) el.setStyle({cursor: 'default'});
    }
});

document.observe('dom:loaded', function() {
    new MatchUps();
});