Clientcide.setAssetLocation(resource_path + '/clientcide/Assets')

var ModalTester = new Class({
    Implements: [Events, Class.Occlude],
    
    property: 'modaltester',
    
    initialize: function (test_url) {
        this.element = $('modaltester_root_div');
        
        if (!this.element) {
            this.element = new Element('div', {
                'id' : 'modaltester_root_div'
            });
        }
        
        if (this.occlude()) {
            if (this.occluded.test_url !== test_url) {
                this.occluded.test_url = test_url;
                this.construct();
            }
            
            return this.occluded;
        }
        
        this.stickywin_modal = new StickyWin.Modal({
            'content'     : this.element,
            'hideOnClick' : false,
            'maskOptions' : {
                'id' : 'modaltester_mask',
                'class' : '',
                'style' : { 'z-index' : 10 }
            }
        });
        
        this.test_url = test_url;
        this.current_question_number = 1;
        //this.number_of_questions = undefined;
        //
        //(new Request.JSON({
        //    'url' : this.test_url + '/getNumberOfQuestions',
        //    
        //    'onSuccess' : function (data, text) {
        //        this.number_of_questions = data;
        //    }.bind(this)
        //})).send();
        
        this._keydown = function (event) {
        }.bind(this);
        
        document.body.addEvent('keydown', this.onKeydown.bindWithEvent(this));
        window.addEvent(       'keydown', this.onKeydown.bindWithEvent(this));
        
        this.stickywin_modal.mask.addEvent('click'  ,   this.onMaskClick.bindWithEvent(this));
        this.stickywin_modal.mask.addEvent('show'   ,    this.onMaskShow.bindWithEvent(this));
        this.stickywin_modal.mask.addEvent('hide'   ,    this.onMaskHide.bindWithEvent(this));
        this.stickywin_modal.mask.addEvent('destroy', this.onMaskDestroy.bindWithEvent(this));
        
        this.construct();
        
        return this;
    },
    
    construct: function () {
        this.step_menu_view = new StepMenuView(this, this.element, this.test_url);
        this.content_view   = new ContentView( this, this.element, this.test_url);
    },
    
    update: function () {
        this.step_menu_view.update();
        this.content_view.update();
    },
    
    onKeydown: function (event) {
        if (event.key === 'esc') {
            event.stop();
            
            this.exit();
        }
    },
    
    onMaskClick: function (event) {
        this.fireEvent('mask_click');
    },
    
    onMaskShow: function (event) {
        this.fireEvent('mask_show');
    },
    
    onMaskHide: function (event) {
        this.fireEvent('mask_hide');
    },
    
    onMaskDestroy: function (event) {
        this.fireEvent('mask_destroy');
    },
    
    show: function () {
        this.stickywin_modal.show();
        
        this.fireEvent('show');
    },
    
    hide: function () {
        this.stickywin_modal.hide();
        
        this.fireEvent('hide');
    },
    
    gotoQuestion: function (question_number, question_url) {
        this.current_question_number = question_number;
        
        this.step_menu_view.slideCurrentQuestionMarker();
        
        this.content_view.update();
    },
    
    nextQuestion: function () {
        this.current_question_number += 1;
        
        this.step_menu_view.slideCurrentQuestionMarker();
        
        this.content_view.update();
    },
    
    previousQuestion: function () {
        this.current_question_number -= 1;
        
        this.step_menu_view.slideCurrentQuestionMarker();
        
        this.content_view.update();
    },
    
    answerSelected: function (answer) {
        this.step_menu_view.markStepCompleted(this.current_question_number);
        
        if (this.step_menu_view.hasStep(this.current_question_number + 1)) {
            this.step_menu_view.markStepActive(this.current_question_number + 1);
        }
        
        this.content_view.update();
    },
    
    finish: function (result) {
        this.hide();
        json_action_request(application_url + '/showTestResult', result);
    }
});

var StepMenuView = new Class({
    Implements: [Events, Class.Occlude],
    
    property: 'modaltester_view',
    
    initialize: function (modal_tester, element) {
        if (element.get('id') === 'modaltester_step_menu') {
            this.element = element;
        }
        else if (element.getElements('#modaltester_step_menu')[0]) {
            this.element = element.getElements('#modaltester_step_menu')[0];
        }
        else {
            this.element = new Element('div', {
                'id' : 'modaltester_step_menu'
            });
            
            element.grab(this.element);
        }
        
        if (this.occlude()) {
            this.occluded.modal_tester = modal_tester;
            
            this.construct();
            
            return this.occluded;
        }
        
        this.modal_tester = modal_tester;
        
        this.update();
        
        return this;
    },
    
    update: function () {
        (new Request.HTML({
            'url' : this.modal_tester.test_url + '/questionsteps',
            
            'onSuccess' : function (tree, els, html, js) {
                var fade_button;
                this.element.set('html', html);
                
                activate_elements(this.element);
                
                if (!$$('.modaltester_question_button').length != 11) {
                    fade_button = $$('#modaltester_right_dots_container .modaltester_question_button')[0];
                    
                    new Fx.Tween(fade_button, {
                        'property' : 'opacity',
                        'duration' : 'short'
                    }).set(0);
                }
                
                $('modaltester_middle_nav').addEvent('leftEdgeTouched', function () {
                    fade_button = $$('#modaltester_left_dots_container .modaltester_question_button')[0];
                    
                    new Fx.Tween(fade_button, {
                        'property' : 'opacity',
                        'duration' : 'short'
                    }).start(1);
                }.bind(this));
                
                $('modaltester_middle_nav').addEvent('leftEdgeDeparted', function () {
                    fade_button = $$('#modaltester_left_dots_container .modaltester_question_button')[0];
                    
                    new Fx.Tween(fade_button, {
                        'property' : 'opacity',
                        'duration' : 'short'
                    }).start(0);
                }.bind(this));
                
                $('modaltester_middle_nav').addEvent('rightEdgeTouched', function () {
                    fade_button = $$('#modaltester_right_dots_container .modaltester_question_button')[0];
                    
                    new Fx.Tween(fade_button, {
                        'property' : 'opacity',
                        'duration' : 'short'
                    }).start(1);
                }.bind(this));
                
                $('modaltester_middle_nav').addEvent('rightEdgeDeparted', function () {
                    fade_button = $$('#modaltester_right_dots_container .modaltester_question_button')[0];
                    
                    new Fx.Tween(fade_button, {
                        'property' : 'opacity',
                        'duration' : 'short'
                    }).start(0);
                }.bind(this));
            }.bind(this),
            
            'data' : {
                'current_question_number' : this.modal_tester.current_question_number
            }
        })).send();
    },
    
    hasStep: function (step_number) {
        return !!($('modaltester_question_button_' + step_number)); // '!!' converts to boolean
    },
    
    markStepCompleted: function (step_number) {
        var step_button;
        
        step_button = $('modaltester_question_button_' + step_number);
        
        new Fx.Tween(step_button, {
            'property' : 'background-color'
        }).start('#23c309');
        
        step_button.addClass('modaltester_question_button_completed');
        step_button.removeClass('modaltester_question_button_failed');
        step_button.removeClass('modaltester_question_button_uncompleted');
    },
    
    markStepActive: function (step_number) {
        var step_button;
        
        step_button = $('modaltester_question_button_' + step_number);
        
        new Fx.Tween(step_button, {
            'property' : 'background-color'
        }).start('#6f6f6f');
        
        step_button.addClass('modaltester_question_button_active');
        step_button.removeClass('modaltester_question_button_inactive');
        
        step_button.set('href', this.modal_tester.test_url + '/toQuestion?question_number=' + step_number)
    },
    
    slideCurrentQuestionMarker: function () {
        var current_question_number, current_question_marker, step_button, content_pane_buttons;
        
        content_pane_buttons    = $$('#modaltester_middle_content .modaltester_question_button');
        current_question_number = this.modal_tester.current_question_number;
        current_question_marker = $('modaltester_current_question_marker');
        step_button = $('modaltester_question_button_' + current_question_number);
        
        if (current_question_number === 1) {
            $('modaltester_middle_nav').centerOnElement(content_pane_buttons[0], {
                'duration' : 'short'
            });
            
            new Fx.Tween(current_question_marker, {
                'property' : 'left',
                'duration' : 'short'
            }).start(step_button.getPosition($('modaltester_step_menu')).x - 5 + 'px');
        }
        else if (current_question_number === $$('.modaltester_question_button').length) {
            $('modaltester_middle_nav').centerOnElement(content_pane_buttons[content_pane_buttons.length - 1], {
                'duration' : 'short'
            });
            
            new Fx.Tween(current_question_marker, {
                'property' : 'left',
                'duration' : 'short'
            }).start(step_button.getPosition($('modaltester_step_menu')).x - 5 + 'px');
        }
        else if (!($('modaltester_middle_nav').centerOnElement(step_button, {
            'duration' : 'short',
            'onComplete' : function () {
                new Fx.Tween(current_question_marker, {
                    'property' : 'left',
                    'duration' : 'short'
                }).start(step_button.getPosition($('modaltester_step_menu')).x - 5 + 'px');
            }.bind(this)
        }))) {
            new Fx.Tween(current_question_marker, {
                'property' : 'left',
                'duration' : 'short'
            }).start(step_button.getPosition($('modaltester_step_menu')).x - 5 + 'px');
        }
    }
});

var ContentView = new Class({
    Implements: [Events, Class.Occlude],
    
    property: 'modaltester_view',
    
    initialize: function (modal_tester, element) {
        if (element.get('id') === 'modaltester_content') {
            this.element = element;
        }
        else if (element.getElements('#modaltester_content')[0]) {
            this.element = element.getElements('#modaltester_content')[0];
        }
        else {
            this.element = new Element('div', {
                'id' : 'modaltester_content'
            });
            
            element.grab(this.element);
        }
        
        if (this.occlude()) {
            this.occluded.modal_tester = modal_tester;
            
            this.construct();
            
            return this.occluded;
        }
        
        this.modal_tester = modal_tester
        
        this.update();
        
        return this;
    },
    
    update: function () {
        var form_element, data;
        
        (new Request.HTML({
            'url' : this.modal_tester.test_url + '/showquestion',
            
            'onSuccess' : function (tree, els, html, js) {
                this.element.set('html', html);
                
                activate_elements(this.element);
                
                /* Hookup radio button onClick events for immediate updates on clicks */
                this.element.getElements('input[type="radio"]').each(function (input_radio) {
                    form_element = input_radio.getParents('form')[0];
                    
                    input_radio.addEvent('click', function (event) {
                        event.stop();
                        
                        input_radio.set('checked', 'checked');
                        
                        data = form_element.toQueryString().parseQueryString();
                        
                        data['form.actions.radio_clicked'] = input_radio.get('value');
                        
                        json_action_request(form_element.get('action'), data, form_element, form_element.get('method') || 'post');
                    }.bind(this));
                }.bind(this));
            }.bind(this),
            
            'data' : {
                'question_number' : this.modal_tester.current_question_number
            }
        })).send();
    }
});

function start_modaltester(test_url) {
    var mt;
    mt = new ModalTester(test_url);
    mt.show();
}