/**
 * File:    modalFeedback.js
 * Author:  M Chudy
 * Date:    21May2010
 * Description:
 *          This script provides a tool to capture user feedback for the ushik application.s
 * Change Log:
 *          M Chudy - 21May2010 - Initial Creation
 */

document.addEvent('domready',function(e){

    var FEEDBACK_LOADER_TIMEOUT = 1250; // min ms. to show the loading image.
    var feedbackLink = "dr.ui.feedBack";
    try{
        var loaderBarImage = new Asset.image('images/loading_bar.gif');
        new Asset.javascript('scripts/json2.js',{});
        var feedbackSubmissionTime = 0;
        var feedbackLoaderTimerID;
        var feedbackData;
        $$('a').each(function(item, index){
            if($(item).href.indexOf(feedbackLink) > -1){
                $(item).addEvent('click', function(e){
                    e.stop();
                    buildFeedbackBox(e);
                });
            }
        });


        function buildFeedbackBox(e){
            feedbackSubmissionTime = 0;
            // 375 and 10 are arbitrary values reached from
            // positioning trial and error.
            var topPos = Math.round(e.page.y - 375);
            if((e.page.y < 375)){
                topPos = 10;
            }
            var feedbackMainHouse = new Element('div', {
                'id':'feedbackMainHouse',
                'class':'feedbackMainHouse',
                'styles':{
                    'width':'500px',
                    'top':(topPos + 'px'),
                    'left':(Math.round((window.getSize().x - 500)/2) + 'px'),
                    'opacity':'0.9'
                }
            });

            var feedbackFormHouse = new Element('div', {
                'class':'feedbackFormHouse',
                'id':'feedbackFormHouse'
            });
            var header = new Element('h3', {
                'class':'feedback_formHeader',
                'html':'Feedback / Contact Form'
            });

            var closer = new Element('div', {
                'class':'feedbackCloser',
                'html':'[x]',
                'title':'Click the "[x]" to close this dialog box.'
            });
            feedbackFormHouse.appendChild(closer);
            feedbackFormHouse.appendChild(header);


            var tableContainer = new Element('div', {
                'id':'feedback_tableContainer',
                'styles':{
                    'position':'relative',
                    'padding':'3px'
                }
            });

            // add form container here:
            var table = new Element('table', {
                'class':'extraInfoTable'
            });


            // Add the form rows:
            var tBody = new Element('tbody', {});
            tBody.appendChild(generateInputRow('Name:', 'name', 'name'));
            tBody.appendChild(generateInputRow('Telephone:', 'phone', 'phone'));
            tBody.appendChild(generateInputRow('Organization:', 'organization', 'organization'));
            tBody.appendChild(generateInputRow('Email:', 'email', 'email'));
            tBody.appendChild(generateFeedbckTypeRow('Subject:', 'subject'));
            tBody.appendChild(generateCommentsRow('Comments:', 'comments', 'comments'));
            tBody.appendChild(generateSubmitter('Submit', 'contactSubmitter'));
            table.appendChild(tBody);
            tableContainer.appendChild(table);
            feedbackFormHouse.appendChild(tableContainer);
            feedbackMainHouse.appendChild(feedbackFormHouse);

            document.body.appendChild(feedbackMainHouse);
            // Assign the close event to the closer:
            $(closer).addEvent('click', function(closeEvent){
                destroyFeedbackBox();
            });
            $(document).addEvent('keyup', function(closeEvent){
                if(closeEvent.key == 'esc'){
                    destroyFeedbackBox();
                }
            });

            // Highlight the inputs on focus:
            $$('input.contactForm_formInput, textarea.contactForm_formInput').each(function(item){
                $(item).addEvent('focus', function(){
                    $(item).addClass('contactForm_formInput_focus');
                });
                $(item).addEvent('blur', function(){
                    $(item).removeClass('contactForm_formInput_focus');
                });
            });

            // Allow the form to be moved:
            new Drag($(feedbackMainHouse),{
                'handle':$(header)
            });

            // Focus on the first field:
            $('name').focus();

            $('contactSubmitter').addEvent('click', function(submitEvent){
                handleSubmissionFormSubmission();
            });
        }


        function handleSubmissionFormSubmission(){
            //name,phone,organization,email,subject,comments,location
            var name = $('name').value;
            var phone  = $('phone').value;
            var email = $('email').value;
            var organization = $('organization').value;
            var comments = $('comments').value;
            var subject = ($$('input[name="subject"]:checked')[0].value);
            if(subject == undefined || subject == null){
                subject = 'Not Listed';
            }
            var pageURI = new URI(window.location);
            var pageSystem = 'mdr';

            // look to the URI to find the system:
            if(pageURI.getData('system') != undefined){
                pageSystem = pageURI.getData('system');
            } else if(pageURI.getData('System') != undefined){
                pageSystem = pageURI.getData('System');
            }
            req = new Request({
                method: 'post',
                url: 'ajaxHandler',
                data: {
                    'request_action':'FeedbackFormSubmission',
                    'name':name,
                    'phone':phone,
                    'organization':organization,
                    'email':email,
                    'subject':subject,
                    'comments':comments,
                    'location':pageURI.toString(),
                    'system':pageSystem
                },
                onRequest: function() {
                    feedbackSubmissionTime = (new Date()).getTime();
                    $('name').set('disabled','disabled');
                    $('phone').set('disabled','disabled');
                    $('email').set('disabled','disabled');
                    $('organization').set('disabled','disabled');
                    $('comments').set('disabled','disabled');
                    $$('input[name="subject"]').each(function(item){
                        $(item).set('disabled','disabled');
                    });
                    $('feedback_tableContainer').getChildren('table')[0].setStyle('display','none');
                    var loadingGifHouse = new Element('div', {
                        'class':'feedback_loadingHouse',
                        'html':'USHIK is processing your feedback.',
                        'id':'feedback_loadingHouse'
                    });
                    loadingGifHouse.appendChild(loaderBarImage);
                    $('feedback_tableContainer').appendChild(loadingGifHouse);

                },
                onComplete: function(response) {
                    feedbackData = JSON.parse(response);
                    var checker = function(){
                        checkSubmissionTimer();
                    };
                    feedbackLoaderTimerID = checker.periodical(500);
                }
            }
            ).send();
        }

        function checkSubmissionTimer(){
            canShowResults = false;
            if(feedbackSubmissionTime == 0){
                canShowResults = true;
            }
            var delta = ((new Date()).getTime()) - feedbackSubmissionTime;
            if(delta > FEEDBACK_LOADER_TIMEOUT){
                canShowResults = true;
            }

            if(canShowResults){
                $clear(feedbackLoaderTimerID);
                handleFeedbackResponse();
            }
        }

        function handleFeedbackResponse(){
            try{
                $('feedback_loadingHouse').destroy();
                if(feedbackData.error && feedbackData.error.length > 0){
                    var errorMessage = new Element('div', {
                        'class':'feedback_submissionError',
                        'html':feedbackData.error
                    });
                    $('feedback_tableContainer').appendChild(errorMessage);
                } else if(feedbackData.message && feedbackData.message.length > 0) {
                    var submissionMessage = new Element('div', {
                        'class':'feedback_submissionMessage',
                        'html':feedbackData.message
                    });
                    $('feedback_tableContainer').appendChild(submissionMessage);
                }
                setTimeout(function(){
                    destroyFeedbackBox();
                }, 3500);
            } catch(err){
                destroyFeedbackBox();
            //alert(err + "\n" + err.description);
            }
        }

        function destroyFeedbackBox(){
            if($('feedbackMainHouse')!=null){
                $('feedbackMainHouse').destroy();
            }
        }

        function generateInputRow(label, name, id){
            var row = new Element('tr',{
                'class':'extraInfoRow'
            });
            var labelCell = new Element('td', {
                'class':'feedback_formLabel',
                'html':label
            });
            var valueCell = new Element('td', {
                'class':'feedback_formInputCell'
            });
            var input = new Element('input', {
                'type':'text',
                'name':name,
                'id':id,
                'value':'',
                'class':'contactForm_formInput',
                'size':'30'
            });
            valueCell.appendChild(input);
            row.appendChild(labelCell);
            row.appendChild(valueCell);
            return row;
        }

        function generateFeedbckTypeRow(label, name){
            var row = new Element('tr',{
                'class':'extraInfoRow'
            });
            var labelCell = new Element('td', {
                'class':'feedback_formLabel',
                'html':label
            });
            var valueCell = new Element('td', {
                'class':'feedback_formInputCell'
            });
            var ul = new Element('ul', {
                'class':'feedback_ul'
            });
            //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            var li_1 = new Element('li', {
                'class':'feedback_li'
            });
            var input_1 = new Element('input', {
                'type':'radio',
                'name':name,
                'value':'Change',
                'id':'input_1',
                'class':'contactForm_formInput_radio'
            });
            li_1.appendChild(input_1);
            li_1.appendChild(new Element('label', {
                'for':'input_1',
                'html':' Change'
            }));
            ul.appendChild(li_1);
            //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            var li_2 = new Element('li', {
                'class':'feedback_li'
            });
            var input_2 = new Element('input', {
                'type':'radio',
                'name':name,
                'value':'Error',
                'id':'input_2',
                'class':'contactForm_formInput_radio'
            });
            li_2.appendChild(input_2);
            li_2.appendChild(new Element('label', {
                'for':'input_2',
                'html':' Error'
            }));
            ul.appendChild(li_2);
            //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            var li_3 = new Element('li', {
                'class':'feedback_li'
            });
            var input_3 = new Element('input', {
                'type':'radio',
                'name':name,
                'value':'Information',
                'id':'input_3',
                'class':'contactForm_formInput_radio'
            });
            li_3.appendChild(input_3);
            li_3.appendChild(new Element('label', {
                'for':'input_3',
                'html':' Information'
            }));
            ul.appendChild(li_3);
            //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

            valueCell.appendChild(ul);
            row.appendChild(labelCell);
            row.appendChild(valueCell);
            $(input_3).checked = 'checked';
            return row;
        }

        function generateCommentsRow(label,name,id){
            var row = new Element('tr',{
                'class':'extraInfoRow'
            });
            var labelCell = new Element('td', {
                'class':'feedback_formLabel',
                'html':label + '<br />'
            });
            var valueCell = new Element('td', {
                'class':'feedback_formInputCell'
            });
            var textarea = new Element('textarea', {
                'rows':'10',
                'cols':'50',
                'class':'contactForm_formInput',
                'name':name,
                'id':id
            });
            valueCell.appendChild(textarea);
            row.appendChild(labelCell);
            row.appendChild(valueCell);
            return row;
        }

        function generateSubmitter(label,id){
            var row = new Element('tr',{
                'class':'extraInfoRow'
            });
            var labelCell = new Element('td', {
                'class':'feedback_formLabel',
                'html':''
            });
            var valueCell = new Element('td', {
                'class':'feedback_formInputCell'
            });
            var submitter = new Element('button', {
                'class':'contactForm_submitter',
                'html':label,
                'id':id
            });
            valueCell.appendChild(submitter);
            row.appendChild(labelCell);
            row.appendChild(valueCell);
            return row;
        }
    } catch(err){
        //alert('err' + "\n" + err.description);
    }
});