var joinConvoModal;
window.addEvent('domready', function() {
    joinConvoModal = new Modal('joinConvoModal');

    // preload images
    Asset.images([
        '/img/radio.png',
        '/img/radioChecked.png',
        '/img/checkboxChecked.png',
        '/img/checkbox.png',
        '/img/inputBox.png',
        '/img/textArea.png'
    ]);
    
    $$('#joinConvoModal div.storyType input').each(function(input) {
        input.checkStyle('checked', 'unchecked');
    });
    
    var $storyNumCharsLeft = $('storyNumCharsLeft');
    $storyTxtArea = $('storyTxtArea');
    var startingVal = ($storyNumCharsLeft.get('html'));
    
    $storyTxtArea.addEvent('keydown',function(e) {
        var numChars = parseInt(this.get('value').length);
        var numCharsLeft = startingVal - numChars;
        if(numCharsLeft <= 0 && e.key != 'backspace' && e.key != 'delete') {
            $storyTxtArea.set('value', $storyTxtArea.get('value').substr(0, 250));
            e.preventDefault;
            return false;
        }
    });
    $storyTxtArea.addEvent('keyup',function(e) {
        var numChars = parseInt(this.get('value').length);
        var numCharsLeft = startingVal - numChars;
        var displayNum = numCharsLeft;

        if (numCharsLeft < 0) {
            displayNum = 0;
        }
        $storyNumCharsLeft.set('text', displayNum);

        if(numCharsLeft <= 0) {
            $storyTxtArea.set('value', $storyTxtArea.get('value').substr(0, 250));
        }
    });
    
    $('termsAndCon').checkStyle('checked', 'unchecked');
    
    $('joinTheConvoForm').addEvent('submit', function(e) {
        if ($('body').isMobileLayout()) {
            var fxScroll = new Fx.Scroll(window);
            fxScroll.toTop();
        }
        
        $$('.storyFormError').dispose();
        e.preventDefault();
        
        var formJson = this.toQueryString().parseQueryString();
        Object.each(formJson, function(value, index) {
            formJson[index] = value.trim();
        });
        
        var error = false;
        
        if (formJson['data[UserStory][story_type]'] === undefined) {
            error = true;
            var error = new Element('div', {
                'class': 'error storyFormError',
                'html': 'Please select an option.'
            });

            var title = $$('#storyTypeCont .title');
            $('storyTypeCont').grab(error, 'top');
            title.inject(error, 'before');
        }
        
        if (formJson['data[UserStory][first_name]'] === undefined || formJson['data[UserStory][first_name]'] == '') {
            error = true;
            var error = new Element('div', {
                'class': 'error storyFormError',
                'html': 'Please enter your first name.'
            });

            var title = $$('#firstNameCont .title');
            $('firstNameCont').grab(error, 'top');
            title.inject(error, 'before');
        }
        
        if (formJson['data[UserStory][story]'] === undefined || formJson['data[UserStory][story]'] == '') {
            error = true;
            var error = new Element('div', {
                'class': 'error storyFormError',
                'html': 'Please enter your story or question.'
            });

            var title = $('storyTxtArea');
            $('storyCont').grab(error, 'bottom');
            title.inject(error, 'after');
        }
        
        if (formJson['data[termsAndCon]'] === undefined || formJson['data[termsAndCon]'] == '') {
            error = true;
            var error = new Element('div', {
                'class': 'error storyFormError',
                'html': 'Please agree to the terms and conditions.'
            });

            $('termsAndConCont').grab(error, 'top');
        }
        
        if (error) {
            return true;
        }
        
        
        var $joinConvoModalInner = $('joinConvoModalInner'),
            joinConvoModalInnerSpinner = new Spinner($joinConvoModalInner);
        joinConvoModalInnerSpinner.show();
        
        var request = new Request.JSON({
            url: '/home/submitStory/',
            method: 'post',
            data: formJson,
            onSuccess: function(response) {
                joinConvoModalInnerSpinner.hide().chain(function() {
                    if (response.error) {
                    } else {
                        $('joinConvoModalMainCont').set('html', '');
                        var message = new Element('div', {
                            styles: {
                                'text-align': 'center'
                            },
                            html: 'Thank you for your contribution!'
                           
                        });
                        
                        $joinConvoModalInner.grab(message);
                         
                        var afterHideFn = function() {
                            window.location = window.location+'';
                            /*joinConvoModal.restoreToDefaultHtml();
                            joinConvoModal.removeEvent('afterHide', afterHideFn);
                            joinConvoModal.initialize('joinConvoModal');*/
                        };
                        joinConvoModal.addEvent('afterHide', afterHideFn);
                    }
                });
            }
        });

        request.send();
    });
});